Summary:
This is the first PR from a series of PRs grabbou and me will make to add blob support to React Native. The next PR will include blob support for XMLHttpRequest.
I'd like to get this merged with minimal changes to preserve the attribution. My next PR can contain bigger changes.
Blobs are used to transfer binary data between server and client. Currently React Native lacks a way to deal with binary data. The only thing that comes close is uploading files through a URI.
Current workarounds to transfer binary data includes encoding and decoding them to base64 and and transferring them as string, which is not ideal, since it increases the payload size and the whole payload needs to be sent via the bridge every time changes are made.
The PR adds a way to deal with blobs via a new native module. The blob is constructed on the native side and the data never needs to pass through the bridge. Currently the only way to create a blob is to receive a blob from the server via websocket.
The PR is largely a direct port of https://github.com/silklabs/silk/tree/master/react-native-blobs by philikon into RN (with changes to integrate with RN), and attributed as such.
> **Note:** This is a breaking change for all people running iOS without CocoaPods. You will have to manually add `RCTBlob.xcodeproj` to your `Libraries` and then, add it to Build Phases. Just follow the process of manual linking. We'll also need to document this process in the release notes.
Related discussion - https://github.com/facebook/react-native/issues/11103
- `Image` can't show image when `URL.createObjectURL` is used with large images on Android
The websocket integration can be tested via a simple server,
```js
const fs = require('fs');
const http = require('http');
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({
server: http.createServer().listen(7232),
});
wss.on('connection', (ws) => {
ws.on('message', (d) => {
console.log(d);
});
ws.send(fs.readFileSync('./some-file'));
});
```
Then on the client,
```js
var ws = new WebSocket('ws://localhost:7232');
ws.binaryType = 'blob';
ws.onerror = (error) => {
console.error(error);
};
ws.onmessage = (e) => {
console.log(e.data);
ws.send(e.data);
};
```
cc brentvatne ide
Closes https://github.com/facebook/react-native/pull/11417
Reviewed By: sahrens
Differential Revision: D5188484
Pulled By: javache
fbshipit-source-id: 6afcbc4d19aa7a27b0dc9d52701ba400e7d7e98f
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.
The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.
Reviewed By: davidaurelio
Differential Revision: D5388655
fbshipit-source-id: dc403f3d5e2d807529eb8569a85c45fec36a6a3e
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.
The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.
Reviewed By: davidaurelio
Differential Revision: D5321193
fbshipit-source-id: fd4805b28c8a2b986842e23570a64003370d2067
Summary:
The `requestIdleCallback` sometimes doesn't work in `Debug JS Remotely` mode if I use real device, the callback will never called. I guess it may be debugger worker and device caused by the time gap, or some cause websocket blocking, so it's just sometimes happening.
I think we can support [options](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/requestIdleCallback#Parameters) for that.
Added an example `Run requestIdleCallback with timeout option` for Timers of UIExplorer, it use `{ timeout: 100 }` option with burn CPU 100ms, we can see `didTimeout` is true.
Closes https://github.com/facebook/react-native/pull/13116
Differential Revision: D4894348
Pulled By: hramos
fbshipit-source-id: 29c4c2fe5634b30a8bf8d3495305cd8f635ed922
Summary:
These are bad since the app might not be foregrounded anymore and it also keeps the timing module awake. We could fix the latter but the former would require someone adding AlarmManager support.
Open to better/more helpful ideas for the warning message but there's not a ton we can tell them to do right now.
Reviewed By: achen1
Differential Revision: D4716273
fbshipit-source-id: c5d3a3ce8af53253b240477f2bde38094a138a02
Summary:
**Motivation**
This PR fixes the flow type definition of StackFrame in parseErrorStack.js. The methodName was missing and the column could be `null`. We integrate with it in our codebase and we wanted to use `methodName`, but flow complained.
Refer to this file for possible values: [github.com/errwischt/stacktrace-parser/blob/master/lib/stacktrace-parser.js](https://github.com/errwischt/stacktrace-parser/blob/master/lib/stacktrace-parser.js)
This also allowed me to remove a flow error suppression.
**Test plan (required)**
I ran flow on the project, no errors
Closes https://github.com/facebook/react-native/pull/12499
Differential Revision: D4619885
Pulled By: ericvicenti
fbshipit-source-id: 0bf5a2304cb0dc9f2c6df026a5cee71c8a419c01
Summary:
Largely typing fixes to deal with the glut of new `FlowFixMe` suppressions introduced with flow 0.38 in a4bfac907e
Tested with flow itself. CC gabelevi
Closes https://github.com/facebook/react-native/pull/11985
Differential Revision: D4452045
Pulled By: ericvicenti
fbshipit-source-id: acc46c4c406ae706a679e396be1d40ae2f4ce5a1
Summary:
need to remove function declaration in a lexically nested statement
because babel uses 'use strict' by default now
Closes https://github.com/facebook/react-native/pull/11390
Differential Revision: D4308275
fbshipit-source-id: 0d073361d25b23fb67f001225feb72532af38683
Summary:
When running in strict mode we run into the following error:
“Cannot assign to read only property 'product' of object '#<WorkerNavigator>’”
Moreover navigator.product = ‘ReactNative’; didn’t actually change the product value. Without strict mode this was silently ignored.
By using our defineProperty function we are able to run in strict mode and now navigator.product is really ReactNative.
See https://github.com/facebook/react-native/issues/10881 for more information
---------------
Long story short - if we run in strict mode, the current code throws an error :
`Cannot assign to read only property 'product' of object '#<WorkerNavigator>' initializeCore.js`
(the current version of initializeCore.js doesn't have 'use strict'; on top, but if you are unfortunate enough to have a babel module that ads this for you, you are guaranteed to run into this. Moreover our contributing guidelines say that we should have 'use strict'; https://github.com/facebook/react-native/blob/master/CONTRIB
Closes https://github.com/facebook/react-native/pull/11057
Differential Revision: D4219958
Pulled By: javache
fbshipit-source-id: 35568b2ce4b87fff1aa8248f067d49e5f9f9e9a2
Summary:
This PR provides a workaround for issue #9605 which affects projects which directly or indirectly require `whatwg-fetch`. At that point, all symbolication on stack trace errors fails due to a circular require caused by RN's lazy loading of `fetch`, which results in `fetch` becoming `undefined`.
The workaround is simple: we postpone requiring `fetch` until the first `symbolicateStackTrace` call, at which point we can be certain `fetch` is properly exported. It is then cached for future use.
No tests have been added since, apparently, this module did not have any tests to begin with. Manual tests were performed on a regular project (not including `whatwg-fetch` externally) and a project that has direct and indirect includes for `whatwg-fetch`.
Closes https://github.com/facebook/react-native/pull/10247
Differential Revision: D4175835
Pulled By: hramos
fbshipit-source-id: d849a5874373e76f166ea6ab23f0f888792d1aef
Summary:
This PR make [server port of react-devtools](https://github.com/facebook/react-devtools/blob/master/shells/electron/index.html#L71) can be changed, currently we can set the port yourself and open it, so I think it would be better if it could also be set here.
Another reason is I can debug two RN app (`react-native start --port 8082`), but I cannot let them use react-devtools together, it would be better if I set
different `__REACT_DEVTOOLS_PORT__` in `index.ios.js` and `index.android.js`.
Closes https://github.com/facebook/react-native/pull/10522
Differential Revision: D4144011
Pulled By: hramos
fbshipit-source-id: de67931f377092871a0fe92e7d9a18799625217e
Summary: Adds methods in XMLHttpRequest so that the agent can hook the events needed for the implementation, these are only enabled if the agent is enabled (which means that the inspector is connected), it is also stripped out in non-dev currently.
Reviewed By: davidaurelio
Differential Revision: D4021516
fbshipit-source-id: c0c00d588404012d20b744de74e5ecbe5c002a53
Slava Kim
Alexey Lang
Philipp von Weitershausen
Spencer Ahrens
Alex Dvornikov
Pieter De Baets
Arnold Noronha
Miguel Jimenez Esun
Christoph Nakazawa
Christopher Chedeau
James Burnett
Brian Vaughn
Dan Abramov
Jhen
Aaron Chiu
Andy Street
Wietse Venema
Dan Abramov
Sebastian Markbage
rh389
Gabe Levi
Anton Karpov
David Aurelio
Daniel Dimitrov
Tim Yung
Hilke Heremans
Alexander Blom