fervid

用Rust编写的全能型Vue编译器。目前处于alpha阶段，最接近的目标是达到当前 Vue SFC编译器 的功能一致性。

入门指南

如何在Vue CLI和Vite中使用fervid的说明即将推出！

MVP进度

此项目的最小目标是（见 路线图）

• Vue 3代码生成；
• unplugin 集成；
• Farm 本地插件；
• 开发/生产模式支持；
• 支持 <script setup>；
• 带有配置的示例Vue项目；
• 性能比较。

正确吗？

此项目使用 Vue SFC playground 作为其参考来比较输出。截至2023年11月，fervid能够产生几乎与官方编译器相同的DEV和PROD代码，只是在

• 上下文变量方面有一些差异。这包括类似于 {{ foo + bar.buzz }} 或 <div v-if="isShown"> 的用法。fervid对这些的支持几乎已经完成。
• [进行中] 修复标志。这些用于帮助 Vue 运行时在比较 VNodes 时。如果一个 VNode 只有一个动态属性，而其他所有属性和文本都是静态的，则需要将此传达给 Vue 以实现快速更新。对这些的支持正在进行中。

要检查 fervid 的正确性，可以将 游乐场输出 与 官方编译器 的输出进行比较。

请注意，输出的“正确性”将取决于 Vue 的版本，因为 Vue 团队可能会更改编译器的输出和/或行为。这对 fervid 来说是一个挑战。

它是否快速？

是的，它非常快。实际上，下面是一个针对 测试组件 的基准测试运行。

  @vue/compiler-sfc:
    954 ops/s, ±1.15%     | slowest, 98.42% slower

  @fervid/napi sync:
    6 464 ops/s, ±0.08%   | 89.29% slower

  @fervid/napi async (4 threads):
    11 624 ops/s, ±2.12%  | 80.73% slower

  @fervid/napi async CPUS (23 threads):
    60 329 ops/s, ±0.67%  | fastest

注意：结果是在 AMD Ryzen 9 7900X 上运行的 Fedora 38，内核版本 6.5.9。

使用 benny 在 Node.js 中进行了基准测试，略有修改，以考虑 libuv 线程。请参阅 基准测试的源代码。

更好的基准测试是一个 TODO 项，其优先级低于功能完整性和实际场景中的可用性，因此 欢迎 Pull Requests。

Crates

fervid

主要 crate。它导出一个 compile 方法，将所有阶段连接起来，从获取源字符串到输出编译代码和资源。对于更精细的编译，您可以直接使用其他 crate。

fervid_core

跨 crate 共享的核心结构和功能。

fervid_parser

基于 swc_html_parser 的基于 Vue SFC 的解析器。

fervid_transform

该 crate 负责 AST 转换。处理 <script> 和 <script setup> 分析和转换，以及 TypeScript。基于 SWC，不使用正则表达式提供快速和正确的转换。

fervid_css

处理 <style> 块，并启用 scoped 样式、CSS Modules 和 Vue 特定的转换。这个 crate 的核心是 swc_css_parser。

fervid_napi

用于 Node.js 的 NAPI-rs 绑定。

fervid_deno

用于 Deno 的 Deno 绑定。

fervid_plugin 和 fervid_plugin_api

这些crate允许使用动态加载库（.so、.dll和.dylib）在Rust中编写的插件。这些插件允许任何人对Vue SFC的解析、优化和代码生成进行自定义。

路线图

解析器

• 模板解析
• W3C规范兼容性

转换器

• 模板作用域构建
• 错误报告
• JS/TS导入分析（由swc_ecma_parser提供支持）
• setup/data/props分析
• 处理<style scoped>
• 支持<script setup>
  • 收集绑定
  • 返回语句：内联与渲染函数
  • defineProps
  • defineEmits
  • defineExpose
  • defineOptions
  • defineSlots
  • defineModel
  • 测试

代码生成器

• 基本的Vue3代码生成

  • 元素
    • createElementVNode
    • 属性
      • 静态 + 动态
      • 合并
      • 合并
    • 子元素
  • 组件
    • createVNode
    • 插槽
  • 上下文感知（_ctx、$data、$setup）
  • 指令
    • v-on
    • v-bind
    • v-if / v-else-if / v-else
    • v-for
    • v-show
    • v-slot
    • v-model
    • v-cloak
    • v-html
    • v-memo
    • v-once
    • v-pre
    • v-text
    • 自定义指令
  • 内置组件
    • keep-alive
    • component
    • transition
    • transition-group
    • teleport
    • slot
    • suspense
  • 补丁标志
  • 提升

• 开发/生产模式

• 热模块替换（HMR）

• Vue 2.7支持

• SSR与内联关键CSS支持

• Vue导入的急切预编译（避免不必要的打包器到编译器的调用）

集成

• WASM二进制（未发布）
• NAPI二进制 @fervid/napi
• unplugin（进行中）
• Farm原生插件
• Turbopack插件（当插件系统定义时）