compiler-sfc

This is the source code of Vue.js 2.x, a progressive JavaScript framework for building user interfaces. It includes the complete runtime (reactivity system, virtual DOM, component instance lifecycle), the template compiler that transforms HTML templates into render functions, server-side rendering, Single File Component (.vue) compilation, and a backport of Vue 3 Composition API features (ref, reactive, watch, setup) for Vue 2 compatibility.

Tech Stack

Vue.jsTypeScriptVitest

Key Features

Reactive Observation System
Virtual DOM & Patching
Component Instance Lifecycle
Template Compiler
Global API (Vue.extend, Vue.mixin, Vue.use, Vue.component/directive/filter)
Web Platform Runtime
KeepAlive
Vue 3 Composition API Backport
SFC Compiler Package
Server-Side Renderer
Multi-Format Build System

Entry Points

Start here when working with this codebase

index.js

compiler-sfc/index.js

Application entry point

Start here to understand how the application initializes

Coding Conventions

Standards and patterns used in this codebase

TypeScript & Type System

Use TypeScript for source code with internal type definitions separated into a dedicated `src/types` directory, while public-facing type declarations live in a top-level `types` directory. Prefer interfaces and type aliases over inline types for complex structures.

Internal types in src/types/component.ts, src/types/vnode.ts; public declarations in types/vue.d.ts, types/options.d.ts

src/typestypes/common.d.tstypes/built-in-components.d.ts

Module Organization

Organize code by platform and concern using a layered architecture: shared utilities at the bottom, core platform-agnostic logic in the middle, and platform-specific implementations (web, server) at the top. Each module has an index entry point that re-exports its public API.

src/shared (utilities) → src/core (platform-agnostic) → src/platforms/web (platform-specific). Entry points like compiler-sfc/index.js re-export from packages.

scripts/alias.jscompiler-sfc/index.jscompiler-sfc/index.mjs

Build System

Use Rollup for bundling with a centralized configuration generator that defines multiple build targets (runtime-only, full, compiler-only, ESM, CJS, UMD). Build configs are generated programmatically from a declarative target map in scripts/config.js, with module aliases resolved via scripts/alias.js.

scripts/config.js defines builds like 'web-runtime-cjs-dev', 'web-full-esm', etc. scripts/build.js orchestrates compilation with optional minification.

scripts/config.jsscripts/build.jsscripts/alias.js

Feature Flags & Compile-Time Constants

Use compile-time feature flags as global boolean constants (declared in global.d.ts) to enable tree-shaking of optional features. Feature flags are replaced at build time and declared globally for TypeScript.

declare var __WEEX__: boolean; declare var __SSR__: boolean; Feature flags in scripts/feature-flags.js control experimental compiler features.

src/global.d.tsscripts/feature-flags.js

Testing

Use Vitest as the test framework with a dedicated setup file that configures global test utilities and environment variables. Path aliases from the build system are mirrored in the test configuration for consistent module resolution.

vitest.config.ts sets up resolve.alias matching scripts/alias.js paths, and test/vitest.setup.ts configures global utilities.

vitest.config.tstest/vitest.setup.ts

API Compatibility & Migration

Backport newer API patterns (Vue 3 Composition API) into the existing codebase under a dedicated directory (src/v3) with clear separation from the original implementation. Maintain backward compatibility while exposing new APIs.

src/v3/reactivity contains ref, reactive, computed backports; src/v3/sfc-helpers provides useCssModule, useCssVars; these coexist with the original Options API in src/core.

src/v3src/v3/reactivitysrc/v3/sfc-helpers

Release & Publishing

Automate releases with a script that handles version bumping, changelog generation, building, testing, git tagging, and npm publishing for multiple packages in sequence. Support both stable and pre-release workflows.

scripts/release.js handles versioning, runs build and tests, publishes vue, compiler-sfc, and server-renderer packages, then pushes git tags.

scripts/release.js

Package Re-export Pattern

For sub-packages that are published separately but built from the monorepo, use thin re-export modules (index.js, index.mjs, index.d.ts) that delegate to the actual compiled package, supporting both CJS and ESM consumers.

compiler-sfc/index.js: module.exports = require('@vue/compiler-sfc'); compiler-sfc/index.mjs: export * from '@vue/compiler-sfc'

compiler-sfc/index.jscompiler-sfc/index.mjscompiler-sfc/index.d.ts

Core Architecture Pattern

Separate the virtual DOM system (vnode creation, diffing/patching) from the component instance system (lifecycle, state, events) and the reactivity system (observer, dep, watcher, scheduler). Each subsystem is self-contained with clear interfaces between them.

src/core/observer (reactivity), src/core/instance (component), src/core/vdom (virtual DOM) are independent subsystems that compose together.

src/core/observersrc/core/instancesrc/core/vdom