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

Runtime Helpers

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

Runtime symbols and utilities that support the generated code execution environment for DOM-specific features.

Capabilities

V-Model Helpers

Runtime symbols for different types of v-model implementations on native form elements.

/** Runtime helper for text-based input elements */
const V_MODEL_TEXT: unique symbol;

/** Runtime helper for checkbox input elements */
const V_MODEL_CHECKBOX: unique symbol;

/** Runtime helper for radio button input elements */
const V_MODEL_RADIO: unique symbol;

/** Runtime helper for select elements */
const V_MODEL_SELECT: unique symbol;

/** Runtime helper for dynamic input types */
const V_MODEL_DYNAMIC: unique symbol;

Usage Context: These symbols are used internally by the compiler to generate appropriate runtime directives for v-model on different form elements. Each symbol maps to a specific runtime implementation.

Symbol Mappings:

V_MODEL_TEXT → vModelText runtime function
V_MODEL_CHECKBOX → vModelCheckbox runtime function
V_MODEL_RADIO → vModelRadio runtime function
V_MODEL_SELECT → vModelSelect runtime function
V_MODEL_DYNAMIC → vModelDynamic runtime function

Event Handling Helpers

Runtime symbols for event handling with modifiers and key guards.

/** Runtime helper for event modifiers (.stop, .prevent, etc.) */
const V_ON_WITH_MODIFIERS: unique symbol;

/** Runtime helper for key modifiers (.enter, .esc, etc.) */
const V_ON_WITH_KEYS: unique symbol;

Usage Context: Used by the v-on transform to wrap event handlers with modifier logic and key filtering.

Symbol Mappings:

V_ON_WITH_MODIFIERS → withModifiers runtime function
V_ON_WITH_KEYS → withKeys runtime function

Generated Code Examples:

// Input: @click.stop.prevent="handler"
// Generated: onClick: withModifiers(handler, ["stop", "prevent"])

// Input: @keyup.enter.esc="handler"  
// Generated: onKeyup: withKeys(handler, ["enter", "esc"])

Directive Helpers

Runtime symbols for built-in directives.

/** Runtime helper for v-show directive */
const V_SHOW: unique symbol;

Usage Context: The v-show directive uses this symbol to reference the runtime v-show implementation.

Symbol Mapping:

V_SHOW → vShow runtime directive

Generated Code Example:

// Input: <div v-show="visible">Content</div>
// Generated: withDirectives(h('div', 'Content'), [[vShow, visible]])

Component Helpers

Runtime symbols for built-in Vue components.

/** Runtime helper for Transition component */
const TRANSITION: unique symbol;

/** Runtime helper for TransitionGroup component */
const TRANSITION_GROUP: unique symbol;

Usage Context: Used when Transition or TransitionGroup components are detected in templates.

Symbol Mappings:

TRANSITION → Transition runtime component
TRANSITION_GROUP → TransitionGroup runtime component

Generated Code Examples:

// Input: <Transition><div v-if="show">Content</div></Transition>
// Generated: h(Transition, null, { default: () => show ? h('div', 'Content') : null })

// Input: <transition-group tag="ul"><li v-for="item in items">{{ item }}</li></transition-group>
// Generated: h(TransitionGroup, { tag: 'ul' }, { default: () => items.map(item => h('li', item)) })

Runtime Helper Registration

The compiler registers all runtime helpers for code generation.

/**
 * Runtime helpers are registered with their string names
 * This mapping is used during code generation to import
 * the correct runtime functions
 */
registerRuntimeHelpers({
  [V_MODEL_RADIO]: 'vModelRadio',
  [V_MODEL_CHECKBOX]: 'vModelCheckbox',
  [V_MODEL_TEXT]: 'vModelText',
  [V_MODEL_SELECT]: 'vModelSelect',
  [V_MODEL_DYNAMIC]: 'vModelDynamic',
  [V_ON_WITH_MODIFIERS]: 'withModifiers',
  [V_ON_WITH_KEYS]: 'withKeys',
  [V_SHOW]: 'vShow',
  [TRANSITION]: 'Transition',
  [TRANSITION_GROUP]: 'TransitionGroup'
});

Helper Usage in Generated Code

Runtime helpers are automatically imported and used in generated render functions.

Form Element Examples:

// Text input with v-model
// Template: <input v-model="name" type="text">
// Generated:
import { vModelText } from 'vue'
// render function uses: withDirectives(h('input', { type: 'text' }), [[vModelText, name]])

// Checkbox with v-model  
// Template: <input v-model="checked" type="checkbox">
// Generated:
import { vModelCheckbox } from 'vue'
// render function uses: withDirectives(h('input', { type: 'checkbox' }), [[vModelCheckbox, checked]])

// Select with v-model
// Template: <select v-model="selected"><option value="a">A</option></select>
// Generated:
import { vModelSelect } from 'vue'
// render function uses: withDirectives(h('select', [h('option', { value: 'a' }, 'A')]), [[vModelSelect, selected]])

Event Handler Examples:

// Event with modifiers
// Template: <button @click.stop.prevent="handler">Click</button>
// Generated:
import { withModifiers } from 'vue'
// render function uses: h('button', { onClick: withModifiers(handler, ["stop", "prevent"]) }, 'Click')

// Key event
// Template: <input @keyup.enter="submit">
// Generated: 
import { withKeys } from 'vue'
// render function uses: h('input', { onKeyup: withKeys(submit, ["enter"]) })

Directive Examples:

// v-show directive
// Template: <div v-show="visible">Content</div>
// Generated:
import { vShow, withDirectives } from 'vue'
// render function uses: withDirectives(h('div', 'Content'), [[vShow, visible]])

Component Examples:

// Transition component
// Template: <Transition><div v-if="show">Content</div></Transition>
// Generated:
import { Transition } from 'vue'
// render function uses: h(Transition, null, { default: () => show ? h('div', 'Content') : null })