Template Compilation

/**
 * Compile a Vue template into a render function with DOM-specific transforms
 * @param src - Template string or pre-parsed AST node
 * @param options - Compilation options for customizing output
 * @returns Generated code result with render function and metadata
 */
function compile(
  src: string | RootNode,
  options?: CompilerOptions
): CodegenResult;

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

// Basic template compilation
const { code } = compile('<div>{{ message }}</div>');
// Result: render function code

// With expressions and directives
const { code } = compile(`
  <div v-if="show" @click="handleClick">
    {{ message }}
  </div>
`);

// With compilation options
const { code, ast } = compile('<div>{{ count }}</div>', {
  hoistStatic: true,
  cacheHandlers: true,
  mode: 'function'
});

interface CompilerOptions {
  /** Compilation mode - 'function' for standalone, 'module' for build tools */
  mode?: 'function' | 'module';
  /** Whether to prefix identifiers to avoid conflicts */
  prefixIdentifiers?: boolean;
  /** Enable static hoisting optimization */
  hoistStatic?: boolean;
  /** Cache event handlers to avoid recreation */
  cacheHandlers?: boolean;
  /** Scoped CSS identifier for style scoping */
  scopeId?: string;
  /** Whether component is in a slot */
  slotted?: boolean;
  /** Server-side rendering mode */
  ssr?: boolean;
  /** CSS variables for SSR */
  ssrCssVars?: string[];
  /** Binding metadata for optimization */
  bindingMetadata?: BindingMetadata;
  /** Inline component mode */
  inline?: boolean;
  /** TypeScript mode */
  isTS?: boolean;
  /** Error handler callback */
  onError?: (error: CompilerError) => void;
  /** Warning handler callback */
  onWarn?: (warning: CompilerError) => void;
  /** Custom node transforms */
  nodeTransforms?: NodeTransform[];
  /** Custom directive transforms */
  directiveTransforms?: Record<string, DirectiveTransform>;
  /** Custom hoist transform */
  transformHoist?: HoistTransform;
  /** Built-in component checker */
  isBuiltInComponent?: (tag: string) => symbol | void;
  /** Custom element checker */
  isCustomElement?: (tag: string) => boolean;
  /** Babel parser plugins for expressions */
  expressionPlugins?: ParserPlugin[];
  /** Vue 2 compatibility configuration */
  compatConfig?: CompatConfig;
  /** Whitespace handling strategy */
  whitespace?: 'preserve' | 'condense';
  /** Whether to preserve comments */
  comments?: boolean;
}

interface CodegenResult {
  /** Generated JavaScript render function code */
  code: string;
  /** Import statements and helper declarations */
  preamble: string;
  /** Compiled AST node */
  ast: RootNode;
  /** Source map for debugging */
  map?: SourceMapGenerator;
}

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

// Access full compilation result
const result = compile('<div>{{ message }}</div>');

console.log(result.code);      // Generated render function
console.log(result.preamble);  // Import statements
console.log(result.ast);       // AST representation
console.log(result.map);       // Source map if available

// Production compilation with optimizations
const optimized = compile(template, {
  mode: 'module',
  hoistStatic: true,
  cacheHandlers: true,
  prefixIdentifiers: true
});

/**
 * The compile function automatically applies DOM-specific transforms:
 * - Style attribute processing (static to dynamic conversion)
 * - DOM directive transforms (v-model, v-show, v-html, etc.)
 * - HTML validation and nesting checks (development mode)
 * - Static content stringification (Node.js environments)
 * - DOM event handling with modifiers
 */

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

// DOM directives are automatically processed
const { code } = compile(`
  <form @submit.prevent="handleSubmit">
    <input v-model="name" type="text">
    <button v-show="isValid">Submit</button>
  </form>
`);

// Static styles are optimized
const { code: styleCode } = compile(`
  <div style="color: red; font-size: 14px">
    Static styled content
  </div>
`);