CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

transforms.mddocs/

DOM Transforms

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

Capabilities

Node Transforms

Array of transformations applied to AST nodes during compilation.

const DOMNodeTransforms: NodeTransform[];

Included Transforms:

  • transformStyle: Converts static style attributes to dynamic bindings
  • transformTransition: Handles Vue Transition component validation (dev mode)
  • validateHtmlNesting: Validates HTML element nesting rules (dev mode)

Directive Transforms

Mapping of Vue directives to their DOM-specific transformation functions.

const DOMDirectiveTransforms: Record<string, DirectiveTransform>;

Available Directive Transforms:

  • cloak: No-operation transform for v-cloak
  • html: Transform v-html to innerHTML
  • text: Transform v-text to textContent
  • model: DOM-specific v-model for form elements
  • on: Event handling with DOM-specific modifiers
  • show: Transform v-show to display toggling

Style Transform

Converts static CSS style attributes into dynamic Vue style bindings.

/**
 * Transform static style attributes to dynamic :style bindings
 * Converts: style="color: red; font-size: 14px"
 * To: :style="{ color: 'red', fontSize: '14px' }"
 */
const transformStyle: NodeTransform;

Usage Examples:

// Input template
`<div style="color: red; background: blue;">Content</div>`

// Transformed to
`<div :style="{ color: 'red', background: 'blue' }">Content</div>`

// Complex styles
`<div style="margin: 10px 20px; border-radius: 5px;">Content</div>`

// Becomes
`<div :style="{ margin: '10px 20px', borderRadius: '5px' }">Content</div>`

V-Html Transform

Transforms v-html directive to innerHTML property assignment.

/**
 * Transform v-html directive to innerHTML property
 * @param dir - Directive node
 * @param node - Element node
 * @param context - Transform context
 * @returns Property for innerHTML assignment
 */
const transformVHtml: DirectiveTransform;

Usage Examples:

// Input template
`<div v-html="content"></div>`

// Transformed to runtime
`<div innerHTML={content}></div>`

// With dynamic content
`<div v-html="formatContent(data)"></div>`

// Error cases (compilation errors)
`<div v-html>No expression</div>`               // Error: missing expression
`<div v-html="content">Existing</div>`          // Error: conflicts with children

V-Text Transform

Transforms v-text directive to textContent property assignment.

/**
 * Transform v-text directive to textContent property
 * @param dir - Directive node  
 * @param node - Element node
 * @param context - Transform context
 * @returns Property for textContent assignment
 */
const transformVText: DirectiveTransform;

Usage Examples:

// Input template
`<div v-text="message"></div>`

// Transformed to runtime
`<div textContent={toDisplayString(message)}></div>`

// With expression
`<div v-text="user.name || 'Anonymous'"></div>`

// Error cases
`<div v-text>No expression</div>`               // Error: missing expression
`<div v-text="message">Text</div>`              // Error: conflicts with children

V-Model Transform

DOM-specific v-model transformation for native form elements.

/**
 * Transform v-model for DOM form elements
 * Handles different input types and form elements with appropriate
 * runtime directives and value/event bindings
 */
const transformModel: DirectiveTransform;

Supported Elements and Types:

  • Text inputs: <input type="text|email|password|search|url|tel">
  • Checkboxes: <input type="checkbox">
  • Radio buttons: <input type="radio">
  • Select elements: <select> (single and multiple)
  • Textareas: <textarea>

Usage Examples:

// Text input
`<input v-model="name" type="text">`
// Uses V_MODEL_TEXT runtime helper

// Checkbox
`<input v-model="checked" type="checkbox">`
// Uses V_MODEL_CHECKBOX runtime helper

// Radio button
`<input v-model="option" type="radio" value="a">`
// Uses V_MODEL_RADIO runtime helper

// Select dropdown
`<select v-model="selected">
  <option value="a">Option A</option>
</select>`
// Uses V_MODEL_SELECT runtime helper

// Dynamic input type
`<input v-model="value" :type="inputType">`
// Uses V_MODEL_DYNAMIC runtime helper

// Error cases
`<div v-model="value"></div>`                   // Error: invalid element
`<input v-model:value="data">`                  // Error: no args on elements
`<input v-model="file" type="file">`            // Error: file inputs read-only

