/fervid

All-in-One Vue compiler written in Rust

Primary LanguageRust

fervid

All-In-One Vue compiler written in Rust.

Currently in early development, and the closest goal is to reach feature-parity with the current Vue SFC compiler.

Progress till MVP

A minimal target of this project includes:

  • Vue 3 code generation;
  • unplugin integration;
  • Dev/prod mode support;
  • <script setup> support;
  • Example Vue project with configuration;
  • Performance comparison.

Is it correct?

This project uses Vue SFC playground as its reference to compare the output. As of April 2023, fervid is capable of producing the DEV code almost identical to the official compiler, except for:

  • [WIP] Context variables. This includes usages like {{ foo + bar.buzz }} or <div v-if="isShown">. These usages require a JavaScript parser and transformer like SWC and support for them in fervid is currently ongoing.
  • [WIP] Patch flags. These are used to help Vue runtime when diffing the VNodes. If a VNode only has one prop which is dynamic, and all the other props and text are static, this needs to be conveyed to Vue for fast updates. I am currently researching how they are originally implemented.

To check correctness of fervid, you can compare the run log to the output of playground. For doing so, go to https://sfc.vuejs.org and paste in the contents of crates/fervid/benches/fixtures/input.vue.

Please note that "correctness" of output will depend on the version of Vue, as Vue team may change the output and/or behaviour of the compiler. This is a big challenge for fervid.

Is it fast?

Yes, it is incredibly fast. In fact, below are the parsing/compilation times benchmarked for a test component.

Action Mean time
Parsing 5.58µs
Code generation: CSR + DEV 16.26µs

Note: results are for AMD Ryzen 9 5900HX running on Fedora 37 with kernel version 6.1.6

Micro-benchmarking has been done using Criterion, code for benchmarks can be found in benches directory.

Actual benchmarking is a TODO and has much lower priority compared to feature-completeness and usability in real-world scenarios, so Pull Requests are welcome.

Crates

fervid wip

The main crate. At the moment of writing, it is responsible for everything, starting from parsing SFC and all the way to code generation, but this is temporary. In the future, this crate will most likely be used for CLI utility and re-exports from other crates.

fervid_css wip

Works on the <style> block and enables scoped styles, CSS Modules and Vue-specific transformations. The backbone of this crate is lightningcss.

fervid_core wip

The core structures and functionality shared across crates.

fervid_transform wip

This crate is responsible for AST transformation. Handles <script> and <script setup> analysis and transformations, along with Typescript. Based on SWC and provides fast and correct transforms without using regular expressions.

fervid_parser wip

Parser for Vue SFC based on swc_html_parser.

fervid_napi wip

NAPI-rs bindings for usage in Node.js.

fervid_deno future

Deno bindings for usage in Deno.

fervid_plugin and fervid_plugin_api future

These crates allow authoring plugins for fervid in Rust using dynamically loaded libraries (.so, .dll and .dylib). These plugins allow anyone to customize how a Vue SFC is parsed, optimized and code-generated.

Roadmap

Parser

  • Template parsing
  • W3 Spec compliance

Transformer

  • Template scope construction
  • Error reporting
  • JS/TS imports analysis (powered by swc_ecma_parser)
  • setup/data/props analysis

Code generator

  • Basic Vue3 code generation

    • Elements
      • createElementVNode
      • Attributes
        • Static + Dynamic
        • style merging
        • class merging
      • Children
    • Components
      • createVNode
      • Slots
    • Context-awareness (_ctx, $data, $setup)
    • Directives
      • 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
      • Custom directives
    • Built-in components
      • keep-alive
      • component
      • transition
      • transition-group
      • teleport
      • slot
      • suspense
    • Patch flags
    • Hoisting

  • Processing <style scoped>

  • <script setup> support

    • Bindings collection;
    • Return statement: inline vs render function;
    • defineProps
    • defineEmits
    • defineExpose
    • defineOptions
    • defineSlots
    • defineModel
    • Tests

  • DEV/PROD mode

  • Vue 2.7 support

  • SSR with inline critical CSS support

  • Eager pre-compilation of Vue imports (avoid unneccessary bundler->compiler calls)

Integrations

  • WASM binary (unpublished)
  • NAPI binary (unpublished)
  • unplugin
  • Farm native plugin
  • Turbopack plugin (when plugin system is defined)