Gathering detailed insights and metrics for babel-plugin-inferno
Gathering detailed insights and metrics for babel-plugin-inferno
Gathering detailed insights and metrics for babel-plugin-inferno
Gathering detailed insights and metrics for babel-plugin-inferno
inferno-hydrate
Hydrate plugin to inferno. This package can be used to reuse server side rendered html
@calebmer/babel-plugin-inferno
Turn JSX into Inferno virtual DOM
babel-plugin-transform-pug-to-inferno
Babel plugin for pug to Inferno
@atom-iq/babel-plugin-jsx
Turn JSX into Atom-iQ Reactive Virtual DOM - fork of babel-plugin-inferno
npm install babel-plugin-inferno
Typescript
Module System
Min. Node Version
Node Version
NPM Version
89.1
Supply Chain
97.8
Quality
89.8
Maintenance
100
Vulnerability
100
License
JavaScript (97.71%)
HTML (2.29%)
Total Downloads
5,183,310
Last Day
753
Last Week
12,422
Last Month
54,031
Last Year
561,404
MIT License
80 Stars
462 Commits
25 Forks
13 Watchers
2 Branches
21 Contributors
Updated on Jun 11, 2025
Minified
Minified + Gzipped
Latest Version
6.8.4
Package Id
babel-plugin-inferno@6.8.4
Unpacked Size
367.80 kB
Size
72.08 kB
File Count
15
NPM Version
11.4.1
Node Version
24.2.0
Published on
Jun 11, 2025
Cumulative downloads
Total Downloads
Last Day
21.8%
753
Compared to previous day
Last Week
-5.9%
12,422
Compared to previous week
Last Month
-0.3%
54,031
Compared to previous month
Last Year
-12.6%
561,404
Compared to previous year
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.
1npm 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
1{ 2 "presets": [ "es2015" ], 3 "plugins": [["babel-plugin-inferno", {"imports": true}]] 4}
1 2// Render a simple div 3Inferno.render(<div></div>, container); 4 5// Render a div with text 6Inferno.render(<div>Hello world</div>, container); 7 8// Render a div with a boolean attribute 9Inferno.render(<div autoFocus='true' />, container); 10
All of the following syntaxes are reserved for createFragment call
1<> 2 <div>Foo</div> 3 <div>Bar</div> 4</> 5 6 7<Fragment> 8 <div>Foo</div> 9 <div>Bar</div> 10</Fragment> 11 12<Inferno.Fragment> 13 <div>Foo</div> 14 <div>Bar</div> 15</Inferno.Fragment> 16
React.Fragment is also compiled to inferno createFragment call to ease project migration to Inferno https://github.com/infernojs/babel-plugin-inferno/issues/56.
This plugin provides few special compile time flags that can be used to optimize an inferno application.
1// ChildFlags: 2<div $HasTextChildren /> - Children is rendered as pure text 3<div $HasVNodeChildren /> - Children is another vNode (Element or Component) 4<div $HasNonKeyedChildren /> - Children is always array without keys 5<div $HasKeyedChildren /> - Children is array of vNodes having unique keys 6<div $ChildFlag={expression} /> - This attribute is used for defining children shpae runtime. See inferno-vnode-flags (ChildFlags) for possibe values 7 8// Functional flags 9<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:
babel-plugin-inferno will automatically import the required methods from inferno library. There is no need to import inferno in every single JSX file. Only import the inferno specific code required by the application.
example:
1import {render} from 'inferno'; // Just import what you need, (render in this case) 2 3// The plugin will automatically import, createVNode 4render(<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
1{ 2 "presets": [ "es2015" ], 3 "plugins": [["inferno", { 4 "imports": false 5 }]] 6}
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.
1{ 2 "presets": [ "es2015" ], 3 "plugins": [["inferno", { 4 "imports": true, 5 "pragma": "", 6 "pragmaCreateComponentVNode": "", 7 "pragmaNormalizeProps": "", 8 "pragmaTextVNode": "" 9 }]] 10}
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 API
createVNode
, createComponentVNode
, createFragment
etc. If you see your JSX being transpiled into createElement
calls
its good indication that your babel configuration is not correct.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 existing vulnerabilities detected
Reason
3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More