-
Notifications
You must be signed in to change notification settings - Fork 253
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
feat(NODE-4938): improve react native bundle experience #578
Changes from 4 commits
28a307c
2cc844f
91df718
176e57b
667342b
5b9baf2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,7 +18,7 @@ bson.sublime-workspace | |
|
||
.vscode | ||
|
||
lib | ||
/lib | ||
.nyc_output/ | ||
coverage/ | ||
*.d.ts | ||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -188,23 +188,17 @@ try { | |||||
|
||||||
## React Native | ||||||
|
||||||
BSON requires that `TextEncoder`, `TextDecoder`, `atob`, `btoa`, and `crypto.getRandomValues` are available globally. These are present in most Javascript runtimes but require polyfilling in React Native. Polyfills for the missing functionality can be installed with the following command: | ||||||
BSON vendors the required polyfills for `TextEncoder`, `TextDecoder`, `atob`, `btoa` when using React Native. One | ||||||
additional polyfill, `crypto.getRandomValues` is required and can be installed with the following command: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Isn't this optional?
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Updated. |
||||||
|
||||||
```sh | ||||||
npm install --save react-native-get-random-values text-encoding-polyfill base-64 | ||||||
npm install --save react-native-get-random-values | ||||||
``` | ||||||
|
||||||
The following snippet should be placed at the top of the entrypoint (by default this is the root `index.js` file) for React Native projects using the BSON library. These lines must be placed for any code that imports `BSON`. | ||||||
|
||||||
```typescript | ||||||
// Required Polyfills For ReactNative | ||||||
import {encode, decode} from 'base-64'; | ||||||
if (global.btoa == null) { | ||||||
global.btoa = encode; | ||||||
} | ||||||
if (global.atob == null) { | ||||||
global.atob = decode; | ||||||
} | ||||||
import 'text-encoding-polyfill'; | ||||||
import 'react-native-get-random-values'; | ||||||
``` | ||||||
|
||||||
|
@@ -214,7 +208,7 @@ Finally, import the `BSON` library like so: | |||||
import { BSON, EJSON } from 'bson'; | ||||||
``` | ||||||
|
||||||
This will cause React Native to import the `node_modules/bson/lib/bson.cjs` bundle (see the `"react-native"` setting we have in the `"exports"` section of our [package.json](./package.json).) | ||||||
This will cause React Native to import the `node_modules/bson/lib/bson.rn.cjs` bundle (see the `"react-native"` setting we have in the `"exports"` section of our [package.json](./package.json).) | ||||||
|
||||||
### Technical Note about React Native module import | ||||||
|
||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import MagicString from 'magic-string'; | ||
|
||
const REQUIRE_TEXT_ENCODING = | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This name seam to suggest only one of the polyfills are provided here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changed name to |
||
`const { TextEncoder, TextDecoder } = require('../vendor/text-encoding'); | ||
const { encode: btoa, decode: atob } = require('../vendor/base64');\n` | ||
|
||
export class RequireVendor { | ||
/** | ||
* Take the compiled source code input; types are expected to already have been removed. | ||
* Add the TextEncoder, TextDecoder, atob, btoa requires. | ||
* | ||
* @param {string} code - source code of the module being transformed | ||
* @param {string} id - module id (usually the source file name) | ||
* @returns {{ code: string; map: import('magic-string').SourceMap }} | ||
*/ | ||
transform(code, id) { | ||
if (!id.includes('web_byte_utils')) { | ||
return; | ||
} | ||
|
||
// MagicString lets us edit the source code and still generate an accurate source map | ||
const magicString = new MagicString(code); | ||
magicString.prepend(REQUIRE_TEXT_ENCODING); | ||
|
||
return { | ||
code: magicString.toString(), | ||
map: magicString.generateMap({ hires: true }) | ||
}; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
Copyright Mathias Bynens <https://mathiasbynens.be/> | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining | ||
a copy of this software and associated documentation files (the | ||
"Software"), to deal in the Software without restriction, including | ||
without limitation the rights to use, copy, modify, merge, publish, | ||
distribute, sublicense, and/or sell copies of the Software, and to | ||
permit persons to whom the Software is furnished to do so, subject to | ||
the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be | ||
included in all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | ||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | ||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | ||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE | ||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION | ||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION | ||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
# base64 [![Build status](https://travis-ci.org/mathiasbynens/base64.svg?branch=master)](https://travis-ci.org/mathiasbynens/base64) [![Code coverage status](http://img.shields.io/coveralls/mathiasbynens/base64/master.svg)](https://coveralls.io/r/mathiasbynens/base64) | ||
|
||
_base64_ is a robust base64 encoder/decoder that is fully compatible with [`atob()` and `btoa()`](https://html.spec.whatwg.org/multipage/webappapis.html#atob), written in JavaScript. The base64-encoding and -decoding algorithms it uses are fully [RFC 4648](https://tools.ietf.org/html/rfc4648#section-4) compliant. | ||
|
||
## Installation | ||
|
||
Via [npm](https://www.npmjs.com/): | ||
|
||
```bash | ||
npm install base-64 | ||
``` | ||
|
||
In a browser: | ||
|
||
```html | ||
<script src="base64.js"></script> | ||
``` | ||
|
||
In [Narwhal](http://narwhaljs.org/), [Node.js](https://nodejs.org/), and [RingoJS](http://ringojs.org/): | ||
|
||
```js | ||
var base64 = require('base-64'); | ||
``` | ||
|
||
In [Rhino](http://www.mozilla.org/rhino/): | ||
|
||
```js | ||
load('base64.js'); | ||
``` | ||
|
||
Using an AMD loader like [RequireJS](http://requirejs.org/): | ||
|
||
```js | ||
require( | ||
{ | ||
'paths': { | ||
'base64': 'path/to/base64' | ||
} | ||
}, | ||
['base64'], | ||
function(base64) { | ||
console.log(base64); | ||
} | ||
); | ||
``` | ||
|
||
## API | ||
|
||
### `base64.version` | ||
|
||
A string representing the semantic version number. | ||
|
||
### `base64.encode(input)` | ||
|
||
This function takes a byte string (the `input` parameter) and encodes it according to base64. The input data must be in the form of a string containing only characters in the range from U+0000 to U+00FF, each representing a binary byte with values `0x00` to `0xFF`. The `base64.encode()` function is designed to be fully compatible with [`btoa()` as described in the HTML Standard](https://html.spec.whatwg.org/multipage/webappapis.html#dom-windowbase64-btoa). | ||
|
||
```js | ||
var encodedData = base64.encode(input); | ||
``` | ||
|
||
To base64-encode any Unicode string, [encode it as UTF-8 first](https://github.com/mathiasbynens/utf8.js#utf8encodestring): | ||
|
||
```js | ||
var base64 = require('base-64'); | ||
var utf8 = require('utf8'); | ||
|
||
var text = 'foo © bar 𝌆 baz'; | ||
var bytes = utf8.encode(text); | ||
var encoded = base64.encode(bytes); | ||
console.log(encoded); | ||
// → 'Zm9vIMKpIGJhciDwnYyGIGJheg==' | ||
``` | ||
|
||
### `base64.decode(input)` | ||
|
||
This function takes a base64-encoded string (the `input` parameter) and decodes it. The return value is in the form of a string containing only characters in the range from U+0000 to U+00FF, each representing a binary byte with values `0x00` to `0xFF`. The `base64.decode()` function is designed to be fully compatible with [`atob()` as described in the HTML Standard](https://html.spec.whatwg.org/multipage/webappapis.html#dom-windowbase64-atob). | ||
|
||
```js | ||
var decodedData = base64.decode(encodedData); | ||
``` | ||
|
||
To base64-decode UTF-8-encoded data back into a Unicode string, [UTF-8-decode it](https://github.com/mathiasbynens/utf8.js#utf8decodebytestring) after base64-decoding it: | ||
|
||
```js | ||
var encoded = 'Zm9vIMKpIGJhciDwnYyGIGJheg=='; | ||
var bytes = base64.decode(encoded); | ||
var text = utf8.decode(bytes); | ||
console.log(text); | ||
// → 'foo © bar 𝌆 baz' | ||
``` | ||
|
||
## Support | ||
|
||
_base64_ is designed to work in at least Node.js v0.10.0, Narwhal 0.3.2, RingoJS 0.8-0.9, PhantomJS 1.9.0, Rhino 1.7RC4, as well as old and modern versions of Chrome, Firefox, Safari, Opera, and Internet Explorer. | ||
|
||
## Unit tests & code coverage | ||
|
||
After cloning this repository, run `npm install` to install the dependencies needed for development and testing. You may want to install Istanbul _globally_ using `npm install istanbul -g`. | ||
|
||
Once that’s done, you can run the unit tests in Node using `npm test` or `node tests/tests.js`. To run the tests in Rhino, Ringo, Narwhal, and web browsers as well, use `grunt test`. | ||
|
||
To generate the code coverage report, use `grunt cover`. | ||
|
||
## Author | ||
|
||
| [![twitter/mathias](https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](https://twitter.com/mathias "Follow @mathias on Twitter") | | ||
|---| | ||
| [Mathias Bynens](https://mathiasbynens.be/) | | ||
|
||
## License | ||
|
||
_base64_ is available under the [MIT](https://mths.be/mit) license. |
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.
I suspect the term "vendors" might not be clear enough for publicly facing documentation. Perhaps it would make sense to include an explanation on what that means for the user.
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.
Updated.