From 84812bbae1a65b925732f0f6b2645432477458fc Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 15 Sep 2023 21:45:20 -0400 Subject: [PATCH] Build @redux-devtools/app UMDs using esbuild --- packages/redux-devtools-app/buildUmd.mjs | 67 ++++++++++++++++++++ packages/redux-devtools-app/package.json | 5 +- pnpm-lock.yaml | 78 ++++++++++++++++++++++-- 3 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 packages/redux-devtools-app/buildUmd.mjs diff --git a/packages/redux-devtools-app/buildUmd.mjs b/packages/redux-devtools-app/buildUmd.mjs new file mode 100644 index 00000000..8c3db4a7 --- /dev/null +++ b/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', + }; + }, + ); + }, + }; +} diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json index 5d33343c..53a2535a 100644 --- a/packages/redux-devtools-app/package.json +++ b/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:min": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env production --config webpack.config.umd.ts", + "build:umd": "node buildUmd.mjs --dev", + "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 129e8a09..e3be7f78 100644 --- a/pnpm-lock.yaml +++ b/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: