fix(extension): fix types (#822)

extension/src/app/reducers/panel/index.ts

@@ -1,23 +1,46 @@
 import { combineReducers, Reducer } from 'redux';
-import instances from '@redux-devtools/app/lib/reducers/instances';
-import monitor from '@redux-devtools/app/lib/reducers/monitor';
-import notification from '@redux-devtools/app/lib/reducers/notification';
-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 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, {
+  ConnectionState,
+} from '@redux-devtools/app/lib/reducers/connection';
 import { StoreActionWithTogglePersist } from '../../stores/windowStore';
 
-const rootReducer: Reducer<StoreState, StoreActionWithTogglePersist> =
-  combineReducers<StoreState>({
-    instances,
-    monitor,
-    reports,
-    notification,
-    section,
-    theme,
-    connection,
-  });
+export interface StoreStateWithoutSocket {
+  readonly section: SectionState;
+  readonly theme: ThemeState;
+  readonly connection: ConnectionState;
+  readonly monitor: MonitorState;
+  readonly instances: InstancesState;
+  readonly reports: ReportsState;
+  readonly notification: NotificationState;
+}
+
+const rootReducer: Reducer<
+  StoreStateWithoutSocket,
+  StoreActionWithTogglePersist
+> = combineReducers<StoreStateWithoutSocket>({
+  instances,
+  monitor,
+  reports,
+  notification,
+  section,
+  theme,
+  connection,
+});
 
 export default rootReducer;

extension/src/browser/extension/background/contextMenus.ts

@@ -1,4 +1,4 @@
-import openDevToolsWindow from './openWindow';
+import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 
 export function createMenu() {
   const menus = [
@@ -33,5 +33,5 @@ export function removeMenu() {
 }
 
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
-  openDevToolsWindow(menuItemId);
+  openDevToolsWindow(menuItemId as DevToolsPosition);
 });

extension/src/browser/extension/devpanel/index.tsx

@@ -11,6 +11,7 @@ import { Action, PreloadedState, Store } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
 import { PanelMessage } from '../../../app/middlewares/api';
 import { StoreActionWithTogglePersist } from '../../../app/stores/windowStore';
+import { StoreStateWithoutSocket } from '../../../app/reducers/panel';
 
 const position = location.hash;
 const messageStyle: CSSProperties = {
@@ -20,7 +21,9 @@ const messageStyle: CSSProperties = {
 };
 
 let rendered: boolean | undefined;
-let store: Store<StoreState, StoreActionWithTogglePersist> | undefined;
+let store:
+  | Store<StoreStateWithoutSocket, StoreActionWithTogglePersist>
+  | undefined;
 let bgConnection: chrome.runtime.Port;
 let naTimeout: NodeJS.Timeout;
 let preloadedState: PreloadedState<StoreState>;

extension/webpack/base.config.js

@@ -1,6 +1,7 @@
 import path from 'path';
 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`;
@@ -31,7 +32,15 @@ const baseConfig = (params) => ({
   },
   plugins: [
     new webpack.DefinePlugin(params.globals),
-    ...(params.plugins ? params.plugins : []),
+    ...(params.plugins
+      ? params.plugins
+      : [
+          new ForkTsCheckerWebpackPlugin({
+            typescript: {
+              configFile: 'tsconfig.json',
+            },
+          }),
+        ]),
   ].concat(
     params.copy
       ? new CopyPlugin({

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

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

packages/redux-devtools-app/tsconfig.demo.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "include": ["demo", "src"]
+}

packages/redux-devtools-app/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "lib"
   },
-  "include": ["demo", "src"]
+  "include": ["src"]
 }

packages/redux-devtools-app/webpack.config.ts

@@ -65,7 +65,7 @@ module.exports = (env: { development?: boolean; platform?: string } = {}) => ({
     }),
     new ForkTsCheckerWebpackPlugin({
       typescript: {
-        configFile: 'tsconfig.json',
+        configFile: 'tsconfig.demo.json',
       },
     }),
   ],