dillon1000/react
Commit
Browse files feat[devtools]: symbolicate source for inspected element (#28471)
Stacked on https://github.com/facebook/react/pull/28351, please review only the last commit. Top-level description of the approach: 1. Once user selects an element from the tree, frontend asks backend to return the inspected element, this is where we simulate an error happening in `render` function of the component and then we parse the error stack. As an improvement, we should probably migrate from custom implementation of error stack parser to `error-stack-parser` from npm. 2. When frontend receives the inspected element and this object is being propagated, we create a Promise for symbolicated source, which is then passed down to all components, which are using `source`. 3. These components use `use` hook for this promise and are wrapped in Suspense. Caching: 1. For browser extension, we cache Promises based on requested resource + key + column, also added use of `chrome.devtools.inspectedWindow.getResource` API. 2. For standalone case (RN), we cache based on requested resource url, we cache the content of it.
Changed paths24 files
First-parent comparison.eslintrc.js ModifiedM packages/react-debug-tools/package.json ModifiedM packages/react-devtools-core/src/standalone.js ModifiedM packages/react-devtools-extensions/src/main/fetchFileWithCaching.js ModifiedM packages/react-devtools-extensions/src/main/index.js ModifiedM packages/react-devtools-extensions/webpack.config.js ModifiedM packages/react-devtools-shared/package.json ModifiedM packages/react-devtools-shared/src/backendAPI.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js ModifiedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css AddedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js AddedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js ModifiedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js AddedA packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js AddedA packages/react-devtools-shared/src/devtools/views/Components/Skeleton.css AddedA packages/react-devtools-shared/src/devtools/views/Components/Skeleton.js AddedD packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js DeletedM packages/react-devtools-shared/src/devtools/views/DevTools.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js ModifiedA packages/react-devtools-shared/src/symbolicateSource.js AddedM packages/react-devtools-shared/src/utils.js ModifiedM yarn.lock ModifiedPatch
Files changed
Rendering syntax-highlighted changes…