meteor / babel

Babel wrapper package for use with Meteor
Other
46 stars 20 forks source link

`Babel.transformMeteor` doesn't automatically generate `displayName` properties for calls to `React.createClass` #5

Closed avital closed 9 years ago

avital commented 9 years ago

See https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform:

JSX will infer the class's displayName from the variable assignment when the displayName is undefined:

// Input (JSX): var Nav = React.createClass({ }); /> / Output (JS): var Nav = React.createClass({displayName: "Nav", });

and https://babeljs.io/docs/usage/jsx/:

Tags are automatically transformed to their equivalent React.createElement(...) and displayName is automatically inferred and added to all React.createClass calls.

Here's the repro (run inside a clone of this repo):

Avitals-MacBook-Air:babel avital$ node
> Babel = require('./index')
{ getDefaultOptions: [Function: getDefaults],
  parse: [Function: parse],
  compile: [Function: compile],
  installRuntime: [Function: installRuntime],
  runtime: [Function: installRuntime] }
> Babel.compile("Foo = React.createClass({render: function () { return <div></div> }});", {whitelist: ["react"]}).code
'Foo = React.createClass({ render: function () {\n    return React.createElement("div", null);\n  } });'

(This manifests itself as a failure on the react-template-helper Meteor packages in the github.com/meteor/react-packages repo. The failing test tests a diagnostic message that extracts displayName. Previous versions of this package worked when they depended on an older version of the babel-compiler package that used the babel-core NPM package directly)

avital commented 9 years ago

@benjamn See my repro above, this breaks tests on Meteor's react-template-helper package.

benjamn commented 9 years ago

Looks like there's now a separate transform called react.displayName, though I'm not sure why they would split it out like that.