diff --git a/docs/JavaScriptEnvironment.md b/docs/JavaScriptEnvironment.md index cccf3800e675ea..fbe4d7dd7a0abe 100644 --- a/docs/JavaScriptEnvironment.md +++ b/docs/JavaScriptEnvironment.md @@ -17,9 +17,13 @@ When using React Native, you're going to be running your JavaScript code in two While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime. -## JavaScript Transforms +## JavaScript Syntax Transformers -React Native ships with many JavaScript transforms to make writing code more enjoyable. If you are curious, you can see the [implementation of all those transformations](https://github.com/facebook/jstransform/tree/master/visitors). Here's the full list: +Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript language features. + +As of version 0.5.0, React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check the [Babel documentation](http://babeljs.io/docs/advanced/transformers/) for its supported transformations and more details. + +Here's a full list of React Native's [enabled transformations](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L21). ES5 @@ -27,18 +31,26 @@ ES5 ES6 -* Arrow function: ` this.setState({pressed: true})}` -* Call spread: `Math.max(...array);` -* Class: `class C extends React.Component { render() { return ; } }` -* Destructuring: `var {isActive, style} = this.props;` -* Iteration: `for (var element of array) { }` -* Computed Properties: `var key = 'abc'; var obj = {[key]: 10};` +* [Arrow functions](http://babeljs.io/docs/learn-es2015/#arrows): ` this.setState({pressed: true})}` +* [Call spread](http://babeljs.io/docs/learn-es2015/#default-rest-spread): `Math.max(...array);` +* [Classes](http://babeljs.io/docs/learn-es2015/#classes): `class C extends React.Component { render() { return ; } }` +* [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring): `var {isActive, style} = this.props;` +* [Computed Properties](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var key = 'abc'; var obj = {[key]: 10};` * Object Consise Method: `var obj = { method() { return 10; } };` -* Object Short Notation: `var name = 'vjeux'; var obj = { name };` -* Rest Params: `function(type, ...args) { }` -* Template: ``var who = 'world'; var str = `Hello ${who}`;`` +* [Object Short Notation](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var name = 'vjeux'; var obj = { name };` +* [Rest Params](https://github.com/sebmarkbage/ecmascript-rest-spread): `function(type, ...args) { }` +* [Template Literals](http://babeljs.io/docs/learn-es2015/#template-strings): ``var who = 'world'; var str = `Hello ${who}`;`` ES7 -* Object Spread: `var extended = { ...obj, a: 10 };` -* Function Trailing Comma: `function f(a, b, c,) { }` +* [Object Spread](https://github.com/sebmarkbage/ecmascript-rest-spread): `var extended = { ...obj, a: 10 };` +* [Function Trailing Comma](https://github.com/jeffmo/es-trailing-function-commas): `function f(a, b, c,) { }` + +### Custom transformer +You can also use a custom transformer file instead of the [default one](https://github.com/facebook/react-native/blob/master/packager/transformer.js), in case you want to modify or extend the behavior beyond the Babel configuration. +In order to do so, start the packager like this: +``` +./node_modules/react-native/packager/packager.sh --transformer=yourtransformer.js +``` + +The path you are providing as argument will be treated as being relative to `process.cwd()`. diff --git a/packager/packager.js b/packager/packager.js index d630d06e385d30..08babffb4bf442 100644 --- a/packager/packager.js +++ b/packager/packager.js @@ -12,6 +12,7 @@ var fs = require('fs'); var path = require('path'); var exec = require('child_process').exec; var http = require('http'); +var isAbsolutePath = require('absolute-path'); var getFlowTypeCheckMiddleware = require('./getFlowTypeCheckMiddleware'); @@ -53,6 +54,11 @@ var options = parseCommandLine([{ }, { command: 'skipflow', description: 'Disable flow checks' +}, { + command: 'transformer', + type: 'string', + default: require.resolve('./transformer.js'), + description: 'Specify a custom transformer to be used (absolute path)' }]); if (options.projectRoots) { @@ -198,11 +204,15 @@ function statusPageMiddleware(req, res, next) { } function getAppMiddleware(options) { + var transformerPath = options.transformer; + if (!isAbsolutePath(transformerPath)) { + transformerPath = path.resolve(process.cwd(), transformerPath); + } return ReactPackager.middleware({ projectRoots: options.projectRoots, blacklistRE: blacklist(options.platform), cacheVersion: '2', - transformModulePath: require.resolve('./transformer.js'), + transformModulePath: transformerPath, assetRoots: options.assetRoots, assetExts: ['png', 'jpeg', 'jpg'], polyfillModuleNames: [