Skip to content

Standalone NPM packages and React Native support (#335) * Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage. * Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed. * Adds support for React Native (paper renderer) * Adds a style editor for react-native and react-native-web - #10

Open
Menkalian wants to merge 1 commit into
ds_114-144-fromfrom
ds_114-144-to

Conversation

@Menkalian

Copy link
Copy Markdown
Owner

No description provided.

* Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage.
* Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed.
* Adds support for React Native (paper renderer)
* Adds a style editor for react-native and react-native-web
Copilot AI review requested due to automatic review settings January 8, 2026 21:39

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This pull request adds standalone NPM packages (react-devtools and react-devtools-core) with React Native support, replacing typed arrays with regular arrays for Hermes compatibility and introducing a style editor for React Native and react-native-web.

Key Changes:

  • Replaces Uint32Array with Array<number> throughout the codebase for Hermes compatibility
  • Adds two new NPM packages: react-devtools (Electron app) and react-devtools-core (backend/standalone)
  • Introduces React Native style editor with layout viewer and style editing capabilities

Reviewed changes

Copilot reviewed 73 out of 77 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
yarn.lock Adds dependencies for Electron, WebSocket (ws@^7), and various utilities
src/utils.js Converts UTF encoding functions from Uint32Array to Array
src/hydration.js Improves data type handling with PropType enum and NaN/Infinity support
src/devtools/views/DevTools.js Refactors viewElementSource API and removes browserName prop
src/devtools/store.js Adds native style editor support and operations handling
src/bridge.js Renames DOM-specific events to native* variants, changes operations type
src/backend/renderer.js Updates operations from Uint32Array to Array, adds getInstanceAndStyle
src/backend/agent.js Extracts highlighter setup, adds native style editor support
packages/react-devtools/* New Electron-based standalone package
packages/react-devtools-core/* New core package with backend and standalone implementations
babel.config.js Adds IE 11 target for Hermes/React Native compatibility

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

{style !== null && (
<StyleEditor
id={inspectedElementID}
style={style !== null ? style : {}}

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Variable 'style' cannot be of type null, but it is compared to an expression of type null.

Copilot uses AI. Check for mistakes.
@@ -0,0 +1,315 @@
// @flow

import Agent from 'src/backend/agent';

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Unused import Agent.

Copilot uses AI. Check for mistakes.
// @flow

import Agent from 'src/backend/agent';
import Bridge from 'src/bridge';

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Unused import Bridge.

Copilot uses AI. Check for mistakes.

import memoize from 'memoize-one';
import throttle from 'lodash.throttle';
import Bridge from 'src/bridge';

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Unused import Bridge.

Copilot uses AI. Check for mistakes.
import memoize from 'memoize-one';
import throttle from 'lodash.throttle';
import Bridge from 'src/bridge';
import Agent from 'src/backend/agent';

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Unused import Agent.

Copilot uses AI. Check for mistakes.
// @flow

import React, { Fragment, useContext, useMemo } from 'react';
import Store from 'src/devtools/store';

Copilot AI Jan 8, 2026

Copy link

Choose a reason for hiding this comment

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

Unused import Store.

Copilot uses AI. Check for mistakes.
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