Summary:
Introduces a new mechanism to build source maps that allows us to use real mapping segments instead of just mapping line-by-line.
This mechanism is only used when building development bundles to improve the debugging experience in Chrome.
The new mechanism takes advantage of a new feature in babel-generator that exposes raw mapping objects. These raw mapping objects are converted to arrays with 2, 4, or 5 for the most compact representation possible.
We no longer generate a source map for the bundle that maps each line to itself in conjunction with configuring babel generator to retain lines.
Instead, we create a source map with a large mappings object produced from the mappings of each individual file in conjunction with a “carry over” – the number of preceding lines in the bundle.
The implementation makes a couple of assumptions that hold true for babel transform results, e.g. mappings being in the order of the generated code, and that a block of mappings always belongs to the same source file. In addition, the implementation avoids allocation of objects and strings at all costs. All calculations are purely numeric, and base64 vlq produces numeric ascii character codes. These are written to a preallocated buffer objects, which is turned to a string only at the end of the building process. This implementation is ~5x faster than using the source-map library.
In addition to providing development source maps that work better, we can now also produce individual high-quality source maps for production builds and combine them to an “index source map”. This approach is unfeasable for development source maps, because index source map consistently crash Chrome.
Better production source maps are useful to get precise information about source location and symbol names when symbolicating stack traces from crashes in production.
Reviewed By: jeanlauliac
Differential Revision: D4382290
fbshipit-source-id: 365a176fa142729d0a4cef43edeb81084361e54d
Summary:
This PR tells babel where the babelrc file is if it has been found in the project root. I know you guys are relying on babel to find it when you tell babel the filename and sourceFilename, this works fine in normal js/node projects, here is an example where this will not work.
We have a big repo that can contain a few react-native / js projects. Our build system is similar to BUCK and we keep our third party dependencies in a separate folder (having a global package.json at the project route is not feasible as everyone will have to install every apps dependencies even when they don't need them), the structure looks a bit like this:
`third_party/js/.` packages from node_modules
`common/js/` common code used by numerous apps, common components, services etc.
`my_app/native` the app
What's happening is something from `my_app/native` (where the .babelrc file is) is requiring something from `common/js` which is then requiring something from `third_party/js` and so babel has no idea what .babelrc file to use and
Closes https://github.com/facebook/react-native/pull/8131
Differential Revision: D4167844
Pulled By: hramos
fbshipit-source-id: 3569981e26ff8f8c632d8ae365a1f43a3483b13b
Summary:
`fbjs-scripts` 0.4.0 has Babel 5 as a dependency, which causes some amount of havoc when you're trying to use `react-native` in a project that's otherwise dependent on Babel 6 and using the flat-installing npm >=3.
Closes https://github.com/facebook/react-native/pull/7855
Reviewed By: frantic
Differential Revision: D3371679
Pulled By: steveluscher
fbshipit-source-id: 9f7643171d89da0de0492e7e97875f472725e990
Summary:
Putting this up as request for comments.
The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else?
Closes https://github.com/facebook/react-native/pull/6351
Differential Revision: D3302906
Pulled By: frantic
fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9
Summary:Make packager transform files before extracting their dependencies.
This allows us to extract dependencies added by transforms (and to avoid including them manually).
It also allows for better optimization and to get rid of the “whole program optimization” step:
This diff utilizes the new worker introduced in D2976677 / d94a567 – that means that minified builds inline the following variables:
- `__DEV__` → `false`
- `process.env.NODE_ENV` → `'production'`
- `Platform.OS` / `React.Platform.OS` → `'android'` / `'ios'`
and eliminates branches of conditionals with constant conditions. Dependency extraction happens only after that step, which means that production bundles don’t include any modules that are not used.
Fixes#4185
Reviewed By: martinbigio
Differential Revision: D2977169
fb-gh-sync-id: e6ce8dd29d1b49aec49b309201141f5b2709da1d
shipit-source-id: e6ce8dd29d1b49aec49b309201141f5b2709da1d
Summary:
Rather than specifying Babel plugins in the `.babelrc` packaged with react-native, leverage a Babel preset to define the plugins (https://github.com/exponentjs/babel-preset-react-native).
This allows for a much better user experience for those who want (or need) to override options in their project's `.babelrc`.
Prior to this PR, if a user wanted to use a custom babel-plugin (or a custom set of babel plugins), they'd have either 1) manually override the `.babelrc` in the react-packager directory (or fork RN), or 2) specify a custom transformer to use when running the packager that loaded their own `.babelrc`. Note - the custom transformer was necessary because without it, RN's `.babelrc` options would supersede the options defined in the project's `.babelrc`...potentially causing issues with plugin ordering.
This PR makes the transformer check for the existence of a project-level `.babelrc`, and if it it's there, it _doesn't_ use the react-native `.babelrc`. This prevents any oddities with Babel plug
Closes https://github.com/facebook/react-native/pull/5214
Reviewed By: davidaurelio
Differential Revision: D2881814
Pulled By: martinbigio
fb-gh-sync-id: 4168144b7a365fae62bbeed094d8a03a48b4798c
Summary:
public
`babel-plugin-react-transform` doesn't support to run on transformed code (it doesn't detect some react components). The reason why HMR was originally on the internal transform was so that it worked with non JS code (TypeScript, Coffeescript, etc), but looks like this is not very popupar in the community, maybe because the JS ecosystem is getting better everyday.
So long story short, for now lets move HMR to the external transformer. This should also give us a perf boost.
Reviewed By: davidaurelio
Differential Revision: D2870973
fb-gh-sync-id: 68ca8d0540b88b9516b9fef10643f93fc9b530d2
Summary:
public
- Tweak OSS server to enable the HMR connection
- Remove client gating code.
- Resolve internal transforms plugins
After this diff, Hot Loading should work on OSS.
Reviewed By: javache
Differential Revision: D2803620
fb-gh-sync-id: b678180c884d2bfaf454edf9e7abe6b3b3b32ebe
Summary:
public
We want to support Hot Loading on the packager itself instead of on the transformer. This will allow us to enable it on OSS (and for any scripting language, yay!).
For now to enable Hot Loading the packager's internals transforms need to be manually enabled (start packager with `--enable-internal-transforms`). I think the internal pipeline should always be enabled as it doesn't affect performance if there're no transforms and the user can disable Hot Loading through the setting on the app though. I'll tweak this on a follow up commit.
Reviewed By: vjeux
Differential Revision: D2801343
fb-gh-sync-id: 563984d77b10c3925fda6fd5616b814cdbea2c66
Summary:
public
This diff introduces an internal transforms pipeline that integrates with the external one. This has been a feature we've been looking to implement for a long time to use babel instead of `replace` with regexps on many parts of the packager.
Also, to split the bundle we'll need to run one transform. Internally for Facebook we can run the system-import transform altogether withe the other ones. For OSS we offer `transformer.js` which people can use out of the box if they're writing ES6 code. For those people, `transformer.js` will also run the internal transforms`. However they might want to tune the transforms, or even write the code on another language that compiles to Javascript and use a complete different transformer. On those cases we'll need to run the external transforms first and pipe the output through the internal transforms. Note that the order it's important as the internal transforms assume the code is written in JS, though the original code could be on other scripting languages (CoffeeScript, TypeScript, etc).
Reviewed By: davidaurelio
Differential Revision: D2725109
fb-gh-sync-id: d764e209c78743419c4cb97068495c771372ab90
Summary:
ES6 modules export an object with a property called `default`. See Babel itself for how this is handled: b5b7e346a0
Closes https://github.com/facebook/react-native/pull/4513
Reviewed By: svcscm
Differential Revision: D2715512
Pulled By: mkonicek
fb-gh-sync-id: 40e5ea35adcdb66806a4895578d637cd72538619
Summary: Manually resolve all default Babel plugins. `babel.transform` will attempt to resolve all base plugins relative to the file it's compiling. This makes sure that we're using the plugins installed in the react-native package.
**NOTE:** Haven't tested this. Please don't merge until Travis has done CI.
Closes https://github.com/facebook/react-native/pull/4248
Reviewed By: svcscm
Differential Revision: D2679651
Pulled By: davidaurelio
fb-gh-sync-id: 0cdef1e738ba28c09c811432a71047f80540ed7b
Summary: public
The inline-requires transform (from `fbjs-scripts`) is only used for oss tests, and wasn't updated, fix it.
Reviewed By: mkonicek
Differential Revision: D2641711
fb-gh-sync-id: 90a084082b9c55c5bcb776346f4655451a8a61f7
Summary: The previous version of `performanceNow` used to reassign to a `require(...)` alias, which our inline requires transform guarded against. Before the update to React 0.14, we were pulling `performanceNow` from a hardcoded `react-tools` version (b4e74e38e4/src/shared/vendor/performance/performanceNow.js), so we couldn't just fix the file and had to special case it. Now that we've updated to React 0.14, `performanceNow` is pulled from fbjs and no longer needs to be special cased.
public
Reviewed By: cpojer
Differential Revision: D2634940
fb-gh-sync-id: 7085cde3179c04f9ecfd87bdd472b19e370ee73c
Summary: This is an updated copy of #1993, which was approved by @vjeux but hasn't been rebased. It whitelists the es6 module syntax and updates the JS Environment docs to match. cc @ide @hkjorgensenCloses https://github.com/facebook/react-native/pull/3175
Reviewed By: @svcscm
Differential Revision: D2498360
Pulled By: @vjeux
Summary: In javascriptcore(ios9), this code will run as expected(output 0 1):
```js
for(let i=0; i<2; i++) {
const data = i;
console.log(data);
}
```
But when debug in chrome, the above code will fail without `use strict` prologue (if you add prologue, rn will fail with red screen `Const declarations are not supported in strict mode`): https://code.google.com/p/v8/issues/detail?id=4432.
So it's better to transpile contant by default.
Closes https://github.com/facebook/react-native/pull/2955
Reviewed By: @svcscm
Differential Revision: D2483398
Pulled By: @vjeux
Summary: The `react.displayName` transform was added in 93b9329b758cde3e921b26e11ba91d9700d2a06d.
That diff missed to update the `.babelrc` where the comment says it should stay
in sync (I'm not sure where it's used though). I added a comment in the other
direction so this can be prevented in the future.
I also updated the `cacheVersion` so we actually transform the code again to add
the missing displayName properties to unchanged components.
Closes https://github.com/facebook/react-native/pull/2905
Reviewed By: @vjeux
Differential Revision: D2473447
Pulled By: @kassens
Summary:
This sets NODE_ENV based on the value of the `dev` option when bundling the apps. This would then be inlined by the node-env-inline babel plugin. And finally -- if unreachable -- will be dead-code-eliminated by uglify.
This is not used in development because we set NODE_ENV to the value of __DEV__, which can be switched via a query param. However, the plugin has minimal overhead and to avoid complexity in the transformers I just enabled it by default.
Summary:
- Enables async/await in .babelrc and transformer.js
- Adds regenerator to package.json. Users still need to explicitly require the regenerator runtime -- this is so that you only pay for what you use.
- Update AsyncStorage examples in UIExplorer to use async/await
- Update promise tests in UIExplorer to use async/await in addition to the promise API
Closes https://github.com/facebook/react-native/pull/1765
Github Author: James Ide <ide@jameside.com>
Summary:
@public
Replaces jstransform with Babel. Additionally, stops (using the deprecated) passing an error property
back from the transformer, and instead passes an error in the first argument. This is because we were
able to update node-worker-farm to handle custom properties on errors.
Test Plan:
1. Export the oss project
2. npm install
3. Start the movies app
4. Make sure it works
5. Add a syntax error
6. Make sure the message is correct
Summary:
@public
Apparently trailing commas transform isn't exported by react-tools. We need to pull it out manually. This is not so clean but we're swtching to babel very shortly.
Test Plan:
* npm start
* write `foo(a,b,c,)` in some file
* request that file in the browser and make sure that trailing comma is gone
- [ReactNative] Use deprecated ix in TabBarExample | Amjad Masad
- [ReactNative] Expanded license on obj-c files | Christopher Chedeau
- [ReactNative] Expanded license on js files | Christopher Chedeau
- [ReactNative] Fix React Devtools integration | Alex Kotliarskyi
- [Text] Account for font leading so descenders are not clipped | James Ide
- [ReactNative] Expanded license on js packager files | Christopher Chedeau
- more UIExplorer flow | Basil Hosmer
- [react-packager] Pick up package changes while running | Amjad Masad
- Added a graph view and a ReactNative metric that displays current queue and execution time for the JS thread. | Bryce Redd
- [ReactNative] Add NativeModules and DeviceEventEmitter to react-native exports | Alex Kotliarskyi
- [ReactNative] Move merge & mergeInto from downstream to vendor | Christopher Chedeau
- [ReactNative] Replace all the call sites of mergeInto by Object.assign | Christopher Chedeau
- [WIP] Migrated View Managers over to new architecture | Nick Lockwood
- [ReactNative] Replace all the call sites of copyProperties by Object.assign | Christopher Chedeau
- [ReactNative] Migrate navigator.geolocation to open source | Christopher Chedeau
- [ReactNative] Remove README.md, LICENSE and .travis.yml from fbobjc | Christopher Chedeau
- [react-packager] Better transform errors | Amjad Masad
- [React Native][react-packager] Fix test runner and fialing tests | Amjad Masad
David Aurelio
benjaminhughes
Jing Chen
Charles Dick
Steven Luscher
Alex Kotliarskyi
Adam Miskiewicz
Martín Bigio
James Ide
Sebastian McKenzie
Tadeu Zagallo
Ben Alpert
Bhuwan Khattar
Kyle Corbitt
yiminghe
Jan Kassens
Christoph Pojer
Amjad Masad
Evan Solomon
Christopher Chedeau
Spencer Ahrens