20 releases (2 stable)
2.0.0 | Nov 24, 2024 |
---|---|
1.0.0 | Oct 17, 2024 |
0.0.23 | Aug 31, 2024 |
0.0.22 | Jul 15, 2024 |
0.0.14 | Nov 25, 2023 |
#64 in Configuration
142 downloads per month
200KB
6K
SLoC
InfernoJS SWC Plugin
Plugin for SWC 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
npm i --save-dev swc-plugin-inferno
How to use
Add swc-plugin-inferno to .swcrc
configuration
Enable jsc.parser.jsx
and set swc-plugin-inferno
into jsc.experimental.plugins
For rest of the settings see: https://swc.rs/docs/configuration/compilation
{
"jsc": {
"experimental": {
"plugins": [
["swc-plugin-inferno", {
"pure": true // Enable or disable /*#__PURE__*/ statements
}]
]
}
}
}
To use SWC with Webpack install swc-loader
and add it to the Webpack configuration
{
mode: 'development',
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
// `.swcrc` can be used to configure swc
loader: 'swc-loader',
},
}
]
}
}
Examples
// Render a simple div
Inferno.render(<div></div>, container);
// Render a div with text
Inferno.render(<div>Hello world</div>, container);
// Render a div with a boolean attribute
Inferno.render(<div autoFocus='true' />, container);
Fragments
All the following syntaxes are reserved for Inferno's createFragment call
<>
<div>Foo</div>
<div>Bar</div>
</>
<Fragment>
<div>Foo</div>
<div>Bar</div>
</Fragment>
Special flags
This plugin provides few special compile time flags that can be used to optimize an inferno application.
// ChildFlags:
<div $HasTextChildren /> - Children is rendered as pure text
<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()}
Options
swc-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:
import {render} from 'inferno'; // only import 'render'
// The plugin will automatically import 'createVNode'
render(<div>1</div>, document.getElementById('root'));
Troubleshoot
You can verify swc-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
it is a good indication that your build configuration is not correct.
Dependencies
~17–28MB
~458K SLoC