Start work

extension/.babelrc

@@ -1,5 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
   "plugins": [
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     ["@babel/plugin-proposal-class-properties", { "loose": true }]

extension/src/app/stores/panelStore.ts

@@ -3,7 +3,11 @@ import exportState from '@redux-devtools/app/lib/middlewares/exportState';
 import panelDispatcher from '../middlewares/panelSync';
 import rootReducer from '../reducers/panel';
 
-export default function configureStore(position, bgConnection, preloadedState) {
+export default function configureStore(
+  position: string,
+  bgConnection: chrome.runtime.Port,
+  preloadedState
+) {
   const enhancer = applyMiddleware(exportState, panelDispatcher(bgConnection));
   return createStore(rootReducer, preloadedState, enhancer);
 }

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

@@ -12,10 +12,10 @@ export function createMenu() {
     { id: 'devtools-remote', title: 'Open Remote DevTools' },
   ];
 
-  let shortcuts = {};
+  let shortcuts: { [commandName: string]: string | undefined } = {};
   chrome.commands.getAll((commands) => {
     commands.forEach(({ name, shortcut }) => {
-      shortcuts[name] = shortcut;
+      shortcuts[name!] = shortcut;
     });
 
     menus.forEach(({ id, title }) => {

extension/src/browser/extension/background/openWindow.ts

@@ -1,9 +1,20 @@
-let windows = {};
-let lastPosition = null;
+export type DevToolsPosition =
+  | 'devtools-left'
+  | 'devtools-right'
+  | 'devtools-bottom'
+  | 'devtools-panel'
+  | 'devtools-remote';
 
-export default function openDevToolsWindow(position) {
-  function popWindow(action, url, customOptions) {
-    function focusIfExist(callback) {
+let windows: { [K in DevToolsPosition]?: number } = {};
+let lastPosition: DevToolsPosition | null = null;
+
+export default function openDevToolsWindow(position: DevToolsPosition) {
+  function popWindow(
+    action: string,
+    url: string,
+    customOptions: chrome.windows.CreateData & chrome.windows.UpdateInfo
+  ) {
+    function focusIfExist(callback: () => void) {
       if (!windows[position]) {
         callback();
         lastPosition = position;
@@ -12,7 +23,7 @@ export default function openDevToolsWindow(position) {
         if (lastPosition !== position && position !== 'devtools-panel') {
           params = { ...params, ...customOptions };
         }
-        chrome.windows.update(windows[position], params, () => {
+        chrome.windows.update(windows[position]!, params, () => {
           lastPosition = null;
           if (chrome.runtime.lastError) callback();
         });
@@ -20,7 +31,7 @@ export default function openDevToolsWindow(position) {
     }
 
     focusIfExist(() => {
-      let options = {
+      let options: chrome.windows.CreateData = {
         type: 'popup',
         ...customOptions,
       };
@@ -29,16 +40,19 @@ export default function openDevToolsWindow(position) {
           url + '#' + position.substr(position.indexOf('-') + 1)
         );
         chrome.windows.create(options, (win) => {
-          windows[position] = win.id;
+          windows[position] = win!.id;
           if (navigator.userAgent.indexOf('Firefox') !== -1) {
-            chrome.windows.update(win.id, { focused: true, ...customOptions });
+            chrome.windows.update(win!.id!, {
+              focused: true,
+              ...customOptions,
+            });
           }
         });
       }
     });
   }
 
-  let params = {
+  let params: chrome.windows.CreateData & chrome.windows.UpdateInfo = {
     left: 0,
     top: 0,
     width: 380,
@@ -48,7 +62,7 @@ export default function openDevToolsWindow(position) {
   switch (position) {
     case 'devtools-right':
       params.left =
-        window.screen.availLeft + window.screen.availWidth - params.width;
+        window.screen.availLeft + window.screen.availWidth - params.width!;
       break;
     case 'devtools-bottom':
       params.height = 420;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { REMOVE_INSTANCE } from '@redux-devtools/app/lib/constants/actionTypes';
@@ -9,12 +9,16 @@ import getPreloadedState from '../background/getPreloadedState';
 import '../../views/devpanel.pug';
 
 const position = location.hash;
-const messageStyle = { padding: '20px', width: '100%', textAlign: 'center' };
+const messageStyle: CSSProperties = {
+  padding: '20px',
+  width: '100%',
+  textAlign: 'center',
+};
 
-let rendered;
+let rendered: boolean;
 let store;
-let bgConnection;
-let naTimeout;
+let bgConnection: chrome.runtime.Port;
+let naTimeout: NodeJS.Timeout;
 let preloadedState;
 
 const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
@@ -25,7 +29,7 @@ getPreloadedState(position, (state) => {
 
 function renderDevTools() {
   const node = document.getElementById('root');
-  unmountComponentAtNode(node);
+  unmountComponentAtNode(node!);
   clearTimeout(naTimeout);
   store = configureStore(position, bgConnection, preloadedState);
   render(
@@ -71,20 +75,20 @@ function renderNA() {
         }
 
         const node = document.getElementById('root');
-        unmountComponentAtNode(node);
+        unmountComponentAtNode(node!);
         render(message, node);
         store = undefined;
       });
     } else {
       const node = document.getElementById('root');
-      unmountComponentAtNode(node);
+      unmountComponentAtNode(node!);
       render(message, node);
       store = undefined;
     }
   }, 3500);
 }
 
-function init(id) {
+function init(id: number) {
   renderNA();
   bgConnection = chrome.runtime.connect({
     name: id ? id.toString() : undefined,

extension/tsconfig.json

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

packages/redux-devtools-app/tsconfig.json

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

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/code-frame": "^7.14.5",
-    "@types/chrome": "^0.0.124",
+    "@types/chrome": "^0.0.145",
     "anser": "^1.4.10",
     "html-entities": "^1.4.0",
     "redux-devtools-themes": "^1.0.0",

yarn.lock

@@ -3567,7 +3567,7 @@ __metadata:
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/inspector-monitor": ^1.0.0
     "@types/babel__code-frame": ^7.0.2
-    "@types/chrome": ^0.0.124
+    "@types/chrome": ^0.0.145
     "@types/enzyme": ^3.10.8
     "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/html-entities": ^1.3.4
@@ -4825,13 +4825,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chrome@npm:^0.0.124":
-  version: 0.0.124
-  resolution: "@types/chrome@npm:0.0.124"
+"@types/chrome@npm:^0.0.145":
+  version: 0.0.145
+  resolution: "@types/chrome@npm:0.0.145"
   dependencies:
     "@types/filesystem": "*"
     "@types/har-format": "*"
-  checksum: 6499edca5f608dd48651b20d57d9fb30bbcb02cd695cd94d879a11dba7b9492c618edc6b8b5f718e82b58eceea94fb920c871546c2c3bc867595cb7dd020d527
+  checksum: f826d0a071ac7ea68aa97b2f8e34a944c470fbd036fdd6a413987fea03062d354fb14708cc0b59693b4a78ec88f9c5b1fce0c622a8e29e3e4b0917509eaf2a1a
   languageName: node
   linkType: hard