diff --git a/packages/redux-devtools-inspector-monitor/.babelrc b/packages/redux-devtools-inspector-monitor/.babelrc
index d6bf93bd..814fca2b 100644
--- a/packages/redux-devtools-inspector-monitor/.babelrc
+++ b/packages/redux-devtools-inspector-monitor/.babelrc
@@ -1,6 +1,6 @@
{
"presets": [
- "@babel/preset-env",
+ ["@babel/preset-env", { "targets": "defaults" }],
"@babel/preset-react",
"@babel/preset-typescript"
],
diff --git a/packages/redux-devtools-inspector-monitor/.eslintignore b/packages/redux-devtools-inspector-monitor/.eslintignore
index d3c23dcb..5df41e2c 100644
--- a/packages/redux-devtools-inspector-monitor/.eslintignore
+++ b/packages/redux-devtools-inspector-monitor/.eslintignore
@@ -1,2 +1,2 @@
demo
-lib
+dist
diff --git a/packages/redux-devtools-inspector-monitor/.eslintrc.js b/packages/redux-devtools-inspector-monitor/.eslintrc.js
index 6c6707c6..84ad3829 100644
--- a/packages/redux-devtools-inspector-monitor/.eslintrc.js
+++ b/packages/redux-devtools-inspector-monitor/.eslintrc.js
@@ -1,10 +1,14 @@
module.exports = {
- extends: '../../eslintrc.ts.react.base.json',
- parserOptions: {
- tsconfigRootDir: __dirname,
- project: ['./tsconfig.json'],
- },
+ extends: '../../eslintrc.js.base.json',
overrides: [
+ {
+ files: ['*.ts', '*.tsx'],
+ extends: '../../eslintrc.ts.react.base.json',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.json'],
+ },
+ },
{
files: ['demo/**/*.ts', 'demo/**/*.tsx'],
extends: '../../eslintrc.ts.react.base.json',
diff --git a/packages/redux-devtools-inspector-monitor/README.md b/packages/redux-devtools-inspector-monitor/README.md
index b4a2a37d..4d3c24e3 100644
--- a/packages/redux-devtools-inspector-monitor/README.md
+++ b/packages/redux-devtools-inspector-monitor/README.md
@@ -21,9 +21,9 @@ You can use `Inspector` as the only monitor in your app:
```js
import React from 'react';
import { createDevTools } from '@redux-devtools/core';
-import Inspector from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
-export default createDevTools();
+export default createDevTools();
```
Then you can render `` to any place inside app or even into a separate popup window.
diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json
index 8c455ba4..9f4d15c6 100644
--- a/packages/redux-devtools-inspector-monitor/package.json
+++ b/packages/redux-devtools-inspector-monitor/package.json
@@ -15,17 +15,16 @@
"lib",
"src"
],
- "main": "lib/index.js",
- "types": "lib/index.d.ts",
+ "main": "dist/redux-devtools-inspector-monitor.cjs.js",
+ "module": "dist/redux-devtools-inspector-monitor.esm.js",
+ "types": "dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/reduxjs/redux-devtools"
},
"scripts": {
- "build": "yarn run build:types && yarn run build:js",
- "build:types": "tsc --emitDeclarationOnly",
- "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
- "clean": "rimraf lib",
+ "build": "rollup -c",
+ "clean": "rimraf dist",
"lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --noEmit",
"prepack": "yarn run clean && yarn run build",
@@ -51,13 +50,14 @@
"redux-devtools-themes": "^1.0.0"
},
"devDependencies": {
- "@babel/cli": "^7.16.7",
"@babel/core": "^7.16.7",
+ "@babel/eslint-parser": "^7.16.5",
"@babel/plugin-transform-runtime": "^7.16.7",
"@babel/preset-env": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@redux-devtools/core": "^3.9.2",
+ "@rollup/plugin-babel": "^5.3.0",
"@types/dateformat": "^3.0.1",
"@types/hex-rgba": "^1.0.1",
"@types/history": "^4.7.9",
@@ -74,6 +74,9 @@
"react": "^17.0.2",
"redux": "^4.1.2",
"rimraf": "^3.0.2",
+ "rollup": "^2.63.0",
+ "rollup-plugin-typescript2": "^0.31.1",
+ "tslib": "^2.3.1",
"typescript": "~4.5.4"
},
"peerDependencies": {
diff --git a/packages/redux-devtools-inspector-monitor/rollup.config.js b/packages/redux-devtools-inspector-monitor/rollup.config.js
new file mode 100644
index 00000000..f094af02
--- /dev/null
+++ b/packages/redux-devtools-inspector-monitor/rollup.config.js
@@ -0,0 +1,40 @@
+import typescript from 'rollup-plugin-typescript2';
+import babel from '@rollup/plugin-babel';
+
+const config = [
+ {
+ input: 'src/index.ts',
+ output: [
+ { file: 'dist/redux-devtools-inspector-monitor.cjs.js', format: 'cjs' },
+ { file: 'dist/redux-devtools-inspector-monitor.esm.js', format: 'esm' },
+ ],
+ plugins: [
+ typescript(),
+ babel({
+ babelHelpers: 'runtime',
+ extensions: ['.ts', '.tsx'],
+ plugins: ['@babel/plugin-transform-runtime'],
+ }),
+ ],
+ external: [
+ /@babel\/runtime/,
+ 'react',
+ 'prop-types',
+ 'react-base16-styling',
+ '@redux-devtools/core',
+ 'jss',
+ 'jss-preset-default',
+ 'hex-rgba',
+ 'redux-devtools-themes',
+ 'immutable',
+ 'jsondiffpatch',
+ 'react-dragula',
+ 'react-json-tree',
+ 'dateformat',
+ 'lodash.debounce',
+ 'javascript-stringify',
+ ],
+ },
+];
+
+export default config;
diff --git a/packages/redux-devtools-inspector-monitor/src/index.ts b/packages/redux-devtools-inspector-monitor/src/index.ts
index fdddf57d..22a4d10c 100644
--- a/packages/redux-devtools-inspector-monitor/src/index.ts
+++ b/packages/redux-devtools-inspector-monitor/src/index.ts
@@ -1,5 +1,4 @@
-import DevtoolsInspector from './DevtoolsInspector';
-export default DevtoolsInspector;
+export { default as InspectorMonitor } from './DevtoolsInspector';
export { Tab, TabComponentProps } from './ActionPreview';
export { DevtoolsInspectorState } from './redux';
export { base16Themes } from './utils/createStylingFromTheme';
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx
index 537f31c6..bce58d64 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
import { Action } from 'redux';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
index 74213aaa..fe077a1e 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
import { stringify } from 'javascript-stringify';
import { Delta } from 'jsondiffpatch';
import { StylingFunction } from 'react-base16-styling';
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
index 0522dfb9..dbc37f06 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
import { Action } from 'redux';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
diff --git a/yarn.lock b/yarn.lock
index a101d018..0db9d503 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4929,14 +4929,15 @@ __metadata:
version: 0.0.0-use.local
resolution: "@redux-devtools/inspector-monitor@workspace:packages/redux-devtools-inspector-monitor"
dependencies:
- "@babel/cli": ^7.16.7
"@babel/core": ^7.16.7
+ "@babel/eslint-parser": ^7.16.5
"@babel/plugin-transform-runtime": ^7.16.7
"@babel/preset-env": ^7.16.7
"@babel/preset-react": ^7.16.7
"@babel/preset-typescript": ^7.16.7
"@babel/runtime": ^7.16.7
"@redux-devtools/core": ^3.9.2
+ "@rollup/plugin-babel": ^5.3.0
"@types/dateformat": ^3.0.1
"@types/dragula": ^3.7.1
"@types/hex-rgba": ^1.0.1
@@ -4969,6 +4970,9 @@ __metadata:
redux: ^4.1.2
redux-devtools-themes: ^1.0.0
rimraf: ^3.0.2
+ rollup: ^2.63.0
+ rollup-plugin-typescript2: ^0.31.1
+ tslib: ^2.3.1
typescript: ~4.5.4
peerDependencies:
"@redux-devtools/core": ^3.7.0