dillon1000/react
Commit
Browse files [DevTools] Access metadata in source maps correctly accounting for different formats (#22096)
## Summary Follow up from https://github.com/facebook/react/pull/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 https://github.com/facebook/react/issues/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).
Changed paths105 files
First-parent comparisonpackages/react-devtools-extensions/src/SourceMapMetadataConsumer.js AddedM packages/react-devtools-extensions/src/SourceMapTypes.js ModifiedA packages/react-devtools-extensions/src/SourceMapUtils.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js AddedA packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js AddedM packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js ModifiedM packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js ModifiedM packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…