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

@@ -0,0 +1,3 @@
+{
+  "parser": "@babel/eslint-parser"
+}

extension/SUMMARY.md

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

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'

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<S, A extends Action<unknown>>(
       parse = (v) =>
         jsan.parse(
           v,
-          seralizeImmutable(
+          immutableSerialize(
             serialize.immutable,
             serialize.refs,
             serialize.replacer,

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,

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

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<typeof mapStateToProps>;

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,

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,

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;

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 =

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 {

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;

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<StoreState, WindowStoreAction> =

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) {

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 {

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;

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) {

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

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

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,

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

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

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,

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

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(
       <AppAsAny
         selectMonitor={options['select-monitor']}

extension/webpack/base.config.js

@@ -52,9 +52,6 @@ const baseConfig = (params) => ({
         })
       : []
   ),
-  optimization: {
-    minimize: false,
-  },
   performance: {
     hints: false,
   },

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",

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"]
 }

packages/d3-state-visualizer/.eslintignore

@@ -1,3 +1,2 @@
 examples
-lib
 dist

packages/d3-state-visualizer/.eslintrc.js

@@ -1,17 +1,13 @@
 module.exports = {
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts'],
       extends: '../../eslintrc.ts.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
-  overrides: [
-    {
-      files: ['webpack.config.umd.ts'],
-      extends: '../../eslintrc.ts.base.json',
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./tsconfig.webpack.json'],
-      },
     },
   ],
 };

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"
   }
 }

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;

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

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<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
+          tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
             .text((d, i) => getTooltipString(d, i, tooltipOptions))
             .style(tooltipOptions.style)
         );

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

packages/d3-state-visualizer/tsconfig.webpack.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["webpack.config.umd.ts"]
-}

packages/d3-state-visualizer/webpack.config.umd.ts

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

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"]
 }

packages/d3tooltip/.eslintignore

@@ -1,3 +1 @@
-examples
-lib
 dist

packages/d3tooltip/.eslintrc.js

@@ -1,17 +1,13 @@
 module.exports = {
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts'],
       extends: '../../eslintrc.ts.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
-  overrides: [
-    {
-      files: ['webpack.config.umd.ts'],
-      extends: '../../eslintrc.ts.base.json',
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./tsconfig.webpack.json'],
-      },
     },
   ],
 };

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

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",

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;

packages/d3tooltip/src/index.ts

@@ -49,7 +49,7 @@ interface Tip<Datum> {
   ) => this;
 }
 
-export default function tooltip<Datum>(
+export function tooltip<Datum>(
   d3: typeof d3Package,
   className = 'tooltip',
   options: Partial<Options<Datum>> = {}

packages/d3tooltip/tsconfig.webpack.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["webpack.config.umd.ts"]
-}

packages/d3tooltip/webpack.config.umd.ts

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

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"]
 }

packages/map2tree/.eslintignore

@@ -1,3 +1 @@
-examples
-lib
 dist

packages/map2tree/.eslintrc.js

@@ -1,10 +1,14 @@
 module.exports = {
-  extends: '../../eslintrc.ts.base.json',
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: '../../eslintrc.ts.jest.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+        project: ['./test/tsconfig.json'],
+      },
     },
-  overrides: [
     {
       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'],
-      },
-    },
   ],
 };

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"
   }
 }

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;

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' } = {},

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', () => {

packages/map2tree/tsconfig.webpack.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["webpack.config.umd.ts"]
-}

packages/map2tree/webpack.config.umd.ts

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

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"]
 }

packages/react-base16-styling/.eslintignore

@@ -1 +1 @@
-lib
+dist

packages/react-base16-styling/.eslintrc.js

@@ -1,10 +1,14 @@
 module.exports = {
-  extends: '../../eslintrc.ts.base.json',
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: '../../eslintrc.ts.jest.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+        project: ['./test/tsconfig.json'],
+      },
     },
-  overrides: [
     {
       files: ['test/**/*.ts'],
       extends: '../../eslintrc.ts.jest.base.json',

packages/react-base16-styling/package.json

@@ -15,20 +15,19 @@
   "license": "MIT",
   "author": "Alexander <alexkuz@gmail.com> (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"
   }
 }

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;

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"]
 }

packages/react-dock/.eslintignore

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

packages/react-dock/.eslintrc.js

