Skip to content

[DevTools] Enable hook names in standalone app#32

Closed
c4rtune wants to merge 1 commit into
mainfrom
test_branch
Closed

[DevTools] Enable hook names in standalone app#32
c4rtune wants to merge 1 commit into
mainfrom
test_branch

Conversation

@c4rtune
Copy link
Copy Markdown
Owner

@c4rtune c4rtune commented Apr 30, 2026

Summary

This PR adds support for extracting hook names to the standalone version of React DevTools. The approach is similar to the approach in #22263:

  • Add a new webpack entry point for hook names
  • Pass a function to lazy load the hook names module generated by webpack to the standalone instance of DevTools.

Additionally:

  • Enable nodeIntegrationInWorker in the Electron BrowserWindow to ensure that the worker that parses hook names has access to Node.
  • When testing our standalone test fixture in Safari, I noticed that we were unable to parse hook names because the source file where the components are defined is an HTML file, and babel parser fails to parse this file. I added a follow up issue to address this: #22319, and in this commit added handling to parsing errors to produce a slightly better error message in the console.

Test Plan

  • yarn flow
  • yarn test
  • yarn test-build-devtools
  • hook names still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
  • hook names appear in standalone version of DevTools, testing with Safari

Screen Shot 2021-09-14 at 5 30 48 PM

  • hook names appear in standalone version of DevTools, testing with RN (#22370):

image

@MonnetalX
Copy link
Copy Markdown

🔍 PR Link Analysis

🔗 Ranked Links

#1 nodeIntegrationInWorker

🔍 The Electron documentation confirms that nodeIntegrationInWorker must be set to true in webPreferences to enable Node.js features in Web Workers, which is required for the standalone DevTools to extract hook names via a worker.

#2 image

🔍 The standalone version of React DevTools now supports extracting hook names by adding a new webpack entry point and enabling nodeIntegrationInWorker in Electron to lazy load the hook names module.

#3 #22263

🔍 The standalone version of React DevTools now supports extracting hook names by adding a new webpack entry point and enabling nodeIntegrationInWorker in Electron's BrowserWindow for lazy loading the hook names module.

#4 https://user-images.githubusercontent.com/1271509/133339780-ea2caed8-c163-46e1-a169-2c5200802554.png">

🔍 The standalone version of React DevTools now supports extracting hook names by adding a new webpack entry point and enabling lazy loading of the hook names module, similar to the approach in PR #22263.

@c4rtune c4rtune closed this May 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants