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的情况下获得的。

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

更好的基准测试是一个待办事项，其优先级低于功能完整性和实际场景中的可用性，所以欢迎提交拉取请求。

软件包

fervid

主软件包。它导出一个compile方法，将所有阶段连接在一起，从接收源字符串到输出编译后的代码和资源。对于更细粒度的编译，您可以直接使用其他软件包。

fervid_core

跨软件包共享的核心结构和功能。

fervid_parser

基于swc_html_parser的Vue SFC解析器。

fervid_transform

这个软件包负责AST转换。处理<script>和<script setup>分析转换，以及TypeScript。基于SWC，提供无需使用正则表达式即可进行快速和正确转换的功能。

fervid_css

作用于<style>块，并启用scoped样式、CSS Modules和Vue特定转换。这个软件包的骨干是swc_css_parser。

fervid_napi

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

fervid_deno

用于Deno的绑定。

fervid_plugin和fervid_plugin_api

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

路线图

解析器

• 模板解析
• W3规范合规性

转换器

• 模板作用域构建
• 错误报告
• 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插件（当插件系统定义后）