@vanilla-dom/babel-plugin

Babel 插件，将 JSX 语法编译为优化的 @vanilla-dom/core VNode 调用，支持编译时优化和组件自动注册。

Installation

pnpm install --save-dev @vanilla-dom/babel-plugin
# 推荐使用 pnpm
pnpm add -D @vanilla-dom/babel-plugin
# 或
yarn add -D @vanilla-dom/babel-plugin

Usage

Basic Setup

Add the plugin to your Babel configuration:

{
  "plugins": ["@vanilla-dom/babel-plugin"]
}

With Options

{
  "plugins": [
    [
      "@vanilla-dom/babel-plugin",
      {
        "importSource": "@vanilla-dom/core",
        "development": false
      }
    ]
  ]
}

Options

• importSource (string, default: "@vanilla-dom/core"): The module to import hyperscript and Fragment from
• development (boolean, default: false): Enable development mode features (reserved for future use)

Transformation Examples

Basic Elements

Input:

<div className="container">Hello World</div>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript('div', { className: 'container' }, null, 'Hello World');

Custom Components

Input:

<MyComponent prop="value">
  <span>Child</span>
</MyComponent>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript(
  MyComponent,
  { prop: 'value' },
  null,
  hyperscript('span', null, null, 'Child'),
);

Fragments

Input:

<>
  <div>First</div>
  <div>Second</div>
</>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript(
  Fragment,
  null,
  null,
  hyperscript('div', null, null, 'First'),
  hyperscript('div', null, null, 'Second'),
);

Props and Expressions

Input:

<button onClick={handleClick} disabled={isDisabled}>
  {buttonText}
</button>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript(
  'button',
  {
    onClick: handleClick,
    disabled: isDisabled,
  },
  null,
  buttonText,
);

Event Syntax (on: prefix)

Input:

<button on:click={handleClick} className="btn">
  Click me
</button>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript('button', { className: 'btn' }, { click: handleClick }, 'Click me');

Spread Attributes

Input:

<div {...props} className="extra">
  Content
</div>

Output:

import { Fragment, hyperscript } from '@vanilla-dom/core';

hyperscript('div', { ...props, className: 'extra' }, null, 'Content');

Integration with Build Tools

Vite

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    jsxFactory: 'hyperscript',
    jsxFragment: 'Fragment',
  },
  plugins: [
    // ... other plugins
  ],
  babel: {
    plugins: ['@vanilla-dom/babel-plugin'],
  },
});

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@vanilla-dom/babel-plugin'],
          },
        },
      },
    ],
  },
};

Rollup

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  plugins: [
    babel({
      plugins: ['@vanilla-dom/babel-plugin'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
  ],
};

TypeScript Support

The plugin works seamlessly with TypeScript. Make sure your tsconfig.json includes:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

🚀 编译时优化特性

静态分析优化

• 静态内容识别：编译时识别静态 HTML 部分
• 动态插值标记：标记需要运行时更新的位置
• 事件优化：自动识别可委托的事件处理

组件处理

• 运行时注册：组件注册交由运行时处理
• 零配置：无需手动配置组件类型
• 第三方扩展：支持任何第三方组件编码范式库

转换优化

// 编译前
<div className="container" onClick={handler}>
  <span>{text}</span>
</div>;

// 编译后
hyperscript(
  'div',
  { className: 'container', onClick: handler },
  null,
  hyperscript('span', null, null, text),
);

🔧 高级配置

// babel.config.js
module.exports = {
  plugins: [
    [
      '@vanilla-dom/babel-plugin',
      {
        // 自定义导入源
        importSource: '@vanilla-dom/core',
        // 开发模式调试
        development: process.env.NODE_ENV === 'development',
      },
    ],
  ],
};

🛠️ 开发

# 安装依赖
pnpm install

# 构建插件
pnpm run build

# 运行测试
pnpm run test

# 开发模式
pnpm run dev

License

MIT