[DevTools] Access metadata in source maps correctly accounting for di…

…fferent formats (#22096)

## Summary

Follow up from #22010.

The initial implementation of named hooks and for looking up hook name metadata in an extended source map both assumed that the source maps would always have a `sources` field available, and didn't account for the source maps in the [Index Map](https://sourcemaps.info/spec.html#h.535es3xeprgt) format, which contain a list of `sections` and don't have the `source` field available directly. 

In order to properly access metadata in extended source maps, this commit:

-  Adds a new `SourceMapMetadataConsumer` api, which is a fork / very similar in structure to the corresponding [consumer in Metro](https://github.com/facebook/metro/blob/2b44ec39b4bca93e3e1cf1f268b4be66f894924a/packages/metro-symbolicate/src/SourceMetadataMapConsumer.js#L56) (as specified by @motiz88 in #21782.
- Updates `parseHookNames` to use this new api

## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests covering the index map format
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).

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

@@ -0,0 +1,197 @@
+/*
+ * 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 {Position} from './astUtils';
+import type {
+ ReactSourceMetadata,
+ IndexSourceMap,
+ BasicSourceMap,
+ MixedSourceMap,
+} from './SourceMapTypes';
+import type {HookMap} from './generateHookMap';
+import * as util from 'source-map/lib/util';
+import {decodeHookMap} from './generateHookMap';
+import {getHookNameForLocation} from './getHookNameForLocation';
+
+type MetadataMap = Map<string, ?ReactSourceMetadata>;
+
+const HOOK_MAP_INDEX_IN_REACT_METADATA = 0;
+const REACT_METADATA_INDEX_IN_FB_METADATA = 1;
+const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
+
+/**
+ * Extracted from the logic in source-map@0.8.0-beta.0's SourceMapConsumer.
+ * By default, source names are normalized using the same logic that the
+ * `source-map@0.8.0-beta.0` package uses internally. This is crucial for keeping the
+ * sources list in sync with a `SourceMapConsumer` instance.
+ */
+function normalizeSourcePath(
+ sourceInput: string,
+ map: {+sourceRoot?: ?string, ...},
+): string {
+ const {sourceRoot} = map;
+ let source = sourceInput;
+
+ // eslint-disable-next-line react-internal/no-primitive-constructors
+ source = String(source);
+ return util.computeSourceURL(sourceRoot, source);
+}
+
+/**
+ * Consumes the `x_react_sources` or `x_facebook_sources` metadata field from a
+ * source map and exposes ways to query the React DevTools specific metadata
+ * included in those fields.
+ */
+export class SourceMapMetadataConsumer {
+ _sourceMap: MixedSourceMap;
+ _decodedHookMapCache: Map<string, HookMap>;
+ _metadataBySource: ?MetadataMap;
+
+ constructor(sourcemap: MixedSourceMap) {
+ this._sourceMap = sourcemap;
+ this._decodedHookMapCache = new Map();
+ this._metadataBySource = null;
+ }
+
+ /**
+ * Returns the Hook name assigned to a given location in the source code,
+ * and a HookMap extracted from an extended source map.
+ * See `getHookNameForLocation` for more details on implementation.
+ *
+ * When used with the `source-map` package, you'll first use
+ * `SourceMapConsumer#originalPositionFor` to retrieve a source location,
+ * then pass that location to `hookNameFor`.
+ */
+ hookNameFor({
+ line,
+ column,
+ source,
+ }: {|
+ ...Position,
+ +source: ?string,
+ |}): ?string {
+ if (source == null) {
+ return null;
+ }
+
+ const hookMap = this._getHookMapForSource(source);
+ if (hookMap == null) {
+ return null;
+ }
+
+ return getHookNameForLocation({line, column}, hookMap);
+ }
+
+ hasHookMap(source: ?string) {
+ if (source == null) {
+ return null;
+ }
+ return this._getHookMapForSource(source) != null;
+ }
+
+ /**
+ * Prepares and caches a lookup table of metadata by source name.
+ */
+ _getMetadataBySource(): MetadataMap {
+ if (this._metadataBySource == null) {
+ this._metadataBySource = this._getMetadataObjectsBySourceNames(
+ this._sourceMap,
+ );
+ }
+
+ return this._metadataBySource;
+ }
+
+ /**
+ * Collects source metadata from the given map using the current source name
+ * normalization function. Handles both index maps (with sections) and plain
+ * maps.
+ *
+ * NOTE: If any sources are repeated in the map (which shouldn't usually happen,
+ * but is technically possible because of index maps) we only keep the
+ * metadata from the last occurrence of any given source.
+ */
+ _getMetadataObjectsBySourceNames(sourcemap: MixedSourceMap): MetadataMap {
+ if (sourcemap.mappings === undefined) {
+ const indexSourceMap: IndexSourceMap = sourcemap;
+ const metadataMap = new Map();
+ indexSourceMap.sections.forEach(section => {
+ const metadataMapForIndexMap = this._getMetadataObjectsBySourceNames(
+ section.map,
+ );
+ metadataMapForIndexMap.forEach((value, key) => {
+ metadataMap.set(key, value);
+ });
+ });
+ return metadataMap;
+ }
+
+ const metadataMap = new Map();
+ const basicMap: BasicSourceMap = sourcemap;
+ const updateMap = (metadata: ReactSourceMetadata, sourceIndex: number) => {
+ let source = basicMap.sources[sourceIndex];
+ if (source != null) {
+ source = normalizeSourcePath(source, basicMap);
+ metadataMap.set(source, metadata);
+ }
+ };
+
+ if (
+ sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY) &&
+ sourcemap[REACT_SOURCES_EXTENSION_KEY] != null
+ ) {
+ const reactMetadataArray = sourcemap[REACT_SOURCES_EXTENSION_KEY];
+ reactMetadataArray.filter(Boolean).forEach(updateMap);
+ } else if (
+ sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY) &&
+ sourcemap[FB_SOURCES_EXTENSION_KEY] != null
+ ) {
+ const fbMetadataArray = sourcemap[FB_SOURCES_EXTENSION_KEY];
+ if (fbMetadataArray != null) {
+ fbMetadataArray.forEach((fbMetadata, sourceIndex) => {
+ // When extending source maps with React metadata using the
+ // x_facebook_sources field, the position at index 1 on the
+ // metadata tuple is reserved for React metadata
+ const reactMetadata =
+ fbMetadata != null
+ ? fbMetadata[REACT_METADATA_INDEX_IN_FB_METADATA]
+ : null;
+ if (reactMetadata != null) {
+ updateMap(reactMetadata, sourceIndex);
+ }
+ });
+ }
+ }
+
+ return metadataMap;
+ }
+
+ /**
+ * Decodes the function name mappings for the given source if needed, and
+ * retrieves a sorted, searchable array of mappings.
+ */
+ _getHookMapForSource(source: string): ?HookMap {
+ if (this._decodedHookMapCache.has(source)) {
+ return this._decodedHookMapCache.get(source);
+ }
+ let hookMap = null;
+ const metadataBySource = this._getMetadataBySource();
+ const normalized = normalizeSourcePath(source, this._sourceMap);
+ const metadata = metadataBySource.get(normalized);
+ if (metadata != null) {
+ const encodedHookMap = metadata[HOOK_MAP_INDEX_IN_REACT_METADATA];
+ hookMap = encodedHookMap != null ? decodeHookMap(encodedHookMap) : null;
+ }
+ if (hookMap != null) {
+ this._decodedHookMapCache.set(source, hookMap);
+ }
+ return hookMap;
+ }
+}

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

