fervid

用 Rust 编写的 All-In-One Vue 编译器。目前处于 alpha 阶段，最接近的目标是达到与当前 Vue SFC 编译器 的功能兼容性。

入门指南

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

MVP 进度

此项目的最小目标是（请参阅 路线图）

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

正确吗？

此项目使用 Vue SFC 沙盒 作为其输出比较的参考。截至 2023 年 11 月，fervid 可以生成几乎与官方编译器相同的 DEV 和 PROD 代码，在一些方面存在一些差异

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

要检查fervid的正确性，您可以比较playground输出和官方编译器的输出。

请注意，输出的“正确性”将取决于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。

Node.js的基准测试已经使用benny进行，稍作修改以考虑libuv线程。基准测试的源代码：此处。

更好的基准测试是一个待办事项，与功能完整性和实际场景中的可用性相比优先级较低，因此欢迎提交

拉取请求。

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中为fervid编写插件。这些插件允许任何人对Vue SFC的解析、优化和代码生成进行自定义。

路线图

解析器

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

转换器

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

代码生成器

• 基本的Vue3代码生成

  • 元素
    • createElementVNode
    • 属性
      • 静态 + 动态
      • style 合并
      • class 合并
    • 子元素
  • 组件
    • 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
  • 补丁标志
  • 提升

• DEV/PROD模式

• 热模块替换（HMR）

• Vue 2.7支持

• SSR与内联关键CSS支持

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

集成

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