InfernoJS Babel Plugin
Plugin for babel 6+ to enable JSX for Inferno
This plugin transforms JSX code in your projects to Inferno compatible virtual DOM.
It is recommended to use this plugin for compiling JSX for inferno. It is different to other JSX plugins, because it outputs highly optimized inferno specific
createVNode calls. This plugin also checks children shape during compilation stage to reduce overhead from runtime application.
How to install
Note! Make sure babel-plugin has same major version as the inferno you are using!
npm i --save-dev babel-plugin-inferno
How to use
Add the plugin to your
package.json and update the plugin section in your
.babelrc file. Or if your Babel settings are located inside the
package.json - update the plugin section there.
It's important that you also include the
Example on a
.babelrc file that will work with Inferno:
Make sure inferno plugin is added before babel module transformers
"presets": "es2015""plugins": "babel-plugin-inferno" "imports": true
// Render a simple divInferno;// Render a div with textInferno;// Render a div with a boolean attributeInferno;
All of the following syntaxes are reserved for createFragment call
This plugin provides few special compile time flags that can be used to optimize an inferno application.
// ChildFlags:<div $HasVNodeChildren /> - Children is another<div $HasNonKeyedChildren /> - Children is always array without keys<div $HasKeyedChildren /> - Children is array of vNodes having unique keys<div $ChildFlag=expression /> - This attribute is used for defining children shpae runtime See inferno-vnode- for possibe values// Functional flags<div $ReCreate /> - This flag tells inferno to always remove and add the node It can be used to replace key=Math
noNormalize has been removed in v4, and is replaced by
Change in v4:
By default babel-plugin-inferno uses imports. That means you no longer need to import inferno globally. Just import the inferno specific code YOUR code uses.
; // Just import what you need, (render in this case)// The plugin will automatically import, createVNode;
You need to have support for ES6 modules for this to work. If you are using legacy build system or outdated version of webpack, you can revert this change by using
"presets": "es2015""plugins": "inferno""imports": false
Each method that is used from inferno can be replaced by custom name.
pragma (string) defaults to createVNode.
pragmaCreateComponentVNode (string) defaults to createComponentVNode.
pragmaNormalizeProps (string) defaults to normalizeProps.
pragmaTextVNode (string) defaults to createTextVNode.
pragmaFragmentVNode (string) defaults to createFragment.
"presets": "es2015""plugins": "inferno""imports": true"pragma": """pragmaCreateComponentVNode": """pragmaNormalizeProps": """pragmaTextVNode": ""
You can verify
babel-plugin-inferno is used by looking at the compiled output.
This plugin does not generate calls to
h, but instead it uses low level InfernoJS API
createFragment etc. If you see your JSX being transpiled into
its good indication that your babel configuration is not correct.