Use rollup for redux-devtools-app

extension/SUMMARY.md

@@ -1 +0,0 @@
-./docs/README.md

packages/redux-devtools-app/.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
-    "@babel/preset-env",
+    ["@babel/preset-env", { "targets": "defaults" }],
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

packages/redux-devtools-app/.eslintignore

@@ -1,2 +1 @@
-lib
+dist
-umd

packages/redux-devtools-app/.eslintrc.js

@@ -1,10 +1,14 @@
 module.exports = {
-  extends: '../../eslintrc.ts.react.base.json',
+  extends: '../../eslintrc.js.base.json',
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['./tsconfig.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',

packages/redux-devtools-app/package.json

@@ -9,25 +9,25 @@
   "license": "MIT",
   "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
   "files": [
+    "dist",
     "src",
-    "lib",
     "umd"
   ],
-  "main": "lib/index.js",
+  "main": "dist/redux-devtools-app.cjs.js",
-  "types": "lib/index.d.ts",
+  "module": "dist/redux-devtools-app.esm.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
     "start": "webpack serve --hot --env development --env platform=web --progress",
-    "build": "yarn run build:types && yarn run build:js && yarn run build:web && yarn run build:umd && yarn run build:umd:min",
+    "build": "yarn run build:lib && yarn run build:web && yarn run build:umd && yarn run build:umd:min",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:lib": "rollup -c",
-    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
+    "build:web": "webpack --env platform=web --progress",
-    "build:web": "rimraf ./build/web && webpack --env platform=web --progress",
+    "build:umd": "webpack --progress --config webpack.config.umd.ts",
-    "build:umd": "rimraf ./umd && webpack --progress --config webpack.config.umd.ts",
     "build:umd:min": "webpack --env production --progress --config webpack.config.umd.ts",
-    "clean": "rimraf lib",
+    "clean": "rimraf build dist umd",
     "test": "jest",
     "lint": "eslint . --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
@@ -35,6 +35,7 @@
     "prepublish": "yarn run type-check && yarn run lint && yarn run test"
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.7",
     "@redux-devtools/chart-monitor": "^1.9.2",
     "@redux-devtools/core": "^3.9.2",
     "@redux-devtools/inspector-monitor": "^1.0.2",
@@ -61,12 +62,14 @@
     "socketcluster-client": "^14.3.2"
   },
   "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",
     "@rjsf/core": "^3.2.1",
+    "@rollup/plugin-babel": "^5.3.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.4.0",
@@ -100,10 +103,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.63.0",
+    "rollup-plugin-typescript2": "^0.31.1",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.3",
     "ts-jest": "^27.1.2",
     "ts-node": "^10.4.0",
+    "tslib": "^2.3.1",
     "typescript": "~4.5.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.65.0",

packages/redux-devtools-app/rollup.config.js

@@ -0,0 +1,54 @@
+import typescript from 'rollup-plugin-typescript2';
+import babel from '@rollup/plugin-babel';
+
+const config = [
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/redux-devtools-app.cjs.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/redux-devtools-app.esm.js',
+        format: 'esm',
+      },
+    ],
+    plugins: [
+      typescript(),
+      babel({
+        babelHelpers: 'runtime',
+        extensions: ['.ts', '.tsx'],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+    ],
+    external: [
+      /@babel\/runtime/,
+      'react',
+      'react-redux',
+      'redux',
+      'localforage',
+      /redux-persist/,
+      '@redux-devtools/ui',
+      'socketcluster-client',
+      'jsan',
+      /react-icons/,
+      'styled-components',
+      '@redux-devtools/slider-monitor',
+      'prop-types',
+      /lodash/,
+      '@redux-devtools/core',
+      '@redux-devtools/log-monitor',
+      '@redux-devtools/rtk-query-monitor',
+      '@redux-devtools/chart-monitor',
+      '@redux-devtools/inspector-monitor',
+      '@redux-devtools/inspector-monitor-trace-tab',
+      '@redux-devtools/inspector-monitor-test-tab',
+      'javascript-stringify',
+      'jsondiffpatch',
+      'd3-state-visualizer',
+    ],
+  },
+];
+
+export default config;

