Convert the entire codebase to TypeScript (#5549)

FIxes #2931.

[717 files changed, 13586 insertions(+), 64498 deletions(-)](https://gist.github.com/mstange/ed98002f852ba6f3e5979bae9cc6571c)

Author: mstange

.circleci/config.yml

@@ -62,12 +62,12 @@ jobs:
       - checkout-and-dependencies
       - run: yarn license-check
 
-  flow:
+  typecheck:
     executor: node
     resource_class: large
     steps:
       - checkout-and-dependencies
-      - run: yarn flow:ci
+      - run: yarn ts
 
   alex:
     executor: node
@@ -110,7 +110,7 @@ workflows:
       - tests
       - lint
       - build-prod
-      - flow
+      - typecheck
       - licence-check
       - alex
       - yarn_lock

.eslintrc.js

@@ -1,21 +1,20 @@
-// @flow
 module.exports = {
   env: {
     browser: true,
     es6: true,
     es2020: true,
     node: true,
   },
-  parser: '@babel/eslint-parser',
-  plugins: ['@babel', 'react', 'flowtype', 'import'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@babel', '@typescript-eslint', 'react', 'import'],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:flowtype/recommended',
     'prettier',
   ],
   parserOptions: {
-    ecmaVersion: '2017',
+    ecmaVersion: '2022',
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
       jsx: true,
@@ -37,8 +36,7 @@ module.exports = {
     'react/no-unused-class-component-methods': 'error',
     'react/no-this-in-sfc': 'error',
     'react/no-typos': 'error',
-    // Flow provides enough coverage over the prop types, and there can be errors
-    // with some of the more complicated Flow types.
+    // TypeScript provides enough coverage over the prop types.
     'react/prop-types': 'off',
     'react/jsx-curly-brace-presence': [
       'error',
@@ -51,20 +49,10 @@ module.exports = {
     'react/no-unused-state': 'error',
     'react/jsx-no-bind': 'error',
     'react/jsx-no-leaked-render': 'error',
-    'flowtype/require-valid-file-annotation': [
-      'error',
-      'always',
-      { annotationStyle: 'line' },
-    ],
-    // no-dupe-keys crashes with recent eslint. See
-    // https://github.com/gajus/eslint-plugin-flowtype/pull/266 and
-    // https://github.com/gajus/eslint-plugin-flowtype/pull/302
-    // 'flowtype/no-dupe-keys': 'error',
 
     // overriding recommended rules
     'no-constant-condition': ['error', { checkLoops: false }],
     'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
-    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 
     // possible errors
     'array-callback-return': 'error',
@@ -88,21 +76,6 @@ module.exports = {
     'no-self-compare': 'error',
     'no-throw-literal': 'error',
     'no-unmodified-loop-condition': 'error',
-    // We use the version from the flowtype plugin so that flow assertions don't
-    // output an error.
-    'flowtype/no-unused-expressions': 'error',
-    // The Object type and Function type aren't particularly useful, and usually hide
-    // type errors. It also blocks a migration to TypeScript. Disable this rule if
-    // using the Object or Function as generic type bounds.
-    'flowtype/no-weak-types': [
-      'error',
-      {
-        any: false,
-        Object: true,
-        Function: true,
-      },
-    ],
-    'flowtype/no-existential-type': 'error',
     'no-useless-call': 'error',
     'no-useless-computed-key': 'error',
     'no-useless-concat': 'error',
@@ -118,6 +91,34 @@ module.exports = {
     'prefer-spread': 'error',
     'no-else-return': 'error',
     'no-nested-ternary': 'error',
+
+    // Use `import type` everywhere we can.
+    '@typescript-eslint/consistent-type-imports': 'error',
+    // Allow `as any` escape hatches
+    '@typescript-eslint/no-explicit-any': 'off',
+    // Disable a rule that the TypeScript FAQ disapproves of
+    '@typescript-eslint/no-empty-object-type': 'off',
+    // Should enable this soon, mostly finds `catch (e)` with unused e
+    '@typescript-eslint/no-unused-vars': 'off',
+    // TypeScript imports react-jsx into .tsx files for us
+    'react/react-in-jsx-scope': 'off',
+    // Allow @ts-expect-error annotations with descriptions.
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        // Allow @ts-expect-error annotations with descriptions.
+        'ts-expect-error': 'allow-with-description',
+        // Don't allow @ts-ignore or @ts-nocheck because we want to be notified
+        // when the error goes away so we can remove the annotation - use
+        // @ts-expect-error instead
+        'ts-ignore': true,
+        'ts-nocheck': true,
+        'ts-check': false, // allow even without description
+      },
+    ],
+    // TODO: Re-enable for src when we update to eslint and switch to the new
+    // config format
+    '@typescript-eslint/no-require-imports': 'off',
   },
   // This property is specified both here in addition to the command line in
   // package.json.
@@ -129,15 +130,14 @@ module.exports = {
     react: {
       pragma: 'React',
       version: '17.0',
-      flowVersion: '0.96.0',
     },
     'import/resolver': {
       alias: {
         map: [
           ['firefox-profiler', './src'],
           ['firefox-profiler-res', './res'],
         ],
-        extensions: ['.js', '.jpg'],
+        extensions: ['.js', '.ts', '.tsx', '.jpg'],
       },
     },
   },

.flowconfig

@@ -8,6 +8,7 @@ flow-coverage
 coverage
 .eslintcache
 .prettiercache
+.tsbuildinfo
 webpack.local-config.js
 *.orig
 *.rej

.gitignore

@@ -50,7 +50,7 @@ module.exports = function (config, serverConfig) {
 };
 ```
 
-[Flow](https://flow.org/) is used for type checking. VSCode users can install the ["Flow Language Support" extension](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode), and disable VSCode's built-in TypeScript extension in the workspace via the [setup instructions here](https://github.com/flow/flow-for-vscode#setup).
+This project uses [TypeScript](https://www.typescriptlang.org/).
 
 ## Using Gitpod
 
@@ -87,7 +87,7 @@ When working on a new feature and code changes, it's important that things work
   - `yarn test-all` - Test all the things!
   - `yarn test` - Run the tests in [`./src/test/`](./src/test/).
   - `yarn lint` - Run prettier, stylelint, and eslint to check for correct code formatting.
-  - `yarn flow` - Check the [Flow types](https://flow.org/) for correctness.
+  - `yarn ts` - Check for TypeScript type correctness.
   - `yarn license-check` - Check the dependencies' licenses.
 - `git push` and `git commit`
   - We have [husky](https://www.npmjs.com/package/husky) installed to run automated checks when committing and pushing.

CONTRIBUTING.md

@@ -41,7 +41,7 @@ yarn install
 yarn start
 ```
 
-[Flow](https://flow.org/) is used for type checking. VSCode users can install the ["Flow Language Support" extension](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode), and disable VSCode's built-in TypeScript extension in the workspace via the [setup instructions here](https://github.com/flow/flow-for-vscode#setup).
+This project uses [TypeScript](https://www.typescriptlang.org/).
 
 You can also develop the Firefox Profiler online in a pre-configured development environment.
 

README.md

@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = jest.fn() as (arg: string) => void;

__mocks__/copy-to-clipboard.js

@@ -0,0 +1,19 @@
+// This module replaces the wasm-pack generated module 'gecko-profiler-demangle'
+// in our tests.
+// The reason for this replacement is the fact that wasm-pack (or rather,
+// wasm-bindgen), when targeting the browser + webpack, generates an ES6 module
+// that node cannot deal with. Most importantly, it uses the syntax
+// "import * as wasm from './gecko_profiler_demangle_bg';" in order to load
+// the wasm module, which is currently only supported by webpack.
+// The long-term path to make this work correctly is to wait for node to
+// support ES6 modules (and WASM as ES6 modules) natively [1]. It's possible
+// that in the medium term, wasm-bindgen will get support for outputting JS
+// files which work in both webpack and in node natively [2].
+// [1] https://medium.com/@giltayar/native-es-modules-in-nodejs-status-and-future-directions-part-i-ee5ea3001f71
+// [2] https://github.com/rustwasm/wasm-bindgen/issues/233
+
+// There's only one exported function.
+// Do the simplest thing possible: no demangling.
+export function demangle_any(s: string): string {
+  return s;
+}