Document that we're using Babel

[vjeux]

https://github.com/facebook/jstransform/tree/master/visitors

[glenjamin]

Aha, I was just trying to find this out!

Is this optional, is it possible to swap in babel or similar?

[vjeux]

Right now it's backed in but we want to allow other transforms down the line. We secretly hoped that someone from the community would help :)

[amasad]

All the transformation is done by the worker https://github.com/facebook/react-native/blob/master/packager/transformer.js
Might be able to just hack it in their and it should work. (source maps is a bit trickier for now)

[glenjamin]

Once the initial rush settles down and the issues take some shape it'd be good to have a bit of a roadmap for larger goals like that - I'm keen to get stuck in :)

[vishnevskiy]

I managed to swap in babel and it works 95%.

For some reason even though it transforms import statements to requires they don't seem to work. Does react-native crawl the requires BEFORE the transform occurs?

[amasad]

Yes, I'd say avoid es6 modules for now. Can you share your code for others
to see?

On Thursday, March 26, 2015, Stanislav Vishnevskiy notifications@github.com
wrote:

I managed to swap in babel and it works 95%.

For some reason even though it transforms import statements to requires
they don't seem to work. Does react-native crawl the requires BEFORE the
transform occurs?

—
Reply to this email directly or view it on GitHub
#274 (comment)
.

[vishnevskiy]

No problem.

I just installed babel-core and replaced transformer.js in packager with.

'use strict';

var babel = require('babel-core');

module.exports = function(data, callback) {
  var result;
  try {
    result = babel.transform(data.sourceCode, {
      filename: data.filename,
      // Remove the interopRequire
      modules: 'commonStrict'
    });
    result = {
      // Removing interopRequire causes it to try to get default.
      // Not nessessary for react-native so strip it.
      code: result.code.replace(/\)\["default"]/g, ')')
    };
  } catch (e) {
    return callback(null, {
      error: {
        lineNumber: e.loc.line,
        column: e.loc.column,
        message: e.message,
        stack: e.stack,
        description: e.description
      }
    });
  }

  callback(null, result);
};

I don't seem to see how to provide the source map but it works otherwise.

I would really love advise how where I might be able to mod code to fix import statements because that is blocking me from using existing Flux stores and action creators from another react project.

[sebmck]

Why are you using commonStrict?

[amasad]

Yup souremaps are currently hardcoded in the packager for speed and assume line/col numbers are preserved (jstransform) (this hack made things orders of magnitude faster for us) because source map generation is usually the most expensive part of packagers. But will try to have a better answer for this soon.

[vishnevskiy]

@sebmck For some reason the packager does not like the _interopRequire

[pilwon]

Here's my solution:

Add the following code to the top of packager/transformer.js's module.exports function:

var babel = require('babel');
if (!/node_modules\/react-native\//.test(data.filename)) {
  try {
    var result = babel.transform(data.sourceCode, {
      ast: false,
      comments: false,
      filename: data.filename
    });
    return callback(null, {
      code: result.code
    });
  } catch (e) {
    return callback(null, {
      error: {
        lineNumber: e.loc.line,
        column: e.loc.column,
        message: e.message,
        stack: e.stack,
        description: e.description
      }
    });
  }
}

It transforms node_modules/react-native/**/* with the default jstransform transformer and sends the rest to babel. With this approach, I didn't have interopRequire problem @vishnevskiy mentioned above.

I was also able to solve the ES6 import statement problem by patching DependencyResolver's DependencyGraph module. (Submitted PR #386)

Please share if you discover any issue other than the known issue with sourcemap with this approach.

[jonrh]

Yes please! I spent about an hour trying to find this documentation, what ES6 features I could use and what not. Thanx @tadeuzagallo for pointing me to this issue.