Build @redux-devtools/app UMDs using esbuild

packages/redux-devtools-app/buildUmd.mjs

@@ -0,0 +1,67 @@
+import * as esbuild from 'esbuild';
+
+const args = process.argv.slice(2);
+const prod = !args.includes('--dev');
+
+await esbuild.build({
+  bundle: true,
+  logLevel: 'info',
+  format: 'iife',
+  globalName: 'ReduxDevToolsApp',
+  outfile: prod ? 'umd/redux-devtools-app.min.js' : 'umd/redux-devtools-app.js',
+  minify: prod,
+  sourcemap: true,
+  define: {
+    'process.env.NODE_ENV': prod ? '"production"' : '"development"',
+  },
+  entryPoints: ['src/index.tsx'],
+  loader: {
+    '.woff2': 'dataurl',
+  },
+  plugins: [
+    importAsGlobals({
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    }),
+  ],
+});
+
+// https://github.com/evanw/esbuild/issues/337#issuecomment-954633403
+function importAsGlobals(mapping) {
+  // https://stackoverflow.com/a/3561711/153718
+  const escRe = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+  const filter = new RegExp(
+    Object.keys(mapping)
+      .map((mod) => `^${escRe(mod)}$`)
+      .join('|'),
+  );
+
+  return {
+    name: 'global-imports',
+    setup(build) {
+      build.onResolve({ filter }, (args) => {
+        if (!mapping[args.path]) {
+          throw new Error('Unknown global: ' + args.path);
+        }
+        return {
+          path: args.path,
+          namespace: 'external-global',
+        };
+      });
+
+      build.onLoad(
+        {
+          filter,
+          namespace: 'external-global',
+        },
+        async (args) => {
+          const global = mapping[args.path];
+          return {
+            contents: `module.exports = ${global};`,
+            loader: 'js',
+          };
+        },
+      );
+    },
+  };
+}

packages/redux-devtools-app/package.json

@@ -30,8 +30,8 @@
     "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
     "build:web": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env platform=web",
-    "build:umd": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config webpack.config.umd.ts",
+    "build:umd": "node buildUmd.mjs --dev",
-    "build:umd:min": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env production --config webpack.config.umd.ts",
+    "build:umd:min": "node buildUmd.mjs",
     "clean": "rimraf build lib umd",
     "test": "jest",
     "lint": "eslint . --ext .ts,.tsx",
@@ -93,6 +93,7 @@
     "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
+    "esbuild": "^0.19.2",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.2.3",

pnpm-lock.yaml

@@ -1163,6 +1163,9 @@ importers:
       css-loader:
         specifier: ^6.8.1
         version: 6.8.1(webpack@5.88.2)
+      esbuild:
+        specifier: ^0.19.2
+        version: 0.19.2
       eslint:
         specifier: ^8.48.0
         version: 8.48.0
@@ -1210,7 +1213,7 @@ importers:
         version: 5.3.11(@babel/core@7.22.11)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
       ts-jest:
         specifier: ^29.1.1
-        version: 29.1.1(@babel/core@7.22.11)(esbuild@0.18.20)(jest@29.6.4)(typescript@5.2.2)
+        version: 29.1.1(@babel/core@7.22.11)(esbuild@0.19.2)(jest@29.6.4)(typescript@5.2.2)
       ts-node:
         specifier: ^10.9.1
         version: 10.9.1(@types/node@18.17.14)(typescript@5.2.2)
@@ -1219,7 +1222,7 @@ importers:
         version: 5.2.2
       webpack:
         specifier: ^5.88.2
-        version: 5.88.2(webpack-cli@5.1.4)
+        version: 5.88.2(esbuild@0.19.2)(webpack-cli@5.1.4)
       webpack-cli:
         specifier: ^5.1.4
         version: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.88.2)
@@ -7614,13 +7617,31 @@ packages:
       strict-event-emitter: 0.5.0
       uuid: 8.3.2
     optionalDependencies:
