Refactor extension directory structure (#1248)

* Move background to top-level

* Move devpanel to top-level

* Move devtools to top-level

* Move options to top-level

* Move window to top-level

* Move chromeApiMock to top-level

* Move manifests to top-level

* Move contentScript to top-level

* Move pageScript to top-level

* Update tests

* Update Webpack config

* Fix path

extension/src/app/Actions.tsx

@@ -19,8 +19,8 @@ import {
 } 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';
+import type { Position } from '../pageScript/api/openWindow';
+import type { SingleMessage } from '../background/store/apiMiddleware';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;

extension/src/app/stores/createStore.ts

@@ -1,15 +0,0 @@
-import {
-  Action,
-  createStore,
-  PreloadedState,
-  Reducer,
-  StoreEnhancer,
-} from 'redux';
-
-export default function configureStore<S, A extends Action<unknown>>(
-  reducer: Reducer<S, A>,
-  initialState: PreloadedState<S> | undefined,
-  enhance: () => StoreEnhancer
-) {
-  return createStore(reducer, initialState, enhance());
-}

extension/src/background/index.ts

@@ -1,11 +1,9 @@
 import { Store } from 'redux';
-import configureStore, {
-  BackgroundAction,
-} from '../../../app/stores/backgroundStore';
+import configureStore, { BackgroundAction } from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';
 import syncOptions from '../options/syncOptions';
-import { BackgroundState } from '../../../app/reducers/background';
+import { BackgroundState } from './store/backgroundReducer';
 
 declare global {
   interface Window {

extension/src/background/store/apiMiddleware.ts

@@ -15,28 +15,23 @@ import syncOptions, {
   Options,
   OptionsMessage,
   SyncOptions,
-} from '../../browser/extension/options/syncOptions';
-import openDevToolsWindow, {
-  DevToolsPosition,
-} from '../../browser/extension/background/openWindow';
-import { getReport } from '../../browser/extension/background/logging';
+} from '../../options/syncOptions';
+import openDevToolsWindow, { DevToolsPosition } from '../openWindow';
+import { getReport } from '../logging';
 import { Action, Dispatch, MiddlewareAPI } from 'redux';
-import {
+import type {
   ContentScriptToBackgroundMessage,
   SplitMessage,
-} from '../../browser/extension/inject/contentScript';
-import {
+} from '../../contentScript';
+import type {
   ErrorMessage,
   PageScriptToContentScriptMessageForwardedToMonitors,
   PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,
-} from '../api';
+} from '../../pageScript/api';
 import { LiftedState } from '@redux-devtools/instrument';
-import {
-  BackgroundAction,
-  LiftedActionAction,
-} from '../stores/backgroundStore';
-import { Position } from '../api/openWindow';
-import { BackgroundState } from '../reducers/background';
+import type { BackgroundAction, LiftedActionAction } from './backgroundStore';
+import type { Position } from '../../pageScript/api/openWindow';
+import type { BackgroundState } from './backgroundReducer';
 
 interface TabMessageBase {
   readonly type: string;

extension/src/background/store/backgroundReducer.ts

@@ -1,6 +1,6 @@
 import { combineReducers, Reducer } from 'redux';
 import { instances, InstancesState } from '@redux-devtools/app';
-import { BackgroundAction } from '../../stores/backgroundStore';
+import type { BackgroundAction } from './backgroundStore';
 
 export interface BackgroundState {
   readonly instances: InstancesState;

extension/src/background/store/backgroundStore.ts

@@ -5,8 +5,8 @@ import {
   LIFTED_ACTION,
   StoreActionWithoutLiftedAction,
 } from '@redux-devtools/app';
-import rootReducer, { BackgroundState } from '../reducers/background';
-import api, { CONNECTED, DISCONNECTED } from '../middlewares/api';
+import rootReducer, { BackgroundState } from './backgroundReducer';
+import api, { CONNECTED, DISCONNECTED } from './apiMiddleware';
 
 interface LiftedActionActionBase {
   action?: DispatchAction | string | CustomAction;

extension/src/contentScript/index.ts

@@ -3,12 +3,12 @@ import {
   getOptionsFromBg,
   isAllowed,
 } from '../options/syncOptions';
-import { TabMessage } from '../../../app/middlewares/api';
-import {
+import type { TabMessage } from '../background/store/apiMiddleware';
+import type {
   PageScriptToContentScriptMessage,
   PageScriptToContentScriptMessageWithoutDisconnect,
   PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,
-} from '../../../app/api';
+} from '../pageScript/api';
 import { Action } from 'redux';
 import {
   CustomAction,

extension/src/devpanel/devpanel.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title Redux DevTools
-  include ./includes/style.pug
+  include ../style.pug
   style.
     body {
       min-height: 100px;

extension/src/devpanel/index.tsx

@@ -3,13 +3,13 @@ import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Persistor } from 'redux-persist';
 import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
-import App from '../../../app/containers/App';
-import configureStore from '../../../app/stores/panelStore';
+import App from '../app/App';
+import configureStore from './store/panelStore';
 
-import '../../views/devpanel.pug';
+import './devpanel.pug';
 import { Action, Store } from 'redux';
-import { PanelMessage } from '../../../app/middlewares/api';
-import { StoreStateWithoutSocket } from '../../../app/reducers/panel';
+import type { PanelMessage } from '../background/store/apiMiddleware';
+import type { StoreStateWithoutSocket } from './store/panelReducer';
 import { PersistGate } from 'redux-persist/integration/react';
 
 const position = location.hash;

extension/src/devpanel/store/panelStore.ts

@@ -2,8 +2,8 @@ import { createStore, applyMiddleware, Reducer } from 'redux';
 import localForage from 'localforage';
 import { persistReducer, persistStore } from 'redux-persist';
 import { exportStateMiddleware, StoreAction } from '@redux-devtools/app';
-import panelDispatcher from '../middlewares/panelSync';
-import rootReducer, { StoreStateWithoutSocket } from '../reducers/panel';
+import panelDispatcher from './panelSyncMiddleware';
+import rootReducer, { StoreStateWithoutSocket } from './panelReducer';
 
 const persistConfig = {
   key: 'redux-devtools',

extension/src/devtools/index.ts

@@ -1,4 +1,4 @@
-import '../../views/devtools.pug';
+import './devtools.pug';
 
 function createPanel(url: string) {
   chrome.devtools.panels.create(

extension/src/options/FilterGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterState } from '../../../app/api/filters';
+import { FilterState } from '../pageScript/api/filters';
 import { OptionsProps } from './Options';
 
 export default ({ options, saveOption }: OptionsProps) => {

extension/src/options/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
-import '../../views/options.pug';
+import './options.pug';
 
 chrome.runtime.getBackgroundPage((background) => {
   const syncOptions = background!.syncOptions;

extension/src/options/syncOptions.ts

@@ -1,4 +1,4 @@
-import { FilterState, FilterStateValue } from '../../../app/api/filters';
+import { FilterState, FilterStateValue } from '../pageScript/api/filters';
 
 export interface Options {
   readonly useEditor: number;

extension/src/pageScript/api/importState.ts

@@ -1,9 +1,6 @@
 import jsan from 'jsan';
 import { immutableSerialize } from '@redux-devtools/serialize';
-import {
-  Config,
-  SerializeWithImmutable,
-} from '../../browser/extension/inject/pageScript';
+import type { Config, SerializeWithImmutable } from '../index';
 import Immutable from 'immutable';
 import { LiftedState } from '@redux-devtools/instrument';
 import { Action } from 'redux';

extension/src/pageScript/api/index.ts

@@ -5,15 +5,15 @@ 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 type { Config } from '../index';
 import { Action } from 'redux';
 import { LiftedState, PerformAction } from '@redux-devtools/instrument';
 import { LibConfig } from '@redux-devtools/app';
-import {
+import type {
   ContentScriptToPageScriptMessage,
   ListenerMessage,
-} from '../../browser/extension/inject/contentScript';
-import { Position } from './openWindow';
+} from '../../contentScript';
+import type { Position } from './openWindow';
 
 const listeners: {
   [instanceId: string]:

extension/src/pageScript/api/openWindow.ts

@@ -1,5 +1,5 @@
 import { Action } from 'redux';
-import { PageScriptToContentScriptMessage } from './index';
+import type { PageScriptToContentScriptMessage } from './index';
 
 export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
 

extension/src/pageScript/enhancerStore.ts

@@ -1,7 +1,7 @@
 import { Action, compose, Reducer, StoreEnhancerStoreCreator } from 'redux';
 import { instrument } from '@redux-devtools/instrument';
 import { persistState } from '@redux-devtools/core';
-import { ConfigWithExpandedMaxAge } from '../../browser/extension/inject/pageScript';
+import type { ConfigWithExpandedMaxAge } from './index';
 
 export function getUrlParam(key: string) {
   const matches = window.location.href.match(

extension/src/pageScript/index.ts

@@ -27,19 +27,19 @@ import {
   LibConfig,
   Features,
 } from '@redux-devtools/app';
-import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';
+import configureStore, { getUrlParam } from './enhancerStore';
 import { isAllowed, Options } from '../options/syncOptions';
-import Monitor from '../../../app/service/Monitor';
+import Monitor from './Monitor';
 import {
   noFiltersApplied,
   isFiltered,
   filterState,
   startingFrom,
-} from '../../../app/api/filters';
-import notifyErrors from '../../../app/api/notifyErrors';
-import importState from '../../../app/api/importState';
-import openWindow, { Position } from '../../../app/api/openWindow';
-import generateId from '../../../app/api/generateInstanceId';
+} from './api/filters';
+import notifyErrors from './api/notifyErrors';
+import importState from './api/importState';
+import openWindow, { Position } from './api/openWindow';
+import generateId from './api/generateInstanceId';
 import {
   toContentScript,
   sendMessage,
@@ -51,8 +51,8 @@ import {
   Serialize,
   StructuralPerformAction,
   ConnectResponse,
-} from '../../../app/api';
-import { ContentScriptToPageScriptMessage } from './contentScript';
+} from './api';
+import type { ContentScriptToPageScriptMessage } from '../contentScript';
 
 type EnhancedStoreWithInitialDispatch<
   S,

extension/src/remote/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
-import '../../views/remote.pug';
+import './remote.pug';
 
 chrome.storage.local.get(
   {

extension/src/remote/remote.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title RemoteDev
-  include ./includes/style.pug
+  include ../style.pug
 
   body
     #root

extension/src/window/index.tsx

@@ -3,11 +3,11 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 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';
+import App from '../app/App';
+import configureStore from './store/windowStore';
+import type { MonitorMessage } from '../background/store/apiMiddleware';
 
-import '../../views/window.pug';
+import './window.pug';
 
 const position = location.hash;
 

extension/src/window/store/instancesReducer.ts

@@ -6,10 +6,10 @@ import {
   LIFTED_ACTION,
   SET_PERSIST,
 } from '@redux-devtools/app';
-import {
+import type {
   ExpandedUpdateStateAction,
   WindowStoreAction,
-} from '../../stores/windowStore';
+} from './windowStore';
 
 export default function instances(
   state = instancesInitialState,

extension/src/window/store/windowReducer.ts

@@ -9,8 +9,8 @@ import {
   theme,
   StoreState,
 } from '@redux-devtools/app';
-import instances from './instances';
-import { WindowStoreAction } from '../../stores/windowStore';
+import instances from './instancesReducer';
+import type { WindowStoreAction } from './windowStore';
 
 const rootReducer: Reducer<StoreState, WindowStoreAction> =
   combineReducers<StoreState>({

extension/src/window/store/windowStore.ts

@@ -17,12 +17,15 @@ import {
   StoreState,
   UpdateStateAction,
 } 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 syncStores from './windowSyncMiddleware';
+import instanceSelector from './instanceSelectorMiddleware';
+import rootReducer from './windowReducer';
+import type { BackgroundState } from '../../background/store/backgroundReducer';
+import type { BackgroundAction } from '../../background/store/backgroundStore';
+import type {
+  EmptyUpdateStateAction,
+  NAAction,
+} from '../../background/store/apiMiddleware';
 
 export interface ExpandedUpdateStateAction extends UpdateStateAction {
   readonly instances: InstancesState;

extension/src/window/store/windowSyncMiddleware.ts

@@ -7,9 +7,9 @@ import {
   UPDATE_STATE,
 } from '@redux-devtools/app';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
-import { BackgroundState } from '../reducers/background';
-import { WindowStoreAction } from '../stores/windowStore';
-import { BackgroundAction } from '../stores/backgroundStore';
+import type { BackgroundState } from '../../background/store/backgroundReducer';
+import type { WindowStoreAction } from './windowStore';
+import type { BackgroundAction } from '../../background/store/backgroundStore';
 
 const syncStores =
   (baseStore: Store<BackgroundState, BackgroundAction>) =>

extension/src/window/window.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title Redux DevTools
-  include ./includes/style.pug
+  include ../style.pug
 
   body
     #root

extension/test/app/containers/App.spec.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import configureStore from '../../../src/app/stores/windowStore';
-import App from '../../../src/app/containers/App';
+import configureStore from '../../../src/window/store/windowStore';
+import App from '../../../src/app/App';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

extension/test/app/inject/api.spec.js

@@ -1,5 +1,5 @@
 import { insertScript, listenMessage } from '../../utils/inject';
-import '../../../src/browser/extension/inject/pageScript';
+import '../../../src/pageScript';
 
 describe('API', () => {
   it('should get window.__REDUX_DEVTOOLS_EXTENSION__ function', () => {

extension/test/app/inject/enhancer.spec.js

@@ -1,7 +1,7 @@
 import '@babel/polyfill';
 import { createStore, compose } from 'redux';
 import { insertScript, listenMessage } from '../../utils/inject';
-import '../../../src/browser/extension/inject/pageScript';
+import '../../../src/pageScript';
 
 function counter(state = 0, action) {
   switch (action.type) {

extension/webpack/base.config.js

@@ -3,21 +3,30 @@ import webpack from 'webpack';
 import CopyPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-const extpath = path.join(__dirname, '../src/browser/extension/');
-const mock = `${extpath}chromeAPIMock`;
-
 const baseConfig = (params) => ({
   // devtool: 'source-map',
   mode: params.mode,
   entry: params.input || {
-    background: [mock, `${extpath}background/index`],
-    options: [mock, `${extpath}options/index`],
-    window: [`${extpath}window/index`],
-    remote: [`${extpath}window/remote`],
-    devpanel: [mock, `${extpath}devpanel/index`],
-    devtools: [`${extpath}devtools/index`],
-    content: [mock, `${extpath}inject/contentScript`],
-    pagewrap: [`${extpath}inject/pageScriptWrap`],
+    background: [
+      path.resolve(__dirname, '../src/chromeApiMock'),
+      path.resolve(__dirname, '../src/background/index'),
+    ],
+    options: [
+      path.resolve(__dirname, '../src/chromeApiMock'),
+      path.resolve(__dirname, '../src/options/index'),
+    ],
+    window: [path.resolve(__dirname, '../src/window/index')],
+    remote: [path.resolve(__dirname, '../src/remote/index')],
+    devpanel: [
+      path.resolve(__dirname, '../src/chromeApiMock'),
+      path.resolve(__dirname, '../src/devpanel/index'),
+    ],
+    devtools: [path.resolve(__dirname, '../src/devtools/index')],
+    content: [
+      path.resolve(__dirname, '../src/chromeApiMock'),
+      path.resolve(__dirname, '../src/contentScript/index'),
+    ],
+    pagewrap: [path.resolve(__dirname, '../src/pageScriptWrap')],
     ...params.inputExtra,
   },
   output: {

extension/webpack/dev.config.babel.js

@@ -5,7 +5,7 @@ import baseConfig from './base.config';
 let config = baseConfig({
   mode: 'development',
   inputExtra: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
+    page: [path.join(__dirname, '../src/pageScript')],
   },
   output: { path: path.join(__dirname, '../dev') },
   globals: {
@@ -15,10 +15,7 @@ let config = baseConfig({
   },
   plugins: [new webpack.NoEmitOnErrorsPlugin()],
   copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/extension/manifest.json'
-  ),
+  manifestJsonPath: path.join(__dirname, '../chrome/manifest.json'),
 });
 
 config.watch = true;

extension/webpack/prod.config.babel.js

@@ -4,7 +4,7 @@ import baseConfig from './base.config';
 export default baseConfig({
   mode: 'production',
   inputExtra: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
+    page: [path.join(__dirname, '../src/pageScript')],
   },
   output: { path: path.join(__dirname, '../build/extension') },
   globals: {
@@ -13,8 +13,5 @@ export default baseConfig({
     },
   },
   copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/extension/manifest.json'
-  ),
+  manifestJsonPath: path.join(__dirname, '../chrome/manifest.json'),
 });

extension/webpack/prod.firefox.config.babel.js

@@ -10,8 +10,5 @@ export default baseConfig({
     },
   },
   copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/firefox/manifest.json'
-  ),
+  manifestJsonPath: path.join(__dirname, '../firefox/manifest.json'),
 });

extension/webpack/wrap.config.babel.js

@@ -4,7 +4,7 @@ import baseConfig from './base.config';
 export default baseConfig({
   mode: 'production',
   input: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
+    page: [path.join(__dirname, '../src/pageScript')],
   },
   output: { path: path.join(__dirname, '../build/tmp') },
   globals: {