Summary:
Debugging with not having Metro console.log() working in Venice is inconvenient.
After PeteTheHeat's fixes in diff series D26624224 the ground issues should be gone, so I tried removing the guard for Android and it worked.
The only issue I found is that when connected to Hermes Debugger in Flipper it keeps refreshing (reloading?), I posted here https://fb.workplace.com/groups/2308952995990093/permalink/2899448643607189/, with this found, I think it's a good start to iterate on since there are no crashes and this would help us a lot on Venice debugging.
Changelog:
[Android][Changed] - Remove developer tool guard for android
Reviewed By: PeteTheHeat
Differential Revision: D26779418
fbshipit-source-id: 96bb18771e01a25f84f845833a4f71e70433ef2b
Summary:
Changelog: [Internal]
I'm trying to get Fast refresh working in bridgeless mode. I need the ` require('./setUpReactRefresh');` line to be executed to do so.
I'm not sure why this was commented out in the first place, it seems to be working fine in FBiOS/FB4A.
Reviewed By: p-sun
Differential Revision: D26289573
fbshipit-source-id: 6151f781c31e3aadaebfeb759d3eb776e8b525cc
Summary:
ES Modules implicitly enable strict mode. Adding the "use strict" directive is, therefore, not required.
This diff removes all "use strict" directives from ES modules.
Changelog:
[Internal]
Reviewed By: motiz88
Differential Revision: D26172715
fbshipit-source-id: 57957bcbb672c4c3e62b1db633cf425c1c9d6430
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html
Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.
Reviewed By: zertosh
Differential Revision: D20636268
fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
Summary: changelog: [General] `console.error` calls, and uncaught exceptions are now displayed in the Metro logs as well
Reviewed By: passy
Differential Revision: D19743075
fbshipit-source-id: a665a06cfc7854ae785af177af8f2478bb1d76b0
Summary:
We are rolling out exact-by-default syntax to xplat/js.
I had to manually move around some comments to preserve proper placement.
Changelog: [Internal]
Reviewed By: jbrown215
Differential Revision: D18633611
fbshipit-source-id: 48f7468dcc55b1d00985419d035a61c6820b3abe
Summary:
still some generated files in www that need to land before we can release 0.111 here.
drop-conflicts
Changelog: [Internal]
(Note: this ignores all push blocking failures!)
Reviewed By: dsainati1
Differential Revision: D18278838
fbshipit-source-id: b20c3fefb3aab7c5fb614b33d846c7548184f49a
Summary:
When testing out the NetworkOverlay, I noticed that we were creating a lot of WebSocket connections for localhost:8097. Rick found that this is because we're trying to connect to React devtools every 2 seconds: https://github.com/facebook/react/blob/master/packages/react-devtools-core/src/backend.js#L67 and it appears we create a new WebSocket every time.
Dan suggested that we use opening the dev menu as a trigger for attempting to connect to React devtools. This diff uses RCTNativeAppEventEmitter to emit an event from native when the dev menu/dialog is shown, and listening to that event in JS to attempt to connect to devtools.
I'm also making the change of passing in a websocket instead of just passing in the host + port; this way it will only attempt to connect once on each call to `connectToDevTools` (otherwise, we would attempt to reconnect every 2 seconds as soon as the dev menu is opened, and then the next time the menu is opened we'd so start that *again*, and so on - I could have it keep track of whether it's already connecting and avoid doing it again, but this is easier and should be sufficient, I think).
We should probably also update the suggested troubleshooting tips on the devtools page to reflect this change, so that people don't get confused.
Changelog: [General] [Fixed] Fix issue where we attempt to connect to React devtools every 2 seconds
Reviewed By: mmmulani
Differential Revision: D17919808
fbshipit-source-id: 4658d995c274574d22f2f54ea06d7f29ef2f54dc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/26883
This diff fixes an issue reported in https://github.com/facebook/react-native/issues/26788 where logs in the Chrome console were showing a different location than previous versions.
In the change here, we stop wrapping the console functions to attach the metro websocket in any environment that isn't a native app environment. We do this by checking `global.nativeLoggingHook` which is bound only by native apps and not environments like the Chrome DevTools.
Changelog: [General][Fixed] - Fix wrong lines logging in Chrome debugger
Reviewed By: cpojer, gaearon
Differential Revision: D17951707
fbshipit-source-id: f045ea9abaa8aecc6afb8eca7db9842146a3d872
Summary:
This Diff is being posted for discussion purposes. It will not be ready to land until React DevTools v4 has been published to NPM.
Update React Native to be compatible with the [new version 4 React DevTools extension](https://github.com/bvaughn/react-devtools-experimental).
**Note that this is a breaking change**, as the version 3 and version 4 backends are **not compatible**. Once this update ships (in React Native) users will be required to update their version of the [`react-devtools` NPM package](https://www.npmjs.com/package/react-devtools). The same will be true for IDEs like Nuclide as well as other developer tools like Flipper and [React Native Debugger](https://github.com/jhen0409/react-native-debugger).
Related changes also included in this diff are:
* Pass an explicit whitelist of style props for the React Native style editor (to improve developer experience when adding new styles).
* Update `YellowBox` console patching to coordinate with DevTools own console patching.
* Also improved formatting slightly by not calling `stringifySafe` for strings (since this adds visible quotation marks).
Regarding the console patching- component stacks will be appended by default when there's no DevTools frontend open. The frontend will provide an option to turn this behavior off though:
{F168852162}
React DevTools will detect if the new version is used with an older version of React Native, and offer inline upgrade instructions:
{F169306863}
**Note that the change to the `RCTEnableTurboModule` will not be included in this Diff**. I've just turned those off temporarily so I can use v8+Chrome for debugging.
Reviewed By: rickhanlonii
Differential Revision: D15973709
fbshipit-source-id: bb9d83fc829af4693e7a10a622acc95a411a48e4
Summary:
This change switches the sending of log messages to Metro from HTTP over to WebSocket. This is what I should have done from the beginning *however* I only spent very little time on this initially, didn't realize that it would be a popular feature *and* we didn't have a persistent WebSocket connection on the client before that was always on. Together with D16442656 we can finally make this happen!
This change:
* Changes the `fetch` call to `HMRClient.log`
* Removes the middleware and integrates logging with `HmrServer` directly in Metro.
* Simplifies the logging logic as WebSockets guarantee messages are processed in order.
This also fixes an issue makovkastar identified when using the `MessageQueue` spy: because we send messages back and forth over the bridge, using `console.log` within `MessageQueue`'s spy method will actually cause an infinite logging loop. This is the proper solution to that problem instead of hacking around it using custom headers.
Note: in a follow-up we will rename these modules to drop the `HMR` prefix. We have not come up with a better name yet and are open to ideas.
Reviewed By: sebmck
Differential Revision: D16458499
fbshipit-source-id: 4c06acece1fef5234015c877354fb730b155168c
Summary: There is a `setUpDeveloperTools.js` and a `setupDevtools.js` files. While they do set up different devtools it is very confusing to have these two files. This diff inlines one in the other which should bring more clarity.
Reviewed By: gaearon
Differential Revision: D16121236
fbshipit-source-id: 45641c7af9639ede6dc237ac53b763cd804a05c2
Summary:
This adds a few more methods that are forwarded to Metro, most notably `console.group`, `console.groupCollapsed` and `console.groupEnd`. When using `console.group`, node.js's `console` implementation will use indentation for log messages. `console.groupCollapsed`, for now, will simply not print anything to the console. This removes all of the Relay information that was impossible to look at in Metro before.
In the future, I'd like to consider somehow including collapsed groups in the output with a way to interact and navigate through them but for now, if people would like to debug Relay queries, they should use whatever they have been using before Metro had logs.
Reviewed By: gaearon
Differential Revision: D16108266
fbshipit-source-id: 97337d93eed0b8cb464df78b59ade1fe340b7f6f
Summary:
This removes React Transform HMR in favor of the new React Refresh implementation. It should only affect the "Enable Hot Reloading" mode. In further diffs I will remove "React Transform HMR" completely.
This is technically a breaking change for Metro so it'll need a version bump.
Reviewed By: rickhanlonii, rubennorte
Differential Revision: D15903585
fbshipit-source-id: 074380b00868cb31857f599a03799d3584c35d87
Summary:
This adds the Fresh Babel plugin and runtime to React Native dependencies. **They're not actually being used or enabled yet**. This is purely additive and just gets the deps setup out of the way for future diffs.
The `react-refresh` source of truth is in the React repo.
Reviewed By: cpojer
Differential Revision: D15828330
fbshipit-source-id: 67ec2dea8c896477ff8b434445f1730e388ea67a
Summary: Developer tools have a lot of dependencies on the bridge, so for now I'm just disabling them in bridgeless mode entirely by guarding everything in `setUpDeveloperTools` with the `RN$Bridgeless` flag. Also consolidating some of the stuff Dan added to `InitializeCore` for hot reloading in here.
Reviewed By: zackargyle
Differential Revision: D15797924
fbshipit-source-id: 360ea81a2844e49f7281eed259fc16a541148ac2
Summary:
People ask "How do you use `console.log` with React Native?" and there is no good answer. This diff aims to stop people from asking this question.
See https://fb.workplace.com/groups/rn.core/permalink/2372327062999018/ for context.
This logging relies on network requests which can cause logs to show up out-of-order. To reduce the likelihood I queue every log message on the server for a maximum of 200ms. There could be other methods, like using websocket, but that seems more complex than is necessary at least in the beginning.
I considered various throttling strategies because this could be quite chatty and possibly problematic, however I think we can just ship this and iterate based on feedback. On my very underpowered laptop I logged a random number every 10 milliseconds and it didn't cause any issues or slowdown.
Reviewed By: gaearon
Differential Revision: D15559151
fbshipit-source-id: 552001622af0937ae3a37d2bd8c1b96e7ca52020
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.
See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.
[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749
Differential Revision: D15258017
Pulled By: cpojer
fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
Summary: Split up InitializeCore into a bunch of modules. The idea here is to make it easier for apps to just get the initialization logic they want and leave behind what they don't; for example, if you don't want the Map/Set polyfills, instead of requiring InitializeCore you can require the modules you want from it.
Reviewed By: yungsters
Differential Revision: D10842564
fbshipit-source-id: 3b12d54fddea8c4ee75886022338c214987a015c
Lulu Wu
Peter Argany
Micha Reiser
Michael Bolin
Michel Weststrate
George Zahariev
Jordan Brown
Emily Janzer
Rick Hanlon
Andres Suarez
Brian Vaughn
Christoph Nakazawa
Dan Abramov
James Ide