diff --git a/.changeset/slow-paws-beg.md b/.changeset/slow-paws-beg.md
new file mode 100644
index 00000000..265f8d27
--- /dev/null
+++ b/.changeset/slow-paws-beg.md
@@ -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
+
+
+
+
+ Redux DevTools
++
+
+
+
+
+
+
+
+
+
+
+```
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/packages/redux-devtools-app/src/store/configureStore.ts b/packages/redux-devtools-app/src/store/configureStore.ts
index c5470ebd..aee3e094 100644
--- a/packages/redux-devtools-app/src/store/configureStore.ts
+++ b/packages/redux-devtools-app/src/store/configureStore.ts
@@ -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);
- });
- }
}
const store = createStore(
diff --git a/packages/redux-devtools-app/tsconfig.json b/packages/redux-devtools-app/tsconfig.json
index bfbbbab0..4b076071 100644
--- a/packages/redux-devtools-app/tsconfig.json
+++ b/packages/redux-devtools-app/tsconfig.json
@@ -2,7 +2,7 @@
"extends": "../../tsconfig.react.base.json",
"compilerOptions": {
"outDir": "lib/types",
- "types": ["webpack-env"]
+ "types": []
},
"include": ["src"]
}
diff --git a/packages/redux-devtools-app/tsconfig.webpack.json b/packages/redux-devtools-app/tsconfig.webpack.json
index d02c0a8f..d728d6be 100644
--- a/packages/redux-devtools-app/tsconfig.webpack.json
+++ b/packages/redux-devtools-app/tsconfig.webpack.json
@@ -3,5 +3,5 @@
"compilerOptions": {
"types": ["node", "webpack-dev-server"]
},
- "include": ["webpack.config.ts", "webpack.config.umd.ts"]
+ "include": ["webpack.config.ts"]
}
diff --git a/packages/redux-devtools-app/webpack.config.umd.ts b/packages/redux-devtools-app/webpack.config.umd.ts
deleted file mode 100644
index d3f4e829..00000000
--- a/packages/redux-devtools-app/webpack.config.umd.ts
+++ /dev/null
@@ -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',
- },
- },
-});
diff --git a/packages/redux-devtools-cli/app/index.html b/packages/redux-devtools-cli/app/index.html
index b884f7ae..a8364246 100644
--- a/packages/redux-devtools-cli/app/index.html
+++ b/packages/redux-devtools-cli/app/index.html
@@ -23,6 +23,7 @@
height: 100%;
}
+
@@ -32,7 +33,7 @@