feat(trace): convert to TypeScript (#647)

* get started * progress * finish test * Revert that file * Move types to dev * Add enzyme types * Bump that version * prettier
reduxjs · Sep 29, 2020 · 0321700 · 0321700
1 parent d37e7d9
commit 0321700
Show file tree

Hide file tree

Showing 37 changed files with 433 additions and 320 deletions.
diff --git a/packages/redux-devtools-test-generator/package.json b/packages/redux-devtools-test-generator/package.json
@@ -84,6 +84,7 @@
   "peerDependencies": {
     "@types/react": "^16.3.18",
     "react": "^16.3.0",
+    "redux": "^3.4.0 || ^4.0.0",
     "redux-devtools-inspector-monitor": "^0.14.0"
   }
 }
diff --git a/packages/redux-devtools-trace-monitor/.babelrc b/packages/redux-devtools-trace-monitor/.babelrc
@@ -1,13 +1,8 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"],
-  "plugins": [
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        "regenerator": true
-      }
-    ],
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }
diff --git a/packages/redux-devtools-trace-monitor/.eslintignore b/packages/redux-devtools-trace-monitor/.eslintignore
@@ -0,0 +1 @@
+lib
diff --git a/packages/redux-devtools-trace-monitor/.eslintrc.js b/packages/redux-devtools-trace-monitor/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: '../../.eslintrc',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['test/*.ts', 'test/*.tsx'],
+      extends: '../../eslintrc.ts.react.jest.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./test/tsconfig.json'],
+      },
+    },
+  ],
+};
diff --git a/packages/redux-devtools-trace-monitor/jest.config.js b/packages/redux-devtools-trace-monitor/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'ts-jest',
+};
diff --git a/packages/redux-devtools-trace-monitor/package.json b/packages/redux-devtools-trace-monitor/package.json
@@ -2,47 +2,61 @@
   "name": "redux-devtools-trace-monitor",
   "version": "0.1.3",
   "description": "Submonitor for Redux DevTools inspector to show stack traces.",
-  "repository": "https://github.com/reduxjs/redux-devtools",
-  "homepage": "https://github.com/reduxjs/redux-devtools",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-trace-monitor",
+  "license": "MIT",
   "author": "Mark Erikson <mark@isquaredsoftware.com>",
   "contributors": [
     "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)"
   ],
-  "license": "MIT",
-  "main": "lib/StackTraceTab.js",
   "files": [
     "lib"
   ],
