or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ast-types.mdcompilation.mderror-handling.mdindex.mdtransforms.mdutilities.md
tile.json

tessl/npm-vue--compiler-core

Core compiler for Vue.js template compilation and transformation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/compiler-core@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--compiler-core@3.5.0

index.mddocs/

Vue Compiler Core

@vue/compiler-core is the core compilation system for Vue.js template processing. It provides a complete pipeline for transforming Vue templates into optimized JavaScript render functions, including parsing, AST transformation, and code generation capabilities.

Package Information

  • Package Name: @vue/compiler-core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vue/compiler-core

Core Imports

import { baseCompile, baseParse, transform, generate } from "@vue/compiler-core";

For CommonJS:

const { baseCompile, baseParse, transform, generate } = require("@vue/compiler-core");

Basic Usage

import { baseCompile, type CompilerOptions } from "@vue/compiler-core";

// Compile a Vue template to render function
const template = `
  <div>
    <h1>{{ title }}</h1>
    <p v-if="showMessage">{{ message }}</p>
  </div>
`;

const options: CompilerOptions = {
  mode: 'module',
  prefixIdentifiers: true
};

const result = baseCompile(template, options);
console.log(result.code); // Generated JavaScript render function

Architecture

Vue Compiler Core follows a traditional compiler architecture with distinct phases:

  • Parser: Converts template strings into Abstract Syntax Trees (AST) using baseParse
  • Transform System: Applies transformations to AST nodes via plugins and directives
  • Code Generator: Converts transformed AST into executable JavaScript using generate
  • Error System: Provides comprehensive error reporting with source location information
  • Type System: Full TypeScript support with detailed type definitions for all APIs

Capabilities

Template Compilation

Complete template compilation pipeline that transforms Vue templates into optimized JavaScript render functions with support for all Vue features.

function baseCompile(
  source: string | RootNode,
  options?: CompilerOptions
): CodegenResult;

interface CompilerOptions extends ParserOptions, TransformOptions, CodegenOptions {}

interface CodegenResult {
  code: string;
  preamble: string;
  ast: RootNode;
  map?: RawSourceMap;
}

Compilation Pipeline

AST Node System

Comprehensive Abstract Syntax Tree node types representing all Vue template constructs, from elements and text to complex expressions and directives.

enum NodeTypes {
  ROOT = 0,
  ELEMENT = 1,
  TEXT = 2,
  COMMENT = 3,
  SIMPLE_EXPRESSION = 4,
  INTERPOLATION = 5,
  ATTRIBUTE = 6,
  DIRECTIVE = 7,
  // ... additional node types
}

interface Node {
  type: NodeTypes;
  loc: SourceLocation;
}

interface RootNode extends Node {
  type: NodeTypes.ROOT;
  source: string;
  children: TemplateChildNode[];
  helpers: Set<symbol>;
  components: string[];
  directives: string[];
  hoists: (JSChildNode | null)[];
  imports: ImportItem[];
  cached: (CacheExpression | null)[];
  temps: number;
  ssrHelpers?: symbol[];
  codegenNode?: TemplateChildNode | JSChildNode | BlockStatement;
  transformed?: boolean;
  filters?: string[];
}

AST Types and Interfaces

Transform System

Flexible transformation system for processing and modifying AST nodes, with built-in transforms for Vue directives and structural elements.

function transform(root: RootNode, options: TransformOptions): void;

function createTransformContext(
  root: RootNode,
  options: TransformOptions
): TransformContext;

function traverseNode(
  node: RootNode | TemplateChildNode,
  context: TransformContext
): void;

function createStructuralDirectiveTransform(
  name: string | RegExp,
  fn: StructuralDirectiveTransform
): NodeTransform;

