Bug 1586757 - Create a @types directory and change to // @ts-check; r=julienw
authorGreg Tatum <gtatum@mozilla.com>
Tue, 08 Oct 2019 20:30:49 +0000
changeset 496815 2ecedc9b0ddb9f4e2710b0433d086ba507563624
parent 496814 0e21160da44f27c306e3b179f4fd0f06bbbfa072
child 496816 7f3f9c122ec345be499faad69e443a5a8e31de9c
push id36668
push useraiakab@mozilla.com
push dateWed, 09 Oct 2019 04:06:09 +0000
treeherdermozilla-central@26ebfec08834 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjulienw
bugs1586757
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1586757 - Create a @types directory and change to // @ts-check; r=julienw Differential Revision: https://phabricator.services.mozilla.com/D47912
devtools/client/performance-new/@types/README.md
devtools/client/performance-new/@types/perf.d.ts
devtools/client/performance-new/README.md
devtools/client/performance-new/store/actions.js
devtools/client/performance-new/store/reducers.js
devtools/client/performance-new/store/selectors.js
devtools/client/performance-new/tsconfig.json
devtools/client/performance-new/types.ts
devtools/client/performance-new/utils.js
new file mode 100644
--- /dev/null
+++ b/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.
rename from devtools/client/performance-new/types.ts
rename to devtools/client/performance-new/@types/perf.d.ts
--- a/devtools/client/performance-new/README.md
+++ b/devtools/client/performance-new/README.md
@@ -1,12 +1,16 @@
 # Performance New
 
 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 Panel
 
 This panel works similarly to the other DevTools panels. The `devtools/client/performance-new/initializer.js` is in charge of initializing the page specifically for the DevTools workflow. This script creates a `PerfActor` that is then used for talking to the Gecko Profiler component on the debuggee. This path is specifically optimized for targeting Firefox running on Android phones. This workflow can also target the current browser, but the overhead from DevTools can skew the results, making the performance profile less accurate.
 
--- a/devtools/client/performance-new/store/actions.js
+++ b/devtools/client/performance-new/store/actions.js
@@ -1,26 +1,27 @@
 /* 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>
  *
 
 /**
  * The recording state manages the current state of the recording panel.
  * @param {RecordingState} state - A valid state in `recordingState`.
  * @param {{ didRecordingUnexpectedlyStopped: boolean }} options
  * @return {Action}
  */
--- a/devtools/client/performance-new/store/reducers.js
+++ b/devtools/client/performance-new/store/reducers.js
@@ -1,25 +1,26 @@
 /* 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>
  */
 
 /**
  * The current state of the recording.
  * @type {Reducer<RecordingState>}
  */
 function recordingState(state = "not-yet-known", action) {
   switch (action.type) {
--- a/devtools/client/performance-new/store/selectors.js
+++ b/devtools/client/performance-new/store/selectors.js
@@ -1,25 +1,26 @@
 /* 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>} */
 const getRecordingState = state => state.recordingState;
 
 /** @type {Selector<boolean>} */
 const getRecordingUnexpectedlyStopped = state =>
   state.recordingUnexpectedlyStopped;
--- a/devtools/client/performance-new/tsconfig.json
+++ b/devtools/client/performance-new/tsconfig.json
@@ -1,20 +1,18 @@
 {
   "compilerOptions": {
     "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/*"]
 }
--- a/devtools/client/performance-new/utils.js
+++ b/devtools/client/performance-new/utils.js
@@ -1,11 +1,12 @@
 /* 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
 const { OS } = require("resource://gre/modules/osfile.jsm");
 
 const UNITS = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
 /**