+  "main": "lib/StackTraceTab.js",
+  "types": "lib/StackTraceTab.d.ts",
+  "repository": "https://github.com/reduxjs/redux-devtools",
   "scripts": {
+    "build": "npm run build:types && npm run build:js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib",
-    "test": "jest --no-cache",
-    "prepare": "npm run clean && npm run build",
-    "prepublishOnly": "npm run test && npm run clean && npm run build"
+    "test": "jest",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "preversion": "npm run type-check && npm run lint && npm run test",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "dependencies": {
+    "@babel/code-frame": "^7.10.4",
+    "@types/chrome": "^0.0.124",
+    "anser": "^1.4.9",
+    "html-entities": "^1.3.1",
+    "redux-devtools-themes": "^1.0.0",
+    "settle-promise": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@types/babel__code-frame": "^7.0.2",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/html-entities": "^1.2.16",
+    "@types/react": "^16.9.46",
+    "@types/redux-devtools-themes": "^1.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.3",
     "enzyme-to-json": "^3.5.0",
-    "jest": "^26.2.2",
+    "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "rimraf": "^3.0.2"
+    "redux": "^4.0.5",
+    "redux-devtools": "^3.7.0",
+    "redux-devtools-inspector-monitor": "^0.14.0"
   },
-  "dependencies": {
-    "@babel/code-frame": "^7.10.4",
-    "anser": "^1.4.9",
-    "html-entities": "^1.3.1",
-    "react": "^16.13.1",
-    "redux-devtools-themes": "^1.0.0",
-    "settle-promise": "^1.0.0"
+  "peerDependencies": {
+    "@types/react": "^16.3.18",
+    "react": "^16.3.0",
+    "redux": "^3.4.0 || ^4.0.0",
+    "redux-devtools": "^3.4.0",
+    "redux-devtools-inspector-monitor": "^0.14.0"
   }
 }
diff --git a/...vtools-trace-monitor/src/StackTraceTab.js → ...tools-trace-monitor/src/StackTraceTab.tsx b/...vtools-trace-monitor/src/StackTraceTab.js → ...tools-trace-monitor/src/StackTraceTab.tsx
@@ -3,26 +3,45 @@ import React, { Component } from 'react';
 import { getStackFrames } from './react-error-overlay/utils/getStackFrames';
 import StackTrace from './react-error-overlay/containers/StackTrace';
 import openFile from './openFile';
+import { Action } from 'redux';
+import { TabComponentProps } from 'redux-devtools-inspector-monitor';
+import StackFrame from './react-error-overlay/utils/stack-frame';
+import { ErrorLocation } from './react-error-overlay/utils/parseCompileError';
 
 const rootStyle = { padding: '5px 10px' };
 
-export default class StackTraceTab extends Component {
+interface Props<S, A extends Action<unknown>> extends TabComponentProps<S, A> {
+  openFile: (
+    fileName: string,
+    lineNumber: number,
+    stackFrame: StackFrame
+  ) => void;
+}
+
+interface State {
+  stackFrames: StackFrame[];
+  currentError?: Error;
+  showDocsLink?: boolean;
+}
+
+export default class StackTraceTab<
+  S,
+  A extends Action<unknown>
+> extends Component<Props<S, A>, State> {
   static defaultProps = {
     openFile,
   };
-  constructor(props) {
-    super(props);
 
-    this.state = {
-      stackFrames: [],
-    };
-  }
+  state: State = {
+    stackFrames: [],
+  };
+
   componentDidMount() {
     // console.log("StackTraceTab mounted");
     this.checkForStackTrace();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props<S, A>) {
     const { action, actions } = prevProps;
 
     if (action !== this.props.action || actions !== this.props.actions) {
@@ -47,25 +66,32 @@ export default class StackTraceTab extends Component {
         stack: liftedAction.stack,
       });
 
-      getStackFrames(deserializedError).then((stackFrames) => {
-        /* eslint-disable no-console */
-        if (process.env.NODE_ENV === 'development')
-          console.log('Stack frames: ', stackFrames);
-        /* eslint-enable no-console */
-        this.setState({ stackFrames, currentError: deserializedError });
-      });
+      getStackFrames(deserializedError)
+        .then((stackFrames) => {
+          /* eslint-disable no-console */
+          if (process.env.NODE_ENV === 'development')
+            console.log('Stack frames: ', stackFrames);
+          /* eslint-enable no-console */
+          this.setState({
+            stackFrames: stackFrames!,
+            currentError: deserializedError,
+          });
+        })
+        .catch(() => {
+          // noop
+        });
     } else {
       this.setState({
         stackFrames: [],
         showDocsLink:
-          liftedAction.action &&
-          liftedAction.action.type &&
-          liftedAction.action.type !== '@@INIT',
+          liftedAction!.action &&
+          liftedAction!.action.type &&
+          liftedAction!.action.type !== '@@INIT',
       });
     }
   }
 
-  onStackLocationClicked = (fileLocation = {}) => {
+  onStackLocationClicked = (fileLocation: Partial<ErrorLocation> = {}) => {
     // console.log("Stack location args: ", ...args);
 
     const { fileName, lineNumber } = fileLocation;
@@ -93,7 +119,7 @@ export default class StackTraceTab extends Component {
     }
   };
 
-  openDocs = (e) => {
+  openDocs: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
     window.open(
       'https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md'

diff --git a/...ux-devtools-trace-monitor/src/openFile.js → ...ux-devtools-trace-monitor/src/openFile.ts b/...ux-devtools-trace-monitor/src/openFile.js → ...ux-devtools-trace-monitor/src/openFile.ts
@@ -1,31 +1,35 @@
+import StackFrame from './react-error-overlay/utils/stack-frame';
+
 const isFF = navigator.userAgent.indexOf('Firefox') !== -1;
 
-function openResource(fileName, lineNumber, stackFrame) {
+function openResource(
+  fileName: string,
+  lineNumber: number,
+  stackFrame: StackFrame
+) {
   const adjustedLineNumber = Math.max(lineNumber - 1, 0);
-  chrome.devtools.panels.openResource(
-    fileName,
-    adjustedLineNumber,
-    (result) => {
-      //console.log("openResource callback args: ", callbackArgs);
-      if (result.isError) {
-        const {
-          fileName: finalFileName,
-          lineNumber: finalLineNumber,
-        } = stackFrame;
-        const adjustedLineNumber = Math.max(finalLineNumber - 1, 0);
-        chrome.devtools.panels.openResource(
-          finalFileName,
-          adjustedLineNumber,
-          (/* result */) => {
-            // console.log("openResource result: ", result);
-          }
-        );
-      }
+  chrome.devtools.panels.openResource(fileName, adjustedLineNumber, ((result: {
+    isError?: boolean;
+  }) => {
+    //console.log("openResource callback args: ", callbackArgs);
+    if (result.isError) {
+      const {
+        fileName: finalFileName,
+        lineNumber: finalLineNumber,
+      } = stackFrame;
+      const adjustedLineNumber = Math.max(finalLineNumber! - 1, 0);
+      chrome.devtools.panels.openResource(
+        finalFileName!,
+        adjustedLineNumber,
+        (/* result */) => {
+          // console.log("openResource result: ", result);
+        }
+      );
     }
-  );
+  }) as () => void);
 }
 
-function openAndCloseTab(url) {
+function openAndCloseTab(url: string) {
   chrome.tabs.create({ url }, (tab) => {
     const removeTab = () => {
       chrome.windows.onFocusChanged.removeListener(removeTab);
@@ -45,19 +49,19 @@ function openAndCloseTab(url) {
   });
 }
 
-function openInIframe(url) {
+function openInIframe(url: string) {
   const iframe = document.createElement('iframe');
   iframe.src = url;
-  iframe.style = 'display:none';
+  iframe.style.display = 'none';
   document.body.appendChild(iframe);
-  setTimeout(() => iframe.parentNode.removeChild(iframe), 3000);
+  setTimeout(() => iframe.parentNode!.removeChild(iframe), 3000);
 }
 
-function openInEditor(editor, path, stackFrame) {
+function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
   const projectPath = path.replace(/\/$/, '');
   const file =
     stackFrame._originalFileName ||
-    stackFrame.finalFileName ||
+    ((stackFrame as unknown) as { finalFileName: string }).finalFileName ||
     stackFrame.fileName ||
     '';
   let filePath = /^https?:\/\//.test(file)
@@ -95,7 +99,11 @@ function openInEditor(editor, path, stackFrame) {
   }
 }
 
-export default function openFile(fileName, lineNumber, stackFrame) {
+export default function openFile(
+  fileName: string,
+  lineNumber: number,
+  stackFrame: StackFrame
+) {
   if (process.env.NODE_ENV === 'development')
     // eslint-disable-next-line no-console
     console.log(fileName, lineNumber, stackFrame);

diff --git a/...dux-devtools-trace-monitor/src/presets.js → ...dux-devtools-trace-monitor/src/presets.ts b/...dux-devtools-trace-monitor/src/presets.js → ...dux-devtools-trace-monitor/src/presets.ts
diff --git a/...act-error-overlay/components/CodeBlock.js → ...ct-error-overlay/components/CodeBlock.tsx b/...act-error-overlay/components/CodeBlock.js → ...ct-error-overlay/components/CodeBlock.tsx
@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* @flow */
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
-const preStyle = {
+const preStyle: CSSProperties = {
   position: 'relative',
   display: 'block',
   backgroundColor: '#000',
@@ -24,10 +23,10 @@ const codeStyle = {
   fontFamily: 'Consolas, Menlo, monospace',
 };
 
-type CodeBlockPropsType = {|
-  main: boolean,
-  codeHTML: string,
-|};
+interface CodeBlockPropsType {
+  main: boolean;
+  codeHTML: string;
+}
 
 function CodeBlock(props: CodeBlockPropsType) {
   const codeBlock = { __html: props.codeHTML };