interface TransformContext {
  root: RootNode;
  helpers: Map<symbol, number>;
  components: Set<string>;
  directives: Set<string>;
  hoists: (JSChildNode | null)[];
  imports: ImportItem[];
  constantCache: WeakMap<TemplateChildNode, ConstantTypes>;
  temps: number;
  cached: (CacheExpression | null)[];
  identifiers: { [name: string]: number | undefined };
  scopes: { vFor: number; vSlot: number; vPre: number; vOnce: number };
  parent: ParentNode | null;
  grandParent: ParentNode | null;
  childIndex: number;
  currentNode: RootNode | TemplateChildNode | null;
  inVOnce: boolean;
  helper<T extends symbol>(name: T): T;
  removeHelper<T extends symbol>(name: T): void;
  helperString(name: symbol): string;
  replaceNode(node: TemplateChildNode): void;
  removeNode(node?: TemplateChildNode): void;
  onNodeRemoved(): void;
  addIdentifiers(exp: ExpressionNode | string): void;
  removeIdentifiers(exp: ExpressionNode | string): void;
  hoist(exp: string | JSChildNode | ArrayExpression): SimpleExpressionNode;
  cache(exp: JSChildNode, isVNode?: boolean, inVOnce?: boolean): CacheExpression;
}

Transform System

Error Handling

Comprehensive error system with detailed error codes, source location tracking, and human-readable error messages.

enum ErrorCodes {
  ABRUPT_CLOSING_OF_EMPTY_COMMENT = 0,
  CDATA_IN_HTML_CONTENT = 1,
  DUPLICATE_ATTRIBUTE = 2,
  END_TAG_WITH_ATTRIBUTES = 3,
  END_TAG_WITH_TRAILING_SOLIDUS = 4,
  // ... additional error codes
}

function createCompilerError<T extends number>(
  code: T,
  loc?: SourceLocation,
  messages?: { [code: number]: string },
  additionalMessage?: string
): InferCompilerError<T>;

function generateCodeFrame(
  source: string,
  start?: number,
  end?: number
): string;

interface CompilerError extends SyntaxError {
  code: number;
  loc?: SourceLocation;
}

Error Handling

Utilities and Helpers

Collection of utility functions for AST manipulation, type checking, and common compiler operations.

function findDir(
  node: ElementNode,
  name: string | RegExp,
  allowEmpty?: boolean
): DirectiveNode | undefined;

function findProp(
  node: ElementNode,
  name: string,
  dynamicOnly?: boolean,
  allowEmpty?: boolean
): ElementNode['props'][0] | undefined;

function isText(node: TemplateChildNode): node is TextNode | InterpolationNode;

function toValidAssetId(name: string, type: 'component' | 'directive' | 'filter'): string;

Utilities and Helpers

Types

Core Configuration Types

interface ParserOptions {
  parseMode?: 'base' | 'html' | 'sfc';
  ns?: Namespaces;
  delimiters?: [string, string];
  getNamespace?: (tag: string, parent: ElementNode | undefined, rootNamespace: Namespace) => Namespace;
  isNativeTag?: (tag: string) => boolean;
  isVoidTag?: (tag: string) => boolean;
  isPreTag?: (tag: string) => boolean;
  isIgnoreNewlineTag?: (tag: string) => boolean;
  isBuiltInComponent?: (tag: string) => symbol | void;
  isCustomElement?: (tag: string) => boolean | void;
  decodeEntities?: (rawText: string, asAttr: boolean) => string;
  whitespace?: 'preserve' | 'condense';
  comments?: boolean;
  prefixIdentifiers?: boolean;
  expressionPlugins?: ParserPlugin[];
}

interface TransformOptions {
  nodeTransforms?: NodeTransform[];
  directiveTransforms?: Record<string, DirectiveTransform | undefined>;
  transformHoist?: HoistTransform | null;
  isBuiltInComponent?: (tag: string) => symbol | void;
  isCustomElement?: (tag: string) => boolean | void;
  prefixIdentifiers?: boolean;
  hoistStatic?: boolean;
  cacheHandlers?: boolean;
  expressionPlugins?: ParserPlugin[];
  scopeId?: string | null;
  slotted?: boolean;
  ssrCssVars?: string;
  hmr?: boolean;
  ssr?: boolean;
  inSSR?: boolean;
  bindingMetadata?: BindingMetadata;
  inline?: boolean;
  isTS?: boolean;
  filename?: string;
}

interface CodegenOptions {
  mode?: 'module' | 'function';
  sourceMap?: boolean;
  scopeId?: string | null;
  optimizeImports?: boolean;
  runtimeModuleName?: string;
  ssrRuntimeModuleName?: string;
  runtimeGlobalName?: string;
}

Source Location Types

interface SourceLocation {
  start: Position;
  end: Position;
  source: string;
}

interface Position {
  offset: number;
  line: number;
  column: number;
}