@@ -27,8 +27,8 @@ export type BasicSourceMap = {|
  +x_react_sources?: ReactSourcesArray,
 |};
 
-export type IndexMapSection = {
- map: IndexMap | BasicSourceMap,
+export type IndexSourceMapSection = {
+ map: IndexSourceMap | BasicSourceMap,
  offset: {
  line: number,
  column: number,
@@ -37,14 +37,14 @@ export type IndexMapSection = {
  ...
 };
 
-export type IndexMap = {|
+export type IndexSourceMap = {|
  +file?: string,
  +mappings?: void, // avoids SourceMap being a disjoint union
  +sourcesContent?: void,
- +sections: Array<IndexMapSection>,
+ +sections: Array<IndexSourceMapSection>,
  +version: number,
  +x_facebook_sources?: FBSourcesArray,
  +x_react_sources?: ReactSourcesArray,
 |};
 
-export type MixedSourceMap = IndexMap | BasicSourceMap;
+export type MixedSourceMap = IndexSourceMap | BasicSourceMap;

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

@@ -0,0 +1,34 @@
+/*
+ * 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 {
+ BasicSourceMap,
+ MixedSourceMap,
+ IndexSourceMap,
+} from './SourceMapTypes';
+
+export function sourceMapIncludesSource(
+ sourcemap: MixedSourceMap,
+ source: ?string,
+): boolean {
+ if (source == null) {
+ return false;
+ }
+ if (sourcemap.mappings === undefined) {
+ const indexSourceMap: IndexSourceMap = sourcemap;
+ return indexSourceMap.sections.some(section => {
+ return sourceMapIncludesSource(section.map, source);
+ });
+ }
+
+ const basicMap: BasicSourceMap = sourcemap;
+ return basicMap.sources.some(
+ s => s === 'Inline Babel script' || source.endsWith(s),
+ );
+}