Commit Graph

6 Commits

Author SHA1 Message Date
Ruslan Lesiutin 6f23540c7d cleanup[react-devtools]: remove unused supportsProfiling flag from store config (#29193)
Looks like this is unused
2024-05-28 11:07:31 +01:00
Moti Zilberman afe54bfcbf [DevTools] Expose "view source" options to Fusebox integration (#28973)
## Summary

Exposes the APIs needed by React Native DevTools (Fusebox) to implement
the "view element source" and "view attribute source" features.

## How did you test this change?

1. `yarn build` in `react-devtools-fusebox`
2. Copy artifacts to rn-chrome-devtools-frontend
3. Write some additional glue code to implement
`viewElementSourceFunction` in our CDT fork.
4. Test the feature manually.


https://github.com/facebook/react/assets/2246565/12667018-100a-4b3f-957a-06c07f2af41a
2024-05-07 16:06:36 +01:00
Moti Zilberman e3fbb51db6 [DevTools] Enable inspected element context menu in Fusebox (#28972)
## Summary

Enables the inspected element context menu in React Native DevTools
(Fusebox).

## How did you test this change?

1. `yarn build` in `react-devtools-fusebox`
2. Copy artifacts to rn-chrome-devtools-frontend
3. Manually test the context menu


https://github.com/facebook/react/assets/2246565/b35cc20f-8d67-43b0-b863-7731e10fffac

NOTE: The serialised values sometimes expose React internals (e.g. Hook
data structures instead of just the values), but that seems to be a
problem equally on web, so I'm going for native<->web parity here.
2024-05-03 17:33:21 +01:00
Moti Zilberman 8f7dd5592b [DevTools] Check in frontend.d.ts for react-devtools-fusebox, include in build output (#28970)
## Summary

The `react-devtools-fusebox` private package is used in the React Native
DevTools (Fusebox) frontend by checking build artifacts into RN's
[fork]([`facebookexperimental/rn-chrome-devtools-frontend`](https://github.com/facebookexperimental/rn-chrome-devtools-frontend))
of the Chrome DevTools (CDT) repo - see
https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/22.

Currently, the CDT fork also includes a [manually written TypeScript
definition
file](https://github.com/facebookexperimental/rn-chrome-devtools-frontend/blob/1d5f8d5209ac49de97aec16732169d47bf525474/front_end/third_party/react-devtools/package/frontend.d.ts)
which describes `react-devtools-fusebox`'s API. This PR moves that file
into the React repo, next to the implementation of
`react-devtools-fusebox`, so we can update it atomically with changes to
the package.

As this is the first bit of TypeScript in this repo, the PR adds minimal
support for formatting `.d.ts` files with Prettier. It also opts out
`react-devtools-fusebox/dist/` from linting/formatting as a drive-by
fix.

For now, we'll just maintain the `.d.ts` file manually, but we could
consider leveraging
[`flow-api-translator`](https://www.npmjs.com/package/flow-api-translator)
to auto-generate it in the future.

## How did you test this change?

Build `react-devtools-fusebox`, observe that `dist/frontend.d.ts`
exists.
2024-05-03 17:32:41 +01:00
Ruslan Lesiutin 7625f0d501 feat[devtools-fusebox]: support theme option (#28832)
Support propagating theme from Chrome DevTools frontend, the field is
optional.

Next step, which is out of scope of this project and general improvement
for React DevTools: teach RDT to listen to theme changes and if the
theme preference is set to `auto` in settings, update the theme
accordingly with the browser devtools.
2024-04-12 17:26:37 +01:00
Ruslan Lesiutin 96c5846610 feat[devtools]: add package for fusebox integration (#28553)
## Summary

Stacked on https://github.com/facebook/react/pull/28552. Review only the
[last commit at the
top](https://github.com/facebook/react/pull/28553/commits/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55).

These changes add new package `react-devtools-fusebox`, which is the
entrypoint for the RDT Frontend, which will be used in Chrome DevTools
panel. The main differences from other frontend shells (extension,
standalone) are:
1. This package builds scripts in ESM format, this is required by Chrome
DevTools, see webpack config:

https://github.com/facebook/react/blob/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55/packages/react-devtools-fusebox/webpack.config.frontend.js#L50-L52
2. The build includes styles in a separate `.css` file, which is
required for Chrome DevTools: styles are loaded lazily once panel is
mounted.
2024-04-12 15:29:35 +01:00