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

Vue Compiler DOM

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

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

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 2 months ago
Describes: pkg:npm/@vue/compiler-dom@3.5.x
Publish Source: CLI
Badge