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