[DevTools] Updated source map extension format + more precise types

packages/react-devtools-extensions/src/SourceMapTypes.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import type {EncodedHookMap} from './generateHookMap';
+
+export type ReactSourceMetadata = [?EncodedHookMap];
+export type ReactSourcesArray = $ReadOnlyArray<?ReactSourceMetadata>;
+
+export type FBSourceMetadata = [?{...}, ?ReactSourceMetadata];
+export type FBSourcesArray = $ReadOnlyArray<?FBSourceMetadata>;
+
+export type BasicSourceMap = {|
+  +file?: string,
+  +mappings: string,
+  +names: Array<string>,
+  +sourceRoot?: string,
+  +sources: Array<string>,
+  +sourcesContent?: Array<?string>,
+  +version: number,
+  +x_facebook_sources?: FBSourcesArray,
+  +x_react_sources?: ReactSourcesArray,
+|};
+
+export type IndexMapSection = {
+  map: IndexMap | BasicSourceMap,
+  offset: {
+    line: number,
+    column: number,
+    ...
+  },
+  ...
+};
+
+export type IndexMap = {|
+  +file?: string,
+  +mappings?: void, // avoids SourceMap being a disjoint union
+  +sourcesContent?: void,
+  +sections: Array<IndexMapSection>,
+  +version: number,
+  +x_facebook_sources?: FBSourcesArray,
+  +x_react_sources?: ReactSourcesArray,
+|};
+
+export type MixedSourceMap = IndexMap | BasicSourceMap;

packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js

@@ -133,10 +133,11 @@ function compile(fileName) {
   const encodedHookMap = generateEncodedHookMap(parsed);
   const fbSourcesExtendedSourceMap = {
     ...sourceMap,
-    // When using the x_fb_sources extension field, the first item
+    // When using the x_facebook_sources extension field, the first item
     // for a given source is reserved for the Function Map, and the
-    // Hook Map is added as the second item.
-    x_fb_sources: [[null, encodedHookMap]],
+    // React sources metadata (which includes the Hook Map) is added as
+    // the second item.
+    x_facebook_sources: [[null, [encodedHookMap]]],
   };
   const reactSourcesExtendedSourceMap = {
     ...sourceMap,
@@ -145,7 +146,7 @@ function compile(fileName) {
     x_react_sources: [[encodedHookMap]],
   };
 
-  // Using the x_fb_sources field
+  // Using the x_facebook_sources field
   writeFileSync(
     resolve(inlineFbSourcesExtendedDir, fileName),
     transformed.code +

packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js

@@ -17,6 +17,7 @@ import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache
 import {decodeHookMap} from '../generateHookMap';
 import {getHookNameForLocation} from '../getHookNameForLocation';
 
+import type {MixedSourceMap} from '../SourceMapTypes';
 import type {HookMap} from '../generateHookMap';
 import type {
   HooksNode,
@@ -30,7 +31,7 @@ import type {SourceConsumer} from '../astUtils';
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
 const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
-const FB_SOURCES_EXTENSION_KEY = 'x_fb_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
 
 type AST = mixed;
 
@@ -662,21 +663,33 @@ function updateLruCache(
 }
 
 function extractHookMapFromSourceMap(
-  sourcemap,
+  sourcemap: MixedSourceMap,
   sourceIndex: number,
 ): HookMap | null {
   let hookMap;
-  if (sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY)) {
+  if (
+    sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY) &&
+    sourcemap[REACT_SOURCES_EXTENSION_KEY] != null
+  ) {
     // When using the x_react_sources extension field, the first item
     // for a given source is reserved for the Hook Map, which is why
     // we look up the index at position 0.
-    hookMap = sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex][0];
-  } else if (sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY)) {
-    // When using the x_fb_sources extension field, the first item
+    const reactMetadataForSource =
+      sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex];
+    hookMap = reactMetadataForSource != null ? reactMetadataForSource[0] : null;
+  } else if (
+    sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY) &&
+    sourcemap[FB_SOURCES_EXTENSION_KEY] != null
+  ) {
+    // When using the x_facebook_sources extension field, the first item
     // for a given source is reserved for the Function Map, and the
-    // Hook Map is added as the second item, which is why we look up
-    // the index at position 1.
-    hookMap = sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex][1];
+    // React sources metadata (which includes the Hook Map) is added as
+    // the second item, which is why we look up the index at position 1.
+    const fbMetadataForSource =
+      sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex];
+    const reactMetadataForSource =
+      fbMetadataForSource != null ? fbMetadataForSource[1] : null;
+    hookMap = reactMetadataForSource != null ? reactMetadataForSource[0] : null;
   }
   if (hookMap != null) {
     return decodeHookMap(hookMap);