$ show vuejs/vue-jsx-vapor
vue-jsx-vapor is a high-performance Rust-based compiler and build toolchain that transforms JSX into optimized Vue 3 code, supporting both the traditional Virtual DOM and the experimental Vapor Mode (direct DOM manipulation). It provides a comprehensive set of developer tools including bundler plugins (Vite, Rollup, Webpack, esbuild, Nuxt, etc.), compile-time macros (defineComponent, defineModel, defineSlots, defineExpose, defineStyle), an ESLint plugin with custom rules, and a Volar integration for type-safe JSX. The compiler leverages the oxc parser in Rust to achieve 35-50x faster transformation compared to Babel-based alternatives. The repository is structured as a monorepo with packages for the Rust compiler, runtime helpers, macros, ESLint rules, and the main vue-jsx-vapor package that ties everything together. It includes extensive snapshot tests, benchmarks, ecosystem CI against popular UI libraries, and a documentation site with interactive tutorials.
The LLM identified 4 files worth highlighting for reuse:
An ESLint rule that enforces consistent formatting of `defineStyle` calls in Vue JSX components. It uses AST analysis to validate and auto-fix the structure of style definitions, ensuring they follow a canonical pattern. This rule is self-contained, demonstrates non-obvious skill in ESLint rule design, and can be extracted for use in any Vue JSX codebase.
An ESLint rule that enforces a customizable order of JSX props (e.g., reserved props like `key` and `ref` first, then event handlers, then others). It provides options for grouping and sorting, making it adaptable to different project conventions. The rule is self-contained, well-tested, and can be reused independently in any Vue JSX project.
Comprehensive TypeScript type definitions for JSX elements in Vue, covering HTML, SVG, MathML attributes, events, and custom element props. These types are adapted from DefinitelyTyped React types and provide full intellisense for Vue JSX. The file is self-contained and can be extracted as a standalone type package for any Vue JSX project.
A Babel/TypeScript macro that transforms `defineComponent` and `defineVaporComponent` calls, automatically restructuring destructured props, handling emits, slots, and expose. It demonstrates advanced AST manipulation and compile-time code generation. While it depends on Babel APIs, the pattern is self-contained and could be extracted for use in other Vue JSX toolchains.