or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

compilation.mderror-handling.mdindex.mdparsing.mdruntime-helpers.mdtransforms.md
tile.json

index.mddocs/

Vue Compiler DOM

Vue Compiler DOM is a DOM-specific template compiler for Vue.js that extends the core compiler functionality with browser-specific optimizations and transformations. It handles compilation of Vue templates and Single File Components (SFCs) for DOM environments, including parsing HTML-specific syntax, transforming DOM directives, and providing DOM-aware optimizations.

Package Information

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

Core Imports

import { compile, parse } from "@vue/compiler-dom";

For CommonJS:

const { compile, parse } = require("@vue/compiler-dom");

Extended imports with transforms and configuration:

import { 
  compile, 
  parse, 
  DOMNodeTransforms, 
  DOMDirectiveTransforms,
  parserOptions,
  transformStyle,
  createDOMCompilerError,
  DOMErrorCodes,
  DOMErrorMessages
} from "@vue/compiler-dom";

Runtime helpers import:

import {
  V_MODEL_TEXT,
  V_MODEL_RADIO,
  V_MODEL_CHECKBOX,
  V_MODEL_SELECT,
  V_MODEL_DYNAMIC,
  V_ON_WITH_MODIFIERS,
  V_ON_WITH_KEYS,
  V_SHOW,
  TRANSITION,
  TRANSITION_GROUP
} from "@vue/compiler-dom";

All compiler-core functionality is also available:

import { 
  baseCompile, 
  baseParse, 
  transform, 
  generate,
  // ... all other compiler-core exports
} from "@vue/compiler-dom";

Basic Usage

import { compile, parse } from "@vue/compiler-dom";

// Compile a template to render function
const { code } = compile('<div>{{ message }}</div>');
console.log(code); // Generated render function

// Parse template to AST
const ast = parse('<div>{{ message }}</div>');
console.log(ast); // Abstract syntax tree

// Compile with options
const { code: optimizedCode } = compile(
  '<div v-if="show">{{ message }}</div>',
  {
    hoistStatic: true,
    cacheHandlers: true
  }
);

Architecture

Vue Compiler DOM is built around several key components:

  • Core Functions: Main compilation and parsing entry points (compile, parse)
  • Transform System: Node and directive transforms for DOM-specific processing
  • Parser Configuration: DOM-aware parser options for HTML, SVG, and MathML
  • Runtime Helpers: Symbols and utilities for generated code runtime support
  • Error System: DOM-specific error codes and error handling
  • Optimization Engine: Static analysis and hoisting for performance

Capabilities

Template Compilation

Core template compilation functionality that transforms Vue templates into executable JavaScript render functions with DOM-specific optimizations.

function compile(
  src: string | RootNode,
  options?: CompilerOptions
): CodegenResult;

Template Compilation

Template Parsing

Template parsing functionality that converts template strings into Abstract Syntax Trees (AST) with DOM-aware parsing rules.

function parse(template: string, options?: ParserOptions): RootNode;

Template Parsing

DOM Transforms

Collection of DOM-specific transformations for processing Vue directives, elements, and optimizations during compilation.

const DOMNodeTransforms: NodeTransform[];
const DOMDirectiveTransforms: Record<string, DirectiveTransform>;

// Individual transform also available as direct export
const transformStyle: NodeTransform;

DOM Transforms

Runtime Helpers

Runtime symbols and utilities that support the generated code execution environment for DOM-specific features.

const V_MODEL_TEXT: unique symbol;
const V_MODEL_RADIO: unique symbol;
const V_MODEL_CHECKBOX: unique symbol;
const V_MODEL_SELECT: unique symbol;
const V_MODEL_DYNAMIC: unique symbol;
const V_ON_WITH_MODIFIERS: unique symbol;
const V_ON_WITH_KEYS: unique symbol;
const V_SHOW: unique symbol;
const TRANSITION: unique symbol;
const TRANSITION_GROUP: unique symbol;

Runtime Helpers

Error Handling

DOM-specific error handling system with comprehensive error codes and messages for compilation issues.

function createDOMCompilerError(
  code: DOMErrorCodes,
  loc?: SourceLocation
): DOMCompilerError;

enum DOMErrorCodes {
  X_V_HTML_NO_EXPRESSION = 53,
  X_V_HTML_WITH_CHILDREN,
  X_V_TEXT_NO_EXPRESSION,
  X_V_TEXT_WITH_CHILDREN,
  X_V_MODEL_ON_INVALID_ELEMENT,
  X_V_MODEL_ARG_ON_ELEMENT,
  X_V_MODEL_ON_FILE_INPUT_ELEMENT,
  X_V_MODEL_UNNECESSARY_VALUE,
  X_V_SHOW_NO_EXPRESSION,
  X_TRANSITION_INVALID_CHILDREN,
  X_IGNORED_SIDE_EFFECT_TAG,
  __EXTEND_POINT__
}

const DOMErrorMessages: { [code: number]: string };

Error Handling

Compiler Core Re-exports

All functionality from @vue/compiler-core is re-exported and available through @vue/compiler-dom.

// Base compilation functions
function baseCompile(template: string | RootNode, options?: CompilerOptions): CodegenResult;
function baseParse(content: string, options?: ParserOptions): RootNode;

// Transform and generation
function transform(root: RootNode, options: TransformOptions): void;
function generate(ast: RootNode, options?: CodegenOptions): CodegenResult;

// All AST node types, transform utilities, error handling, 
// and other compiler-core functionality available

This means you can import any compiler-core functionality directly from @vue/compiler-dom without needing to install @vue/compiler-core separately.

Types

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

interface CompilerOptions {
  mode?: 'function' | 'module';
  prefixIdentifiers?: boolean;
  hoistStatic?: boolean;
  cacheHandlers?: boolean;
  scopeId?: string;
  slotted?: boolean;
  ssr?: boolean;
  ssrCssVars?: string[];
  bindingMetadata?: BindingMetadata;
  inline?: boolean;
  isTS?: boolean;
  onError?: (error: CompilerError) => void;
  onWarn?: (warning: CompilerError) => void;
  nodeTransforms?: NodeTransform[];
  directiveTransforms?: Record<string, DirectiveTransform>;
  transformHoist?: HoistTransform;
  isBuiltInComponent?: (tag: string) => symbol | void;
  isCustomElement?: (tag: string) => boolean;
  expressionPlugins?: ParserPlugin[];
  compatConfig?: CompatConfig;
  whitespace?: 'preserve' | 'condense';
  comments?: boolean;
}

interface ParserOptions {
  parseMode?: 'base' | 'html' | 'sfc';
  isVoidTag?: (tag: string) => boolean;
  isNativeTag?: (tag: string) => boolean;
  isPreTag?: (tag: string) => boolean;
  isIgnoreNewlineTag?: (tag: string) => boolean;
  decodeEntities?: (rawText: string, asAttr: boolean) => string;
  isBuiltInComponent?: (tag: string) => symbol | void;
  getNamespace?: (tag: string, parent: ElementNode | undefined, rootNamespace: Namespace) => Namespace;
  getTextMode?: (node: ElementNode, parent: ElementNode | undefined) => TextModes;
  onError?: (error: CompilerError) => void;
  onWarn?: (warning: CompilerError) => void;
  comments?: boolean;
}

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[];
}