-
Notifications
You must be signed in to change notification settings - Fork 8
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
Split React DevTools into individual panels #107
Conversation
beacafe
to
53bd915
Compare
d13cee8
to
f1b2e42
Compare
readonly #wall: ReactDevToolsTypes.Wall; | ||
readonly #bindingsModel: ReactNativeModels.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel; | ||
readonly #listeners: Set<ReactDevToolsTypes.WallListener> = new Set(); | ||
#initialized: boolean = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TypeScript supports private
keyword, and it is far more popular than #
in this codebase. I don't have a strong opinion on this, but would prefer sticking to a single style across the whole codebase.
Is there a specific reason to use #
over private
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, functionally #
will act as private members at runtime, added to JS later than TypeScript's private
(which will simply do a compile time check). We definitely don't need to replace everywhere, but I'd prefer this convention in RN-unique files.
f1b2e42
to
1c755ec
Compare
Summary
Split the previous React DevTools panel into two individual panels, matching the current Chrome extension on web.
Key changes:
ReactDevToolsViewBase
.wall
,bridge
,store
,listeners
intoReactDevToolsModel
(to share across each panel).ensureInitialized
/isInitialized
pattern to runReactDevToolsBindingsModel
side-effects once.ReactDevToolsViewBase
to use theSDKModelObserver
(modelAdded
) pattern to reduce boilerplate.Test plan
🎬 https://pxl.cl/5tXQp
✅ ⚛️ Elements panel: Working Element highlighting and mouse hovering/panel focus changes
✅ Switching to another panel and back preserves highlighted element and scroll position (no re-mounting)
✅ ⚛️ Profiler panel: Switching to panel initialises correctly, profile can be taken
✅ Reload behaviour: Both panels reset and load (in reverse order)
Upstreaming plan
devtools-frontend
repo. I've reviewed the contribution guide.