Use rollup for redux-devtools-app

This commit is contained in:
Nathan Bierema 2022-01-09 17:12:59 -05:00
parent d06231b198
commit e4c221b22a
21 changed files with 136 additions and 99 deletions

View File

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

View File

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

View File

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

View File

@ -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',

View File

@ -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",
"types": "lib/index.d.ts",
"main": "dist/redux-devtools-app.cjs.js",
"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:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
"build:web": "rimraf ./build/web && webpack --env platform=web --progress",
"build:umd": "rimraf ./umd && webpack --progress --config webpack.config.umd.ts",
"build": "yarn run build:lib && yarn run build:web && yarn run build:umd && yarn run build:umd:min",
"build:lib": "rollup -c",
"build:web": "webpack --env platform=web --progress",
"build: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",

View File

@ -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;

View File

@ -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 scheme: Scheme;
readonly theme: ThemeName;
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 scheme: Scheme;
readonly theme: ThemeName;
readonly scheme: SchemeName;
readonly colorPreference: 'auto' | 'light' | 'dark';
}
export function changeTheme(data: ChangeThemeData): ChangeThemeAction {

View File

@ -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';

View File

@ -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';

View File

@ -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,
},
{

View File

@ -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 { Theme } from '@redux-devtools/ui/lib/themes/default';
import { effects, Theme } from '@redux-devtools/ui';
export const StyledContainer = styled.div`
.jsondiffpatch-delta {

View File

@ -1,10 +1,10 @@
import React, { Component } from 'react';
import InspectorMonitor, { Tab } from '@redux-devtools/inspector-monitor';
import TraceTab from '@redux-devtools/inspector-monitor-trace-tab';
import TestTab from '@redux-devtools/inspector-monitor-test-tab';
import { Action } from 'redux';
import { InspectorMonitor, Tab } from '@redux-devtools/inspector-monitor';
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 = [
{

View File

@ -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';

View File

@ -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;

View File

@ -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 scheme: Scheme;
readonly theme: ThemeName;
readonly scheme: SchemeName;
readonly colorPreference: 'auto' | 'light' | 'dark';
}

View File

@ -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' },

View File

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

View File

@ -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';

View File

@ -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';

View File

@ -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 Scheme = keyof typeof schemes;
export type ThemeName = keyof typeof themes;
export type SchemeName = keyof typeof schemes;
export interface ThemeData {
theme: keyof typeof themes;

View File

@ -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: