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

Add named hooks support to react-devtools-inline #22263

Merged
Prev Previous commit
Next Next commit
Added instructions to react-devtools-inline README for new import() f…
…actory function
  • Loading branch information
Brian Vaughn committed Sep 9, 2021
commit 7c8609dbc4cbf64496c1e22640f08b9fbc9afed4
17 changes: 17 additions & 0 deletions packages/react-devtools-inline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow);

## Examples

### Supporting named hooks

DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and infering the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.

To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the dynamic webpack public path override also necessary to get this working in OSS or is that something that's only necessary in react-devtools-shell?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

TBH I'm not sure. Maybe it depends on which version of Webpack other projects are using?

Copy link
Contributor

Choose a reason for hiding this comment

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

If #22267 doesn't land, should we add that as a note in the README as well? It feels a bit unintuitive for developers otherwise (it definitely was for us 😅)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah...let's see what happens 😅 I'm not a Webpack expert so maybe there's a better way to do this than what I did.

TBH I don't think anyone (other than us, Code Sandbox, and Replay.io) uses the inline package.

```js
// Follow code examples above to configure the backend and frontend.
// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');

// Render:
<DevTools
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
{...otherProps}
/>;
```

### Configuring a same-origin `iframe`

The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions.
Expand Down