Bug 1586757 - Create a @types directory and change to // @ts-check; r=julienw

Differential Revision: https://phabricator.services.mozilla.com/D47912

--HG--
rename : devtools/client/performance-new/types.ts => devtools/client/performance-new/@types/perf.d.ts
extra : moz-landing-system : lando

devtools/client/performance-new/@types/README.md

@@ -0,0 +1,5 @@
+# TypeScript @types
+
+This folder contains the type files that can be imported into various files. These types are collected here, and are likely cumbersome to type in JSDoc, or are separate enough from the code that it's easier to type them in separate files (such as the Redux store types).
+
+In addition, there is an ambient type file, `gecko.d.ts` file that contains the ambient types that are unique to Gecko.

devtools/client/performance-new/README.md

@@ -2,6 +2,10 @@
 
 This folder contains the code for the new performance panel that is a simplified recorder that works to record a performance profile, and inject it into profiler.firefox.com. This tool is not in charge of any of the analysis, only the recording.
 
+## TypeScript
+
+This project contains TypeScript types in JSDoc comments. To run the type checker point your terminal to this directory, and run `yarn install`, then `yarn test`. In addition type hints should work if your editor is configured to speak TypeScript.
+
 ## Overall Architecture
 
 The performance panel is split into two different modes. There is the DevTools panel mode, and the browser menu bar "popup" mode. The UI is implemented for both in `devtools/client/performance-new`, and many codepaths are shared. Both use the same React/Redux setup, but then each are configured with slightly different workflows. These are documented below.

devtools/client/performance-new/store/actions.js

@@ -1,21 +1,22 @@
 /* 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/. */
+// @ts-check
 "use strict";
 
 const selectors = require("devtools/client/performance-new/store/selectors");
 
 /**
- * @typedef {import("../types").Action} Action
- * @typedef {import("../types").Library} Library
- * @typedef {import("../types").PerfFront} PerfFront
- * @typedef {import("../types").SymbolTableAsTuple} SymbolTableAsTuple
- * @typedef {import("../types").RecordingState} RecordingState
+ * @typedef {import("../@types/perf").Action} Action
+ * @typedef {import("../@types/perf").Library} Library
+ * @typedef {import("../@types/perf").PerfFront} PerfFront
+ * @typedef {import("../@types/perf").SymbolTableAsTuple} SymbolTableAsTuple
+ * @typedef {import("../@types/perf").RecordingState} RecordingState
  */
 
 /**
  * @template T
- * @typedef {import("../types").ThunkAction<T>} ThunkAction<T>
+ * @typedef {import("../@types/perf").ThunkAction<T>} ThunkAction<T>
  *
 
 /**

devtools/client/performance-new/store/reducers.js

@@ -1,20 +1,21 @@
 /* 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/. */
+// @ts-check
 "use strict";
 
 const { combineReducers } = require("devtools/client/shared/vendor/redux");
 
 /**
- * @typedef {import("../types").Action} Action
- * @typedef {import("../types").State} State
- * @typedef {import("../types").RecordingState} RecordingState
- * @typedef {import("../types").InitializedValues} InitializedValues
+ * @typedef {import("../@types/perf").Action} Action
+ * @typedef {import("../@types/perf").State} State
+ * @typedef {import("../@types/perf").RecordingState} RecordingState
+ * @typedef {import("../@types/perf").InitializedValues} InitializedValues
  */
 
 /**
  * @template S
- * @typedef {import("../types").Reducer<S>} Reducer<S>
+ * @typedef {import("../@types/perf").Reducer<S>} Reducer<S>
  */
 
 /**

devtools/client/performance-new/store/selectors.js

@@ -1,20 +1,21 @@
 /* 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/. */
+// @ts-check
 "use strict";
 
 /**
- * @typedef {import("../types").RecordingState} RecordingState
- * @typedef {import("../types").RecordingStateFromPreferences} RecordingStateFromPreferences
- * @typedef {import("../types").InitializedValues} InitializedValues
- * @typedef {import("../types").PerfFront} PerfFront
- * @typedef {import("../types").ReceiveProfile} ReceiveProfile
- * @typedef {import("../types").SetRecordingPreferences} SetRecordingPreferences
- * @typedef {import("../types").GetSymbolTableCallback} GetSymbolTableCallback
+ * @typedef {import("../@types/perf").RecordingState} RecordingState
+ * @typedef {import("../@types/perf").RecordingStateFromPreferences} RecordingStateFromPreferences
+ * @typedef {import("../@types/perf").InitializedValues} InitializedValues
+ * @typedef {import("../@types/perf").PerfFront} PerfFront
+ * @typedef {import("../@types/perf").ReceiveProfile} ReceiveProfile
+ * @typedef {import("../@types/perf").SetRecordingPreferences} SetRecordingPreferences
+ * @typedef {import("../@types/perf").GetSymbolTableCallback} GetSymbolTableCallback
  */
 /**
  * @template S
- * @typedef {import("../types").Selector<S>} Selector<S>
+ * @typedef {import("../@types/perf").Selector<S>} Selector<S>
  */
 
 /** @type {Selector<RecordingState>} */

devtools/client/performance-new/tsconfig.json

@@ -3,18 +3,16 @@
     "module": "commonjs",
     // Set the baseUrl to the root of the project.
     "baseUrl": "../../..",
-    "paths": {},
+    // Make the type checking as strict as possible.
     "strict": true,
+    // TypeScript will check JS files only if they have a @ts-check comment in them.
     "allowJs": true,
-    "checkJs": true,
+    // Only type check, don't emit files.
     "noEmit": true,
+    // Allow esnext syntax. Otherwise the default is ES5 only.
     "target": "esnext",
     "lib": ["esnext", "dom"]
   },
-  // For now, manually include typed files.
-  "include": [
-    "utils.js",
-    "panel.js",
-    "store"
-  ]
+  // Add a @ts-check comment to a JS file to start type checking it.
+  "include": ["./**/*.js", "./@types/*"]
 }

devtools/client/performance-new/utils.js

@@ -1,6 +1,7 @@
 /* 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/. */
+// @ts-check
 "use strict";
 
 // @ts-ignore