Convert the entire codebase to TypeScript

.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'],
       },
     },
   },

.gitignore

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

CONTRIBUTING.md

@@ -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.

README.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.
 

__mocks__/copy-to-clipboard.ts

@@ -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__/gecko-profiler-demangle.ts

@@ -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;
+}

babel.config.json

@@ -16,16 +16,16 @@
       {
         // When spreading props, use inline object with spread elements
         // directly instead of Babel's `extend` helper or `Object.assign`.
-        "useSpread": true
+        "useSpread": true,
+        // Automatically import 'react' into .tsx files.
+        "runtime": "automatic"
       }
     ],
-    // The "all" property is needed for Flow to properly parse the syntax.
-    // It has trouble understanding when the flow comment is the second comment.
-    // See: https://github.com/babel/babel/issues/9845
     [
-      "@babel/preset-flow",
+      "@babel/preset-typescript",
       {
-        "all": true
+        "isTSX": true,
+        "allExtensions": true
       }
     ]
   ],

bin/check-warn-yarn-changed.js

@@ -1,4 +1,3 @@
-// @noflow
 // MIT © Sindre Sorhus - sindresorhus.com
 // via https://gist.github.com/sindresorhus/7996717
 

bin/l10n-sync.js

@@ -8,8 +8,6 @@
 // have to be at the project root directory to run it.
 // Run with '-y' to automatically skip the prompts.
 
-// @flow
-
 const cp = require('child_process');
 const readline = require('readline');
 const { promisify } = require('util');

bin/output-fixing-commands.js

@@ -1,7 +1,6 @@
 /* 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/. */
-// @flow
 
 // This file runs before linting commands and intercept errors so that more
 // friendly errors can be output.

bin/post-checkout.js

@@ -1,5 +1,3 @@
-// @noflow
-
 // Older versions of husky use `GIT_PARAMS`, newer versions use `HUSKY_GIT_PARAMS`.
 // To make it easier to move between branches, we support both for now. We can
 // remove this thin compatibility layer later.

bin/post-merge.js

@@ -1,2 +1 @@
-// @noflow
 require('./check-warn-yarn-changed.js')('ORIG_HEAD', 'HEAD');

bin/post-rewrite.js

@@ -1,5 +1,3 @@
-// @noflow
-
 // Older versions of husky use `GIT_PARAMS`, newer versions use `HUSKY_GIT_PARAMS`.
 // To make it easier to move between branches, we support both for now. We can
 // remove this thin compatibility layer later.

bin/pre-install.js

@@ -1,7 +1,6 @@
 /* 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/. */
-// @flow
 
 /*:: type AgentsVersion = { [agentName: string]: string }; */
 

docs-developer/CHANGELOG-formats.md

@@ -2,7 +2,7 @@
 
 This file documents all changes in the profiler gecko and processed formats.
 
-Note that this is not an exhaustive list. Processed profile format upgraders can be found in [processed-profile-versioning.js](../src/profile-logic/processed-profile-versioning.js) and gecko profile format upgraders can be found in [gecko-profile-versioning.js](../src/profile-logic/gecko-profile-versioning.js). Please refer to them for older upgraders or for exact implementations.
+Note that this is not an exhaustive list. Processed profile format upgraders can be found in [processed-profile-versioning.jt](../src/profile-logic/processed-profile-versioning.ts) and gecko profile format upgraders can be found in [gecko-profile-versioning.jt](../src/profile-logic/gecko-profile-versioning.ts). Please refer to them for older upgraders or for exact implementations.
 
 ## Processed profile format
 
@@ -118,7 +118,7 @@ We've also cleaned up the ResourceTable format:
 
 ### Older Versions
 
-Older versions are not documented in this changelog but can be found in [processed-profile-versioning.js](../src/profile-logic/processed-profile-versioning.js).
+Older versions are not documented in this changelog but can be found in [processed-profile-versioning.jt](../src/profile-logic/processed-profile-versioning.ts).
 
 ## Gecko profile format
 
@@ -149,4 +149,4 @@ The `searchable` property is implemented in the marker schema. Previously all th
 
 ### Older Versions
 
-Older versions are not documented in this changelog but can be found in [gecko-profile-versioning.js](../src/profile-logic/gecko-profile-versioning.js).
+Older versions are not documented in this changelog but can be found in [gecko-profile-versioning.jt](../src/profile-logic/gecko-profile-versioning.ts).

docs-developer/README.md

@@ -1,6 +1,6 @@
 # Firefox Profiler development docs
 
-[profiler.firefox.com](https://profiler.firefox.com) is a client for reading profiles from the profiler component built inside of Firefox, known as the Gecko Profiler. It also can read in formats from [a variety of sources](./loading-in-profiles.md). The front-end client is written using JavaScript and [Flow types](https://flow.org/) using [React](https://facebook.github.io/react/) for the UI components and [Redux](http://redux.js.org/) for the state management. Firefox can interact with this client by directly injecting profiles into the webpage via a WebChannel mechanism. This code lives in Mozilla Central under [devtools/client/performance-new](https://searchfox.org/mozilla-central/source/devtools/client/performance-new)
+[profiler.firefox.com](https://profiler.firefox.com) is a client for reading profiles from the profiler component built inside of Firefox, known as the Gecko Profiler. It also can read in formats from [a variety of sources](./loading-in-profiles.md). The front-end client is written in [TypeScript](https://www.typescriptlang.org/) using [React](https://facebook.github.io/react/) for the UI components and [Redux](http://redux.js.org/) for the state management. Firefox can interact with this client by directly injecting profiles into the webpage via a WebChannel mechanism. This code lives in Mozilla Central under [devtools/client/performance-new](https://searchfox.org/mozilla-central/source/devtools/client/performance-new)
 
 ## The Docs
 
@@ -14,7 +14,7 @@
     - [React component testing](../src/test/components)
     - [Redux store testing](../src/test/store)
     - [Unit testing](../src/test/unit)
-  - [Flow types - `/src/types`](../src/types)
+  - [Types - `/src/types`](../src/types)
   - [Utility files - `/src/utils`](../src/utils)
 - [Profiler architecture](./architecture.md)
 - [Loading in profiles from various sources](./loading-in-profiles.md)