emeraldion lodge

​

Babel, now at version 6, is a powerful and modular JavaScript compiler that can swallow ES2015 aka ES6 syntax, as well as experimental language syntax under evaluation.

This is a little nit that I came across while investigating the options available for the transform-react-jsx plugin: in your .babelrc file, add this config option:

{ "plugins": [["transform-react-jsx", { "pragma": "dom" }]] }

This will replace the function used when compiling the JSX expression representing a custom component:

<Nav userid="claudiopro"/>

Which by default would be compiled to:

React.createElement(Nav, { userid: "claudiopro" });

Setting the value of the pragma property to "dom" produces instead:

dom(Nav, { userid: "claudiopro" });

This makes it possible to compile your JSX to any virtual DOM library compatible with React, e.g. dekujs/virtual-element or yolkjs/yolk-virtual-dom. In case of Yolk, you would for instance set pragma to "Yolk.createElement".

Sweet, isn't it? If you used JSX or Babel in the past, you were probably familiar with the now unsupported @jsx annotation or the jsxPragma option in .babelrc. These have been superseded and the annotation actually throws is supposed to throw in Babel 6 when set to React.DOM, but I just opened a bug because it doesn't.

Update: Sebastien accepted my PR, so Babel will now correctly throw if the @jsx pragma is set to React.DOM.