Inula2 Rust 编译器

本项目是 openInula 2.0 的 Rust 实现，提供 编译时响应式（Compile-time Reactivity）支持。通过 NAPI 绑定，可以高效地将 JSX 代码编译为可执行的 JavaScript 代码。

🌟 特性

• ⚡️ 高性能：基于 Rust 和 SWC，编译速度极快
• 🔄 编译时响应式：在编译阶段分析依赖，生成高效的响应式代码
• 🎯 完整的 JSX 支持：支持组件、循环、条件渲染、表达式等所有 JSX 特性
• 🔧 TypeScript 支持：使用 SWC 解析，支持现代 JavaScript/TypeScript 语法
• 📦 NAPI 绑定：提供 Node.js 原生扩展，性能卓越

📦 安装

从源码构建

cd packages/inula2-rust-compiler
npm install
npm run build:napi

构建选项

# 构建 NAPI 原生扩展
npm run build:napi

# 构建 WASM 包
npm run build:wasm

# 构建所有目标
npm run build:all

# 清理构建产物
npm run clean

🚀 快速开始

基础用法

const { compileJsxToJs } = require('./src/napi');

const jsx = `
function Counter() {
  let count = 0;
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count++}>Increment</button>
    </div>
  );
}

render(Counter(), document.getElementById('app'));
`;

const result = compileJsxToJs(jsx, 'Counter.jsx');
console.log(result);

生成的代码示例

import { compBuilder as $$compBuilder, createHTMLNode as $$createHTMLNode, createExpNode as $$createExpNode, delegateEvent as $$delegateEvent } from "@openinula/next";

function Counter() {
  const $$self = $$compBuilder();
  let count = 0;
  
  return $$self.prepare().init($$createHTMLNode("div", null, [
    $$createExpNode(() => count, ["count"], 1 /*0b1*/),
    $$createHTMLNode("button", ($$node) => {
      $$delegateEvent($$node, "click", () => { $$self.wave(count++, 1 /*0b1*/); });
    })
  ]));
}

render(Counter(), document.getElementById('app'));

📚 支持的 JSX 特性

1. 基础组件

function Hello() {
  return <h1>Hello World!</h1>;
}

2. 表达式绑定

function App() {
  const name = "Inula";
  return <p>Hello, {name}!</p>;
}

3. 循环渲染

function List() {
  const items = ["🍎", "🍌", "🍊"];
  
  return (
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  );
}

4. 条件渲染

function Conditional({ show }) {
  return show ? <p>Now you see me 👀</p> : <p>Now you don't 🙈</p>;
}

5. 组件通信

function Parent() {
  return (
    <div>
      <Child count={10} />
    </div>
  );
}

function Child({ count }) {
  return <p>Count: {count}</p>;
}

6. 生命周期钩子

function App() {
  const [users, setUsers] = useState([]);
  
  didMount(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  });
  
  return <div>Users: {users.length}</div>;
}

7. 响应式状态

function Counter() {
  let count = 0;
  let double;
  
  deriveState(() => double = count * 2, [count]);
  
  return <div>Double: {double}</div>;
}

🏗️ 架构设计

编译器由三个核心模块组成：

1. 解析器（Parser）

将 JSX 代码解析为抽象语法树（AST），识别组件、元素、表达式等结构。

位置：src/napi/src/parser/

2. 分析器（Analyzer）

分析代码结构，提取响应式依赖和位图信息。

关键文件：

• view_analyzer.rs - 视图分析
• functional_macro_analyzer.rs - 函数宏分析
• variables_analyzer.rs - 变量依赖分析

3. 生成器（Generator）

基于分析结果生成可执行的 JavaScript 代码。

关键文件：

• element_generator.rs - 元素生成
• expression_generator.rs - 表达式生成
• view_generator_new.rs - 视图生成

📂 项目结构

packages/inula2-rust-compiler/
├── src/
│   ├── napi/                    # NAPI 绑定
│   │   ├── src/
│   │   │   ├── parser/          # JSX 解析器
│   │   │   ├── analyzer/        # 代码分析器
│   │   │   ├── generator/       # 代码生成器
│   │   │   ├── reactivity_parser/ # 响应式解析
│   │   │   ├── types.rs         # 核心数据结构
│   │   │   ├── inula2_compiler.rs # 主编译器
│   │   │   └── lib.rs           # 模块导出
│   │   ├── testcode/            # 测试用例
│   │   │   └── test*.jsx
│   │   ├── index.js             # NAPI 入口
│   │   └── package.json
│   └── wasm/                    # WASM 包
├── package.json
└── README.md

🔧 API 参考

compileJsxToJs(code: string, filename: string): string

将 JSX 代码编译为 JavaScript。

参数：

• code: JSX 源代码
• filename: 源文件名（用于错误报告）

返回：编译后的 JavaScript 代码字符串

analyzeJsx(code: string): string

分析 JSX 代码的响应式特征。

runConsistencyAndPerformanceTests(): string

运行一致性和性能测试。

InulaCompiler

编译器类，提供更多高级功能。

🧪 测试

运行所有测试用例：

npm test

测试用例位于 src/napi/testcode/ 目录，包含：

• test1.jsx - 基础组件
• test2.jsx - 表达式绑定
• test3.jsx - 模板字符串
• test4.jsx - 组件 props
• test5.jsx - <for> 标签语法
• test6.jsx - 属性绑定
• test7.jsx - 表单控件
• test8.jsx - 生命周期钩子
• test9.jsx - 组件 ref
• test10.jsx - 循环渲染
• test11.jsx - 嵌套组件
• test12.jsx - 函数声明
• test13.jsx - 条件渲染

⚙️ 构建选项

# 构建 NAPI 原生扩展
npm run build:napi

# 构建 WASM 包
npm run build:wasm

# 清理构建产物
npm run clean

# 运行测试
npm test

🛠️ 开发指南

添加新的 JSX 特性支持

1. 在解析器中添加识别逻辑：src/napi/src/parser/jsx_parser.rs
2. 在分析器中添加分析逻辑：src/napi/src/analyzer/
3. 在生成器中添加代码生成逻辑：src/napi/src/generator/

📝 核心概念

响应式系统

编译器使用位图（bitmap）技术追踪依赖关系，实现高效的响应式更新。

// 编译前
let count = 0;
let doubled = count * 2;

// 编译后
let count = 0;
deriveState(() => doubled = count * 2, [count], bitmap);

模板优化

静态结构被提升为模板，运行时只需处理动态部分。

// 编译前
<div>
  <p>Static</p>
  {dynamic}
</div>

// 编译后
const template = createTemplate(/* 静态部分 */);
// 运行时只更新 dynamic 部分

事件委托

所有事件通过事件委托机制处理，减少内存占用。

// 所有同类型事件共享一个监听器
delegateEvent(node, 'click', handler);

🤝 贡献

欢迎提交 Issue 和 Pull Request！