Template Parsing

/**
 * Parse a Vue template string into an Abstract Syntax Tree
 * @param template - Template string to parse
 * @param options - Parser options for customizing parsing behavior
 * @returns Root AST node representing the parsed template
 */
function parse(template: string, options?: ParserOptions): RootNode;

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

// Basic template parsing
const ast = parse('<div>{{ message }}</div>');
console.log(ast); // RootNode with parsed structure

// Parse complex template
const complexAst = parse(`
  <div v-if="show" class="container">
    <h1>{{ title }}</h1>
    <p v-for="item in items" :key="item.id">
      {{ item.name }}
    </p>
  </div>
`);

// Parse with custom options
const customAst = parse('<div>Content</div>', {
  comments: true,
  whitespace: 'preserve'
});

interface ParserOptions {
  /** Parsing mode - 'html' for DOM templates */
  parseMode?: 'base' | 'html' | 'sfc';
  /** Function to check if tag is void (self-closing) */
  isVoidTag?: (tag: string) => boolean;
  /** Function to check if tag is native HTML/SVG/MathML */
  isNativeTag?: (tag: string) => boolean;
  /** Function to check if tag preserves whitespace */
  isPreTag?: (tag: string) => boolean;
  /** Function to check if tag ignores newlines */
  isIgnoreNewlineTag?: (tag: string) => boolean;
  /** HTML entity decoder function */
  decodeEntities?: (rawText: string, asAttr: boolean) => string;
  /** Built-in component resolver */
  isBuiltInComponent?: (tag: string) => symbol | void;
  /** Namespace resolver for HTML/SVG/MathML */
  getNamespace?: (tag: string, parent: ElementNode | undefined, rootNamespace: Namespace) => Namespace;
  /** Text mode resolver */
  getTextMode?: (node: ElementNode, parent: ElementNode | undefined) => TextModes;
  /** Error handler callback */
  onError?: (error: CompilerError) => void;
  /** Warning handler callback */
  onWarn?: (warning: CompilerError) => void;
  /** Whether to preserve comments in AST */
  comments?: boolean;
}

const parserOptions: ParserOptions;

const parserOptions: ParserOptions = {
  parseMode: 'html',
  isVoidTag: /* built-in function for HTML void tags */,
  isNativeTag: (tag: string) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
  isPreTag: (tag: string) => tag === 'pre',
  isIgnoreNewlineTag: (tag: string) => tag === 'pre' || tag === 'textarea',
  decodeEntities: /* browser-specific HTML entity decoder */,
  isBuiltInComponent: (tag: string) => {
    if (tag === 'Transition' || tag === 'transition') return TRANSITION;
    else if (tag === 'TransitionGroup' || tag === 'transition-group') return TRANSITION_GROUP;
  },
  getNamespace: /* complex namespace resolution function */
};

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

// Parse with default DOM options
const ast = parse('<div>Content</div>');

// Parse with custom options extending DOM defaults
const customAst = parse('<svg><circle r="10"/></svg>', {
  ...parserOptions,
  comments: true
});

// Access DOM parser configuration
console.log(parserOptions.parseMode);        // 'html'
console.log(parserOptions.isVoidTag('br'));  // true
console.log(parserOptions.isNativeTag('div')); // true

interface RootNode extends Node {
  /** Node type identifier */
  type: NodeTypes.ROOT;
  /** Original template source */
  source: string;
  /** Child nodes (elements, text, expressions) */
  children: TemplateChildNode[];
  /** Helper functions used in template */
  helpers: Set<symbol>;
  /** Component names referenced */
  components: string[];
  /** Directive names used */
  directives: string[];
  /** Hoisted static expressions */
  hoists: (JSChildNode | null)[];
  /** Import statements needed */
  imports: ImportItem[];
  /** Cached expressions for optimization */
  cached: (CacheExpression | null)[];
  /** Temporary variable counter */
  temps: number;
  /** SSR-specific helpers */
  ssrHelpers?: symbol[];
  /** Generated code node */
  codegenNode?: TemplateChildNode | JSChildNode | BlockStatement;
  /** Whether AST has been transformed */
  transformed?: boolean;
  /** Vue 2 compat: filter names */
  filters?: string[];
}

/**
 * The parser automatically handles namespace transitions:
 * - HTML as default namespace
 * - SVG elements and their children
 * - MathML elements and their children
 * - Proper nesting and namespace inheritance
 */

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

// HTML content (default namespace)
const htmlAst = parse('<div><p>Text</p></div>');

// SVG content with proper namespace
const svgAst = parse(`
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40"/>
    <foreignObject>
      <div>HTML in SVG</div>
    </foreignObject>
  </svg>
`);

// MathML content
const mathAst = parse(`
  <math>
    <mi>x</mi>
    <mo>=</mo>
    <mn>2</mn>
  </math>
`);

/**
 * Parse function with error handling
 * Errors are reported via onError callback or thrown if no handler provided
 */
function parse(template: string, options?: {
  onError?: (error: CompilerError) => void;
  onWarn?: (warning: CompilerError) => void;
}): RootNode;

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

// Parse with error handling
const errors: CompilerError[] = [];
const ast = parse('<div><span></div>', {
  onError: (error) => {
    errors.push(error);
    console.error('Parse error:', error.message);
  }
});

// Parse with warnings
const warnings: CompilerError[] = [];
const warnAst = parse('<div><p><div>Nested</div></p></div>', {
  onWarn: (warning) => {
    warnings.push(warning);
    console.warn('Parse warning:', warning.message);
  }
});