Use rollup for inspector-monitor-test-tab

packages/redux-devtools-inspector-monitor-test-tab/.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
+    ["@babel/preset-env", { "targets": "defaults" }],
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],

packages/redux-devtools-inspector-monitor-test-tab/.eslintignore

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

packages/redux-devtools-inspector-monitor-test-tab/.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-inspector-monitor-test-tab/README.md

@@ -17,13 +17,12 @@ With [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-d
 ```js
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
-import InspectorMonitor from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
-import TestGenerator from '@redux-devtools/inspector-monitor-test-tab';
+import { TestTab, reduxMochaTemplate } from '@redux-devtools/inspector-monitor-test-tab'; // If using default tests.
-import mochaTemplate from '@redux-devtools/inspector-monitor-test-tab/lib/redux/mocha'; // If using default tests.
 
 const testComponent = (props) => (
-  <TestGenerator
+  <TestTab
-    expect={mochaTemplate.expect} wrap={mochaTemplate.wrap} useCodemirror
+    expect={reduxMochaTemplate.expect} wrap={reduxMochaTemplate.wrap} useCodemirror
     {...props}
   />
 );

packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { createDevTools } from '@redux-devtools/core';
-import InspectorMonitor, {
+import {
+  InspectorMonitor,
   base16Themes,
   Tab,
 } from '@redux-devtools/inspector-monitor';
-import DockMonitor from '@redux-devtools/dock-monitor';
+import { DockMonitor } from '@redux-devtools/dock-monitor';
 import { Location } from 'history';
 import getOptions from './getOptions';
-import TestGenerator from '@redux-devtools/inspector-monitor-test-tab';
+import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
 import { DemoAppState } from './reducers';
 import { Action } from 'redux';
 
@@ -28,7 +29,7 @@ export const getDevTools = (location: { search: string }) =>
           [
             {
               name: 'Test',
-              component: TestGenerator,
+              component: TestTab,
             },
             ...defaultTabs,
           ] as Tab<unknown, Action<unknown>>[]

packages/redux-devtools-inspector-monitor-test-tab/package.json

@@ -22,17 +22,16 @@
     "lib",
     "src"
   ],
-  "main": "lib/index.js",
+  "main": "dist/redux-devtools-inspector-monitor-test-tab.cjs.js",
-  "types": "lib/index.d.ts",
+  "module": "dist/redux-devtools-inspector-monitor-test-tab.esm.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "yarn run build:types && yarn run build:js",
+    "build": "rollup -c",
-    "build:types": "tsc --emitDeclarationOnly",
+    "clean": "rimraf dist",
-    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
-    "clean": "rimraf lib",
     "test": "jest",
     "lint": "eslint . --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
@@ -52,14 +51,15 @@
     "simple-diff": "^1.6.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",
     "@redux-devtools/inspector-monitor": "^1.0.2",
+    "@rollup/plugin-babel": "^5.3.0",
     "@testing-library/react": "^12.1.2",
     "@types/es6template": "^1.0.0",
     "@types/jest": "^27.4.0",
@@ -79,7 +79,10 @@
     "react-dom": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.63.0",
+    "rollup-plugin-typescript2": "^0.31.1",
     "ts-jest": "^27.1.2",
+    "tslib": "^2.3.1",
     "typescript": "~4.5.4"
   },
   "peerDependencies": {

packages/redux-devtools-inspector-monitor-test-tab/rollup.config.js

@@ -0,0 +1,39 @@
+import typescript from 'rollup-plugin-typescript2';
+import babel from '@rollup/plugin-babel';
+
+const config = [
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/redux-devtools-inspector-monitor-test-tab.cjs.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/redux-devtools-inspector-monitor-test-tab.esm.js',
+        format: 'esm',
+      },
+    ],
+    plugins: [
+      typescript(),
+      babel({
+        babelHelpers: 'runtime',
+        extensions: ['.ts', '.tsx'],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+    ],
+    external: [
+      /@babel\/runtime/,
+      'react',
+      'prop-types',
+      '@redux-devtools/ui',
+      /react-icons/,
+      'javascript-stringify',
+      'object-path',
+      'jsan',
+      'simple-diff',
+    ],
+  },
+];
+
+export default config;

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -42,7 +42,7 @@ interface State {
   dialogStatus: 'Add' | 'Edit' | null;
 }
 
-export default class TestTab<S, A extends Action<unknown>> extends Component<
+export class TestTab<S, A extends Action<unknown>> extends Component<
   TabComponentProps<S, A>,
   State
 > {
@@ -200,3 +200,12 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
     updateMonitorState: PropTypes.func.isRequired,
   };
 }
+
+export { default as reduxAvaTemplate } from './redux/ava';
+export { default as reduxJestTemplate } from './redux/jest';
+export { default as reduxMochaTemplate } from './redux/mocha';
+export { default as reduxTapeTemplate } from './redux/tape';
+export { default as vanillaAvaTemplate } from './vanilla/ava';
+export { default as vanillaJestTemplate } from './vanilla/jest';
+export { default as vanillaMochaTemplate } from './vanilla/mocha';
+export { default as vanillaTapeTemplate } from './vanilla/tape';

packages/redux-devtools-ui/src/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
@@ -43,7 +43,7 @@ function isForm<P>(rest?: FormProps<P>): rest is FormProps<P> {
   return (rest as FormProps<P>).schema !== undefined;
 }
 
-export default class Dialog<P> extends (PureComponent || Component)<
+export default class Dialog<P> extends PureComponent<
   DialogProps | (Omit<DialogProps, 'onSubmit'> & FormProps<P>)
 > {
   submitButton?: HTMLInputElement | null;

yarn.lock

@@ -4826,8 +4826,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@redux-devtools/inspector-monitor-test-tab@workspace:packages/redux-devtools-inspector-monitor-test-tab"
   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
@@ -4836,6 +4836,7 @@ __metadata:
     "@redux-devtools/core": ^3.9.2
     "@redux-devtools/inspector-monitor": ^1.0.2
     "@redux-devtools/ui": ^1.0.0
+    "@rollup/plugin-babel": ^5.3.0
     "@testing-library/react": ^12.1.2
     "@types/es6template": ^1.0.0
     "@types/jest": ^27.4.0
@@ -4862,8 +4863,11 @@ __metadata:
     react-icons: ^4.3.1
     redux: ^4.1.2
     rimraf: ^3.0.2
+    rollup: ^2.63.0
+    rollup-plugin-typescript2: ^0.31.1
     simple-diff: ^1.6.0
     ts-jest: ^27.1.2
+    tslib: ^2.3.1
     typescript: ~4.5.4
   peerDependencies:
     "@redux-devtools/inspector-monitor": ^1.0.0