packages/redux-devtools-app/src/actions/index.ts

@@ -1,4 +1,4 @@
-import { Scheme, Theme } from '@redux-devtools/ui';
+import { SchemeName, ThemeName } from '@redux-devtools/ui';
 import { AuthStates, States } from 'socketcluster-client/lib/scclientsocket';
 import {
   CHANGE_SECTION,
@@ -64,8 +64,8 @@ export function changeSection(section: string): ChangeSectionAction {
 }
 
 interface ChangeThemeFormData {
-  readonly theme: Theme;
+  readonly theme: ThemeName;
-  readonly scheme: Scheme;
+  readonly scheme: SchemeName;
   readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 interface ChangeThemeData {
@@ -73,8 +73,8 @@ interface ChangeThemeData {
 }
 export interface ChangeThemeAction {
   readonly type: typeof CHANGE_THEME;
-  readonly theme: Theme;
+  readonly theme: ThemeName;
-  readonly scheme: Scheme;
+  readonly scheme: SchemeName;
   readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 export function changeTheme(data: ChangeThemeData): ChangeThemeAction {

packages/redux-devtools-app/src/components/Settings/Themes.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { Container, Form } from '@redux-devtools/ui';
-import { listSchemes, listThemes } from '@redux-devtools/ui/lib/utils/theme';
+import { listSchemes, listThemes } from '@redux-devtools/ui';
 import { changeTheme } from '../../actions';
 import { StoreState } from '../../reducers';
 

packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
-import ChartMonitor from '@redux-devtools/chart-monitor';
+import { ChartMonitor } from '@redux-devtools/chart-monitor';
 import { NodeWithId } from 'd3-state-visualizer';
 import { selectMonitorWithState } from '../../actions';
 

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { Tab, Tabs } from '@redux-devtools/ui';
-import { TabComponentProps } from '@redux-devtools/inspector-monitor';
+import {
+  TabComponentProps,
+  StateTab,
+  ActionTab,
+  DiffTab,
+} from '@redux-devtools/inspector-monitor';
 import { Action } from 'redux';
-import StateTree from '@redux-devtools/inspector-monitor/lib/tabs/StateTab';
-import ActionTree from '@redux-devtools/inspector-monitor/lib/tabs/ActionTab';
-import DiffTree from '@redux-devtools/inspector-monitor/lib/tabs/DiffTab';
 import { selectMonitorTab } from '../../../actions';
 import RawTab from './RawTab';
 import ChartTab from './ChartTab';
@@ -51,7 +53,7 @@ class SubTabs extends Component<Props> {
       this.tabs = [
         {
           name: 'Tree',
-          component: DiffTree,
+          component: DiffTab,
           selector: () => this.props,
         },
         {
@@ -66,7 +68,7 @@ class SubTabs extends Component<Props> {
     this.tabs = [
       {
         name: 'Tree',
-        component: parentTab === 'Action' ? ActionTree : StateTree,
+        component: parentTab === 'Action' ? ActionTab : StateTab,
         selector: () => this.props,
       },
       {

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import { Delta, formatters } from 'jsondiffpatch';
 import styled, { ThemedStyledProps } from 'styled-components';
-import { effects } from '@redux-devtools/ui';
+import { effects, Theme } from '@redux-devtools/ui';
-import { Theme } from '@redux-devtools/ui/lib/themes/default';
 
 export const StyledContainer = styled.div`
   .jsondiffpatch-delta {

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import InspectorMonitor, { Tab } from '@redux-devtools/inspector-monitor';
+import { Action } from 'redux';
-import TraceTab from '@redux-devtools/inspector-monitor-trace-tab';
+import { InspectorMonitor, Tab } from '@redux-devtools/inspector-monitor';
-import TestTab from '@redux-devtools/inspector-monitor-test-tab';
+import { TraceTab } from '@redux-devtools/inspector-monitor-trace-tab';
+import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
 import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
 import SubTabs from './SubTabs';
-import { Action } from 'redux';
 
 const DEFAULT_TABS = [
   {

packages/redux-devtools-app/src/containers/monitors/Slider.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled, { withTheme } from 'styled-components';
-import SliderMonitor from '@redux-devtools/slider-monitor';
+import { SliderMonitor } from '@redux-devtools/slider-monitor';
 import { LiftedAction } from '@redux-devtools/core';
 import { Action } from 'redux';
 import { ThemeFromProvider } from '@redux-devtools/ui';

packages/redux-devtools-app/src/index.tsx

@@ -9,7 +9,7 @@ import App from './containers/App';
 import { StoreState } from './reducers';
 import { StoreAction } from './actions';
 
-class Root extends Component {
+export class ReduxDevToolsApp extends Component {
   store?: Store<StoreState, StoreAction>;
   persistor?: Persistor;
 
@@ -38,5 +38,3 @@ class Root extends Component {
     );
   }
 }
-
-export default Root;

packages/redux-devtools-app/src/reducers/theme.ts

@@ -1,10 +1,10 @@
-import { Scheme, Theme } from '@redux-devtools/ui';
+import { SchemeName, ThemeName } from '@redux-devtools/ui';
 import { CHANGE_THEME } from '../constants/actionTypes';
 import { StoreAction } from '../actions';
 
 export interface ThemeState {
-  readonly theme: Theme;
+  readonly theme: ThemeName;
-  readonly scheme: Scheme;
+  readonly scheme: SchemeName;
   readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 

packages/redux-devtools-app/src/utils/getMonitor.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import LogMonitor from '@redux-devtools/log-monitor';
+import { LogMonitor } from '@redux-devtools/log-monitor';
 import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
 import InspectorWrapper from '../containers/monitors/InspectorWrapper';
-import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor';
+import { RtkQueryMonitor } from '@redux-devtools/rtk-query-monitor';
 
 export const monitors = [
   { value: 'InspectorMonitor', name: 'Inspector' },

packages/redux-devtools-app/webpack.config.umd.ts

@@ -8,8 +8,8 @@ export default (env: { production?: boolean } = {}): webpack.Configuration => ({
     app: ['./src/index'],
   },
   output: {
-    library: 'ReduxDevTools',
+    library: 'ReduxDevToolsApp',
-    libraryExport: 'default',
+    libraryExport: 'ReduxDevToolsApp',
     libraryTarget: 'umd',
     path: path.resolve(__dirname, 'umd'),
     filename: env.production

packages/redux-devtools-inspector-monitor/src/index.ts

@@ -3,3 +3,6 @@ export { Tab, TabComponentProps } from './ActionPreview';
 export { DevtoolsInspectorState } from './redux';
 export { base16Themes } from './utils/createStylingFromTheme';
 export * as inspectorThemes from './themes/index';
+export { default as ActionTab } from './tabs/ActionTab';
+export { default as DiffTab } from './tabs/DiffTab';
+export { default as StateTab } from './tabs/StateTab';

packages/redux-devtools-ui/src/index.ts

@@ -14,4 +14,11 @@ export * from './Toolbar';
 import color from './utils/color';
 export const effects = { color };
 export { default as createStyledComponent } from './utils/createStyledComponent';
-export { Theme, ThemeFromProvider, Scheme } from './utils/theme';
+export {
+  listSchemes,
+  listThemes,
+  ThemeName,
+  ThemeFromProvider,
+  SchemeName,
+} from './utils/theme';
+export { Theme } from './themes/default';

packages/redux-devtools-ui/src/utils/theme.ts

@@ -10,8 +10,8 @@ export const schemes = { ...baseSchemes, ...additionalSchemes };
 export const listSchemes = () => Object.keys(schemes).slice(1).sort(); // remove `__esModule`
 export const listThemes = () => Object.keys(themes);
 
-export type Theme = keyof typeof themes;
+export type ThemeName = keyof typeof themes;
-export type Scheme = keyof typeof schemes;
+export type SchemeName = keyof typeof schemes;
 
 export interface ThemeData {
   theme: keyof typeof themes;

yarn.lock

@@ -45,33 +45,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/cli@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/cli@npm:7.16.7"
-  dependencies:
-    "@nicolo-ribaudo/chokidar-2": 2.1.8-no-fsevents.3
-    chokidar: ^3.4.0
-    commander: ^4.0.1
-    convert-source-map: ^1.1.0
-    fs-readdir-recursive: ^1.1.0
-    glob: ^7.0.0
-    make-dir: ^2.1.0
-    slash: ^2.0.0
-    source-map: ^0.5.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  dependenciesMeta:
-    "@nicolo-ribaudo/chokidar-2":
-      optional: true
-    chokidar:
-      optional: true
-  bin:
-    babel: ./bin/babel.js
-    babel-external-helpers: ./bin/babel-external-helpers.js
-  checksum: dc931ede61bd9f4af8a8dbe8dd2cb81e1aaf79a7655cf1cef60662a2895977ca91f3c2b47f693c038fa0625ace54c07dbf183e5cbd678cebd5313677ad650847
-  languageName: node
-  linkType: hard
-
 "@babel/code-frame@npm:7.10.4":
   version: 7.10.4
   resolution: "@babel/code-frame@npm:7.10.4"
@@ -4091,13 +4064,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
-  version: 2.1.8-no-fsevents.3
-  resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
-  checksum: ee55cc9241aeea7eb94b8a8551bfa4246c56c53bc71ecda0a2104018fcc328ba5723b33686bdf9cc65d4df4ae65e8016b89e0bbdeb94e0309fe91bb9ced42344
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -4536,11 +4502,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@redux-devtools/app@workspace:packages/redux-devtools-app"
   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/chart-monitor": ^1.9.2
     "@redux-devtools/core": ^3.9.2
     "@redux-devtools/inspector-monitor": ^1.0.2
@@ -4552,6 +4520,7 @@ __metadata:
     "@redux-devtools/ui": ^1.0.0
     "@reduxjs/toolkit": ^1.7.1
     "@rjsf/core": ^3.2.1
+    "@rollup/plugin-babel": ^5.3.0
     "@testing-library/jest-dom": ^5.16.1
     "@testing-library/react": ^12.1.2
     "@types/jest": ^27.4.0
@@ -4598,11 +4567,14 @@ __metadata:
     redux: ^4.1.2
     redux-persist: ^6.0.0
     rimraf: ^3.0.2
+    rollup: ^2.63.0
+    rollup-plugin-typescript2: ^0.31.1
     socketcluster-client: ^14.3.2
     style-loader: ^3.3.1
     styled-components: ^5.3.3
     ts-jest: ^27.1.2
     ts-node: ^10.4.0
+    tslib: ^2.3.1
     typescript: ~4.5.4
     url-loader: ^4.1.1
     webpack: ^5.65.0
@@ -11105,7 +11077,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2":
+"chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2":
   version: 3.5.2
   resolution: "chokidar@npm:3.5.2"
   dependencies:
@@ -11569,7 +11541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.1, commander@npm:^4.1.1":
+"commander@npm:^4.1.1":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
   checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977
@@ -11961,7 +11933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.8.0
   resolution: "convert-source-map@npm:1.8.0"
   dependencies:
@@ -15146,13 +15118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-readdir-recursive@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "fs-readdir-recursive@npm:1.1.0"
-  checksum: 29d50f3d2128391c7fc9fd051c8b7ea45bcc8aa84daf31ef52b17218e20bfd2bd34d02382742801954cc8d1905832b68227f6b680a666ce525d8b6b75068ad1e
-  languageName: node
-  linkType: hard
-
 "fs-vacuum@npm:~1.2.10, fs-vacuum@npm:~1.2.9":
   version: 1.2.10
   resolution: "fs-vacuum@npm:1.2.10"
@@ -15717,7 +15682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.0.5, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
+"glob@npm:^7.0.3, glob@npm:^7.0.5, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
   version: 7.2.0
   resolution: "glob@npm:7.2.0"
   dependencies: