From b82de745928211cd9b7daa7a61b197ad9e11ec36 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 10 Jan 2022 09:41:53 -0600 Subject: [PATCH] Add ESM builds (#997) * Use rollup for d3tooltip * Use rollup for map2tree * Set moduleResolution * Use rollup for d3-state-visualizer * Use rollup for react-base16-styling * Use rollup for react-dock * Use rollup for react-json-tree * Use rollup for redux-devtools * Use rollup for redux-devtools-intrument * Use rollup for redux-devtools-chart-monitor * Update export * Use rollup for redux-devtools-dock-monitor * Use rollup for redux-devtools-inspector-monitor * Fix inspector demo * Fix invalid eslint config * Use rollup for inspector-monitor-test-tab * Use rollup for inspector-monitor-trace-tab * Use rollup for redux-devtools-log-monitor * Use rollup for redux-devtools-remote * Use rollup in redux-devtools-rtk-query-monitor * Use rollup for redux-devtools-serialize * Fix redux-devtools examples * Use rollup for redux-devtools-slider-monitor * Fix slider examples * Use rollup for redux-devtools-ui * Use rollup for redux-devtools-utils * Use rollup for redux-devtools-extension * Use rollup for redux-devtools-app * Fix Webpack app build * Fix extension build * Turn on minimization * Update CLI --- eslintrc.js.base.json | 3 + extension/SUMMARY.md | 1 - extension/src/app/api/filters.ts | 2 +- extension/src/app/api/importState.ts | 4 +- extension/src/app/api/index.ts | 9 +- extension/src/app/containers/Actions.tsx | 36 +- extension/src/app/containers/App.tsx | 12 +- extension/src/app/middlewares/api.ts | 22 +- .../src/app/middlewares/instanceSelector.ts | 6 +- extension/src/app/middlewares/panelSync.ts | 10 +- extension/src/app/middlewares/windowSync.ts | 10 +- .../src/app/reducers/background/index.ts | 4 +- extension/src/app/reducers/panel/index.ts | 35 +- extension/src/app/reducers/window/index.ts | 18 +- .../src/app/reducers/window/instances.ts | 8 +- extension/src/app/service/Monitor.ts | 2 +- extension/src/app/stores/backgroundStore.ts | 8 +- extension/src/app/stores/enhancerStore.ts | 4 +- extension/src/app/stores/panelStore.ts | 10 +- extension/src/app/stores/windowStore.ts | 14 +- .../browser/extension/background/logging.ts | 2 +- .../src/browser/extension/devpanel/index.tsx | 3 +- .../browser/extension/inject/contentScript.ts | 2 +- .../browser/extension/inject/pageScript.ts | 26 +- .../src/browser/extension/window/index.tsx | 2 +- .../src/browser/extension/window/remote.tsx | 4 +- extension/webpack/base.config.js | 3 - package.json | 2 + packages/d3-state-visualizer/.babelrc | 6 +- packages/d3-state-visualizer/.eslintignore | 1 - packages/d3-state-visualizer/.eslintrc.js | 10 +- packages/d3-state-visualizer/package.json | 33 +- packages/d3-state-visualizer/rollup.config.js | 70 ++ .../d3-state-visualizer/src/charts/index.ts | 2 +- .../src/charts/tree/tree.ts | 6 +- packages/d3-state-visualizer/src/index.ts | 6 +- .../d3-state-visualizer/tsconfig.webpack.json | 4 - .../d3-state-visualizer/webpack.config.umd.ts | 29 - packages/d3tooltip/.babelrc | 6 +- packages/d3tooltip/.eslintignore | 2 - packages/d3tooltip/.eslintrc.js | 10 +- packages/d3tooltip/README.md | 2 +- packages/d3tooltip/package.json | 33 +- packages/d3tooltip/rollup.config.js | 63 ++ packages/d3tooltip/src/index.ts | 2 +- packages/d3tooltip/tsconfig.webpack.json | 4 - packages/d3tooltip/webpack.config.umd.ts | 27 - packages/map2tree/.babelrc | 6 +- packages/map2tree/.eslintignore | 2 - packages/map2tree/.eslintrc.js | 22 +- packages/map2tree/package.json | 33 +- packages/map2tree/rollup.config.js | 63 ++ packages/map2tree/src/index.ts | 2 +- packages/map2tree/test/map2tree.spec.ts | 2 +- packages/map2tree/tsconfig.webpack.json | 4 - packages/map2tree/webpack.config.umd.ts | 27 - packages/react-base16-styling/.babelrc | 6 +- packages/react-base16-styling/.eslintignore | 2 +- packages/react-base16-styling/.eslintrc.js | 14 +- packages/react-base16-styling/package.json | 21 +- .../react-base16-styling/rollup.config.js | 23 + packages/react-dock/.babelrc | 5 +- packages/react-dock/.eslintignore | 2 +- packages/react-dock/.eslintrc.js | 14 +- packages/react-dock/package.json | 21 +- packages/react-dock/rollup.config.js | 23 + packages/react-dock/src/index.ts | 3 +- packages/react-json-tree/.babelrc | 5 +- packages/react-json-tree/.eslintignore | 3 +- packages/react-json-tree/.eslintrc.js | 14 +- packages/react-json-tree/README.md | 2 +- packages/react-json-tree/examples/src/App.tsx | 2 +- packages/react-json-tree/package.json | 37 +- packages/react-json-tree/rollup.config.js | 76 ++ packages/react-json-tree/src/index.tsx | 2 +- packages/react-json-tree/test/index.spec.tsx | 2 +- .../react-json-tree/tsconfig.webpack.json | 4 - .../react-json-tree/webpack.config.umd.ts | 36 - packages/redux-devtools-app/.babelrc | 5 +- packages/redux-devtools-app/.eslintignore | 3 +- packages/redux-devtools-app/.eslintrc.js | 14 +- packages/redux-devtools-app/demo/index.tsx | 4 +- packages/redux-devtools-app/package.json | 26 +- packages/redux-devtools-app/rollup.config.js | 54 ++ .../redux-devtools-app/src/actions/index.ts | 10 +- .../src/components/Settings/Connection.tsx | 4 +- .../src/components/Settings/Themes.tsx | 2 +- .../src/components/Settings/index.tsx | 4 +- .../monitors/ChartMonitorWrapper.tsx | 2 +- .../monitors/InspectorWrapper/SubTabs.tsx | 14 +- .../InspectorWrapper/VisualDiffTab.tsx | 3 +- .../monitors/InspectorWrapper/index.tsx | 8 +- .../src/containers/monitors/Slider.tsx | 2 +- packages/redux-devtools-app/src/index.tsx | 31 +- .../redux-devtools-app/src/middlewares/api.ts | 4 +- .../src/middlewares/exportState.ts | 6 +- .../src/reducers/connection.ts | 6 +- .../redux-devtools-app/src/reducers/index.ts | 20 +- .../src/reducers/instances.ts | 8 +- .../src/reducers/monitor.ts | 2 +- .../src/reducers/notification.ts | 2 +- .../src/reducers/reports.ts | 2 +- .../src/reducers/section.ts | 2 +- .../redux-devtools-app/src/reducers/socket.ts | 5 +- .../redux-devtools-app/src/reducers/theme.ts | 8 +- .../src/store/configureStore.ts | 8 +- .../src/utils/getMonitor.tsx | 4 +- .../src/utils/monitorActions.ts | 2 +- .../src/utils/stringifyJSON.ts | 5 +- packages/redux-devtools-app/test/app.spec.tsx | 13 +- .../redux-devtools-app/webpack.config.umd.ts | 4 +- .../redux-devtools-chart-monitor/.babelrc | 5 +- .../.eslintignore | 2 +- .../redux-devtools-chart-monitor/.eslintrc.js | 16 +- .../redux-devtools-chart-monitor/README.md | 2 +- .../redux-devtools-chart-monitor/package.json | 21 +- .../rollup.config.js | 31 + .../src/Chart.tsx | 6 +- .../src/ChartMonitor.tsx | 5 +- .../redux-devtools-chart-monitor/src/index.ts | 2 +- packages/redux-devtools-cli/app/index.html | 2 +- packages/redux-devtools-cli/tsconfig.json | 1 + packages/redux-devtools-dock-monitor/.babelrc | 5 +- .../redux-devtools-dock-monitor/.eslintignore | 2 +- .../redux-devtools-dock-monitor/.eslintrc.js | 16 +- .../redux-devtools-dock-monitor/README.md | 6 +- .../redux-devtools-dock-monitor/package.json | 21 +- .../rollup.config.js | 29 + .../src/DockMonitor.tsx | 2 +- .../redux-devtools-dock-monitor/src/index.ts | 3 +- packages/redux-devtools-extension/.babelrc | 6 +- .../redux-devtools-extension/.eslintignore | 2 +- .../redux-devtools-extension/.eslintrc.js | 16 +- .../redux-devtools-extension/package.json | 23 +- .../redux-devtools-extension/rollup.config.js | 29 + .../.babelrc | 2 +- .../.eslintignore | 2 +- .../.eslintrc.js | 14 +- .../README.md | 9 +- .../demo/src/DevTools.tsx | 9 +- .../package.json | 19 +- .../rollup.config.js | 39 + .../src/index.tsx | 11 +- .../.babelrc | 2 +- .../.eslintignore | 2 +- .../.eslintrc.js | 14 +- .../README.md | 6 +- .../package.json | 23 +- .../rollup.config.js | 39 + .../src/StackTraceTab.tsx | 8 +- .../src/path-browserify.ts | 150 ---- .../src/react-error-overlay/utils/unmapper.ts | 2 +- .../test/StackTraceTab.spec.tsx | 12 +- .../redux-devtools-inspector-monitor/.babelrc | 2 +- .../.eslintignore | 2 +- .../.eslintrc.js | 14 +- .../README.md | 4 +- .../demo/src/DemoApp.tsx | 2 +- .../demo/src/DevTools.tsx | 10 +- .../package.json | 19 +- .../rollup.config.js | 40 ++ .../src/index.ts | 7 +- .../src/tabs/ActionTab.tsx | 2 +- .../src/tabs/JSONDiff.tsx | 2 +- .../src/tabs/StateTab.tsx | 2 +- .../src/utils/createStylingFromTheme.ts | 2 +- packages/redux-devtools-instrument/.babelrc | 5 +- .../redux-devtools-instrument/.eslintignore | 2 +- .../redux-devtools-instrument/.eslintrc.js | 14 +- .../redux-devtools-instrument/package.json | 21 +- .../rollup.config.js | 23 + .../src/instrument.ts | 2 +- .../test/instrument.spec.ts | 3 +- packages/redux-devtools-log-monitor/.babelrc | 5 +- .../redux-devtools-log-monitor/.eslintignore | 2 +- .../redux-devtools-log-monitor/.eslintrc.js | 16 +- packages/redux-devtools-log-monitor/README.md | 2 +- .../redux-devtools-log-monitor/package.json | 21 +- .../rollup.config.js | 37 + .../src/LogMonitorEntry.tsx | 2 +- .../src/LogMonitorEntryAction.tsx | 2 +- .../redux-devtools-log-monitor/src/index.ts | 3 +- packages/redux-devtools-remote/.babelrc | 6 +- packages/redux-devtools-remote/.eslintignore | 2 +- packages/redux-devtools-remote/.eslintrc.js | 16 +- packages/redux-devtools-remote/README.md | 2 +- packages/redux-devtools-remote/package.json | 25 +- .../redux-devtools-remote/rollup.config.js | 36 + .../src/configureStore.ts | 2 +- .../redux-devtools-remote/src/devTools.ts | 11 +- packages/redux-devtools-remote/src/index.ts | 4 +- .../redux-devtools-rtk-query-monitor/.babelrc | 5 +- .../.eslintignore | 2 +- .../.eslintrc.js | 16 +- .../README.md | 2 +- .../demo/src/features/DevTools/DevTools.tsx | 4 +- .../package.json | 21 +- .../rollup.config.js | 43 ++ .../src/components/TreeView.tsx | 2 +- .../src/index.ts | 2 +- packages/redux-devtools-serialize/.babelrc | 6 +- .../redux-devtools-serialize/.eslintignore | 2 +- .../redux-devtools-serialize/.eslintrc.js | 14 +- packages/redux-devtools-serialize/README.md | 12 +- .../redux-devtools-serialize/package.json | 23 +- .../redux-devtools-serialize/rollup.config.js | 29 + .../redux-devtools-slider-monitor/.babelrc | 5 +- .../.eslintignore | 2 +- .../.eslintrc.js | 16 +- .../todomvc/src/containers/DevTools.tsx | 4 +- .../package.json | 21 +- .../rollup.config.js | 36 + .../src/SliderButton.tsx | 2 +- .../src/SliderMonitor.tsx | 11 +- .../src/index.ts | 1 + packages/redux-devtools-ui/.babelrc | 5 +- packages/redux-devtools-ui/.eslintignore | 2 +- packages/redux-devtools-ui/.eslintrc.js | 14 +- packages/redux-devtools-ui/package.json | 25 +- packages/redux-devtools-ui/rollup.config.js | 43 ++ .../redux-devtools-ui/src/Dialog/Dialog.tsx | 4 +- packages/redux-devtools-ui/src/index.ts | 9 +- packages/redux-devtools-ui/src/utils/theme.ts | 4 +- packages/redux-devtools-utils/.babelrc | 6 +- packages/redux-devtools-utils/.eslintignore | 2 +- packages/redux-devtools-utils/.eslintrc.js | 16 +- packages/redux-devtools-utils/package.json | 24 +- .../redux-devtools-utils/rollup.config.js | 36 + .../redux-devtools-utils/src/catchErrors.ts | 4 +- .../redux-devtools-utils/src/importState.ts | 2 +- packages/redux-devtools-utils/src/index.ts | 4 + packages/redux-devtools/.babelrc | 5 +- packages/redux-devtools/.eslintignore | 3 +- packages/redux-devtools/.eslintrc.js | 14 +- .../counter/src/containers/DevTools.tsx | 4 +- .../todomvc/src/containers/DevTools.tsx | 4 +- packages/redux-devtools/package.json | 21 +- packages/redux-devtools/rollup.config.js | 30 + .../redux-devtools/src/createDevTools.tsx | 3 +- packages/redux-devtools/src/index.ts | 2 +- tsconfig.base.json | 4 +- yarn.lock | 666 +++++++++++++++--- 242 files changed, 2424 insertions(+), 1144 deletions(-) create mode 100644 eslintrc.js.base.json delete mode 100644 extension/SUMMARY.md create mode 100644 packages/d3-state-visualizer/rollup.config.js delete mode 100644 packages/d3-state-visualizer/tsconfig.webpack.json delete mode 100644 packages/d3-state-visualizer/webpack.config.umd.ts create mode 100644 packages/d3tooltip/rollup.config.js delete mode 100644 packages/d3tooltip/tsconfig.webpack.json delete mode 100644 packages/d3tooltip/webpack.config.umd.ts create mode 100644 packages/map2tree/rollup.config.js delete mode 100644 packages/map2tree/tsconfig.webpack.json delete mode 100644 packages/map2tree/webpack.config.umd.ts create mode 100644 packages/react-base16-styling/rollup.config.js create mode 100644 packages/react-dock/rollup.config.js create mode 100644 packages/react-json-tree/rollup.config.js delete mode 100644 packages/react-json-tree/tsconfig.webpack.json delete mode 100644 packages/react-json-tree/webpack.config.umd.ts create mode 100644 packages/redux-devtools-app/rollup.config.js create mode 100644 packages/redux-devtools-chart-monitor/rollup.config.js create mode 100644 packages/redux-devtools-dock-monitor/rollup.config.js create mode 100644 packages/redux-devtools-extension/rollup.config.js create mode 100644 packages/redux-devtools-inspector-monitor-test-tab/rollup.config.js create mode 100644 packages/redux-devtools-inspector-monitor-trace-tab/rollup.config.js delete mode 100644 packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts create mode 100644 packages/redux-devtools-inspector-monitor/rollup.config.js create mode 100644 packages/redux-devtools-instrument/rollup.config.js create mode 100644 packages/redux-devtools-log-monitor/rollup.config.js create mode 100644 packages/redux-devtools-remote/rollup.config.js create mode 100644 packages/redux-devtools-rtk-query-monitor/rollup.config.js create mode 100644 packages/redux-devtools-serialize/rollup.config.js create mode 100644 packages/redux-devtools-slider-monitor/rollup.config.js create mode 100644 packages/redux-devtools-slider-monitor/src/index.ts create mode 100644 packages/redux-devtools-ui/rollup.config.js create mode 100644 packages/redux-devtools-utils/rollup.config.js create mode 100644 packages/redux-devtools/rollup.config.js diff --git a/eslintrc.js.base.json b/eslintrc.js.base.json new file mode 100644 index 00000000..a059126a --- /dev/null +++ b/eslintrc.js.base.json @@ -0,0 +1,3 @@ +{ + "parser": "@babel/eslint-parser" +} diff --git a/extension/SUMMARY.md b/extension/SUMMARY.md deleted file mode 100644 index 542612fd..00000000 --- a/extension/SUMMARY.md +++ /dev/null @@ -1 +0,0 @@ -./docs/README.md diff --git a/extension/src/app/api/filters.ts b/extension/src/app/api/filters.ts index b0d44d45..e23a823d 100644 --- a/extension/src/app/api/filters.ts +++ b/extension/src/app/api/filters.ts @@ -1,7 +1,7 @@ import mapValues from 'lodash/mapValues'; import { Action } from 'redux'; import { LiftedState, PerformAction } from '@redux-devtools/instrument'; -import { LocalFilter } from '@redux-devtools/utils/lib/filters'; +import { LocalFilter } from '@redux-devtools/utils'; export type FilterStateValue = | 'DO_NOT_FILTER' diff --git a/extension/src/app/api/importState.ts b/extension/src/app/api/importState.ts index 878763d6..70bda05e 100644 --- a/extension/src/app/api/importState.ts +++ b/extension/src/app/api/importState.ts @@ -1,5 +1,5 @@ import jsan from 'jsan'; -import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize'; +import { immutableSerialize } from '@redux-devtools/serialize'; import { Config, SerializeWithImmutable, @@ -44,7 +44,7 @@ export default function importState>( parse = (v) => jsan.parse( v, - seralizeImmutable( + immutableSerialize( serialize.immutable, serialize.refs, serialize.replacer, diff --git a/extension/src/app/api/index.ts b/extension/src/app/api/index.ts index e5c27c08..eecb73c9 100644 --- a/extension/src/app/api/index.ts +++ b/extension/src/app/api/index.ts @@ -1,15 +1,14 @@ import jsan, { Options } from 'jsan'; import throttle from 'lodash/throttle'; -import serializeImmutable from '@redux-devtools/serialize/lib/immutable/serialize'; -import { getActionsArray } from '@redux-devtools/utils'; -import { getLocalFilter } from '@redux-devtools/utils/lib/filters'; +import { immutableSerialize } from '@redux-devtools/serialize'; +import { getActionsArray, getLocalFilter } from '@redux-devtools/utils'; import { isFiltered, PartialLiftedState } from './filters'; import importState from './importState'; import generateId from './generateInstanceId'; import { Config } from '../../browser/extension/inject/pageScript'; import { Action } from 'redux'; import { LiftedState, PerformAction } from '@redux-devtools/instrument'; -import { LibConfig } from '@redux-devtools/app/lib/actions'; +import { LibConfig } from '@redux-devtools/app'; import { ContentScriptToPageScriptMessage, ListenerMessage, @@ -77,7 +76,7 @@ export function getSerializeParameter(config: Config) { if (serialize) { if (serialize === true) return { options: true }; if (serialize.immutable) { - const immutableSerializer = serializeImmutable( + const immutableSerializer = immutableSerialize( serialize.immutable, serialize.refs, serialize.replacer, diff --git a/extension/src/app/containers/Actions.tsx b/extension/src/app/containers/Actions.tsx index 3fae85d8..c821afe4 100644 --- a/extension/src/app/containers/Actions.tsx +++ b/extension/src/app/containers/Actions.tsx @@ -1,26 +1,24 @@ import React, { Component } from 'react'; import { connect, ResolveThunks } from 'react-redux'; import { Button, Container, Divider, Toolbar } from '@redux-devtools/ui'; -import SliderMonitor from '@redux-devtools/app/lib/containers/monitors/Slider'; -import { liftedDispatch, getReport } from '@redux-devtools/app/lib/actions'; -import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; -import DevTools from '@redux-devtools/app/lib/containers/DevTools'; -import Dispatcher from '@redux-devtools/app/lib/containers/monitors/Dispatcher'; -import TopButtons from '@redux-devtools/app/lib/components/TopButtons'; -import ExportButton from '@redux-devtools/app/lib/components/buttons/ExportButton'; -import ImportButton from '@redux-devtools/app/lib/components/buttons/ImportButton'; -import PrintButton from '@redux-devtools/app/lib/components/buttons/PrintButton'; -import MonitorSelector from '@redux-devtools/app/lib/components/MonitorSelector'; -import SliderButton from '@redux-devtools/app/lib/components/buttons/SliderButton'; -import DispatcherButton from '@redux-devtools/app/lib/components/buttons/DispatcherButton'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; -import { GoRadioTower } from 'react-icons/go'; import { - MdBorderBottom, - MdBorderLeft, - MdBorderRight, - MdSave, -} from 'react-icons/md'; + DevTools, + Dispatcher, + DispatcherButton, + ExportButton, + getActiveInstance, + getReport, + ImportButton, + liftedDispatch, + MonitorSelector, + PrintButton, + SliderButton, + SliderMonitor, + StoreState, + TopButtons, +} from '@redux-devtools/app'; +import { GoRadioTower } from 'react-icons/go'; +import { MdBorderBottom, MdBorderLeft, MdBorderRight } from 'react-icons/md'; import { Position } from '../api/openWindow'; import { SingleMessage } from '../middlewares/api'; diff --git a/extension/src/app/containers/App.tsx b/extension/src/app/containers/App.tsx index e9b46b87..6248308f 100644 --- a/extension/src/app/containers/App.tsx +++ b/extension/src/app/containers/App.tsx @@ -1,11 +1,13 @@ import React, { Component } from 'react'; import { connect, ResolveThunks } from 'react-redux'; import { Container, Notification } from '@redux-devtools/ui'; -import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; -import Settings from '@redux-devtools/app/lib/components/Settings'; -import Header from '@redux-devtools/app/lib/components/Header'; -import { clearNotification } from '@redux-devtools/app/lib/actions'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; +import { + clearNotification, + getActiveInstance, + Header, + Settings, + StoreState, +} from '@redux-devtools/app'; import Actions from './Actions'; type StateProps = ReturnType; diff --git a/extension/src/app/middlewares/api.ts b/extension/src/app/middlewares/api.ts index f74b7181..c8cb8937 100644 --- a/extension/src/app/middlewares/api.ts +++ b/extension/src/app/middlewares/api.ts @@ -1,12 +1,16 @@ -import stringifyJSON from '@redux-devtools/app/lib/utils/stringifyJSON'; import { - UPDATE_STATE, - REMOVE_INSTANCE, + CustomAction, + DispatchAction as AppDispatchAction, + LibConfig, LIFTED_ACTION, - TOGGLE_PERSIST, + nonReduxDispatch, + REMOVE_INSTANCE, SET_PERSIST, -} from '@redux-devtools/app/lib/constants/actionTypes'; -import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions'; + SetPersistAction, + stringifyJSON, + TOGGLE_PERSIST, + UPDATE_STATE, +} from '@redux-devtools/app'; import syncOptions, { Options, OptionsMessage, @@ -16,12 +20,6 @@ import openDevToolsWindow, { DevToolsPosition, } from '../../browser/extension/background/openWindow'; import { getReport } from '../../browser/extension/background/logging'; -import { - CustomAction, - DispatchAction as AppDispatchAction, - LibConfig, - SetPersistAction, -} from '@redux-devtools/app/lib/actions'; import { Action, Dispatch, MiddlewareAPI } from 'redux'; import { ContentScriptToBackgroundMessage, diff --git a/extension/src/app/middlewares/instanceSelector.ts b/extension/src/app/middlewares/instanceSelector.ts index fd87bd93..6db884cd 100644 --- a/extension/src/app/middlewares/instanceSelector.ts +++ b/extension/src/app/middlewares/instanceSelector.ts @@ -1,10 +1,10 @@ import { Dispatch, MiddlewareAPI } from 'redux'; import { SELECT_INSTANCE, + StoreAction, + StoreState, UPDATE_STATE, -} from '@redux-devtools/app/lib/constants/actionTypes'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; +} from '@redux-devtools/app'; function selectInstance( tabId: number, diff --git a/extension/src/app/middlewares/panelSync.ts b/extension/src/app/middlewares/panelSync.ts index eb264802..7c31fcca 100644 --- a/extension/src/app/middlewares/panelSync.ts +++ b/extension/src/app/middlewares/panelSync.ts @@ -1,13 +1,13 @@ import { + getActiveInstance, LIFTED_ACTION, - UPDATE_STATE, SELECT_INSTANCE, + StoreAction, + StoreState, TOGGLE_PERSIST, -} from '@redux-devtools/app/lib/constants/actionTypes'; -import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; + UPDATE_STATE, +} from '@redux-devtools/app'; import { Dispatch, MiddlewareAPI } from 'redux'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; function panelDispatcher(bgConnection: chrome.runtime.Port) { let autoselected = false; diff --git a/extension/src/app/middlewares/windowSync.ts b/extension/src/app/middlewares/windowSync.ts index 6164f553..e6c2c599 100644 --- a/extension/src/app/middlewares/windowSync.ts +++ b/extension/src/app/middlewares/windowSync.ts @@ -1,14 +1,14 @@ import { - UPDATE_STATE, + getActiveInstance, LIFTED_ACTION, + StoreAction, + StoreState, TOGGLE_PERSIST, -} from '@redux-devtools/app/lib/constants/actionTypes'; -import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; + UPDATE_STATE, +} from '@redux-devtools/app'; import { Dispatch, MiddlewareAPI, Store } from 'redux'; import { BackgroundState } from '../reducers/background'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; import { WindowStoreAction } from '../stores/windowStore'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; import { BackgroundAction } from '../stores/backgroundStore'; const syncStores = diff --git a/extension/src/app/reducers/background/index.ts b/extension/src/app/reducers/background/index.ts index 242541d7..bea610c0 100644 --- a/extension/src/app/reducers/background/index.ts +++ b/extension/src/app/reducers/background/index.ts @@ -1,7 +1,5 @@ import { combineReducers, Reducer } from 'redux'; -import instances, { - InstancesState, -} from '@redux-devtools/app/lib/reducers/instances'; +import { instances, InstancesState } from '@redux-devtools/app'; import { BackgroundAction } from '../../stores/backgroundStore'; export interface BackgroundState { diff --git a/extension/src/app/reducers/panel/index.ts b/extension/src/app/reducers/panel/index.ts index 50753130..568a080f 100644 --- a/extension/src/app/reducers/panel/index.ts +++ b/extension/src/app/reducers/panel/index.ts @@ -1,24 +1,21 @@ import { combineReducers, Reducer } from 'redux'; -import instances, { - InstancesState, -} from '@redux-devtools/app/lib/reducers/instances'; -import monitor, { - MonitorState, -} from '@redux-devtools/app/lib/reducers/monitor'; -import notification, { - NotificationState, -} from '@redux-devtools/app/lib/reducers/notification'; -import reports, { - ReportsState, -} from '@redux-devtools/app/lib/reducers/reports'; -import section, { - SectionState, -} from '@redux-devtools/app/lib/reducers/section'; -import theme, { ThemeState } from '@redux-devtools/app/lib/reducers/theme'; -import connection, { +import { + connection, ConnectionState, -} from '@redux-devtools/app/lib/reducers/connection'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; + instances, + InstancesState, + monitor, + MonitorState, + notification, + NotificationState, + reports, + ReportsState, + section, + SectionState, + StoreAction, + theme, + ThemeState, +} from '@redux-devtools/app'; export interface StoreStateWithoutSocket { readonly section: SectionState; diff --git a/extension/src/app/reducers/window/index.ts b/extension/src/app/reducers/window/index.ts index c4bf9329..3ec4ddf3 100644 --- a/extension/src/app/reducers/window/index.ts +++ b/extension/src/app/reducers/window/index.ts @@ -1,13 +1,15 @@ import { combineReducers, Reducer } from 'redux'; +import { + connection, + monitor, + notification, + reports, + section, + socket, + theme, + StoreState, +} from '@redux-devtools/app'; import instances from './instances'; -import monitor from '@redux-devtools/app/lib/reducers/monitor'; -import notification from '@redux-devtools/app/lib/reducers/notification'; -import socket from '@redux-devtools/app/lib/reducers/socket'; -import reports from '@redux-devtools/app/lib/reducers/reports'; -import section from '@redux-devtools/app/lib/reducers/section'; -import theme from '@redux-devtools/app/lib/reducers/theme'; -import connection from '@redux-devtools/app/lib/reducers/connection'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; import { WindowStoreAction } from '../../stores/windowStore'; const rootReducer: Reducer = diff --git a/extension/src/app/reducers/window/instances.ts b/extension/src/app/reducers/window/instances.ts index 0d75d233..6ef0cad3 100644 --- a/extension/src/app/reducers/window/instances.ts +++ b/extension/src/app/reducers/window/instances.ts @@ -1,20 +1,18 @@ import { - initialState, + instancesInitialState, dispatchAction, -} from '@redux-devtools/app/lib/reducers/instances'; -import { UPDATE_STATE, SELECT_INSTANCE, LIFTED_ACTION, SET_PERSIST, -} from '@redux-devtools/app/lib/constants/actionTypes'; +} from '@redux-devtools/app'; import { ExpandedUpdateStateAction, WindowStoreAction, } from '../../stores/windowStore'; export default function instances( - state = initialState, + state = instancesInitialState, action: WindowStoreAction ) { switch (action.type) { diff --git a/extension/src/app/service/Monitor.ts b/extension/src/app/service/Monitor.ts index acdb6bff..47fc3a51 100644 --- a/extension/src/app/service/Monitor.ts +++ b/extension/src/app/service/Monitor.ts @@ -1,6 +1,6 @@ import { Action } from 'redux'; import { LiftedState } from '@redux-devtools/instrument'; -import { DispatchAction, LibConfig } from '@redux-devtools/app/lib/actions'; +import { DispatchAction, LibConfig } from '@redux-devtools/app'; declare global { interface Window { diff --git a/extension/src/app/stores/backgroundStore.ts b/extension/src/app/stores/backgroundStore.ts index 4ca94f9c..55eed9e4 100644 --- a/extension/src/app/stores/backgroundStore.ts +++ b/extension/src/app/stores/backgroundStore.ts @@ -1,12 +1,12 @@ import { createStore, applyMiddleware, PreloadedState } from 'redux'; -import rootReducer, { BackgroundState } from '../reducers/background'; -import api, { CONNECTED, DISCONNECTED } from '../middlewares/api'; -import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes'; import { CustomAction, DispatchAction, + LIFTED_ACTION, StoreActionWithoutLiftedAction, -} from '@redux-devtools/app/lib/actions'; +} from '@redux-devtools/app'; +import rootReducer, { BackgroundState } from '../reducers/background'; +import api, { CONNECTED, DISCONNECTED } from '../middlewares/api'; interface LiftedActionActionBase { action?: DispatchAction | string | CustomAction; diff --git a/extension/src/app/stores/enhancerStore.ts b/extension/src/app/stores/enhancerStore.ts index e99ebad8..532cfccb 100644 --- a/extension/src/app/stores/enhancerStore.ts +++ b/extension/src/app/stores/enhancerStore.ts @@ -1,6 +1,6 @@ import { Action, compose, Reducer, StoreEnhancerStoreCreator } from 'redux'; -import instrument from '@redux-devtools/instrument'; -import persistState from '@redux-devtools/core/lib/persistState'; +import { instrument } from '@redux-devtools/instrument'; +import { persistState } from '@redux-devtools/core'; import { ConfigWithExpandedMaxAge } from '../../browser/extension/inject/pageScript'; export function getUrlParam(key: string) { diff --git a/extension/src/app/stores/panelStore.ts b/extension/src/app/stores/panelStore.ts index 130d9005..873e7284 100644 --- a/extension/src/app/stores/panelStore.ts +++ b/extension/src/app/stores/panelStore.ts @@ -1,10 +1,9 @@ -import { createStore, applyMiddleware, PreloadedState, Reducer } from 'redux'; +import { createStore, applyMiddleware, Reducer } from 'redux'; import localForage from 'localforage'; import { persistReducer, persistStore } from 'redux-persist'; -import exportState from '@redux-devtools/app/lib/middlewares/exportState'; +import { exportStateMiddleware, StoreAction } from '@redux-devtools/app'; import panelDispatcher from '../middlewares/panelSync'; import rootReducer, { StoreStateWithoutSocket } from '../reducers/panel'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; const persistConfig = { key: 'redux-devtools', @@ -19,7 +18,10 @@ export default function configureStore( position: string, bgConnection: chrome.runtime.Port ) { - const enhancer = applyMiddleware(exportState, panelDispatcher(bgConnection)); + const enhancer = applyMiddleware( + exportStateMiddleware, + panelDispatcher(bgConnection) + ); const store = createStore(persistedReducer, enhancer); const persistor = persistStore(store); return { store, persistor }; diff --git a/extension/src/app/stores/windowStore.ts b/extension/src/app/stores/windowStore.ts index 26e73c97..186203ab 100644 --- a/extension/src/app/stores/windowStore.ts +++ b/extension/src/app/stores/windowStore.ts @@ -8,21 +8,21 @@ import { } from 'redux'; import localForage from 'localforage'; import { persistReducer, persistStore } from 'redux-persist'; -import exportState from '@redux-devtools/app/lib/middlewares/exportState'; -import api from '@redux-devtools/app/lib/middlewares/api'; -import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes'; import { + api, + CONNECT_REQUEST, + exportStateMiddleware, + InstancesState, StoreActionWithoutUpdateState, + StoreState, UpdateStateAction, -} from '@redux-devtools/app/lib/actions'; -import { InstancesState } from '@redux-devtools/app/lib/reducers/instances'; +} from '@redux-devtools/app'; import syncStores from '../middlewares/windowSync'; import instanceSelector from '../middlewares/instanceSelector'; import rootReducer from '../reducers/window'; import { BackgroundState } from '../reducers/background'; import { BackgroundAction } from './backgroundStore'; import { EmptyUpdateStateAction, NAAction } from '../middlewares/api'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; export interface ExpandedUpdateStateAction extends UpdateStateAction { readonly instances: InstancesState; @@ -50,7 +50,7 @@ export default function configureStore( position: string ) { let enhancer: StoreEnhancer; - const middlewares = [exportState, api, syncStores(baseStore)]; + const middlewares = [exportStateMiddleware, api, syncStores(baseStore)]; if (!position || position === '#popup') { // select current tab instance for devPanel and pageAction middlewares.push(instanceSelector); diff --git a/extension/src/browser/extension/background/logging.ts b/extension/src/browser/extension/background/logging.ts index 38735253..4d5cc917 100644 --- a/extension/src/browser/extension/background/logging.ts +++ b/extension/src/browser/extension/background/logging.ts @@ -1,4 +1,4 @@ -import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes'; +import { LIFTED_ACTION } from '@redux-devtools/app'; export function getReport( reportId: string, diff --git a/extension/src/browser/extension/devpanel/index.tsx b/extension/src/browser/extension/devpanel/index.tsx index 658612b6..af1823ad 100644 --- a/extension/src/browser/extension/devpanel/index.tsx +++ b/extension/src/browser/extension/devpanel/index.tsx @@ -2,13 +2,12 @@ import React, { CSSProperties } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Provider } from 'react-redux'; import { Persistor } from 'redux-persist'; -import { REMOVE_INSTANCE } from '@redux-devtools/app/lib/constants/actionTypes'; +import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/panelStore'; import '../../views/devpanel.pug'; import { Action, Store } from 'redux'; -import { StoreAction } from '@redux-devtools/app/lib/actions'; import { PanelMessage } from '../../../app/middlewares/api'; import { StoreStateWithoutSocket } from '../../../app/reducers/panel'; import { PersistGate } from 'redux-persist/integration/react'; diff --git a/extension/src/browser/extension/inject/contentScript.ts b/extension/src/browser/extension/inject/contentScript.ts index 9e9d3732..61c49e85 100644 --- a/extension/src/browser/extension/inject/contentScript.ts +++ b/extension/src/browser/extension/inject/contentScript.ts @@ -13,7 +13,7 @@ import { Action } from 'redux'; import { CustomAction, DispatchAction as AppDispatchAction, -} from '@redux-devtools/app/lib/actions'; +} from '@redux-devtools/app'; import { LiftedState } from '@redux-devtools/instrument'; const source = '@devtools-extension'; const pageSource = '@devtools-page'; diff --git a/extension/src/browser/extension/inject/pageScript.ts b/extension/src/browser/extension/inject/pageScript.ts index 74728611..a0d48399 100644 --- a/extension/src/browser/extension/inject/pageScript.ts +++ b/extension/src/browser/extension/inject/pageScript.ts @@ -1,7 +1,8 @@ import { - getActionsArray, - evalAction, ActionCreatorObject, + evalAction, + getActionsArray, + getLocalFilter, } from '@redux-devtools/utils'; import throttle from 'lodash/throttle'; import { @@ -14,7 +15,18 @@ import { StoreEnhancerStoreCreator, } from 'redux'; import Immutable from 'immutable'; -import { EnhancedStore, PerformAction } from '@redux-devtools/instrument'; +import { + EnhancedStore, + LiftedAction, + LiftedState, + PerformAction, +} from '@redux-devtools/instrument'; +import { + CustomAction, + DispatchAction, + LibConfig, + Features, +} from '@redux-devtools/app'; import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore'; import { isAllowed, Options } from '../options/syncOptions'; import Monitor from '../../../app/service/Monitor'; @@ -40,15 +52,7 @@ import { StructuralPerformAction, ConnectResponse, } from '../../../app/api'; -import { LiftedAction, LiftedState } from '@redux-devtools/instrument'; -import { - CustomAction, - DispatchAction, - LibConfig, -} from '@redux-devtools/app/lib/actions'; import { ContentScriptToPageScriptMessage } from './contentScript'; -import { Features } from '@redux-devtools/app/lib/reducers/instances'; -import { getLocalFilter } from '@redux-devtools/utils/lib/filters'; type EnhancedStoreWithInitialDispatch< S, diff --git a/extension/src/browser/extension/window/index.tsx b/extension/src/browser/extension/window/index.tsx index a49aa01a..4fc8d38a 100644 --- a/extension/src/browser/extension/window/index.tsx +++ b/extension/src/browser/extension/window/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; -import { UPDATE_STATE } from '@redux-devtools/app/lib/constants/actionTypes'; +import { UPDATE_STATE } from '@redux-devtools/app'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/windowStore'; import { MonitorMessage } from '../../../app/middlewares/api'; diff --git a/extension/src/browser/extension/window/remote.tsx b/extension/src/browser/extension/window/remote.tsx index a2ec9e86..4f8b196b 100644 --- a/extension/src/browser/extension/window/remote.tsx +++ b/extension/src/browser/extension/window/remote.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from 'react-dom'; -import App from '@redux-devtools/app'; +import { Root } from '@redux-devtools/app'; import '../../views/remote.pug'; @@ -14,7 +14,7 @@ chrome.storage.local.get( 's:secure': null, }, (options) => { - const AppAsAny = App as any; + const AppAsAny = Root as any; render( ({ }) : [] ), - optimization: { - minimize: false, - }, performance: { hints: false, }, diff --git a/package.json b/package.json index 3858ae8e..8f90c183 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,8 @@ { "private": true, "devDependencies": { + "@babel/core": "^7.16.7", + "@babel/eslint-parser": "^7.16.5", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", "eslint": "^8.6.0", diff --git a/packages/d3-state-visualizer/.babelrc b/packages/d3-state-visualizer/.babelrc index 3313ff9e..5ed95986 100644 --- a/packages/d3-state-visualizer/.babelrc +++ b/packages/d3-state-visualizer/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"] + "presets": [ + ["@babel/preset-env", { "targets": "defaults" }], + "@babel/preset-typescript" + ], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/packages/d3-state-visualizer/.eslintignore b/packages/d3-state-visualizer/.eslintignore index 1d149abd..4bf718e4 100644 --- a/packages/d3-state-visualizer/.eslintignore +++ b/packages/d3-state-visualizer/.eslintignore @@ -1,3 +1,2 @@ examples -lib dist diff --git a/packages/d3-state-visualizer/.eslintrc.js b/packages/d3-state-visualizer/.eslintrc.js index 27e62c81..90313a76 100644 --- a/packages/d3-state-visualizer/.eslintrc.js +++ b/packages/d3-state-visualizer/.eslintrc.js @@ -1,16 +1,12 @@ module.exports = { - extends: '../../eslintrc.ts.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - }, + extends: '../../eslintrc.js.base.json', overrides: [ { - files: ['webpack.config.umd.ts'], + files: ['*.ts'], extends: '../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.webpack.json'], + project: ['./tsconfig.json'], }, }, ], diff --git a/packages/d3-state-visualizer/package.json b/packages/d3-state-visualizer/package.json index acef31f2..675c7cd8 100644 --- a/packages/d3-state-visualizer/package.json +++ b/packages/d3-state-visualizer/package.json @@ -17,28 +17,26 @@ "author": "romseguy", "files": [ "dist", - "lib", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/d3-state-visualizer.cjs.js", + "module": "dist/d3-state-visualizer.esm.js", + "types": "dist/index.d.ts", + "unpkg": "dist/d3-state-visualizer.umd.js", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "yarn run build:types && yarn run build:js && yarn run build:umd && yarn run build:umd:min", - "build:types": "tsc --emitDeclarationOnly", - "build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline", - "build:umd": "webpack --env production --progress --config webpack.config.umd.ts", - "build:umd:min": "webpack --env production --progress --config webpack.config.umd.ts", - "clean": "rimraf lib dist", + "build": "rollup -c", + "clean": "rimraf dist", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "yarn run clean && yarn run build", "prepublish": "yarn run type-check && yarn run lint" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@types/d3": "^3.5.46", "d3": "^3.5.17", "d3tooltip": "^1.3.2", @@ -47,21 +45,24 @@ "ramda": "^0.27.1" }, "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-typescript": "^7.16.7", - "@types/node": "^16.11.17", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-node-resolve": "^13.1.3", "@types/ramda": "^0.27.62", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", - "babel-loader": "^8.2.3", "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "rimraf": "^3.0.2", - "ts-node": "^10.4.0", - "typescript": "~4.5.4", - "webpack": "^5.65.0", - "webpack-cli": "^4.9.1" + "rollup": "^2.63.0", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.31.1", + "tslib": "^2.3.1", + "typescript": "~4.5.4" } } diff --git a/packages/d3-state-visualizer/rollup.config.js b/packages/d3-state-visualizer/rollup.config.js new file mode 100644 index 00000000..f2f518bb --- /dev/null +++ b/packages/d3-state-visualizer/rollup.config.js @@ -0,0 +1,70 @@ +import typescript from 'rollup-plugin-typescript2'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import babel from '@rollup/plugin-babel'; +import { terser } from 'rollup-plugin-terser'; + +const config = [ + { + input: 'src/index.ts', + output: { + name: 'd3-state-visualizer', + file: 'dist/d3-state-visualizer.umd.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + }, + { + input: 'src/index.ts', + output: { + name: 'd3-state-visualizer', + file: 'dist/d3-state-visualizer.umd.min.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + terser(), + ], + }, + { + input: 'src/index.ts', + output: [ + { file: 'dist/d3-state-visualizer.cjs.js', format: 'cjs' }, + { file: 'dist/d3-state-visualizer.esm.js', format: 'esm' }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [ + /@babel\/runtime/, + 'd3', + 'ramda', + 'map2tree', + 'deepmerge', + 'd3tooltip', + ], + }, +]; + +export default config; diff --git a/packages/d3-state-visualizer/src/charts/index.ts b/packages/d3-state-visualizer/src/charts/index.ts index aaf238e0..fe78e795 100644 --- a/packages/d3-state-visualizer/src/charts/index.ts +++ b/packages/d3-state-visualizer/src/charts/index.ts @@ -1,2 +1,2 @@ export { default as tree } from './tree/tree'; -export type { InputOptions, NodeWithId } from './tree/tree'; +export type { InputOptions, NodeWithId, Primitive } from './tree/tree'; diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts index a3238c66..e4b778d1 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.ts +++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts @@ -1,6 +1,6 @@ import d3, { ZoomEvent, Primitive } from 'd3'; import { isEmpty } from 'ramda'; -import map2tree from 'map2tree'; +import { map2tree } from 'map2tree'; import deepmerge from 'deepmerge'; import { getTooltipString, @@ -8,7 +8,7 @@ import { visit, getNodeGroupByDepthCount, } from './utils'; -import d3tooltip from 'd3tooltip'; +import { tooltip } from 'd3tooltip'; export interface InputOptions { // eslint-disable-next-line @typescript-eslint/ban-types @@ -401,7 +401,7 @@ export default function ( if (!tooltipOptions.disabled) { nodeEnter.call( - d3tooltip(d3, 'tooltip', { ...tooltipOptions, root }) + tooltip(d3, 'tooltip', { ...tooltipOptions, root }) .text((d, i) => getTooltipString(d, i, tooltipOptions)) .style(tooltipOptions.style) ); diff --git a/packages/d3-state-visualizer/src/index.ts b/packages/d3-state-visualizer/src/index.ts index 60b538ee..6239d3ce 100644 --- a/packages/d3-state-visualizer/src/index.ts +++ b/packages/d3-state-visualizer/src/index.ts @@ -1,6 +1,2 @@ -import * as charts from './charts'; - export { tree } from './charts'; -export type { InputOptions, NodeWithId } from './charts'; - -export default charts; +export type { InputOptions, NodeWithId, Primitive } from './charts'; diff --git a/packages/d3-state-visualizer/tsconfig.webpack.json b/packages/d3-state-visualizer/tsconfig.webpack.json deleted file mode 100644 index 655c4644..00000000 --- a/packages/d3-state-visualizer/tsconfig.webpack.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "include": ["webpack.config.umd.ts"] -} diff --git a/packages/d3-state-visualizer/webpack.config.umd.ts b/packages/d3-state-visualizer/webpack.config.umd.ts deleted file mode 100644 index eeb7501a..00000000 --- a/packages/d3-state-visualizer/webpack.config.umd.ts +++ /dev/null @@ -1,29 +0,0 @@ -import * as path from 'path'; -import * as webpack from 'webpack'; - -export default (env: { production?: boolean } = {}): webpack.Configuration => ({ - mode: env.production ? 'production' : 'development', - entry: { - app: ['./src/index'], - }, - output: { - library: 'd3-state-visualizer', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'dist'), - filename: env.production - ? 'd3-state-visualizer.min.js' - : 'd3-state-visualizer.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, -}); diff --git a/packages/d3tooltip/.babelrc b/packages/d3tooltip/.babelrc index 3313ff9e..5ed95986 100644 --- a/packages/d3tooltip/.babelrc +++ b/packages/d3tooltip/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"] + "presets": [ + ["@babel/preset-env", { "targets": "defaults" }], + "@babel/preset-typescript" + ], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/packages/d3tooltip/.eslintignore b/packages/d3tooltip/.eslintignore index 1d149abd..1521c8b7 100644 --- a/packages/d3tooltip/.eslintignore +++ b/packages/d3tooltip/.eslintignore @@ -1,3 +1 @@ -examples -lib dist diff --git a/packages/d3tooltip/.eslintrc.js b/packages/d3tooltip/.eslintrc.js index 27e62c81..90313a76 100644 --- a/packages/d3tooltip/.eslintrc.js +++ b/packages/d3tooltip/.eslintrc.js @@ -1,16 +1,12 @@ module.exports = { - extends: '../../eslintrc.ts.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - }, + extends: '../../eslintrc.js.base.json', overrides: [ { - files: ['webpack.config.umd.ts'], + files: ['*.ts'], extends: '../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.webpack.json'], + project: ['./tsconfig.json'], }, }, ], diff --git a/packages/d3tooltip/README.md b/packages/d3tooltip/README.md index 08bbd0b6..7a22d1c5 100644 --- a/packages/d3tooltip/README.md +++ b/packages/d3tooltip/README.md @@ -11,7 +11,7 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom ```javascript import d3 from 'd3'; -import d3tooltip from 'd3tooltip'; +import { tooltip } from 'd3tooltip'; const DOMNode = document.getElementById('chart'); const root = d3.select(DOMNode); diff --git a/packages/d3tooltip/package.json b/packages/d3tooltip/package.json index 30650a4c..85315d5d 100644 --- a/packages/d3tooltip/package.json +++ b/packages/d3tooltip/package.json @@ -13,50 +13,51 @@ "license": "MIT", "author": "romseguy", "files": [ - "lib", "dist", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/d3tooltip.cjs.js", + "module": "dist/d3tooltip.esm.js", + "types": "dist/index.d.ts", + "unpkg": "dist/d3tooltip.umd.js", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "yarn run build:types && yarn run build:js && yarn run build:umd && yarn run build:umd:min", - "build:types": "tsc --emitDeclarationOnly", - "build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline", - "build:umd": "webpack --progress --config webpack.config.umd.ts", - "build:umd:min": "webpack --env production --progress --config webpack.config.umd.ts", - "clean": "rimraf lib dist", + "build": "rollup -c", + "clean": "rimraf dist", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "yarn run clean && yarn run build", "prepublish": "yarn run type-check && yarn run lint" }, "dependencies": { + "@babel/runtime": "^7.16.7", "ramda": "^0.27.1" }, "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-typescript": "^7.16.7", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-node-resolve": "^13.1.3", "@types/d3": "^3.5.46", - "@types/node": "^16.11.17", "@types/ramda": "^0.27.62", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", - "babel-loader": "^8.2.3", "d3": "^3.5.17", "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "rimraf": "^3.0.2", - "ts-node": "^10.4.0", - "typescript": "~4.5.4", - "webpack": "^5.65.0", - "webpack-cli": "^4.9.1" + "rollup": "^2.63.0", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.31.1", + "tslib": "^2.3.1", + "typescript": "~4.5.4" }, "peerDependencies": { "@types/d3": "^3.5.46", diff --git a/packages/d3tooltip/rollup.config.js b/packages/d3tooltip/rollup.config.js new file mode 100644 index 00000000..ed4d229b --- /dev/null +++ b/packages/d3tooltip/rollup.config.js @@ -0,0 +1,63 @@ +import typescript from 'rollup-plugin-typescript2'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import babel from '@rollup/plugin-babel'; +import { terser } from 'rollup-plugin-terser'; + +const config = [ + { + input: 'src/index.ts', + output: { + name: 'd3tooltip', + file: 'dist/d3tooltip.umd.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + }, + { + input: 'src/index.ts', + output: { + name: 'd3tooltip', + file: 'dist/d3tooltip.umd.min.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + terser(), + ], + }, + { + input: 'src/index.ts', + output: [ + { file: 'dist/d3tooltip.cjs.js', format: 'cjs' }, + { file: 'dist/d3tooltip.esm.js', format: 'esm' }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [/@babel\/runtime/, 'ramda'], + }, +]; + +export default config; diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts index 0077693f..bf8e2795 100644 --- a/packages/d3tooltip/src/index.ts +++ b/packages/d3tooltip/src/index.ts @@ -49,7 +49,7 @@ interface Tip { ) => this; } -export default function tooltip( +export function tooltip( d3: typeof d3Package, className = 'tooltip', options: Partial> = {} diff --git a/packages/d3tooltip/tsconfig.webpack.json b/packages/d3tooltip/tsconfig.webpack.json deleted file mode 100644 index 655c4644..00000000 --- a/packages/d3tooltip/tsconfig.webpack.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "include": ["webpack.config.umd.ts"] -} diff --git a/packages/d3tooltip/webpack.config.umd.ts b/packages/d3tooltip/webpack.config.umd.ts deleted file mode 100644 index 17294598..00000000 --- a/packages/d3tooltip/webpack.config.umd.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as path from 'path'; -import * as webpack from 'webpack'; - -export default (env: { production?: boolean } = {}): webpack.Configuration => ({ - mode: env.production ? 'production' : 'development', - entry: { - app: ['./src/index'], - }, - output: { - library: 'd3tooltip', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'dist'), - filename: env.production ? 'd3tooltip.min.js' : 'd3tooltip.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, -}); diff --git a/packages/map2tree/.babelrc b/packages/map2tree/.babelrc index 3313ff9e..5ed95986 100755 --- a/packages/map2tree/.babelrc +++ b/packages/map2tree/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"] + "presets": [ + ["@babel/preset-env", { "targets": "defaults" }], + "@babel/preset-typescript" + ], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/packages/map2tree/.eslintignore b/packages/map2tree/.eslintignore index 1d149abd..1521c8b7 100644 --- a/packages/map2tree/.eslintignore +++ b/packages/map2tree/.eslintignore @@ -1,3 +1 @@ -examples -lib dist diff --git a/packages/map2tree/.eslintrc.js b/packages/map2tree/.eslintrc.js index 436bc853..e392d421 100644 --- a/packages/map2tree/.eslintrc.js +++ b/packages/map2tree/.eslintrc.js @@ -1,10 +1,14 @@ module.exports = { - extends: '../../eslintrc.ts.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - }, + extends: '../../eslintrc.js.base.json', overrides: [ + { + files: ['*.ts'], + extends: '../../eslintrc.ts.jest.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./test/tsconfig.json'], + }, + }, { files: ['test/**/*.ts'], extends: '../../eslintrc.ts.jest.base.json', @@ -13,13 +17,5 @@ module.exports = { project: ['./test/tsconfig.json'], }, }, - { - files: ['webpack.config.umd.ts'], - extends: '../../eslintrc.ts.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.webpack.json'], - }, - }, ], }; diff --git a/packages/map2tree/package.json b/packages/map2tree/package.json index 36b4716e..ab7fa5e1 100755 --- a/packages/map2tree/package.json +++ b/packages/map2tree/package.json @@ -16,23 +16,20 @@ "license": "MIT", "author": "romseguy", "files": [ - "lib", "dist", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/map2tree.cjs.js", + "module": "dist/map2tree.esm.js", + "types": "dist/index.d.ts", + "unpkg": "dist/map2tree.umd.js", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "yarn run build:types && yarn run build:js && yarn run build:umd && yarn run build:umd:min", - "build:types": "tsc --emitDeclarationOnly", - "build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline", - "build:umd": "webpack --progress --config webpack.config.umd.ts", - "build:umd:min": "webpack --env production --progress --config webpack.config.umd.ts", - "clean": "rimraf lib dist", + "build": "rollup -c", + "clean": "rimraf dist", "test": "jest", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", @@ -40,29 +37,33 @@ "prepublish": "yarn run type-check && yarn run lint && yarn run test" }, "dependencies": { + "@babel/runtime": "^7.16.7", "lodash": "^4.17.21" }, "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-typescript": "^7.16.7", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-node-resolve": "^13.1.3", "@types/jest": "^27.4.0", "@types/lodash": "^4.14.178", - "@types/node": "^16.11.17", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", - "babel-loader": "^8.2.3", "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jest": "^25.3.4", "immutable": "^4.0.0", "jest": "^27.4.5", "rimraf": "^3.0.2", + "rollup": "^2.63.0", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.31.1", "ts-jest": "^27.1.2", - "ts-node": "^10.4.0", - "typescript": "~4.5.4", - "webpack": "^5.65.0", - "webpack-cli": "^4.9.1" + "tslib": "^2.3.1", + "typescript": "~4.5.4" } } diff --git a/packages/map2tree/rollup.config.js b/packages/map2tree/rollup.config.js new file mode 100644 index 00000000..db24ba2e --- /dev/null +++ b/packages/map2tree/rollup.config.js @@ -0,0 +1,63 @@ +import typescript from 'rollup-plugin-typescript2'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import babel from '@rollup/plugin-babel'; +import { terser } from 'rollup-plugin-terser'; + +const config = [ + { + input: 'src/index.ts', + output: { + name: 'map2tree', + file: 'dist/map2tree.umd.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + }, + { + input: 'src/index.ts', + output: { + name: 'map2tree', + file: 'dist/map2tree.umd.min.js', + format: 'umd', + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + terser(), + ], + }, + { + input: 'src/index.ts', + output: [ + { file: 'dist/map2tree.cjs.js', format: 'cjs' }, + { file: 'dist/map2tree.esm.js', format: 'esm' }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [/@babel\/runtime/, /lodash/], + }, +]; + +export default config; diff --git a/packages/map2tree/src/index.ts b/packages/map2tree/src/index.ts index fa920ee7..00aac7c5 100644 --- a/packages/map2tree/src/index.ts +++ b/packages/map2tree/src/index.ts @@ -42,7 +42,7 @@ function getNode(tree: Node, key: string): Node | null { return node; } -export default function map2tree( +export function map2tree( // eslint-disable-next-line @typescript-eslint/ban-types root: unknown, options: { key?: string; pushMethod?: 'push' | 'unshift' } = {}, diff --git a/packages/map2tree/test/map2tree.spec.ts b/packages/map2tree/test/map2tree.spec.ts index 2a3cc7af..6cd6a10d 100644 --- a/packages/map2tree/test/map2tree.spec.ts +++ b/packages/map2tree/test/map2tree.spec.ts @@ -1,4 +1,4 @@ -import map2tree, { Node } from '../src'; +import { map2tree, Node } from '../src'; import * as immutable from 'immutable'; test('# rootNodeKey', () => { diff --git a/packages/map2tree/tsconfig.webpack.json b/packages/map2tree/tsconfig.webpack.json deleted file mode 100644 index 655c4644..00000000 --- a/packages/map2tree/tsconfig.webpack.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "include": ["webpack.config.umd.ts"] -} diff --git a/packages/map2tree/webpack.config.umd.ts b/packages/map2tree/webpack.config.umd.ts deleted file mode 100644 index 272ec0fe..00000000 --- a/packages/map2tree/webpack.config.umd.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as path from 'path'; -import * as webpack from 'webpack'; - -export default (env: { production?: boolean } = {}): webpack.Configuration => ({ - mode: env.production ? 'production' : 'development', - entry: { - app: ['./src/index'], - }, - output: { - library: 'map2tree', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'dist'), - filename: env.production ? 'map2tree.min.js' : 'map2tree.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, -}); diff --git a/packages/react-base16-styling/.babelrc b/packages/react-base16-styling/.babelrc index 3313ff9e..5ed95986 100644 --- a/packages/react-base16-styling/.babelrc +++ b/packages/react-base16-styling/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"] + "presets": [ + ["@babel/preset-env", { "targets": "defaults" }], + "@babel/preset-typescript" + ], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/packages/react-base16-styling/.eslintignore b/packages/react-base16-styling/.eslintignore index a65b4177..1521c8b7 100644 --- a/packages/react-base16-styling/.eslintignore +++ b/packages/react-base16-styling/.eslintignore @@ -1 +1 @@ -lib +dist diff --git a/packages/react-base16-styling/.eslintrc.js b/packages/react-base16-styling/.eslintrc.js index 4de5f294..e392d421 100644 --- a/packages/react-base16-styling/.eslintrc.js +++ b/packages/react-base16-styling/.eslintrc.js @@ -1,10 +1,14 @@ module.exports = { - extends: '../../eslintrc.ts.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - }, + extends: '../../eslintrc.js.base.json', overrides: [ + { + files: ['*.ts'], + extends: '../../eslintrc.ts.jest.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./test/tsconfig.json'], + }, + }, { files: ['test/**/*.ts'], extends: '../../eslintrc.ts.jest.base.json', diff --git a/packages/react-base16-styling/package.json b/packages/react-base16-styling/package.json index a50b9dd4..3b9128d4 100644 --- a/packages/react-base16-styling/package.json +++ b/packages/react-base16-styling/package.json @@ -15,20 +15,19 @@ "license": "MIT", "author": "Alexander (http://kuzya.org/)", "files": [ - "lib", + "dist", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/react-base16-styling.cjs.js", + "module": "dist/react-base16-styling.esm.js", + "types": "dist/index.d.ts", "repository": { "type": "git", "url": "git+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\" --source-maps inline", - "clean": "rimraf lib", + "build": "rollup -c", + "clean": "rimraf dist", "test": "jest", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", @@ -36,6 +35,7 @@ "prepublish": "yarn run type-check && yarn run lint && yarn run test" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@types/base16": "^1.0.2", "@types/lodash": "^4.14.178", "base16": "^1.0.0", @@ -44,10 +44,12 @@ "lodash.curry": "^4.1.1" }, "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-typescript": "^7.16.7", + "@rollup/plugin-babel": "^5.3.0", "@types/color": "^3.0.2", "@types/jest": "^27.4.0", "@types/lodash.curry": "^4.1.6", @@ -58,7 +60,10 @@ "eslint-plugin-jest": "^25.3.4", "jest": "^27.4.5", "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" } } diff --git a/packages/react-base16-styling/rollup.config.js b/packages/react-base16-styling/rollup.config.js new file mode 100644 index 00000000..0002d276 --- /dev/null +++ b/packages/react-base16-styling/rollup.config.js @@ -0,0 +1,23 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from '@rollup/plugin-babel'; + +const config = [ + { + input: 'src/index.ts', + output: [ + { file: 'dist/react-base16-styling.cjs.js', format: 'cjs' }, + { file: 'dist/react-base16-styling.esm.js', format: 'esm' }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [/@babel\/runtime/, 'base16', 'color', 'lodash.curry'], + }, +]; + +export default config; diff --git a/packages/react-dock/.babelrc b/packages/react-dock/.babelrc index 202d425a..814fca2b 100644 --- a/packages/react-dock/.babelrc +++ b/packages/react-dock/.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"] } diff --git a/packages/react-dock/.eslintignore b/packages/react-dock/.eslintignore index d3c23dcb..5df41e2c 100644 --- a/packages/react-dock/.eslintignore +++ b/packages/react-dock/.eslintignore @@ -1,2 +1,2 @@ demo -lib +dist diff --git a/packages/react-dock/.eslintrc.js b/packages/react-dock/.eslintrc.js index faaca940..5828f5b1 100644 --- a/packages/react-dock/.eslintrc.js +++ b/packages/react-dock/.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: ['test/**/*.ts', 'test/**/*.tsx'], extends: '../../eslintrc.ts.react.jest.base.json', diff --git a/packages/react-dock/package.json b/packages/react-dock/package.json index 4ac8152c..af813608 100644 --- a/packages/react-dock/package.json +++ b/packages/react-dock/package.json @@ -15,20 +15,19 @@ "license": "MIT", "author": "Alexander (http://kuzya.org/)", "files": [ - "lib", + "dist", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/react-dock.cjs.js", + "module": "dist/react-dock.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", @@ -36,17 +35,20 @@ "prepublish": "yarn run type-check && yarn run lint && yarn run test" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@types/lodash": "^4.14.178", "@types/prop-types": "^15.7.4", "lodash.debounce": "^4.0.8", "prop-types": "^15.8.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", + "@rollup/plugin-babel": "^5.3.0", "@types/jest": "^27.4.0", "@types/lodash.debounce": "^4.0.6", "@types/react": "^17.0.38", @@ -62,7 +64,10 @@ "react": "^17.0.2", "react-test-renderer": "^17.0.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/react-dock/rollup.config.js b/packages/react-dock/rollup.config.js new file mode 100644 index 00000000..ebd47612 --- /dev/null +++ b/packages/react-dock/rollup.config.js @@ -0,0 +1,23 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from '@rollup/plugin-babel'; + +const config = [ + { + input: 'src/index.ts', + output: [ + { file: 'dist/react-dock.cjs.js', format: 'cjs' }, + { file: 'dist/react-dock.esm.js', format: 'esm' }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [/@babel\/runtime/, 'react', 'prop-types', 'lodash.debounce'], + }, +]; + +export default config; diff --git a/packages/react-dock/src/index.ts b/packages/react-dock/src/index.ts index 834bb37d..40652fcc 100644 --- a/packages/react-dock/src/index.ts +++ b/packages/react-dock/src/index.ts @@ -1,2 +1 @@ -import Dock from './Dock'; -export default Dock; +export { default as Dock } from './Dock'; diff --git a/packages/react-json-tree/.babelrc b/packages/react-json-tree/.babelrc index 202d425a..814fca2b 100644 --- a/packages/react-json-tree/.babelrc +++ b/packages/react-json-tree/.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"] } diff --git a/packages/react-json-tree/.eslintignore b/packages/react-json-tree/.eslintignore index ed3bf25e..4d6880d3 100644 --- a/packages/react-json-tree/.eslintignore +++ b/packages/react-json-tree/.eslintignore @@ -1,3 +1,2 @@ +dist examples -lib -umd diff --git a/packages/react-json-tree/.eslintrc.js b/packages/react-json-tree/.eslintrc.js index aa185dd1..3bfcb789 100644 --- a/packages/react-json-tree/.eslintrc.js +++ b/packages/react-json-tree/.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: ['test/**/*.ts', 'test/**/*.tsx'], extends: '../../eslintrc.ts.react.jest.base.json', diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md index b4b13e7c..f1e96518 100644 --- a/packages/react-json-tree/README.md +++ b/packages/react-json-tree/README.md @@ -7,7 +7,7 @@ React JSON Viewer Component, Extracted from [redux-devtools](https://github.com/ ### Usage ```jsx -import JSONTree from 'react-json-tree'; +import { JSONTree } from 'react-json-tree'; // If you're using Immutable.js: `npm i --save immutable` import { Map } from 'immutable'; diff --git a/packages/react-json-tree/examples/src/App.tsx b/packages/react-json-tree/examples/src/App.tsx index 83ad4d07..75678a01 100644 --- a/packages/react-json-tree/examples/src/App.tsx +++ b/packages/react-json-tree/examples/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Map } from 'immutable'; -import JSONTree, { StylingValue } from 'react-json-tree'; +import { JSONTree, StylingValue } from 'react-json-tree'; const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({ style: { diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json index 475b2b47..93168661 100644 --- a/packages/react-json-tree/package.json +++ b/packages/react-json-tree/package.json @@ -19,23 +19,20 @@ "Mihail Diordiev (https://github.com/zalmoxisus)" ], "files": [ - "lib", - "src", - "umd" + "dist", + "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/react-json-tree.cjs.js", + "module": "dist/react-json-tree.esm.js", + "types": "dist/index.d.ts", + "unpkg": "dist/react-json-tree.umd.js", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "yarn run build:types && yarn run build:js && yarn run build:umd && npm run build:umd:min", - "build:types": "tsc --emitDeclarationOnly", - "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", - "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 umd", + "build": "rollup -c", + "clean": "rimraf umd", "test": "jest", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit", @@ -43,23 +40,26 @@ "prepublish": "yarn run type-check && yarn run lint && yarn run test" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@types/prop-types": "^15.7.4", "prop-types": "^15.8.0", "react-base16-styling": "^0.8.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", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-node-resolve": "^13.1.3", "@types/jest": "^27.4.0", - "@types/node": "^16.11.17", "@types/react": "^17.0.38", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", - "babel-loader": "^8.2.3", "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jest": "^25.3.4", @@ -69,11 +69,12 @@ "react": "^17.0.2", "react-test-renderer": "^17.0.2", "rimraf": "^3.0.2", + "rollup": "^2.63.0", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.31.1", "ts-jest": "^27.1.2", - "ts-node": "^10.4.0", - "typescript": "~4.5.4", - "webpack": "^5.65.0", - "webpack-cli": "^4.9.1" + "tslib": "^2.3.1", + "typescript": "~4.5.4" }, "peerDependencies": { "@types/react": "^16.3.0 || ^17.0.0", diff --git a/packages/react-json-tree/rollup.config.js b/packages/react-json-tree/rollup.config.js new file mode 100644 index 00000000..839926ef --- /dev/null +++ b/packages/react-json-tree/rollup.config.js @@ -0,0 +1,76 @@ +import typescript from 'rollup-plugin-typescript2'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import babel from '@rollup/plugin-babel'; +import { terser } from 'rollup-plugin-terser'; + +const config = [ + { + input: 'src/index.tsx', + output: { + name: 'ReactJsonTree', + file: 'dist/react-json-tree.umd.js', + format: 'umd', + globals: { + react: 'React', + }, + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: ['react'], + }, + { + input: 'src/index.tsx', + output: { + name: 'ReactJsonTree', + file: 'dist/react-json-tree.umd.min.js', + format: 'umd', + globals: { + react: 'React', + }, + }, + plugins: [ + typescript(), + resolve(), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'], + plugins: ['@babel/plugin-transform-runtime'], + }), + terser(), + ], + external: ['react'], + }, + { + input: 'src/index.tsx', + output: [ + { file: 'dist/react-json-tree.cjs.js', format: 'cjs' }, + { file: 'dist/react-json-tree.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', + ], + }, +]; + +export default config; diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 8b66feae..c422b9ce 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -102,7 +102,7 @@ function getStateFromProps(props: Props) { }; } -export default class JSONTree extends React.Component { +export class JSONTree extends React.Component { static propTypes = { data: PropTypes.any, hideRoot: PropTypes.bool, diff --git a/packages/react-json-tree/test/index.spec.tsx b/packages/react-json-tree/test/index.spec.tsx index 8e3d01ba..99661291 100644 --- a/packages/react-json-tree/test/index.spec.tsx +++ b/packages/react-json-tree/test/index.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { createRenderer } from 'react-test-renderer/shallow'; -import JSONTree from '../src/index'; +import { JSONTree } from '../src/index'; import JSONNode from '../src/JSONNode'; const BASIC_DATA = { a: 1, b: 'c' }; diff --git a/packages/react-json-tree/tsconfig.webpack.json b/packages/react-json-tree/tsconfig.webpack.json deleted file mode 100644 index 655c4644..00000000 --- a/packages/react-json-tree/tsconfig.webpack.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "include": ["webpack.config.umd.ts"] -} diff --git a/packages/react-json-tree/webpack.config.umd.ts b/packages/react-json-tree/webpack.config.umd.ts deleted file mode 100644 index 6e2fae59..00000000 --- a/packages/react-json-tree/webpack.config.umd.ts +++ /dev/null @@ -1,36 +0,0 @@ -import * as path from 'path'; -import * as webpack from 'webpack'; - -export default (env: { production?: boolean } = {}): webpack.Configuration => ({ - mode: env.production ? 'production' : 'development', - entry: { - app: ['./src/index'], - }, - output: { - library: 'ReactJsonTree', - libraryExport: 'default', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'umd'), - filename: env.production ? 'react-json-tree.min.js' : 'react-json-tree.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)x?$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - externals: { - react: { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react', - }, - }, -}); diff --git a/packages/redux-devtools-app/.babelrc b/packages/redux-devtools-app/.babelrc index 202d425a..814fca2b 100644 --- a/packages/redux-devtools-app/.babelrc +++ b/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"] } diff --git a/packages/redux-devtools-app/.eslintignore b/packages/redux-devtools-app/.eslintignore index 79681bfb..1521c8b7 100644 --- a/packages/redux-devtools-app/.eslintignore +++ b/packages/redux-devtools-app/.eslintignore @@ -1,2 +1 @@ -lib -umd +dist diff --git a/packages/redux-devtools-app/.eslintrc.js b/packages/redux-devtools-app/.eslintrc.js index 40d5bbf8..2bff2f8c 100644 --- a/packages/redux-devtools-app/.eslintrc.js +++ b/packages/redux-devtools-app/.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-app/demo/index.tsx b/packages/redux-devtools-app/demo/index.tsx index 6a350581..f95bc46a 100644 --- a/packages/redux-devtools-app/demo/index.tsx +++ b/packages/redux-devtools-app/demo/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { render } from 'react-dom'; -import App from '../src'; +import { Root } from '../src'; -render(, document.getElementById('root')); +render(, document.getElementById('root')); if (module.hot) { // https://github.com/webpack/webpack/issues/418#issuecomment-53398056 diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json index a1f8d267..218eff9d 100644 --- a/packages/redux-devtools-app/package.json +++ b/packages/redux-devtools-app/package.json @@ -9,25 +9,25 @@ "license": "MIT", "author": "Mihail Diordiev (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", diff --git a/packages/redux-devtools-app/rollup.config.js b/packages/redux-devtools-app/rollup.config.js new file mode 100644 index 00000000..68b64648 --- /dev/null +++ b/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; diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index fd6128d6..1debc8d3 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/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 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 { diff --git a/packages/redux-devtools-app/src/components/Settings/Connection.tsx b/packages/redux-devtools-app/src/components/Settings/Connection.tsx index 86981d1a..10190bba 100644 --- a/packages/redux-devtools-app/src/components/Settings/Connection.tsx +++ b/packages/redux-devtools-app/src/components/Settings/Connection.tsx @@ -8,7 +8,7 @@ import { } from 'json-schema'; import { ConnectionType, saveSocketSettings } from '../../actions'; import { StoreState } from '../../reducers'; -import { ConnectionOptions } from '../../reducers/connection'; +import { ConnectionStateOptions } from '../../reducers/connection'; import { IChangeEvent, ISubmitEvent } from '@rjsf/core'; declare module 'json-schema' { @@ -57,7 +57,7 @@ type StateProps = ReturnType; type DispatchProps = ResolveThunks; type Props = StateProps & DispatchProps; -interface FormData extends ConnectionOptions { +interface FormData extends ConnectionStateOptions { readonly type: ConnectionType; } diff --git a/packages/redux-devtools-app/src/components/Settings/Themes.tsx b/packages/redux-devtools-app/src/components/Settings/Themes.tsx index f4665719..4ff12a65 100644 --- a/packages/redux-devtools-app/src/components/Settings/Themes.tsx +++ b/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'; diff --git a/packages/redux-devtools-app/src/components/Settings/index.tsx b/packages/redux-devtools-app/src/components/Settings/index.tsx index e145b641..bdc8039c 100644 --- a/packages/redux-devtools-app/src/components/Settings/index.tsx +++ b/packages/redux-devtools-app/src/components/Settings/index.tsx @@ -8,7 +8,7 @@ interface State { } // eslint-disable-next-line @typescript-eslint/ban-types -class Settings extends Component<{}, State> { +export default class Settings extends Component<{}, State> { tabs = [ { name: 'Connection', component: Connection }, { name: 'Themes', component: Themes }, @@ -30,5 +30,3 @@ class Settings extends Component<{}, State> { ); } } - -export default Settings; diff --git a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx b/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx index 8ddabe14..b8a5a829 100644 --- a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx +++ b/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'; diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx index acda8bfc..f6e9d424 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx +++ b/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 { this.tabs = [ { name: 'Tree', - component: DiffTree, + component: DiffTab, selector: () => this.props, }, { @@ -66,7 +68,7 @@ class SubTabs extends Component { this.tabs = [ { name: 'Tree', - component: parentTab === 'Action' ? ActionTree : StateTree, + component: parentTab === 'Action' ? ActionTab : StateTab, selector: () => this.props, }, { diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx index c02d38f4..f9296bb9 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx +++ b/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 { Theme } from '@redux-devtools/ui/lib/themes/default'; +import { effects, Theme } from '@redux-devtools/ui'; export const StyledContainer = styled.div` .jsondiffpatch-delta { diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx index 135a75b1..d44e9caa 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx +++ b/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 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 = [ { diff --git a/packages/redux-devtools-app/src/containers/monitors/Slider.tsx b/packages/redux-devtools-app/src/containers/monitors/Slider.tsx index e744a879..852eb1b0 100644 --- a/packages/redux-devtools-app/src/containers/monitors/Slider.tsx +++ b/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'; diff --git a/packages/redux-devtools-app/src/index.tsx b/packages/redux-devtools-app/src/index.tsx index abb0fc56..42d6e026 100644 --- a/packages/redux-devtools-app/src/index.tsx +++ b/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 Root extends Component { store?: Store; persistor?: Persistor; @@ -39,4 +39,31 @@ class Root extends Component { } } -export default Root; +export * from './actions'; +export { default as DispatcherButton } from './components/buttons/DispatcherButton'; +export { default as ExportButton } from './components/buttons/ExportButton'; +export { default as ImportButton } from './components/buttons/ImportButton'; +export { default as PrintButton } from './components/buttons/PrintButton'; +export { default as SliderButton } from './components/buttons/SliderButton'; +export { default as Header } from './components/Header'; +export { default as MonitorSelector } from './components/MonitorSelector'; +export { default as Settings } from './components/Settings'; +export { default as TopButtons } from './components/TopButtons'; +export { default as DevTools } from './containers/DevTools'; +export { default as Dispatcher } from './containers/monitors/Dispatcher'; +export { default as SliderMonitor } from './containers/monitors/Slider'; +export * from './constants/actionTypes'; +export * from './constants/socketActionTypes'; +export * from './middlewares/api'; +export * from './middlewares/exportState'; +export * from './reducers'; +export * from './reducers/connection'; +export * from './reducers/instances'; +export * from './reducers/monitor'; +export * from './reducers/notification'; +export * from './reducers/reports'; +export * from './reducers/section'; +export * from './reducers/socket'; +export * from './reducers/theme'; +export * from './utils/monitorActions'; +export * from './utils/stringifyJSON'; diff --git a/packages/redux-devtools-app/src/middlewares/api.ts b/packages/redux-devtools-app/src/middlewares/api.ts index fb5ef85c..5c136dec 100644 --- a/packages/redux-devtools-app/src/middlewares/api.ts +++ b/packages/redux-devtools-app/src/middlewares/api.ts @@ -244,9 +244,7 @@ function getReport(reportId: unknown) { ); } -export default function api( - inStore: MiddlewareAPI, StoreState> -) { +export function api(inStore: MiddlewareAPI, StoreState>) { store = inStore; return (next: Dispatch) => (action: StoreAction) => { const result = next(action); diff --git a/packages/redux-devtools-app/src/middlewares/exportState.ts b/packages/redux-devtools-app/src/middlewares/exportState.ts index ffefe851..260de93b 100644 --- a/packages/redux-devtools-app/src/middlewares/exportState.ts +++ b/packages/redux-devtools-app/src/middlewares/exportState.ts @@ -1,4 +1,4 @@ -import stringifyJSON from '../utils/stringifyJSON'; +import { stringifyJSON } from '../utils/stringifyJSON'; import { UPDATE_STATE, LIFTED_ACTION, EXPORT } from '../constants/actionTypes'; import { getActiveInstance } from '../reducers/instances'; import { Dispatch, MiddlewareAPI } from 'redux'; @@ -22,7 +22,7 @@ function download(state: string) { }, 0); } -const exportState = +export const exportStateMiddleware = (store: MiddlewareAPI, StoreState>) => (next: Dispatch) => (action: StoreAction) => { @@ -63,5 +63,3 @@ const exportState = } return result; }; - -export default exportState; diff --git a/packages/redux-devtools-app/src/reducers/connection.ts b/packages/redux-devtools-app/src/reducers/connection.ts index d33bbb14..f12b0bb6 100644 --- a/packages/redux-devtools-app/src/reducers/connection.ts +++ b/packages/redux-devtools-app/src/reducers/connection.ts @@ -1,17 +1,17 @@ import { RECONNECT } from '../constants/socketActionTypes'; import { ConnectionType, StoreAction } from '../actions'; -export interface ConnectionOptions { +export interface ConnectionStateOptions { readonly hostname: string; readonly port: number; readonly secure: boolean; } export interface ConnectionState { - readonly options: ConnectionOptions; + readonly options: ConnectionStateOptions; readonly type: ConnectionType; } -export default function connection( +export function connection( state: ConnectionState = { options: { hostname: 'localhost', port: 8000, secure: false }, type: 'disabled', diff --git a/packages/redux-devtools-app/src/reducers/index.ts b/packages/redux-devtools-app/src/reducers/index.ts index 6b47effd..210b1c49 100644 --- a/packages/redux-devtools-app/src/reducers/index.ts +++ b/packages/redux-devtools-app/src/reducers/index.ts @@ -1,12 +1,12 @@ import { combineReducers } from 'redux'; -import section, { SectionState } from './section'; -import connection, { ConnectionState } from './connection'; -import socket, { SocketState } from './socket'; -import monitor, { MonitorState } from './monitor'; -import notification, { NotificationState } from './notification'; -import instances, { InstancesState } from './instances'; -import reports, { ReportsState } from './reports'; -import theme, { ThemeState } from './theme'; +import { section, SectionState } from './section'; +import { connection, ConnectionState } from './connection'; +import { socket, SocketState } from './socket'; +import { monitor, MonitorState } from './monitor'; +import { notification, NotificationState } from './notification'; +import { instances, InstancesState } from './instances'; +import { reports, ReportsState } from './reports'; +import { theme, ThemeState } from './theme'; import { StoreAction } from '../actions'; export interface StoreState { @@ -20,7 +20,7 @@ export interface StoreState { readonly notification: NotificationState; } -const rootReducer = combineReducers({ +export const rootReducer = combineReducers({ section, theme, connection, @@ -30,5 +30,3 @@ const rootReducer = combineReducers({ reports, notification, }); - -export default rootReducer; diff --git a/packages/redux-devtools-app/src/reducers/instances.ts b/packages/redux-devtools-app/src/reducers/instances.ts index 521e1928..8e107d8a 100644 --- a/packages/redux-devtools-app/src/reducers/instances.ts +++ b/packages/redux-devtools-app/src/reducers/instances.ts @@ -66,7 +66,7 @@ export interface InstancesState { persisted?: boolean; } -export const initialState: InstancesState = { +export const instancesInitialState: InstancesState = { selected: null, current: 'default', sync: false, @@ -303,8 +303,8 @@ function init( }; } -export default function instances( - state = initialState, +export function instances( + state = instancesInitialState, action: StoreAction ): InstancesState { switch (action.type) { @@ -375,7 +375,7 @@ export default function instances( return state; } case DISCONNECTED: - return initialState; + return instancesInitialState; default: return state; } diff --git a/packages/redux-devtools-app/src/reducers/monitor.ts b/packages/redux-devtools-app/src/reducers/monitor.ts index be478fb1..da174f37 100644 --- a/packages/redux-devtools-app/src/reducers/monitor.ts +++ b/packages/redux-devtools-app/src/reducers/monitor.ts @@ -45,7 +45,7 @@ export function dispatchMonitorAction( }; } -export default function monitor( +export function monitor( state = initialState, action: StoreAction ): MonitorState { diff --git a/packages/redux-devtools-app/src/reducers/notification.ts b/packages/redux-devtools-app/src/reducers/notification.ts index c42e1ee9..0794967c 100644 --- a/packages/redux-devtools-app/src/reducers/notification.ts +++ b/packages/redux-devtools-app/src/reducers/notification.ts @@ -12,7 +12,7 @@ interface Notification { } export type NotificationState = Notification | null; -export default function notification( +export function notification( state: NotificationState = null, action: StoreAction ): NotificationState { diff --git a/packages/redux-devtools-app/src/reducers/reports.ts b/packages/redux-devtools-app/src/reducers/reports.ts index ffd13534..cfb5d014 100644 --- a/packages/redux-devtools-app/src/reducers/reports.ts +++ b/packages/redux-devtools-app/src/reducers/reports.ts @@ -15,7 +15,7 @@ const initialState: ReportsState = { data: [], }; -export default function reports( +export function reports( state = initialState, action: StoreAction ): ReportsState { diff --git a/packages/redux-devtools-app/src/reducers/section.ts b/packages/redux-devtools-app/src/reducers/section.ts index 3497384f..1f8ead5f 100644 --- a/packages/redux-devtools-app/src/reducers/section.ts +++ b/packages/redux-devtools-app/src/reducers/section.ts @@ -3,7 +3,7 @@ import { StoreAction } from '../actions'; export type SectionState = string; -export default function section(state = 'Actions', action: StoreAction) { +export function section(state = 'Actions', action: StoreAction) { if (action.type === CHANGE_SECTION) { return action.section; } diff --git a/packages/redux-devtools-app/src/reducers/socket.ts b/packages/redux-devtools-app/src/reducers/socket.ts index ae8fc1b3..cc7e4386 100644 --- a/packages/redux-devtools-app/src/reducers/socket.ts +++ b/packages/redux-devtools-app/src/reducers/socket.ts @@ -20,10 +20,7 @@ const initialState: SocketState = { error: undefined, }; -export default function socket( - state = initialState, - action: StoreAction -): SocketState { +export function socket(state = initialState, action: StoreAction): SocketState { switch (action.type) { case actions.CONNECT_REQUEST: { return { diff --git a/packages/redux-devtools-app/src/reducers/theme.ts b/packages/redux-devtools-app/src/reducers/theme.ts index f4f10e58..a6726ef9 100644 --- a/packages/redux-devtools-app/src/reducers/theme.ts +++ b/packages/redux-devtools-app/src/reducers/theme.ts @@ -1,14 +1,14 @@ -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'; } -export default function theme( +export function theme( state: ThemeState = { theme: 'default', scheme: 'default', diff --git a/packages/redux-devtools-app/src/store/configureStore.ts b/packages/redux-devtools-app/src/store/configureStore.ts index 8d87a096..f44ee867 100644 --- a/packages/redux-devtools-app/src/store/configureStore.ts +++ b/packages/redux-devtools-app/src/store/configureStore.ts @@ -1,9 +1,9 @@ import { createStore, compose, applyMiddleware, Reducer, Store } from 'redux'; import localForage from 'localforage'; import { persistReducer, persistStore } from 'redux-persist'; -import api from '../middlewares/api'; -import exportState from '../middlewares/exportState'; -import rootReducer, { StoreState } from '../reducers'; +import { api } from '../middlewares/api'; +import { exportStateMiddleware } from '../middlewares/exportState'; +import { rootReducer, StoreState } from '../reducers'; import { StoreAction } from '../actions'; const persistConfig = { @@ -47,7 +47,7 @@ export default function configureStore( const store = createStore( persistedReducer, - composeEnhancers(applyMiddleware(exportState, api)) + composeEnhancers(applyMiddleware(exportStateMiddleware, api)) ); const persistor = persistStore(store, null, () => { callback(store); diff --git a/packages/redux-devtools-app/src/utils/getMonitor.tsx b/packages/redux-devtools-app/src/utils/getMonitor.tsx index e3265f2e..1e707343 100644 --- a/packages/redux-devtools-app/src/utils/getMonitor.tsx +++ b/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' }, diff --git a/packages/redux-devtools-app/src/utils/monitorActions.ts b/packages/redux-devtools-app/src/utils/monitorActions.ts index d2832bd9..f7336d6c 100644 --- a/packages/redux-devtools-app/src/utils/monitorActions.ts +++ b/packages/redux-devtools-app/src/utils/monitorActions.ts @@ -1,6 +1,6 @@ import difference from 'lodash/difference'; import omit from 'lodash/omit'; -import stringifyJSON from './stringifyJSON'; +import { stringifyJSON } from './stringifyJSON'; import { SET_STATE } from '../constants/actionTypes'; import { InstancesState, State } from '../reducers/instances'; import { Dispatch, MiddlewareAPI } from 'redux'; diff --git a/packages/redux-devtools-app/src/utils/stringifyJSON.ts b/packages/redux-devtools-app/src/utils/stringifyJSON.ts index 47c100ba..fea0fcab 100644 --- a/packages/redux-devtools-app/src/utils/stringifyJSON.ts +++ b/packages/redux-devtools-app/src/utils/stringifyJSON.ts @@ -14,10 +14,7 @@ function replacer(key: string, value: unknown) { return value; } -export default function stringifyJSON( - data: unknown, - serialize: boolean | undefined -) { +export function stringifyJSON(data: unknown, serialize: boolean | undefined) { return serialize ? jsan.stringify(data, replacer, null as unknown as undefined, true) : jsan.stringify(data); diff --git a/packages/redux-devtools-app/test/app.spec.tsx b/packages/redux-devtools-app/test/app.spec.tsx index c5e7f14a..d50ca875 100644 --- a/packages/redux-devtools-app/test/app.spec.tsx +++ b/packages/redux-devtools-app/test/app.spec.tsx @@ -3,11 +3,11 @@ import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import { render, screen, within } from '@testing-library/react'; import App from '../src/containers/App'; -import api from '../src/middlewares/api'; -import exportState from '../src/middlewares/exportState'; -import rootReducer from '../src/reducers'; +import { api } from '../src/middlewares/api'; +import { exportStateMiddleware } from '../src/middlewares/exportState'; +import { rootReducer } from '../src/reducers'; import { DATA_TYPE_KEY } from '../src/constants/dataTypes'; -import stringifyJSON from '../src/utils/stringifyJSON'; +import { stringifyJSON } from '../src/utils/stringifyJSON'; Object.defineProperty(window, 'matchMedia', { writable: true, @@ -23,7 +23,10 @@ Object.defineProperty(window, 'matchMedia', { })), }); -const store = createStore(rootReducer, applyMiddleware(exportState, api)); +const store = createStore( + rootReducer, + applyMiddleware(exportStateMiddleware, api) +); describe('App container', () => { it("should render inspector monitor's wrapper", () => { diff --git a/packages/redux-devtools-app/webpack.config.umd.ts b/packages/redux-devtools-app/webpack.config.umd.ts index 843f7c09..84baa632 100644 --- a/packages/redux-devtools-app/webpack.config.umd.ts +++ b/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', - libraryExport: 'default', + library: 'ReduxDevToolsApp', + libraryExport: 'Root', libraryTarget: 'umd', path: path.resolve(__dirname, 'umd'), filename: env.production diff --git a/packages/redux-devtools-chart-monitor/.babelrc b/packages/redux-devtools-chart-monitor/.babelrc index 202d425a..814fca2b 100644 --- a/packages/redux-devtools-chart-monitor/.babelrc +++ b/packages/redux-devtools-chart-monitor/.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"] } diff --git a/packages/redux-devtools-chart-monitor/.eslintignore b/packages/redux-devtools-chart-monitor/.eslintignore index a65b4177..1521c8b7 100644 --- a/packages/redux-devtools-chart-monitor/.eslintignore +++ b/packages/redux-devtools-chart-monitor/.eslintignore @@ -1 +1 @@ -lib +dist diff --git a/packages/redux-devtools-chart-monitor/.eslintrc.js b/packages/redux-devtools-chart-monitor/.eslintrc.js index 555b727d..87abc2e1 100644 --- a/packages/redux-devtools-chart-monitor/.eslintrc.js +++ b/packages/redux-devtools-chart-monitor/.eslintrc.js @@ -1,7 +1,13 @@ 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'], + }, + }, + ], }; diff --git a/packages/redux-devtools-chart-monitor/README.md b/packages/redux-devtools-chart-monitor/README.md index d09c0a2e..6c6006db 100644 --- a/packages/redux-devtools-chart-monitor/README.md +++ b/packages/redux-devtools-chart-monitor/README.md @@ -27,7 +27,7 @@ You can use `ChartMonitor` as the only monitor in your app: ```js import React from 'react'; import { createDevTools } from '@redux-devtools/core'; -import ChartMonitor from '@redux-devtools/chart-monitor'; +import { ChartMonitor } from '@redux-devtools/chart-monitor'; export default createDevTools(); ``` diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json index 186ead2e..4ebde0cc 100644 --- a/packages/redux-devtools-chart-monitor/package.json +++ b/packages/redux-devtools-chart-monitor/package.json @@ -16,26 +16,26 @@ "license": "MIT", "author": "romseguy", "files": [ - "lib", + "dist", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/redux-devtools-chart-monitor.cjs.js", + "module": "dist/redux-devtools-chart-monitor.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", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit", "prepack": "yarn run clean && yarn run build", "prepublish": "yarn run type-check && yarn run lint" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@types/prop-types": "^15.7.4", "@types/redux-devtools-themes": "^1.0.0", "d3-state-visualizer": "^1.4.2", @@ -44,12 +44,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/react": "^17.0.38", "@typescript-eslint/eslint-plugin": "^5.8.1", "@typescript-eslint/parser": "^5.8.1", @@ -60,6 +62,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-chart-monitor/rollup.config.js b/packages/redux-devtools-chart-monitor/rollup.config.js new file mode 100644 index 00000000..df8092dc --- /dev/null +++ b/packages/redux-devtools-chart-monitor/rollup.config.js @@ -0,0 +1,31 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from '@rollup/plugin-babel'; + +const config = [ + { + input: 'src/index.ts', + output: [ + { file: 'dist/redux-devtools-chart-monitor.cjs.js', format: 'cjs' }, + { file: 'dist/redux-devtools-chart-monitor.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-themes', + '@redux-devtools/core', + 'deepmerge', + 'd3-state-visualizer', + ], + }, +]; + +export default config; diff --git a/packages/redux-devtools-chart-monitor/src/Chart.tsx b/packages/redux-devtools-chart-monitor/src/Chart.tsx index 20a90ce8..aa75a733 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.tsx +++ b/packages/redux-devtools-chart-monitor/src/Chart.tsx @@ -1,14 +1,10 @@ import React, { Component, createRef } from 'react'; import PropTypes from 'prop-types'; -import { tree } from 'd3-state-visualizer'; +import { tree, NodeWithId, Primitive } from 'd3-state-visualizer'; import { Action, Dispatch } from 'redux'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; import * as themes from 'redux-devtools-themes'; import { ChartMonitorState } from './reducers'; -import { - NodeWithId, - Primitive, -} from 'd3-state-visualizer/lib/charts/tree/tree'; const wrapperStyle = { width: '100%', diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx index 91e50c13..18eb4feb 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx +++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx @@ -8,13 +8,10 @@ import { } from '@redux-devtools/core'; import deepmerge from 'deepmerge'; import { Action, Dispatch } from 'redux'; +import { NodeWithId, Primitive } from 'd3-state-visualizer'; import reducer, { ChartMonitorState } from './reducers'; import Chart, { Props } from './Chart'; -import { - NodeWithId, - Primitive, -} from 'd3-state-visualizer/lib/charts/tree/tree'; // eslint-disable-next-line @typescript-eslint/unbound-method const { reset, rollback, commit, sweep, toggleAction } = ActionCreators; diff --git a/packages/redux-devtools-chart-monitor/src/index.ts b/packages/redux-devtools-chart-monitor/src/index.ts index c1fa1959..2184de9f 100644 --- a/packages/redux-devtools-chart-monitor/src/index.ts +++ b/packages/redux-devtools-chart-monitor/src/index.ts @@ -1 +1 @@ -export { default } from './ChartMonitor'; +export { default as ChartMonitor } from './ChartMonitor'; diff --git a/packages/redux-devtools-cli/app/index.html b/packages/redux-devtools-cli/app/index.html index 13dd934a..1c8ee65d 100644 --- a/packages/redux-devtools-cli/app/index.html +++ b/packages/redux-devtools-cli/app/index.html @@ -32,7 +32,7 @@