tessl/npm-vue--compiler-dom

DOM-specific template compiler for Vue.js that extends core compiler functionality with browser-specific optimizations and transformations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Template Compilation

Name: tessl/npm-vue--compiler-dom
Author: tessl

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

Capabilities

Compile Function

The main compilation function that transforms Vue templates into optimized render functions.

/**
 * 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;

Usage Examples:

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'
});

Compilation with Options

Advanced compilation with customizable options for different build scenarios.

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

Compilation Result

The result object returned by the compile function containing generated code and metadata.

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

Usage Examples:

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
});

DOM-Optimized Compilation

Compilation with DOM-specific optimizations and transforms automatically applied.

/**
 * 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
 */

Automatic DOM Transforms Applied:

Style Transform: Converts style="color: red" to :style="{ color: 'red' }"
v-model Transform: DOM-specific two-way binding for form elements
v-show Transform: Conditional display using CSS display property
v-html/v-text: DOM content manipulation directives
Event Handling: DOM event modifiers (.prevent, .stop, key modifiers)
Transition Support: Built-in transition and transition-group components

Usage Examples:

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>
`);