build: use esbuild (pmndrs#343)

FranzQ · Apr 1, 2021 · 77334ec · 77334ec
1 parent acaa029
commit 77334ec
Show file tree

Hide file tree

Showing 7 changed files with 605 additions and 212 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,4 +1,5 @@
 {
   "packages": ["dist"],
-  "sandboxes": ["new", "react-typescript-react-ts"]
+  "sandboxes": ["new", "react-typescript-react-ts"],
+  "node": "12"
 }
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ package-lock.json
 coverage/
 .idea
 .rpt2_cache/
+.idea
diff --git a/.size-snapshot.json b/.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": 3560,
+    "minified": 1708,
+    "gzipped": 763
   },
   "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,
-    "minified": 3928,
-    "gzipped": 1501
+    "bundled": 9146,
+    "minified": 3907,
+    "gzipped": 1597
   },
   "vanilla.js": {
-    "bundled": 1825,
+    "bundled": 1797,
     "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
+      }
+    }
   }
 }
diff --git a/package.json b/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",
+      "module": "./index.module.js",
+      "default": "./index.js"
+    },
+    "./vanilla": {
+      "types": "./vanilla.d.ts",
+      "module": "./vanilla.module.js",
+      "default": "./vanilla.js"
+    },
+    "./middleware": {
+      "types": "./middleware.d.ts",
+      "module": "./middleware.module.js",
+      "default": "./middleware.js"
+    },
+    "./shallow": {
+      "types": "./shallow.d.ts",
+      "module": "./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}'",
@@ -80,40 +107,46 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.13.8",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-external-helpers": "^7.12.13",
-    "@babel/plugin-transform-react-jsx": "^7.12.17",
-    "@babel/plugin-transform-runtime": "^7.13.8",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@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",
-    "@testing-library/react": "^11.2.5",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
-    "eslint": "^7.21.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@testing-library/react": "^11.2.6",
+    "@types/jest": "^26.0.22",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "concurrently": "^6.0.0",
+    "esbuild": "^0.11.2",
+    "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.5",
+    "eslint-plugin-jest": "^24.3.2",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "json": "^10.0.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rollup": "^2.40.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.44.0",
+    "rollup-plugin-esbuild": "^3.0.2",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "shx": "^0.3.3",
-    "typescript": "^4.2.2"
+    "typescript": "^4.2.3"
+  },
+  "resolutions": {
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3"
   },
   "peerDependencies": {
     "react": ">=16.8"

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,25 +2,36 @@ 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 extensions = ['.js', '.ts', '.tsx']
-const getBabelOptions = (targets) => {
+const { root } = path.parse(process.cwd())
+
+function external(id) {
+  return (
+    id.startsWith('./vanilla') || (!id.startsWith('.') && !id.startsWith(root))
+  )
+}
+
+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 = [
-      ...config.plugins,
-      '@babel/plugin-transform-regenerator',
-      ['@babel/plugin-transform-runtime', { helpers: true, regenerator: true }],
-    ]
-    config.babelHelpers = 'runtime'
+    config.plugins = [...config.plugins, '@babel/plugin-transform-regenerator']
+    config.babelHelpers = 'bundled'
   }
   return {
     ...config,
+    comments: false,
     extensions,
   }
 }
@@ -41,12 +52,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 +63,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 function (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'),
-]
diff --git a/src/middleware.ts b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,3 +12,4 @@ package-lock.json @@
     coverage/
     .idea
     .rpt2_cache/
+    .idea