InfernoJS SWC 插件

SWC 插件，用于启用 Inferno 的 JSX

此插件将项目中 JSX 代码转换为与 Inferno 兼容的虚拟 DOM。建议使用此插件编译 JSX 用于 inferno。与其他 JSX 插件不同，因为它输出高度优化的特定于 inferno 的 createVNode 调用。此插件还检查编译阶段的孩子形状，以减少运行时应用程序的开销。

如何安装

npm i --save-dev swc-plugin-inferno

如何使用

示例

// 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);

片段

以下所有语法都 保留 给 Inferno 的 createFragment 调用

<>
    <div>Foo</div>
    <div>Bar</div>
</>


<Fragment>
    <div>Foo</div>
    <div>Bar</div>
</Fragment>

特殊标志

此插件提供了一些特殊的编译时间标志，可用于优化 inferno 应用程序。

// 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()}

选项

swc-plugin-inferno 将自动从 inferno 库导入所需的方法。无需在单个 JSX 文件中导入 inferno。只需导入应用程序所需的特定于 inferno 的代码。

示例

import {render} from 'inferno'; // only import 'render'

// The plugin will automatically import 'createVNode'
render(<div>1</div>, document.getElementById('root'));

故障排除

您可以通过查看编译输出来验证是否使用了 swc-plugin-inferno。此插件不会生成对 createElement 或 h 的调用，而是使用低级 InfernoJS API createVNode、createComponentVNode、createFragment 等。如果您看到您的 JSX 被转换为 createElement 调用，那么这是一个很好的迹象表明您的构建配置不正确。