From 1d25f35efe03627a01c430c6220b8857c97015c5 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 9 Jan 2022 14:23:48 -0500 Subject: [PATCH] Use rollup for inspector-monitor-test-tab --- .../.babelrc | 2 +- .../.eslintignore | 2 +- .../.eslintrc.js | 14 ++++--- .../README.md | 9 ++--- .../demo/src/DevTools.tsx | 9 +++-- .../package.json | 17 ++++---- .../rollup.config.js | 39 +++++++++++++++++++ .../src/index.tsx | 11 +++++- .../redux-devtools-ui/src/Dialog/Dialog.tsx | 4 +- yarn.lock | 6 ++- 10 files changed, 86 insertions(+), 27 deletions(-) create mode 100644 packages/redux-devtools-inspector-monitor-test-tab/rollup.config.js diff --git a/packages/redux-devtools-inspector-monitor-test-tab/.babelrc b/packages/redux-devtools-inspector-monitor-test-tab/.babelrc index d6bf93bd..814fca2b 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/.babelrc +++ b/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" ], diff --git a/packages/redux-devtools-inspector-monitor-test-tab/.eslintignore b/packages/redux-devtools-inspector-monitor-test-tab/.eslintignore index d3c23dcb..5df41e2c 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/.eslintignore +++ b/packages/redux-devtools-inspector-monitor-test-tab/.eslintignore @@ -1,2 +1,2 @@ demo -lib +dist diff --git a/packages/redux-devtools-inspector-monitor-test-tab/.eslintrc.js b/packages/redux-devtools-inspector-monitor-test-tab/.eslintrc.js index 2a10f0a6..95ca4bfd 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/.eslintrc.js +++ b/packages/redux-devtools-inspector-monitor-test-tab/.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-test-tab/README.md b/packages/redux-devtools-inspector-monitor-test-tab/README.md index bb6c0e56..273a9583 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/README.md +++ b/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 TestGenerator from '@redux-devtools/inspector-monitor-test-tab'; -import mochaTemplate from '@redux-devtools/inspector-monitor-test-tab/lib/redux/mocha'; // If using default tests. +import { InspectorMonitor } from '@redux-devtools/inspector-monitor'; +import { TestTab, reduxMochaTemplate } from '@redux-devtools/inspector-monitor-test-tab'; // If using default tests. const testComponent = (props) => ( - ); diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx index bc6265a8..3dfd5e23 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx +++ b/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>[] diff --git a/packages/redux-devtools-inspector-monitor-test-tab/package.json b/packages/redux-devtools-inspector-monitor-test-tab/package.json index ce5c14d5..bf402ee7 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/package.json +++ b/packages/redux-devtools-inspector-monitor-test-tab/package.json @@ -22,17 +22,16 @@ "lib", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/redux-devtools-inspector-monitor-test-tab.cjs.js", + "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: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", "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": { diff --git a/packages/redux-devtools-inspector-monitor-test-tab/rollup.config.js b/packages/redux-devtools-inspector-monitor-test-tab/rollup.config.js new file mode 100644 index 00000000..e5ed25dd --- /dev/null +++ b/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; diff --git a/packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx b/packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx index 01f03b0d..1dd54784 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx +++ b/packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx @@ -42,7 +42,7 @@ interface State { dialogStatus: 'Add' | 'Edit' | null; } -export default class TestTab> extends Component< +export class TestTab> extends Component< TabComponentProps, State > { @@ -200,3 +200,12 @@ export default class TestTab> 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'; diff --git a/packages/redux-devtools-ui/src/Dialog/Dialog.tsx b/packages/redux-devtools-ui/src/Dialog/Dialog.tsx index 6ae80aa9..84c92e4a 100644 --- a/packages/redux-devtools-ui/src/Dialog/Dialog.tsx +++ b/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

(rest?: FormProps

): rest is FormProps

{ return (rest as FormProps

).schema !== undefined; } -export default class Dialog

extends (PureComponent || Component)< +export default class Dialog

extends PureComponent< DialogProps | (Omit & FormProps

) > { submitButton?: HTMLInputElement | null; diff --git a/yarn.lock b/yarn.lock index 0db9d503..04171daf 100644 --- a/yarn.lock +++ b/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