-      msw: 1.3.0(typescript@5.2.2)
+      msw: 1.3.1(typescript@5.2.2)
     transitivePeerDependencies:
       - encoding
       - supports-color
       - typescript
     dev: false
 
+  /@mswjs/interceptors@0.17.10:
+    resolution: {integrity: sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    dependencies:
+      '@open-draft/until': 1.0.3
+      '@types/debug': 4.1.8
+      '@xmldom/xmldom': 0.8.10
+      debug: 4.3.4(supports-color@5.5.0)
+      headers-polyfill: 3.2.5
+      outvariant: 1.4.0
+      strict-event-emitter: 0.2.8
+      web-encoding: 1.1.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+    optional: true
+
   /@mswjs/interceptors@0.17.9:
     resolution: {integrity: sha512-4LVGt03RobMH/7ZrbHqRxQrS9cc2uh+iNKSj8UWr8M26A2i793ju+csaB5zaqYltqJmA2jUq4VeYfKmVqvsXQg==}
     engines: {node: '>=14'}
@@ -10516,6 +10537,7 @@ packages:
 
   /@types/ms@0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+    requiresBuild: true
     dev: false
 
   /@types/node-fetch@2.6.4:
@@ -12808,7 +12830,7 @@ packages:
       postcss-modules-values: 4.0.0(postcss@8.4.28)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
-      webpack: 5.88.2(webpack-cli@5.1.4)
+      webpack: 5.88.2(esbuild@0.19.2)(webpack-cli@5.1.4)
     dev: true
 
   /css-select@4.3.0:
@@ -15205,6 +15227,12 @@ packages:
       set-cookie-parser: 2.6.0
     dev: false
 
+  /headers-polyfill@3.2.5:
+    resolution: {integrity: sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /hex-rgba@1.0.2:
     resolution: {integrity: sha512-MKla68wFGv+i7zU3Q4giWN74f+zWdkuf2Tk21fISV7aw55r8dH/noBbH5JsVlM4Z2WRTYCEmSxsoZ1QR/o68jg==}
     dev: false
@@ -15261,7 +15289,7 @@ packages:
     dependencies:
       html-minifier-terser: 7.2.0
       parse5: 7.1.2
-      webpack: 5.88.2(webpack-cli@5.1.4)
+      webpack: 5.88.2(esbuild@0.19.2)(webpack-cli@5.1.4)
     dev: true
 
   /html-minifier-terser@6.1.0:
@@ -16830,6 +16858,7 @@ packages:
       chalk: 3.0.0
       diff-match-patch: 1.0.5
     dev: false
+    bundledDependencies: []
 
   /jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
@@ -17774,6 +17803,43 @@ packages:
       - supports-color
     dev: false
 
+  /msw@1.3.1(typescript@5.2.2):
+    resolution: {integrity: sha512-GhP5lHSTXNlZb9EaKgPRJ01YAnVXwzkvnTzRn4W8fxU2DXuJrRO+Nb6OHdYqB4fCkwSNpIJH9JkON5Y6rHqJMQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      typescript: '>= 4.4.x <= 5.2.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@mswjs/cookies': 0.2.2
+      '@mswjs/interceptors': 0.17.10
+      '@open-draft/until': 1.0.3
+      '@types/cookie': 0.4.1
+      '@types/js-levenshtein': 1.1.1
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      cookie: 0.4.2
+      graphql: 16.8.0
+      headers-polyfill: 3.2.5
+      inquirer: 8.2.6
+      is-node-process: 1.2.0
+      js-levenshtein: 1.1.6
+      node-fetch: 2.6.13
+      outvariant: 1.4.0
+      path-to-regexp: 6.2.1
+      strict-event-emitter: 0.4.6
+      type-fest: 2.19.0
+      typescript: 5.2.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+    optional: true
+
   /multicast-dns@7.2.5:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true
@@ -20519,7 +20585,7 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      webpack: 5.88.2(webpack-cli@5.1.4)
+      webpack: 5.88.2(esbuild@0.19.2)(webpack-cli@5.1.4)
     dev: true
 
   /style-search@0.1.0: