reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-10-30 23:47:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Build @redux-devtools/app UMD using esbuild (#1494)

Browse Source 
* Build @redux-devtools/app UMDs using esbuild

* Fix variable being exported

* Remove module.hot

* Include CSS

* Cleanup

* Cleanup

* Create slow-paws-beg.md
This commit is contained in:
Nathan Bierema 2023-09-16 20:13:50 -04:00 committed by GitHub
parent f523d06499
commit e57bcb3933
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 125 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
.changeset/slow-paws-beg.md Normal file
View File

@ -0,0 +1,35 @@
---
'@redux-devtools/app': major
---
The UMD bundle now exports the same thing as the library and includes the CSS in a sperate file. Therfore, the new usage is:
```diff
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Redux DevTools</title>
+ <link href="/redux-devtools-app.min.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script src="/react.production.min.js"></script>
<script src="/react-dom.production.min.js"></script>
<script src="/redux-devtools-app.min.js"></script>
<script src="/port.js"></script>
<script>
const container = document.querySelector('#root');
- const element = React.createElement(ReduxDevToolsApp, {
+ const element = React.createElement(ReduxDevToolsApp.Root, {
socketOptions: {
hostname: location.hostname,
port: reduxDevToolsPort,
autoReconnect: true,
},
});
ReactDOM.createRoot(container).render(element);
</script>
</body>
</html>
```

67
packages/redux-devtools-app/buildUmd.mjs Normal file
View File

@ -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',
};
},
);
},
};
}

5
packages/redux-devtools-app/package.json
View File

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

8
packages/redux-devtools-app/src/store/configureStore.ts
View File

@ -35,14 +35,6 @@ export default function configureStore(
} }
).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
} }
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextReducer = require('../reducers'); // eslint-disable-line global-require
store.replaceReducer(nextReducer as Reducer<StoreState, StoreAction>);
});
}
} }
const store = createStore( const store = createStore(

2
packages/redux-devtools-app/tsconfig.json
View File

@ -2,7 +2,7 @@
"extends": "../../tsconfig.react.base.json", "extends": "../../tsconfig.react.base.json",
"compilerOptions": { "compilerOptions": {
"outDir": "lib/types", "outDir": "lib/types",
"types": ["webpack-env"] "types": []
}, },
"include": ["src"] "include": ["src"]
} }

2
packages/redux-devtools-app/tsconfig.webpack.json
View File

@ -3,5 +3,5 @@
"compilerOptions": { "compilerOptions": {
"types": ["node", "webpack-dev-server"] "types": ["node", "webpack-dev-server"]
}, },
"include": ["webpack.config.ts", "webpack.config.umd.ts"] "include": ["webpack.config.ts"]
} }

69
packages/redux-devtools-app/webpack.config.umd.ts
View File

@ -1,69 +0,0 @@
import * as path from 'path';
import * as webpack from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
export default (env: { production?: boolean } = {}): webpack.Configuration => ({
mode: env.production ? 'production' : 'development',
entry: {
app: ['./src/index'],
},
output: {
library: 'ReduxDevToolsApp',
libraryExport: 'Root',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'umd'),
filename: env.production
? 'redux-devtools-app.min.js'
: 'redux-devtools-app.js',
},
module: {
rules: [
{
test: /\.(js|ts)x?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
test: /\.woff2$/,
type: 'asset/inline',
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
PLATFORM: JSON.stringify('web'),
},
}),
new ForkTsCheckerWebpackPlugin({
typescript: {
configFile: 'tsconfig.json',
},
}),
],
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
},
});

3
packages/redux-devtools-cli/app/index.html
View File

@ -23,6 +23,7 @@
height: 100%; height: 100%;
} }
</style> </style>
<link href="/redux-devtools-app.min.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
@ -32,7 +33,7 @@
<script src="/port.js"></script> <script src="/port.js"></script>
<script> <script>
const container = document.querySelector('#root'); const container = document.querySelector('#root');
const element = React.createElement(ReduxDevToolsApp, { const element = React.createElement(ReduxDevToolsApp.Root, {
socketOptions: { socketOptions: {
hostname: location.hostname, hostname: location.hostname,
port: reduxDevToolsPort, port: reduxDevToolsPort,

21
pnpm-lock.yaml
View File

@ -1163,6 +1163,9 @@ importers:
css-loader: css-loader:
specifier: ^6.8.1 specifier: ^6.8.1
version: 6.8.1(webpack@5.88.2) version: 6.8.1(webpack@5.88.2)
esbuild:
specifier: ^0.19.2
version: 0.19.2
eslint: eslint:
specifier: ^8.48.0 specifier: ^8.48.0
version: 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) 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: ts-jest:
specifier: ^29.1.1 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: ts-node:
specifier: ^10.9.1 specifier: ^10.9.1
version: 10.9.1(@types/node@18.17.14)(typescript@5.2.2) version: 10.9.1(@types/node@18.17.14)(typescript@5.2.2)
@ -1219,7 +1222,7 @@ importers:
version: 5.2.2 version: 5.2.2
webpack: webpack:
specifier: ^5.88.2 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: webpack-cli:
specifier: ^5.1.4 specifier: ^5.1.4
version: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.88.2) version: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.88.2)
@ -10516,6 +10519,7 @@ packages:
/@types/ms@0.7.31: /@types/ms@0.7.31:
resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==} resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
requiresBuild: true
dev: false dev: false
/@types/node-fetch@2.6.4: /@types/node-fetch@2.6.4:
@ -12808,7 +12812,7 @@ packages:
postcss-modules-values: 4.0.0(postcss@8.4.28) postcss-modules-values: 4.0.0(postcss@8.4.28)
postcss-value-parser: 4.2.0 postcss-value-parser: 4.2.0
semver: 7.5.4 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 dev: true
/css-select@4.3.0: /css-select@4.3.0:
@ -15205,6 +15209,12 @@ packages:
set-cookie-parser: 2.6.0 set-cookie-parser: 2.6.0
dev: false 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: /hex-rgba@1.0.2:
resolution: {integrity: sha512-MKla68wFGv+i7zU3Q4giWN74f+zWdkuf2Tk21fISV7aw55r8dH/noBbH5JsVlM4Z2WRTYCEmSxsoZ1QR/o68jg==} resolution: {integrity: sha512-MKla68wFGv+i7zU3Q4giWN74f+zWdkuf2Tk21fISV7aw55r8dH/noBbH5JsVlM4Z2WRTYCEmSxsoZ1QR/o68jg==}
dev: false dev: false
@ -15261,7 +15271,7 @@ packages:
dependencies: dependencies:
html-minifier-terser: 7.2.0 html-minifier-terser: 7.2.0
parse5: 7.1.2 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 dev: true
/html-minifier-terser@6.1.0: /html-minifier-terser@6.1.0:
@ -16830,6 +16840,7 @@ packages:
chalk: 3.0.0 chalk: 3.0.0
diff-match-patch: 1.0.5 diff-match-patch: 1.0.5
dev: false dev: false
bundledDependencies: []
/jsonfile@4.0.0: /jsonfile@4.0.0:
resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
@ -20519,7 +20530,7 @@ packages:
peerDependencies: peerDependencies:
webpack: ^5.0.0 webpack: ^5.0.0
dependencies: 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 dev: true
/style-search@0.1.0: /style-search@0.1.0: