mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-10-30 23:47:35 +03:00
Build @redux-devtools/app UMD using esbuild (#1494)
* 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
GitHub
parent
f523d06499
commit
e57bcb3933
35
.changeset/slow-paws-beg.md
Normal file
35
.changeset/slow-paws-beg.md
Normal 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
67
packages/redux-devtools-app/buildUmd.mjs
Normal 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',
|
||||
};
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -35,14 +35,6 @@ export default function configureStore(
|
|||
}
|
||||
).__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(
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"extends": "../../tsconfig.react.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib/types",
|
||||
"types": ["webpack-env"]
|
||||
"types": []
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@
|
|||
"compilerOptions": {
|
||||
"types": ["node", "webpack-dev-server"]
|
||||
},
|
||||
"include": ["webpack.config.ts", "webpack.config.umd.ts"]
|
||||
"include": ["webpack.config.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link href="/redux-devtools-app.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
<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,
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -10516,6 +10519,7 @@ packages:
|
|||
|
||||
/@types/ms@0.7.31:
|
||||
resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/@types/node-fetch@2.6.4:
|
||||
|
|
@ -12808,7 +12812,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 +15209,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 +15271,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 +16840,7 @@ packages:
|
|||
chalk: 3.0.0
|
||||
diff-match-patch: 1.0.5
|
||||
dev: false
|
||||
bundledDependencies: []
|
||||
|
||||
/jsonfile@4.0.0:
|
||||
resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
|
||||
|
|
@ -20519,7 +20530,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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user