DevTools: Show hook names based on variable usage #21641
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment has been hidden.
This comment has been hidden.
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com> Co-authored-by: Saphal Patro <saphal1998@gmail.com> Co-authored-by: VibhorCodecianGupta <vibhordelgupta@gmail.com>
Compiled source is not linted or formatted.
I think this error on CI means that Yarn resolutions aren't working correctly and the tests are being run with the wrong version of "source-map". I'll have to dig into that. |
|
The failing tests (in I also verified that Chrome loads both inline and external source maps correctly for the compiled files, so it seems most likely to be something related to how Jest or the test environment work. Looking at the source location info returned by "react-debug-tools", the line and column numbers seem correct. So I think the problem is somehow related to the source map conversion. Consider this example code: import React, {useState} from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}In the "source-map" library, looking at this part of this code I'm seeing a mismatch between the "needle" (where in the code our Error stack parsing library says the source is) and the "mapping" (where the source maps parsing library thinks it is): if (mapping) {
// mapping.generatedLine aligns with compiled code
// needle.generatedLine aligns with source code
// Why are they expected to match?
if (mapping.generatedLine === needle.generatedLine) {
let source = util.getArg(mapping, "source", null);
if (source !== null) {
source = this._absoluteSources.at(source);
}
let name = util.getArg(mapping, "name", null);
if (name !== null) {
name = this._names.at(name);
}
return {
source,
line: util.getArg(mapping, "originalLine", null),
column: util.getArg(mapping, "originalColumn", null),
name
};
}
}
// Instead this is being returned.
return {
source: null,
line: null,
column: null,
name: null
};In the browser, I see that both needle and mapping line up (e.g. |
Builds on top of MLH-Fellowship#115. Special thanks to @saphal1998 and @VibhorCodecianGupta for working on this feature.
MLH-Fellowship#115 is several months old (my fault) and a lot has changed. In addition to that, there were some unanswered questions still as of the end of last year when I last reviewed it. This PR stacks on top of that one and tracks the remaining work (listed below) which I will be addressing shortly.
Misc
InspectedElementContext(which changed dramatically in #20548 and #20789). (Split loading and parsing names into their own separate Suspense cache and return an array of names rather than mutating the inspected element objects.)chrome.*) fromreact-devtools-sharedpackage and it put into thereact-devtools-extensionspackage.enableddisabled by default) to toggle named hooks support (in case performance degrades poorly for large sites).Embedded static resources
react-devtools-shared/src/__tests__/resources/bundle.jsfile in favor of a pre-test script that generates this bundle (but does not check it into the Git repository).packages/react-devtools-extensions/mappings.wasmfile from source. (Even if we do a just-in-time copy fromnode_modulesas part of the build process for the browser extension buidls.)Feature flags
'react-devtools-feature-flags'.Testing
enableProfilerChangedHookIndicesfeatures are compatible.