V-On Transform

Event handling transformation with DOM-specific modifier support.

/**
 * Transform v-on directive with DOM event modifiers
 * Supports key modifiers, event options, and DOM-specific modifiers
 */
const transformOn: DirectiveTransform;

Modifier Categories:

  • Event Options: passive, once, capture
  • Event Modifiers: stop, prevent, self
  • Key Modifiers: Key names for keyboard events
  • Mouse Modifiers: left, right, middle
  • System Modifiers: ctrl, shift, alt, meta, exact

Usage Examples:

// Basic event handling
`<button @click="handleClick">Click</button>`

// Event modifiers
`<form @submit.prevent="onSubmit">Form</form>`
`<div @click.stop="handleClick">Stop propagation</div>`

// Key modifiers
`<input @keyup.enter="submit" @keyup.esc="cancel">`
`<input @keydown.ctrl.s.prevent="save">`

// Event options
`<div @scroll.passive="onScroll">Scrollable</div>`
`<button @click.once="initialize">One-time</button>`

// Mouse events
`<div @click.right="contextMenu">Right-click</div>`
`<div @mouseup.middle="middleClick">Middle-click</div>`

// System key combinations
`<input @keydown.ctrl.shift.z.prevent="redo">`
`<div @click.exact="onlyClick">Exact click only</div>`

V-Show Transform

Transforms v-show directive to conditional display using CSS.

/**
 * Transform v-show directive to runtime v-show directive
 * Controls element visibility using CSS display property
 */
const transformShow: DirectiveTransform;

Usage Examples:

// Basic conditional display
`<div v-show="isVisible">Content</div>`

// With expression
`<div v-show="user && user.isActive">User content</div>`

// Complex conditions
`<div v-show="items.length > 0 && showList">Item list</div>`

// Error case
`<div v-show>No expression</div>`               // Error: missing expression

Transition Transform

Handles Vue Transition component compilation and validation.

/**
 * Transform and validate Transition component usage
 * Ensures proper children and adds optimization hints
 */
const transformTransition: NodeTransform;

Usage Examples:

// Valid transition usage
`<Transition>
  <div v-if="show">Content</div>
</Transition>`

// With v-show optimization
`<Transition>
  <div v-show="visible">Content</div>
</Transition>`
// Automatically adds persisted: true

// Error cases
`<Transition>
  <div>First</div>
  <div>Second</div>
</Transition>`
// Error: multiple children

`<Transition></Transition>`
// Error: no children

Static Stringification

Optimization transform that converts static content to createStaticVNode calls (Node.js only).

/**
 * Transform static content for performance optimization
 * Groups consecutive static elements into single static vnodes
 * Only available in Node.js environments
 */
const stringifyStatic: HoistTransform;

enum StringifyThresholds {
  ELEMENT_WITH_BINDING_COUNT = 5,
  NODE_COUNT = 20
}

Optimization Thresholds:

  • 5+ elements with bindings, OR
  • 20+ consecutive static nodes

Usage Examples:

// Large static content (Node.js compilation)
`<article>
  <header>
    <h1>Title</h1>
    <p>Subtitle</p>
  </header>
  <section>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <!-- Many more static elements -->
  </section>
</article>`

// Gets optimized to single createStaticVNode call
// Improves hydration performance in SSR

HTML Nesting Validation

Development-mode validation for proper HTML element nesting.

/**
 * Validate HTML element nesting according to HTML specifications
 * Warns about invalid nesting that could cause hydration issues
 * Only runs in development mode
 */
const validateHtmlNesting: NodeTransform;

Usage Examples:

// Valid nesting - no warnings
`<div><p>Text</p></div>`
`<ul><li>Item</li></ul>`

// Invalid nesting - development warnings
`<p><div>Block in inline</div></p>`           // Warning: invalid nesting
`<table><tr><td>Cell</td></tr></table>`      // Warning: missing tbody
`<h1><h2>Nested headings</h2></h1>`          // Warning: nested headings

docs

compilation.md

error-handling.md

index.md

parsing.md

runtime-helpers.md

transforms.md

tile.json