refactor cjs + mjs

index.cjs

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/vue-web3.prod.cjs')
+} else {
+  module.exports = require('./dist/vue-web3.cjs')
+}

index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/vue-web3.prod.cjs')
+} else {
+  module.exports = require('./dist/vue-web3.cjs')
+}

package.json

@@ -1,12 +1,33 @@
 {
   "name": "@instadapp/vue-web3",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue web3 composition api",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
+  "main": "index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/vue-web3.mjs",
-  "unpkg": "dist/global/index.js",
+  "unpkg": "dist/vue-web3.iife.js",
-  "types": "dist/esm/src/index.d.ts",
+  "jsdelivr": "dist/vue-web3.iife.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": "./dist/vue-web3.esm-browser.js",
+      "node": {
+        "import": {
+          "production": "./dist/vue-web3.prod.cjs",
+          "development": "./dist/vue-web3.mjs",
+          "default": "./dist/vue-web3.mjs"
+        },
+        "require": {
+          "production": "./dist/vue-web3.prod.cjs",
+          "development": "./dist/vue-web3.cjs",
+          "default": "./index.js"
+        }
+      },
+      "import": "./dist/vue-web3.mjs"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
   "sideEffects": false,
   "scripts": {
     "prepublishOnly": "npm i && npm run build",
@@ -17,6 +38,8 @@
   },
   "files": [
     "dist/**/*",
+    "index.js",
+    "index.cjs",
     "LICENSE",
     "README.md"
   ],

rollup.config.js

@@ -1,25 +1,21 @@
-// @ts-nocheck
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import pascalcase from 'pascalcase'
 import path from 'path'
-import del from 'rollup-plugin-delete'
 import ts from 'rollup-plugin-typescript2'
+import replace from '@rollup/plugin-replace'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import pascalcase from 'pascalcase'
 
 const pkg = require('./package.json')
-const name = pkg.name
+const name = 'vue-web3'
 
 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(', ')
@@ -37,47 +33,60 @@ let hasTSChecked = false
 const outputConfigs = {
   // each file name has the format: `dist/${name}.${format}.js`
   // format being a key of this object
-  esm: {
+  mjs: {
-    dir: 'dist/esm',
+    file: pkg.module,
     format: `es`,
   },
   cjs: {
-    dir: 'dist/cjs',
+    file: pkg.module.replace('mjs', 'cjs'),
-    format: 'cjs',
+    format: `cjs`,
-    exports: 'named',
   },
   global: {
-    dir: 'dist/global',
+    file: pkg.unpkg,
-    format: 'iife',
+    format: `iife`,
+  },
+  browser: {
+    file: 'dist/vue-web3.esm-browser.js',
+    format: `es`,
   },
 }
 
-const allFormats = Object.keys(outputConfigs)
+const packageBuilds = Object.keys(outputConfigs)
-const packageFormats = allFormats
+const packageConfigs = packageBuilds.map((format) =>
-const packageConfigs = packageFormats.map((format) =>
+  createConfig(format, outputConfigs[format]),
-  format === 'global'
-    ? createMinifiedConfig(format)
-    : createConfig(format, outputConfigs[format]),
 )
 
+// only add the production ready if we are bundling the options
+packageBuilds.forEach((buildName) => {
+  if (buildName === 'cjs') {
+    packageConfigs.push(createProductionConfig(buildName))
+  } else if (buildName === 'global') {
+    packageConfigs.push(createMinifiedConfig(buildName))
+  }
+})
+
 export default packageConfigs
 
-function createConfig(format, output, plugins = []) {
+function createConfig(buildName, output, plugins = []) {
   if (!output) {
-    console.log(require('chalk').yellow(`invalid format: "${format}"`))
+    console.log(require('chalk').yellow(`invalid format: "${buildName}"`))
     process.exit(1)
   }
 
   output.sourcemap = !!process.env.SOURCE_MAP
   output.banner = banner
   output.externalLiveBindings = false
-  output.globals = { vue: 'Vue' }
+  output.globals = {
+    'vue-demi': 'VueDemi',
+    vue: 'Vue',
+    '@vue/composition-api': 'vueCompositionApi',
+  }
 
-  const isProductionBuild = /\.prod\.js$/.test(output.file)
+  const isProductionBuild = /\.prod\.[cmj]s$/.test(output.file)
-  const isGlobalBuild = format === 'global'
+  const isGlobalBuild = buildName === 'global'
-  const isRawESMBuild = format === 'esm'
+  const isRawESMBuild = buildName === 'browser'
-  const isNodeBuild = format === 'cjs'
+  const isNodeBuild = buildName === 'cjs'
-  const isBundlerESMBuild = /esm-bundler/.test(format)
+  const isBundlerESMBuild = buildName === 'browser' || buildName === 'mjs'
 
   if (isGlobalBuild) output.name = pascalcase(pkg.name)
 
@@ -85,15 +94,14 @@ function createConfig(format, output, plugins = []) {
 
   const tsPlugin = ts({
     check: !hasTSChecked,
-    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
+    tsconfig: path.resolve(__dirname, './tsconfig.json'),
-    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
+    cacheRoot: path.resolve(__dirname, './node_modules/.rts2_cache'),
     tsconfigOverride: {
       compilerOptions: {
         sourceMap: output.sourcemap,
         declaration: shouldEmitDeclarations,
         declarationMap: shouldEmitDeclarations,
       },
-      exclude: ['__tests__', 'test-dts'],
     },
   })
   // we only need to check TS and generate declarations once for each build.
@@ -101,11 +109,7 @@ function createConfig(format, output, plugins = []) {
   // during a single build.
   hasTSChecked = true
 
-  const external = ['vue']
+  const external = ['vue-demi', 'vue', '@vue/composition-api']
-
-  if (!isGlobalBuild) {
-    external.push('vue-demi')
-  }
 
   const nodePlugins = [resolve(), commonjs()]
 
@@ -114,13 +118,12 @@ function createConfig(format, output, plugins = []) {
     // Global and Browser ESM builds inlines everything so that they can be
     // used alone.
     external,
-    inlineDynamicImports: isGlobalBuild,
     plugins: [
-      del({ targets: `dist/${format}` }),
       tsPlugin,
       createReplacePlugin(
         isProductionBuild,
         isBundlerESMBuild,
+        // isBrowserBuild?
         isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
         isGlobalBuild,
         isNodeBuild,
@@ -129,6 +132,11 @@ function createConfig(format, output, plugins = []) {
       ...plugins,
     ],
     output,
+    // onwarn: (msg, warn) => {
+    //   if (!/Circular/.test(msg)) {
+    //     warn(msg)
+    //   }
+    // },
   }
 }
 
@@ -142,22 +150,25 @@ function createReplacePlugin(
   const replacements = {
     __COMMIT__: `"${process.env.COMMIT}"`,
     __VERSION__: `"${pkg.version}"`,
-    __DEV__: isBundlerESMBuild
+    __DEV__:
+      isBundlerESMBuild || (isNodeBuild && !isProduction)
         ? // preserve to be handled by bundlers
           `(process.env.NODE_ENV !== 'production')`
         : // hard coded dev/prod builds
-        !isProduction,
+          JSON.stringify(!isProduction),
     // this is only used during tests
-    __TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
+    __TEST__:
+      isBundlerESMBuild || isNodeBuild
+        ? `(process.env.NODE_ENV === 'test')`
+        : 'false',
     // If the build is expected to run directly in the browser (global / esm builds)
-    __BROWSER__: isBrowserBuild,
+    __BROWSER__: JSON.stringify(isBrowserBuild),
     // is targeting bundlers?
-    __BUNDLER__: isBundlerESMBuild,
+    __BUNDLER__: JSON.stringify(isBundlerESMBuild),
-    __GLOBAL__: isGlobalBuild,
+    __GLOBAL__: JSON.stringify(isGlobalBuild),
     // is targeting Node (SSR)?
-    __NODE_JS__: isNodeBuild,
+    __NODE_JS__: JSON.stringify(isNodeBuild),
   }
-
   // allow inline overrides like
   //__RUNTIME_COMPILE__=true yarn build
   Object.keys(replacements).forEach((key) => {
@@ -165,20 +176,27 @@ function createReplacePlugin(
       replacements[key] = process.env[key]
     }
   })
-
   return replace({
-    values: replacements,
     preventAssignment: true,
+    values: replacements,
+  })
+}
+
+function createProductionConfig(format) {
+  const extension = format === 'cjs' ? 'cjs' : 'js'
+  const descriptor = format === 'cjs' ? '' : `.${format}`
+  return createConfig(format, {
+    file: `dist/${name}${descriptor}.prod.${extension}`,
+    format: outputConfigs[format].format,
   })
 }
 
 function createMinifiedConfig(format) {
   const { terser } = require('rollup-plugin-terser')
-
   return createConfig(
     format,
     {
-      dir: `dist/${format}/`,
+      file: `dist/${name}.${format === 'global' ? 'iife' : format}.prod.js`,
       format: outputConfigs[format].format,
     },
     [