babel-plugin-inferno
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.
Note! Make sure babel-plugin has same major version as the inferno you are using!
npm i --save-dev babel-plugin-inferno
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 babel-plugin-syntax-jsx
plugin.
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(<div></div>, container);// Render a div with textInferno.render(<div>Hello world</div>, container);// Render a div with a boolean attributeInferno.render(<div autoFocus='true' />, container);
All of the following syntaxes are reserved for createFragment call
<> <div>Foo</div> <div>Bar</div></><Fragment> <div>Foo</div> <div>Bar</div></Fragment><Inferno.Fragment> <div>Foo</div> <div>Bar</div></Inferno.Fragment>
This plugin provides few special compile time flags that can be used to optimize an inferno application.
// ChildFlags:<div $HasVNodeChildren /> - Children is another vNode (Element or Component)<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-flags (ChildFlags) 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.random()}
Flag called noNormalize
has been removed in v4, and is replaced by $HasVNodeChildren
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.
example:
import {render} from 'inferno'; // Just import what you need, (render in this case)// The plugin will automatically import, createVNoderender(<div>1</div>, document.getElementById('root'));
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 imports: false
{ "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 createElement
or h
, but instead it uses low level InfernoJS APIcreateVNode
, createComponentVNode
, createFragment
etc. If you see your JSX being transpiled into createElement
calls
its good indication that your babel configuration is not correct.
还没有评论,说两句吧!
热门资源
seetafaceJNI
项目介绍 基于中科院seetaface2进行封装的JAVA...
spark-corenlp
This package wraps Stanford CoreNLP annotators ...
Keras-ResNeXt
Keras ResNeXt Implementation of ResNeXt models...
capsnet-with-caps...
CapsNet with capsule-wise convolution Project ...
inferno-boilerplate
This is a very basic boilerplate example for pe...
智能在线
400-630-6780
聆听.建议反馈
E-mail: support@tusaishared.com