build: use esbuild

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
   "packages": ["dist"],
-  "sandboxes": ["new", "react-typescript-react-ts"]
+  "sandboxes": ["new", "react-typescript-react-ts"],
+  "node": "12"
 }

.gitignore

@@ -12,3 +12,4 @@ package-lock.json
 coverage/
 .idea
 .rpt2_cache/
+.idea

.size-snapshot.json

@@ -39,26 +39,17 @@
     "gzipped": 354
   },
   "index.js": {
-    "bundled": 4201,
-    "minified": 1430,
-    "gzipped": 686,
-    "treeshaked": {
-      "rollup": {
-        "code": 14,
-        "import_statements": 14
-      },
-      "webpack": {
-        "code": 1061
-      }
-    }
+    "bundled": 4172,
+    "minified": 1874,
+    "gzipped": 792
   },
   "index.cjs.js": {
-    "bundled": 5549,
+    "bundled": 5114,
     "minified": 2139,
     "gzipped": 903
   },
   "index.iife.js": {
-    "bundled": 6166,
+    "bundled": 5427,
     "minified": 1856,
     "gzipped": 841
   },
@@ -68,13 +59,69 @@
     "gzipped": 251
   },
   "middleware.js": {
-    "bundled": 8842,
+    "bundled": 8911,
     "minified": 3928,
     "gzipped": 1501
   },
   "vanilla.js": {
-    "bundled": 1825,
+    "bundled": 2013,
     "minified": 631,
     "gzipped": 350
+  },
+  "shallow.module.js": {
+    "bundled": 534,
+    "minified": 334,
+    "gzipped": 212,
+    "treeshaked": {
+      "rollup": {
+        "code": 0,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 951
+      }
+    }
+  },
+  "vanilla.module.js": {
+    "bundled": 1343,
+    "minified": 440,
+    "gzipped": 284,
+    "treeshaked": {
+      "rollup": {
+        "code": 0,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 951
+      }
+    }
+  },
+  "middleware.module.js": {
+    "bundled": 4861,
+    "minified": 2577,
+    "gzipped": 1174,
+    "treeshaked": {
+      "rollup": {
+        "code": 0,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 1072
+      }
+    }
+  },
+  "index.module.js": {
+    "bundled": 2487,
+    "minified": 1087,
+    "gzipped": 531,
+    "treeshaked": {
+      "rollup": {
+        "code": 32,
+        "import_statements": 32
+      },
+      "webpack": {
+        "code": 1147
+      }
+    }
   }
 }

package.json

@@ -3,16 +3,43 @@
   "private": true,
   "version": "3.3.3",
   "description": "🐻 Bear necessities for state management in React",
-  "main": "index.cjs.js",
-  "module": "index.js",
+  "main": "index.js",
+  "module": "index.module.js",
   "types": "index.d.ts",
   "files": [
     "**"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.module.js",
+      "default": "./index.js"
+    },
+    "./vanilla": {
+      "types": "./vanilla.d.ts",
+      "import": "./vanilla.module.js",
+      "default": "./vanilla.js"
+    },
+    "./middleware": {
+      "types": "./middleware.d.ts",
+      "import": "./middleware.module.js",
+      "default": "./middleware.js"
+    },
+    "./shallow": {
+      "types": "./shallow.d.ts",
+      "import": "./shallow.module.js",
+      "default": "./shallow.js"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build": "rollup -c",
+    "build": "concurrently 'yarn:build:*'",
+    "build:base": "rollup -c",
+    "build:vanilla": "rollup -c --config-vanilla",
+    "build:middleware": "rollup -c --config-middleware",
+    "build:shallow": "rollup -c --config-shallow",
     "postbuild": "yarn copy",
     "eslint": "eslint --fix 'src/**/*.{js,ts,jsx,tsx}'",
     "eslint-examples": "eslint --fix 'examples/src/**/*.{js,ts,jsx,tsx}'",
@@ -85,7 +112,7 @@
     "@babel/plugin-transform-react-jsx": "^7.12.17",
     "@babel/plugin-transform-runtime": "^7.13.8",
     "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-env": "^7.13.8",
+    "@babel/preset-env": "^7.13.10",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@rollup/plugin-typescript": "^8.2.0",
@@ -95,6 +122,8 @@
     "@types/react-dom": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
+    "concurrently": "^6.0.0",
+    "esbuild": "^0.9.6",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -111,6 +140,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rollup": "^2.40.0",
+    "rollup-plugin-esbuild": "^3.0.2",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "shx": "^0.3.3",
     "typescript": "^4.2.2"

rollup.config.js

@@ -2,14 +2,29 @@ import path from 'path'
 import babel from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
+import esbuild from 'rollup-plugin-esbuild'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 
 const createBabelConfig = require('./babel.config')
 
 const { root } = path.parse(process.cwd())
-const external = (id) => !id.startsWith('.') && !id.startsWith(root)
+
+const external = (id) =>
+  id.startsWith('./vanilla') ||
+  (!id.startsWith('.') && !id.startsWith(root)) ||
+  id.startsWith('@babel/runtime')
+
 const extensions = ['.js', '.ts', '.tsx']
-const getBabelOptions = (targets) => {
+
+function getEsbuild(target) {
+  return esbuild({
+    minify: false,
+    target,
+    tsconfig: path.resolve('./tsconfig.json'),
+  })
+}
+
+function getBabelOptions(targets) {
   const config = createBabelConfig({ env: (env) => env === 'build' }, targets)
   if (targets.ie) {
     config.plugins = [
@@ -41,12 +56,7 @@ function createESMConfig(input, output) {
     input,
     output: { file: output, format: 'esm' },
     external,
-    plugins: [
-      resolve({ extensions }),
-      typescript(),
-      babel(getBabelOptions({ node: 8 })),
-      sizeSnapshot(),
-    ],
+    plugins: [resolve({ extensions }), getEsbuild('node12'), sizeSnapshot()],
   }
 }
 
@@ -57,42 +67,24 @@ function createCommonJSConfig(input, output) {
     external,
     plugins: [
       resolve({ extensions }),
-      typescript(),
       babel(getBabelOptions({ ie: 11 })),
       sizeSnapshot(),
     ],
   }
 }
 
-function createIIFEConfig(input, output, globalName) {
-  return {
-    input,
-    output: {
-      file: output,
-      format: 'iife',
-      exports: 'named',
-      name: globalName,
-      globals: {
-        react: 'React',
-        '@babel/runtime/regenerator': 'regeneratorRuntime',
-      },
-    },
-    external,
-    plugins: [
-      resolve({ extensions }),
-      typescript(),
-      babel(getBabelOptions({ ie: 11 })),
-      sizeSnapshot(),
-    ],
+export default (args) => {
+  let c = Object.keys(args).find((key) => key.startsWith('config-'))
+  if (c) {
+    c = c.slice('config-'.length)
+    return [
+      createCommonJSConfig(`src/${c}.ts`, `dist/${c}.js`),
+      createESMConfig(`src/${c}.ts`, `dist/${c}.module.js`),
+    ]
   }
+  return [
+    createDeclarationConfig('src/index.ts', 'dist'),
+    createCommonJSConfig('src/index.ts', 'dist/index.js'),
+    createESMConfig('src/index.ts', 'dist/index.module.js'),
+  ]
 }
-
-export default [
-  createDeclarationConfig('src/index.ts', 'dist'),
-  createESMConfig('src/index.ts', 'dist/index.js'),
-  createCommonJSConfig('src/index.ts', 'dist/index.cjs.js'),
-  createIIFEConfig('src/index.ts', 'dist/index.iife.js', 'zustand'),
-  createCommonJSConfig('src/shallow.ts', 'dist/shallow.js'),
-  createCommonJSConfig('src/middleware.ts', 'dist/middleware.js'),
-  createCommonJSConfig('src/vanilla.ts', 'dist/vanilla.js'),
-]

src/middleware.ts

@@ -234,7 +234,7 @@ export const persist = <S extends State>(
 
   api.setState = (state, replace) => {
     savedSetState(state, replace)
-    setItem()
+    void setItem()
   }
 
   // rehydrate initial state with existing stored state
@@ -272,7 +272,7 @@ export const persist = <S extends State>(
   return config(
     (...args) => {
       set(...args)
-      setItem()
+      void setItem()
     },
     get,
     api