InfernoJS SWC 插件

SWC 插件，用于启用 Inferno 的 JSX

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

如何安装

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

如何使用

将 swc-plugin-inferno 添加到 .swcrc 配置

启用 jsc.parser.jsx 并将 swc-plugin-inferno 设置为 jsc.experimental.plugins 的值。有关其余设置，请参阅：[https://swc.rust-lang.net.cn/docs/configuration/compilation](https://swc.rust-lang.net.cn/docs/configuration/compilation)

{
  "jsc": {
    "experimental": {
         "plugins": [
            ["swc-plugin-inferno", {
              "pure": true // Enable or disable /*#__PURE__*/ statements
            }]
        ]
    }
  }
}

要使用 SWC 与 Webpack 一起安装，请安装 swc-loader 并将其添加到 Webpack 配置中

{
  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',
        },
      }
    ]
  }
}

示例

// 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 调用，则这表明您的构建配置不正确。