Summary:
This diff upgrade dependencies to `react-devtools-core` to 4.27.2, which includes changes I need to unblock trace update highlights.
- Update package.json file for dependencies in all existing deps with latest version (4.26.1): https://fburl.com/code/litgze0m
- Run `yarn` under `xplat/js` and `xplat/js/public`
Changelog:
[General][Internal] - Upgrade react-devtools-core to 4.27.2
Reviewed By: javache
Differential Revision: D43176345
fbshipit-source-id: 8bd5a9eca286bbfbb1630cb92c15f9653fa3534a
Summary: Show tab bar in React DevTools to allow switching to Profiler
Reviewed By: nikoant
Differential Revision: D35747309
fbshipit-source-id: ca7e65fdd30261aabc5f05fe10b451c115a92b7f
Summary:
- Support loading globally installed DevTools
Background:
1. Initially, I wanted to use react-devtools-core as before. react-devtools-core standalone contains quite a few imports of node.js APIs. After [a conversation with Brian](https://fb.workplace.com/groups/react.devtools/permalink/3131548550392044), I pivoted to react-devtools-inline
2. Technical design doc of react-devtools-inline integration: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4
3. We support usage of globally installed devtools. Code of react-devtools-inline is not ready to be used by the browser as is. We need to bundle it and substitute React and ReactDOM imports with the globals.
4. As we can't pre-compile what users install globally, we need to bundle global devtools on demand,
5. I tried re-using our Metro bundling pipeline initially, but gave up after fighting it for 2 days. Included, `rollup` instead.
6. Size of a `tgz` archive with a plugin is 2.1MB
allow-large-files
Reviewed By: mweststrate
Differential Revision: D34968770
fbshipit-source-id: 352299964ccc195b8677dbda47db84ffaf38737b
Summary:
Changelog: Migrate from react-devtools-core to -react-devtools-inline
Technical design doc: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4
At this point, React DevTools doe snot support globally installed DevTools. Only the bundled version. The support for the globally installed DevTools comes in the subsequent diffs along with on-the-fly transpilation.
Reviewed By: mweststrate
Differential Revision: D34926472
fbshipit-source-id: fde1d4cf386adfbf8a8581ee5a54e950d2cb34ef
Summary:
This commit makes it so when running the internal version of Flipper, we always prefer the internal build of React DevTools as opposed to a global install of DevTools. Note that users may still change the version the use and select the global version.
Externally, i.e. for the OSS build, users will still have the option to always prefer the global build and toggle between it.
The motivation for this is to let us ensure that employees are using the latest version of React DevTools and in order to obtain accurate logs of internal usage of DevTools
Reviewed By: mweststrate
Differential Revision: D33167394
fbshipit-source-id: ee75eedc3a488e223189bbfa6288408bb84824e3
Summary:
Facenook:
Use downloadFile API in Mobile Builds plugin
Reviewed By: mweststrate
Differential Revision: D32922041
fbshipit-source-id: d554ed9287af3bda4329e87732ab4de67136c0d2
Summary: This diff stubs all node modules when running in the browser, so that, albeit with a lot of errors and without plugins, the UI loads in a browser. To be continued in the rest of this diff
Reviewed By: antonk52
Differential Revision: D32665705
fbshipit-source-id: 4632e241f59c5b9712a41d01a26878afb01f69b5
Summary: Uses the new statuses emitted by DevTools in https://github.com/facebook/react/pull/22848 to better handle the connection state when connecting to DevTools from Flipper.
Reviewed By: bvaughn
Differential Revision: D32891240
fbshipit-source-id: 142d9996e05b5113e6dca28074c461d5a5acd38f
Summary:
This commit makes it so when we load DevTools from within Flipper we log it as a Flipper load and not a regular standalone app load.
Note that the logging only applies internally.
Reviewed By: bvaughn
Differential Revision: D32884616
fbshipit-source-id: 90d0962bac9c1abdde36a70fd361251d7e607b57
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/3139
This commit adds new UI in the top level toolbar to allow internal FB users to switch between the internal build of devtools and the OSS one.
## Scenarios
**Internal (when `client.isFB`)**
- DevTools version will default to the internal version, and will render a `Select` component with option to switch to the OSS version.
- If a global install of DevTools is present, the selection menu will also offer the option to switch to the global DevTools version.
**External (when `!client.isFB`)**
Will preserve previous behavior:
- Uses the OSS version by default, and doesn't provide option to switch to internal version.
- If a global installation is present, will render a `Switch` component that allows switching between OSS and global installation.
### Implementation
This commit refactors some parts of the DevTools plugin to provide a bit more clarity in the loading sequence by renaming and modifying some of the messaging, and fixing lint warnings.
A change introduced here is that when switching or loading devtools, when we attempt to reload the device via Metro, don't immediately show a "Retry" button, since at that point nothing has gone wrong, and the Retry button will only occur if the Metro reload doesn't occur after a few seconds.
In a future commit, this [PR in Devtools](https://github.com/facebook/react/pull/22848) will allow us to clear any loading messages once DevTools has successfully connected.
Reviewed By: lunaruan, mweststrate
Differential Revision: D32773200
fbshipit-source-id: aa15ffecba7b2b2ea74e109e9f16334d47bf5868
Summary:
This commit update the React DevTools Flipper plugin to use the internal build of `react-devtools-core/standalone`.
The internal build of `react-devtools-core/standalone` is generated by the new sync script: `js1 upgrade react-devtools-core`, which places the build under `xplat/sonar/desktop/plugins/public/reactdevtools/fb`.
As a follow up, we can add a dropdown to allow users to select which version of React DevTools they'd like to use.
Reviewed By: mweststrate
Differential Revision: D31904288
fbshipit-source-id: ce0880284bd7f9ccaa6258a7c2956f20771e81a9
Summary:
1. Add `path` replacement
1. Remove Node's path for all plugins but MobileBuildsPluginContainer (it is probably going to be moved to the server)
Reviewed By: mweststrate
Differential Revision: D32766327
fbshipit-source-id: e636f273842506e752b97cf1b28ce7ac51ce9a12
Summary: `device.realDevice` was the escape hatch used in Sandy plugins to give access to device specific features like taking screenshots, clearing logs or accessing `adb`. Since in decapitated Flipper that won't be possible anymore (since plugins run in the client but device implementations on the server), all escape hatches have been bridged in this stack, and we can get of the `realDevice` interaction, by explicitly exposing those cases, which makes it type safe as well.
Reviewed By: passy
Differential Revision: D31079509
fbshipit-source-id: c9ec2e044d0dec0ccb1de287cf424907b198f818
Summary: Apply local storage setting at a few relevant places, see parent diff
Reviewed By: cekkaewnumchai
Differential Revision: D29516498
fbshipit-source-id: 4797986e3540217e42dfb867f7d627921b97618e
Summary: Now we support splitting metadata to public and fb-internal (see the previous diff in the stack), and this diff actually cleans up all public plugin metadata from fb-specific things.
Reviewed By: passy
Differential Revision: D28568413
fbshipit-source-id: eae699eabaae489c4bcfbfcc407c3bef42bfd338
Summary:
This diff fixes several existing issues in the React DevTools:
Every time the user opened the plugin we re-instantiated the devtools, which has a few problems: 1) it looses all state (e.g. selection), and 2) this causes the tools to start a websocket listener on a new port, that was never cleaned up, or ever used, since React Native always connects to port 8097 anyway.
To preserve the state the idea of the original implementation was to move the devTools out of the current view, without disposing it. This actually didn't work in practice due to a faulty implementation, causing a full reinialization of the tools every time. Addressed this by reusing the mechanism that is used by the Hermes debugger tools as well.
By properly managing the port (e.g. closing it), there is no need to start (in vain) the devTools on a random port.
Port reversal for physical devices needs to happen only once, in principle upon connecting the device, so moved it to the device logic, which also avoids the need to hack into the global Flipper store.
Avoiding recreating the devTools makes plugin switching near instant, instead of needing to wait for a few seconds until the devTools connect.
When multiple apps are connected the behavior is now consistent: the application that refreshed last will be the one visible in the devTools. (That is still pretty suboptimal, but at least predicable and not a use case that is requested / supported in the DevTools themselves atm)
There is still ugly DOM business going on, did put that in a stand alone component for now.
Didn't extract the shared logic with Hermes plugin yet, but did verify both are still working correctly.
Changelog: [React DevTools] Several improvements that should improve the overal experience, the plugin should load much quicker and behave more predictably.
Reviewed By: bvaughn
Differential Revision: D28382587
fbshipit-source-id: 0f2787b24fa2afdf5014dbf1d79240606405199a
Summary:
Currently Flipper embeds the React devTools, and as a result the version of the React devTools is strictly coupled to the Flipper version. This is troublesome when connecting to (slightly) older React Native versions, that use a different version of the tools. That results in errors like this one:
{F615263497}
This diff introduces a feature to use globally installed devTools instead of the embedded ones, giving users the flexibility to pick their own version.
{F615263580}
This addresses
https://fb.workplace.com/groups/flippersupport/permalink/1125669971246993/https://github.com/facebook/flipper/issues/2250https://github.com/facebook/flipper/issues/2224
Changelog: [React DevTools] It is now possible to switch between the embedded and globally installed version of the React DevTools. This will enable the React DevTools to connect to older RN versions. Fixes#2250, #2224
Reviewed By: passy
Differential Revision: D28382586
fbshipit-source-id: a5386a5043933acda5aab2db74078bf7ceb105ca
Summary:
Converted ReactDevTools to Sandy, no real semantic changes. Will add those in next diffs.
Made some minor flow optimizations.
The port forwarding setup interacted directly with the Flipper store, so made an escape hatch for that. Will clean that up again in next diffs.
Reviewed By: passy
Differential Revision: D28380055
fbshipit-source-id: 053979fd10bf3b62089a4f1e27b0e02b4b05e2e1
Summary:
React DevTools has gotten pretty outdated in React Native. Let's fix that!
Last time I tried this it caused a lot of churn for tools like Flipper, so I approached this in two steps ([detailed in this post](https://fb.workplace.com/groups/rnsyncsquad/permalink/808063140086959/)).
First was a short term plan (as implemented in [PR 21344](https://github.com/facebook/react/pull/21344)) to:
1. Branch and make a patch release of DevTools 4.10 that adds a protocol check to the frontend (to detect any newer backends).
2. Upgrade Flipper (and recommend upgrade for the OSS React Native Debugger as well) to this new frontend.
3. Wait for the updated frontend to roll out.
The short term plan is now done, at least for the internal build of Flipper, and both GitHub PRs to update Flipper and React Native Debugger have been merged.
So this diff moves forward with the longer term plan (implemented in [PR 21331](https://github.com/facebook/react/pull/21331)):
1. Add an explicit version to the protocol used by the DevTools "backend" and "frontend" components to talk to each other.
2. Check this protocol during initialization to ensure it matches.
3. Show upgrade/downgrade instructions if there's a mismatch (or if the check times out without a response– indicating an older backend).
4. Release this as 4.13.
---
Changelog:
[General][Changed] - Upgrade `react-devtools-core` from ~4.6.0 to ^4.13.0
Reviewed By: yungsters
Differential Revision: D28103394
fbshipit-source-id: 21114294144bde9aede63cb3ba98a240082299bd
Summary:
4.10.2 had an fburl.com link in it when I should have used an fb.me link :( I'm sorry
cc mweststrate
Pull Request resolved: https://github.com/facebook/flipper/pull/2244
Reviewed By: passy
Differential Revision: D28054736
Pulled By: mweststrate
fbshipit-source-id: 0330f884e5d82cc669232aee3d8439b0f51240bd
Summary:
Reverts D27764688 (7bd4f80c25) due to a bug with "Invalid hook call." being erroneously reported. We will upgrade again after that bug is resolved.
Changelog:
[Internal]
Reviewed By: fkgozali
Differential Revision: D27813660
fbshipit-source-id: 84a12f19cf1bb7e8aebef0da3ff6f7022c391d3e
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/2172
New script which runs "tsc" for all plugins, receives list of errors and then checks which plugins are affected. It works for shared libs too, e.g. if there is an error in a shared library, then all plugins dependant on it will be counted as affected. For convenience, script saves list of errors affecting each plugin to "tsc-errors.log" in plugin folder.
This script will be used for automatic type-checking plugins against current "stable" and "insiders" versions of Flipper.
An alternative to this implementation would be to simply run "tsc" for each plugin individually, but such implementation takes a lot of time (5+ sec per plugin) and so cannot be effectively used on diffs.
Reviewed By: mweststrate
Differential Revision: D27499765
fbshipit-source-id: fcbbfc94a13e6c7c5beff0c889a929f84c41b2dd
Summary:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.
Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).
New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
--- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
--- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
--- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.
Reviewed By: mweststrate
Differential Revision: D27034108
fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586