@@ -1,10 +1,14 @@
 module.exports = {
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
       extends: '../../eslintrc.ts.react.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
-  overrides: [
+    },
     {
       files: ['test/**/*.ts', 'test/**/*.tsx'],
       extends: '../../eslintrc.ts.react.jest.base.json',

packages/react-dock/package.json

@@ -15,20 +15,19 @@
   "license": "MIT",
   "author": "Alexander <alexkuz@gmail.com> (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": {

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;

packages/react-dock/src/index.ts

@@ -1,2 +1 @@
-import Dock from './Dock';
-export default Dock;
+export { default as Dock } from './Dock';

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"]
 }

packages/react-json-tree/.eslintignore

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

packages/react-json-tree/.eslintrc.js

@@ -1,10 +1,14 @@
 module.exports = {
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
       extends: '../../eslintrc.ts.react.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
-  overrides: [
+    },
     {
       files: ['test/**/*.ts', 'test/**/*.tsx'],
       extends: '../../eslintrc.ts.react.jest.base.json',

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

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

packages/react-json-tree/package.json

@@ -19,23 +19,20 @@
     "Mihail Diordiev <zalmoxisus@gmail.com> (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",

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;

packages/react-json-tree/src/index.tsx

@@ -102,7 +102,7 @@ function getStateFromProps(props: Props) {
   };
 }
 
-export default class JSONTree extends React.Component<Props, State> {
+export class JSONTree extends React.Component<Props, State> {
   static propTypes = {
     data: PropTypes.any,
     hideRoot: PropTypes.bool,

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

packages/react-json-tree/tsconfig.webpack.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["webpack.config.umd.ts"]
-}

packages/react-json-tree/webpack.config.umd.ts

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

packages/redux-devtools-app/.babelrc

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

packages/redux-devtools-app/.eslintignore

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

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

@@ -1,10 +1,14 @@
 module.exports = {
+  extends: '../../eslintrc.js.base.json',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
       extends: '../../eslintrc.ts.react.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
-  overrides: [
+    },
     {
       files: ['demo/**/*.ts', 'demo/**/*.tsx'],
       extends: '../../eslintrc.ts.react.base.json',

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(<App />, document.getElementById('root'));
+render(<Root />, document.getElementById('root'));
 
 if (module.hot) {
   // https://github.com/webpack/webpack/issues/418#issuecomment-53398056

packages/redux-devtools-app/package.json

@@ -9,25 +9,25 @@
   "license": "MIT",
   "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
   "files": [
+    "dist",
     "src",
-    "lib",
     "umd"
   ],
-  "main": "lib/index.js",
-  "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",

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

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

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

@@ -1,4 +1,4 @@
-import { Scheme, Theme } from '@redux-devtools/ui';
+import { SchemeName, ThemeName } from '@redux-devtools/ui';
 import { AuthStates, States } from 'socketcluster-client/lib/scclientsocket';
 import {
   CHANGE_SECTION,
@@ -64,8 +64,8 @@ export function changeSection(section: string): ChangeSectionAction {
 }
 
 interface ChangeThemeFormData {
-  readonly theme: Theme;
-  readonly 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 {

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<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;
 type Props = StateProps & DispatchProps;
 
-interface FormData extends ConnectionOptions {
+interface FormData extends ConnectionStateOptions {
   readonly type: ConnectionType;
 }
 

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

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

packages/redux-devtools-app/src/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;

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

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

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

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

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

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

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

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

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

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

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

@@ -9,7 +9,7 @@ import App from './containers/App';
 import { StoreState } from './reducers';
 import { StoreAction } from './actions';
 
-class Root extends Component {
+export class Root extends Component {
   store?: Store<StoreState, StoreAction>;
   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';

packages/redux-devtools-app/src/middlewares/api.ts

@@ -244,9 +244,7 @@ function getReport(reportId: unknown) {
   );
 }
 
-export default function api(
-  inStore: MiddlewareAPI<Dispatch<StoreAction>, StoreState>
-) {
+export function api(inStore: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) {
   store = inStore;
   return (next: Dispatch<StoreAction>) => (action: StoreAction) => {
     const result = next(action);

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<Dispatch<StoreAction>, StoreState>) =>
   (next: Dispatch<StoreAction>) =>
   (action: StoreAction) => {
@@ -63,5 +63,3 @@ const exportState =
     }
     return result;
   };
-
-export default exportState;

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

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<StoreState, StoreAction>({
+export const rootReducer = combineReducers<StoreState, StoreAction>({
   section,
   theme,
   connection,
@@ -30,5 +30,3 @@ const rootReducer = combineReducers<StoreState, StoreAction>({
   reports,
   notification,
 });
-
-export default rootReducer;

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

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 {