update: rollup config

* add rollup.ts
* add esbuild register to devdeps
* add rollup plugin dts to devdeps

package.json

@@ -8,12 +8,19 @@
   },
   "license": "MIT",
   "author": "Burak Cakmakoglu",
-  "main": "dist/revue-flow.es.js",
+  "exports": {
-  "browser": "dist/revue-flow.esm.js",
+    ".": {
-  "unpkg": "dist/revue-flow.global.js",
+      "import": "./dist/revue-flow.esm.js",
-  "jsdelivr": "dist/revue-flow.global.js",
+      "require": "./dist/revue-flow.cjs.js"
-  "module": "dist/revue-flow.umd.js",
+    },
-  "types": "dist/index.d.ts",
+    "./*": "./*"
+  },
+  "main": "./dist/revue-flow.cjs.js",
+  "types": "./dist/revue-flow.d.ts",
+  "module": "./dist/revue-flow.esm.js",
+  "unpkg": "./dist/revue-flow.iife.min.js",
+  "jsdelivr": "./dist/revue-flow.iife.min.js",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -48,10 +55,10 @@
     "@vitejs/plugin-vue": "^1.2.5",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.2.0-beta.5",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.6",
     "babel-eslint": "latest",
+    "esbuild-register": "^2.6.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
@@ -62,17 +69,20 @@
     "postcss-nested": "^5.0.5",
     "prettier": "^2.2.1",
     "rollup": "^2.52.2",
+    "rollup-plugin-dts": "^3.0.2",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-vue": "^6.0.0-beta.10",
     "rollup-plugin-vue-inline-svg": "^1.1.2",
     "tslib": "^2.3.0",
     "typescript": "^4.3.5",
     "vite": "^2.3.8",
     "vite-svg-loader": "^2.1.0",
-    "vue": "^3.2.0-beta.5",
+    "vue": "^3.2.0-beta.8",
+    "vue-loader": "^16.4.1",
     "vue-router": "4",
     "vue-tsc": "^0.0.24"
   },

rollup.config.js

@@ -1,205 +1,3 @@
-import path from 'path';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
-import ts from 'rollup-plugin-typescript2';
+require('esbuild-register');
-import replace from '@rollup/plugin-replace';
+module.exports = require('./rollup.ts');
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import pascalcase from 'pascalcase';
-import pkg from './package.json';
-import postcss from 'rollup-plugin-postcss';
-import babel from '@rollup/plugin-babel';
-import svg from 'rollup-plugin-svg';
-import { DEFAULT_EXTENSIONS as DEFAULT_BABEL_EXTENSIONS } from '@babel/core';
-
-const name = pkg.name;
-
-function getAuthors(pkg) {
-  const { contributors, author } = pkg;
-
-  const authors = new Set();
-  if (contributors && contributors)
-    contributors.forEach((contributor) => {
-      authors.add(contributor.name);
-    });
-  if (author) authors.add(author.name);
-
-  return Array.from(authors).join(', ');
-}
-
-const banner = `/*!
-  * ${pkg.name} v${pkg.version}
-  * (c) ${new Date().getFullYear()} ${getAuthors(pkg)}
-  * @license MIT
-  */`;
-
-// ensure TS checks only once for each build
-let hasTSChecked = false;
-
-const outputConfigs = {
-  // each file name has the format: `dist/${name}.${format}.js`
-  // format being a key of this object
-  'esm-bundler': {
-    file: pkg.module,
-    format: 'es'
-  },
-  cjs: {
-    file: pkg.main,
-    format: 'cjs'
-  },
-  esm: {
-    file: pkg.browser,
-    format: 'es'
-  }
-};
-
-const allFormats = Object.keys(outputConfigs);
-const packageFormats = allFormats;
-const packageConfigs = packageFormats.map((format) => createConfig(format, outputConfigs[format]));
-
-// only add the production ready if we are bundling the options
-packageFormats.forEach((format) => {
-  if (format === 'cjs') {
-    packageConfigs.push(createProductionConfig(format));
-  } else if (format.startsWith('global')) {
-    packageConfigs.push(createMinifiedConfig(format));
-  }
-});
-
-export default packageConfigs;
-
-function createConfig(format, output, plugins = []) {
-  if (!output) {
-    console.log(`invalid format: ${format}`);
-    process.exit(1);
-  }
-  output.exports = 'named';
-  output.sourcemap = !!process.env.SOURCE_MAP;
-  output.banner = banner;
-  output.externalLiveBindings = false;
-  output.globals = { vue: 'Vue' };
-
-  const isProductionBuild = /\.prod\.js$/.test(output.file);
-  const isGlobalBuild = format.startsWith('global');
-  const isRawESMBuild = format === 'esm';
-  const isNodeBuild = format === 'cjs';
-  const isBundlerESMBuild = /esm-bundler/.test(format);
-
-  if (isGlobalBuild) output.name = pascalcase(pkg.name);
-
-  const tsPlugin = ts({
-    check: !hasTSChecked,
-    clean: !hasTSChecked,
-    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
-    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
-    tsconfigOverride: {
-      compilerOptions: {
-        sourceMap: !hasTSChecked,
-        declaration: !hasTSChecked,
-        declarationMap: !hasTSChecked
-      },
-      exclude: ['__tests__', 'test-dts']
-    }
-  });
-  // we only need to check TS and generate declarations once for each build.
-  // it also seems to run into weird issues when checking multiple times
-  // during a single build.
-  hasTSChecked = true;
-
-  const external = ['vue'];
-
-  return {
-    input: 'src/index.ts',
-    // Global and Browser ESM builds inlines everything so that they can be
-    // used alone.
-    external,
-    plugins: [
-      tsPlugin,
-      createReplacePlugin(
-        isProductionBuild,
-        isBundlerESMBuild,
-        // isBrowserBuild?
-        isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
-        isGlobalBuild,
-        isNodeBuild
-      ),
-      svg(),
-      resolve(),
-      commonjs({ include: 'node_modules/**' }),
-      postcss({
-        minimize: true,
-        inject: true
-      }),
-      babel({
-        extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
-        exclude: 'node_modules/**',
-        babelHelpers: 'inline'
-      }),
-      ...plugins
-    ],
-    output
-    // onwarn: (msg, warn) => {
-    //   if (!/Circular/.test(msg)) {
-    //     warn(msg)
-    //   }
-    // },
-  };
-}
-
-function createReplacePlugin(isProduction, isBundlerESMBuild, isBrowserBuild, isGlobalBuild, isNodeBuild) {
-  const replacements = {
-    __COMMIT__: `"${process.env.COMMIT}"`,
-    __VERSION__: `"${pkg.version}"`,
-    __DEV__: isBundlerESMBuild
-      ? // preserve to be handled by bundlers
-        "(process.env.NODE_ENV !== 'production')"
-      : // hard coded dev/prod builds
-        !isProduction,
-    // this is only used during tests
-    __TEST__: isBundlerESMBuild ? "(process.env.NODE_ENV === 'test')" : false,
-    // If the build is expected to run directly in the browser (global / esm builds)
-    __BROWSER__: isBrowserBuild,
-    // is targeting bundlers?
-    __BUNDLER__: isBundlerESMBuild,
-    __GLOBAL__: isGlobalBuild,
-    // is targeting Node (SSR)?
-    __NODE_JS__: isNodeBuild,
-    __ENV__: JSON.stringify(process.env.NODE_ENV),
-    __REVUE_FLOW_VERSION__: JSON.stringify(pkg.version),
-    preventAssignment: true
-  };
-  // allow inline overrides like
-  //__RUNTIME_COMPILE__=true yarn build
-  Object.keys(replacements).forEach((key) => {
-    if (key in process.env) {
-      replacements[key] = process.env[key];
-    }
-  });
-  return replace(replacements);
-}
-
-function createProductionConfig(format) {
-  return createConfig(format, {
-    file: `dist/${name}.${format}.prod.js`,
-    format: outputConfigs[format].format
-  });
-}
-
-function createMinifiedConfig(format) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { terser } = require('rollup-plugin-terser');
-  return createConfig(
-    format,
-    {
-      file: `dist/${name}.${format}.prod.js`,
-      format: outputConfigs[format].format
-    },
-    [
-      terser({
-        module: /^esm/.test(format),
-        compress: {
-          ecma: 2015,
-          pure_getters: true
-        }
-      })
-    ]
-  );
-}

rollup.ts

@@ -0,0 +1,114 @@
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+import dts from 'rollup-plugin-dts';
+import { OutputOptions, RollupOptions } from 'rollup';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import vue from 'rollup-plugin-vue';
+// @ts-ignore
+import svg from 'rollup-plugin-svg';
+import postcss from 'rollup-plugin-postcss';
+// @ts-ignore
+import { DEFAULT_EXTENSIONS as DEFAULT_BABEL_EXTENSIONS } from '@babel/core';
+
+const configs: RollupOptions[] = [];
+
+const activePackages = [
+  {
+    display: 'Revue-Flow',
+    external: ['@vueuse/core']
+  }
+];
+
+// @ts-ignore
+for (const { external, iife } of activePackages) {
+  const iifeGlobals = {
+    vue: 'Vue',
+    '@vueuse/core': 'VueUse'
+  };
+
+  const iifeName = 'RevueFlow';
+  const functionNames = ['revue-flow'];
+
+  for (const fn of functionNames) {
+    const input = 'src/index.ts';
+
+    const output: OutputOptions[] = [
+      {
+        file: `dist/${fn}.cjs.js`,
+        format: 'cjs'
+      },
+      {
+        file: `dist/${fn}.esm.js`,
+        format: 'es'
+      }
+    ];
+
+    if (iife !== false) {
+      output.push(
+        {
+          file: `dist/${fn}.iife.js`,
+          format: 'iife',
+          name: iifeName,
+          extend: true,
+          globals: iifeGlobals
+        },
+        {
+          file: `dist/${fn}.iife.min.js`,
+          format: 'iife',
+          name: iifeName,
+          extend: true,
+          globals: iifeGlobals,
+          plugins: [
+            terser({
+              format: {
+                comments: false
+              }
+            })
+          ]
+        }
+      );
+    }
+
+    configs.push({
+      input,
+      output,
+      plugins: [
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: {
+              declaration: false
+            }
+          }
+        }),
+        svg(),
+        resolve(),
+        postcss({
+          inject: true,
+          minimize: true
+        }),
+        commonjs({ include: 'node_modules/**' }),
+        babel({
+          extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
+          exclude: 'node_modules/**',
+          babelHelpers: 'bundled'
+        }),
+        vue()
+      ],
+      external: ['vue', ...(external || [])]
+    });
+
+    configs.push({
+      input,
+      output: {
+        file: `dist/${fn}.d.ts`,
+        format: 'es'
+      },
+      plugins: [dts()],
+      external: ['vue', ...(external || [])]
+    });
+  }
+}
+
+export default configs;

vite.config.ts

@@ -8,9 +8,5 @@ export default defineConfig({
   build: {
     outDir: 'build'
   },
-  plugins: [
+  plugins: [vue(), vueJsx(), svgLoader()]
-    vue(),
-    vueJsx(),
-    svgLoader()
-  ]
 });