Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supporting hook variable names in devtools extension #115

Closed
wants to merge 17 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/react-debug-tools/src/ReactDebugHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -317,12 +317,19 @@ const Dispatcher: DispatcherType = {

// Inspect

type HookSource = {
lineNumber: number | null,
columnNumber: number | null,
fileName: string | null,
functionName: string | null,
}
export type HooksNode = {
id: number | null,
isStateEditable: boolean,
name: string,
value: mixed,
subHooks: Array<HooksNode>,
hookSource: HookSource,
...
};
export type HooksTree = Array<HooksNode>;
Expand Down Expand Up @@ -499,6 +506,12 @@ function buildTree(rootStack, readHookLog): HooksTree {
name: parseCustomHookName(stack[j - 1].functionName),
value: undefined,
subHooks: children,
hookSource: {
lineNumber: stack[j].lineNumber,
columnNumber: stack[j].columnNumber,
functionName: stack[j].functionName,
fileName: stack[j].fileName
}
});
stackOfChildren.push(levelChildren);
levelChildren = children;
Expand All @@ -516,13 +529,22 @@ function buildTree(rootStack, readHookLog): HooksTree {

// For the time being, only State and Reducer hooks support runtime overrides.
const isStateEditable = primitive === 'Reducer' || primitive === 'State';
const hookSource: HookSource = {lineNumber: null, functionName: null, fileName: null, columnNumber: null}
if (stack && stack.length >= 1) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OR

Suggested change
if (stack && stack.length >= 1) {
if (stack?.length) {

const stackFrame = stack[0]
hookSource.lineNumber = stackFrame.lineNumber
hookSource.functionName = stackFrame.functionName
hookSource.fileName = stackFrame.fileName
hookSource.columnNumber = stackFrame.columnNumber
}

levelChildren.push({
id,
isStateEditable,
name: primitive,
value: hook.value,
subHooks: [],
hookSource
});
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const {getGitCommit} = require('./utils');

// These files are copied along with Webpack-bundled files
// to produce the final web extension
const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html', 'mappings.wasm'];

const preProcess = async (destinationPath, tempPath) => {
await remove(destinationPath); // Clean up from previously completed builds
Expand Down
3 changes: 2 additions & 1 deletion packages/react-devtools-extensions/chrome/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/renderer.js"
"build/renderer.js",
"mappings.wasm"
],

"background": {
Expand Down
Binary file added packages/react-devtools-extensions/mappings.wasm
Binary file not shown.
2 changes: 2 additions & 0 deletions packages/react-devtools-extensions/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
getAppendComponentStack,
getBreakOnConsoleErrors,
getSavedComponentFilters,
injectHookVariableNamesFunction
} from 'react-devtools-shared/src/utils';
import {
localStorageGetItem,
Expand Down Expand Up @@ -220,6 +221,7 @@ function createPanelIfReactLoaded() {
warnIfUnsupportedVersionDetected: true,
viewAttributeSourceFunction,
viewElementSourceFunction,
injectHookVariableNamesFunction,
}),
);
};
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.backend.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ module.exports = {
node: {
// Don't define a polyfill on window.setImmediate
setImmediate: false,
fs: 'empty',
},
resolve: {
alias: {
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ module.exports = {
node: {
// Don't define a polyfill on window.setImmediate
setImmediate: false,
fs: 'empty',
},
resolve: {
alias: {
Expand Down
5 changes: 4 additions & 1 deletion packages/react-devtools-shared/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"lodash.throttle": "^4.1.1",
"memoize-one": "^3.1.1",
"react-virtualized-auto-sizer": "^1.0.2",
"semver": "^6.3.0"
"semver": "^6.3.0",
"source-map": "^0.7.3",
bvaughn marked this conversation as resolved.
Show resolved Hide resolved
"@babel/traverse": "^7.12.5",
"@babel/parser": "^7.12.5"
bvaughn marked this conversation as resolved.
Show resolved Hide resolved
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`injectHookVariableNamesFunction should create hookLog injected with default variable names for no/multiple references: modified hook log 1`] = `
Array [
Object {
"hookSource": Object {
"columnNumber": 42,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 3,
},
"hookVariableName": "countState",
"id": 0,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": 1,
},
Object {
"hookSource": Object {
"columnNumber": 35,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 5,
},
"hookVariableName": "flagState",
"id": 1,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": false,
},
]
`;

exports[`injectHookVariableNamesFunction should create hookLog injected with variable names for destructured assignment: modified hook log 1`] = `
Array [
Object {
"hookSource": Object {
"columnNumber": 49,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 3,
},
"hookVariableName": "count",
"id": 0,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": 0,
},
Object {
"hookSource": Object {
"columnNumber": 41,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 4,
},
"hookVariableName": "flag",
"id": 1,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": false,
},
Object {
"hookSource": Object {
"columnNumber": 29,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 5,
},
"hookVariableName": "ref",
"id": 2,
"isStateEditable": false,
"name": "Ref",
"subHooks": Array [],
"value": undefined,
},
]
`;

exports[`injectHookVariableNamesFunction should create hookLog injected with variable names for inline/multi-line member expressions: modified hook log 1`] = `
Array [
Object {
"hookSource": Object {
"columnNumber": 42,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 3,
},
"hookVariableName": "count",
"id": 0,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": 1,
},
Object {
"hookSource": Object {
"columnNumber": 35,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 5,
},
"hookVariableName": "flag",
"id": 1,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": false,
},
Object {
"hookSource": Object {
"columnNumber": 41,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 8,
},
"hookVariableName": "tick",
"id": 2,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": 0,
},
]
`;

exports[`injectHookVariableNamesFunction should not inject hookLog with variable names for non declarative primitive hooks: modified hook log 1`] = `
Array [
Object {
"hookSource": Object {
"columnNumber": 44,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 3,
},
"hookVariableName": "flag",
"id": 0,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": false,
},
Object {
"hookSource": Object {
"columnNumber": 40,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 4,
},
"hookVariableName": "inputRef",
"id": 1,
"isStateEditable": false,
"name": "Ref",
"subHooks": Array [],
"value": undefined,
},
Object {
"hookSource": Object {
"columnNumber": 17,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 6,
},
"id": 2,
"isStateEditable": false,
"name": "Effect",
"subHooks": Array [],
"value": [Function],
},
Object {
"hookSource": Object {
"columnNumber": 17,
"fileName": "example-app.js",
"functionName": "Example",
"lineNumber": 9,
},
"id": 3,
"isStateEditable": false,
"name": "LayoutEffect",
"subHooks": Array [],
"value": [Function],
},
]
`;
Loading