Fix extension build

2025-07-22 22:19:48 +03:00 · 2022-01-10 00:20:22 -05:00 · 2022-01-10 00:20:22 -05:00 · 8cdb8c3298
commit 8cdb8c3298
parent e6edc33b22
43 changed files with 191 additions and 179 deletions
--- 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'
--- 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<S, A extends Action<unknown>>(
      parse = (v) =>
        jsan.parse(
          v,
-          seralizeImmutable(
+          immutableSerialize(
            serialize.immutable,
            serialize.refs,
            serialize.replacer,
--- 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,
--- 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';

--- 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<typeof mapStateToProps>;
--- 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,
--- 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,
--- 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;
--- 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 =
--- 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 {
--- 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;
--- 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<StoreState, WindowStoreAction> =
--- 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) {
--- 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 {
--- 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;
--- 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) {
--- 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 };
--- 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);
--- 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,
--- 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';
--- 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';
--- 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,
--- 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';
--- 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(
      <AppAsAny
        selectMonitor={options['select-monitor']}
--- 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;
--- a/packages/redux-devtools-app/src/index.tsx
+++ b/packages/redux-devtools-app/src/index.tsx
@ -38,3 +38,32 @@ export class Root extends Component {
    );
  }
 }
+
+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';
--- 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<Dispatch<StoreAction>, StoreState>
-) {
+export function api(inStore: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) {
  store = inStore;
  return (next: Dispatch<StoreAction>) => (action: StoreAction) => {
    const result = next(action);
--- 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<Dispatch<StoreAction>, StoreState>) =>
  (next: Dispatch<StoreAction>) =>
  (action: StoreAction) => {
@ -63,5 +63,3 @@ const exportState =
    }
    return result;
  };
-
-export default exportState;
--- 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',
--- 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<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;
--- 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;
  }
--- 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 {
--- 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 {
--- 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 {
--- 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;
  }
--- 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 {
--- a/packages/redux-devtools-app/src/reducers/theme.ts
+++ b/packages/redux-devtools-app/src/reducers/theme.ts
@ -8,7 +8,7 @@ export interface ThemeState {
  readonly colorPreference: 'auto' | 'light' | 'dark';
 }

-export default function theme(
+export function theme(
  state: ThemeState = {
    theme: 'default',
    scheme: 'default',
--- 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);
--- 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';
--- 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);
--- a/packages/redux-devtools-extension/rollup.config.js
+++ b/packages/redux-devtools-extension/rollup.config.js
@ -22,7 +22,7 @@ const config = [
        plugins: ['@babel/plugin-transform-runtime'],
      }),
    ],
-    external: [/@babel\/runtime/],
+    external: [/@babel\/runtime/, 'redux'],
  },
 ];

--- a/packages/redux-devtools-serialize/rollup.config.js
+++ b/packages/redux-devtools-serialize/rollup.config.js
@ -6,11 +6,11 @@ const config = [
    input: 'src/index.ts',
    output: [
      {
-        file: 'dist/redux-devtools-log-monitor.cjs.js',
+        file: 'dist/redux-devtools-serialize.cjs.js',
        format: 'cjs',
      },
      {
-        file: 'dist/redux-devtools-log-monitor.esm.js',
+        file: 'dist/redux-devtools-serialize.esm.js',
        format: 'esm',
      },
    ],
--- a/packages/redux-devtools-utils/rollup.config.js
+++ b/packages/redux-devtools-utils/rollup.config.js
@ -6,11 +6,11 @@ const config = [
    input: 'src/index.ts',
    output: [
      {
-        file: 'dist/redux-devtools-serialize.cjs.js',
+        file: 'dist/redux-devtools-utils.cjs.js',
        format: 'cjs',
      },
      {
-        file: 'dist/redux-devtools-serialize.esm.js',
+        file: 'dist/redux-devtools-utils.esm.js',
        format: 'esm',
      },
    ],