diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js index 69be1859fdc..2aeede652b5 100644 --- a/fixtures/flight/config/webpack.config.js +++ b/fixtures/flight/config/webpack.config.js @@ -15,6 +15,7 @@ const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin'); const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const paths = require('./paths'); const modules = require('./modules'); @@ -685,6 +686,15 @@ module.exports = function (webpackEnv) { }, }), // Fork Start + new DevToolsIgnorePlugin({ + shouldIgnorePath: function (path) { + return ( + path.includes('/node_modules/') || + path.includes('/webpack/') || + path.endsWith('/src/index.js') + ); + }, + }), new ReactFlightWebpackPlugin({ isServer: false, clientReferences: { diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json index 2aa38c85cab..6018ffb0e4f 100644 --- a/fixtures/flight/package.json +++ b/fixtures/flight/package.json @@ -29,6 +29,7 @@ "concurrently": "^7.3.0", "css-loader": "^6.5.1", "css-minimizer-webpack-plugin": "^3.2.0", + "devtools-ignore-webpack-plugin": "^0.2.0", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", "file-loader": "^6.2.0", diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js index 564c7b78dd9..0f96f3aa74b 100644 --- a/fixtures/flight/server/region.js +++ b/fixtures/flight/server/region.js @@ -58,7 +58,8 @@ function filterStackFrame(sourceURL, functionName) { sourceURL !== '' && !sourceURL.startsWith('node:') && !sourceURL.includes('node_modules') && - !sourceURL.endsWith('library.js') + !sourceURL.endsWith('library.js') && + !sourceURL.includes('/server/region.js') ); } diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock index 928e18a35eb..3acf46a0a00 100644 --- a/fixtures/flight/yarn.lock +++ b/fixtures/flight/yarn.lock @@ -4614,6 +4614,11 @@ detect-port-alt@^1.1.6: address "^1.0.1" debug "^2.6.0" +devtools-ignore-webpack-plugin@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/devtools-ignore-webpack-plugin/-/devtools-ignore-webpack-plugin-0.2.0.tgz#a7b3d1bd0f593c7fee5cbb7534b07860e5e2447c" + integrity sha512-4P+1Y1VhSt1MRBRF6my8N1bs9nNMOFfIFSBHI6u18W73iCHWXNHTSWYeMoQQ72PIIHrP1q4koKpYg1Em3jb9Rw== + didyoumean@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037" @@ -8650,16 +8655,7 @@ string-length@^5.0.1: char-regex "^2.0.0" strip-ansi "^7.0.1" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -8730,14 +8726,7 @@ string_decoder@^1.1.1: dependencies: safe-buffer "~5.2.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -9452,16 +9441,7 @@ wordwrap@~1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index dacbe0f46b9..dcffd2a228b 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -401,7 +401,10 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.f = f; function f() { } //# sourceMappingURL=`; - const result = ['', 'http://test/a.mts', 1, 17]; + const result = { + location: ['', 'http://test/a.mts', 1, 17], + ignored: false, + }; const fs = { 'http://test/a.mts': `export function f() {}`, 'http://test/a.mjs.map': `{"version":3,"file":"a.mjs","sourceRoot":"","sources":["a.mts"],"names":[],"mappings":";;AAAA,cAAsB;AAAtB,SAAgB,CAAC,KAAI,CAAC"}`, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index e7b70520572..200f78586c5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -7,6 +7,8 @@ * @flow */ +import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource'; + import * as React from 'react'; import {useCallback, useContext, useSyncExternalStore} from 'react'; import {TreeStateContext} from './TreeContext'; @@ -28,8 +30,6 @@ import useEditorURL from '../useEditorURL'; import styles from './InspectedElement.css'; -import type {ReactFunctionLocation} from 'shared/ReactTypes'; - export type Props = {}; // TODO Make edits and deletes also use transition API! @@ -61,7 +61,7 @@ export default function InspectedElementWrapper(_: Props): React.Node { ? inspectedElement.stack[0] : null; - const symbolicatedSourcePromise: Promise = + const symbolicatedSourcePromise: Promise = React.useMemo(() => { if (fetchFileWithCaching == null) return noSourcePromise; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js index a3dea3f888f..9faf6c1d7ab 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js @@ -17,6 +17,7 @@ import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/wit import useOpenResource from '../useOpenResource'; +import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource'; import type {ReactFunctionLocation} from 'shared/ReactTypes'; import styles from './InspectedElementSourcePanel.css'; @@ -24,7 +25,7 @@ import formatLocationForDisplay from './formatLocationForDisplay'; type Props = { source: ReactFunctionLocation, - symbolicatedSourcePromise: Promise, + symbolicatedSourcePromise: Promise, }; function InspectedElementSourcePanel({ @@ -80,7 +81,7 @@ function CopySourceButton({source, symbolicatedSourcePromise}: Props) { ); } - const [, sourceURL, line, column] = symbolicatedSource; + const [, sourceURL, line, column] = symbolicatedSource.location; const handleCopy = withPermissionsCheck( {permissions: ['clipboardWrite']}, () => copy(`${sourceURL}:${line}:${column}`), @@ -98,11 +99,11 @@ function FormattedSourceString({source, symbolicatedSourcePromise}: Props) { const [linkIsEnabled, viewSource] = useOpenResource( source, - symbolicatedSource, + symbolicatedSource == null ? null : symbolicatedSource.location, ); const [, sourceURL, line, column] = - symbolicatedSource == null ? source : symbolicatedSource; + symbolicatedSource == null ? source : symbolicatedSource.location; return (
, + symbolicatedSourcePromise: Promise, }; export default function InspectedElementView({ diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js index ee2fbe6c4d2..7170c2494f9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js @@ -13,12 +13,13 @@ import ButtonIcon from '../ButtonIcon'; import Button from '../Button'; import type {ReactFunctionLocation} from 'shared/ReactTypes'; +import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource'; import useOpenResource from '../useOpenResource'; type Props = { source: null | ReactFunctionLocation, - symbolicatedSourcePromise: Promise | null, + symbolicatedSourcePromise: Promise | null, }; function InspectedElementViewSourceButton({ @@ -42,7 +43,7 @@ function InspectedElementViewSourceButton({ type ActualSourceButtonProps = { source: null | ReactFunctionLocation, - symbolicatedSourcePromise: Promise | null, + symbolicatedSourcePromise: Promise | null, }; function ActualSourceButton({ source, @@ -55,7 +56,7 @@ function ActualSourceButton({ const [buttonIsEnabled, viewSource] = useOpenResource( source, - symbolicatedSource, + symbolicatedSource == null ? null : symbolicatedSource.location, ); return (