or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

compilation.mderror-handling.mdindex.mdparsing.mdruntime-helpers.mdtransforms.md
tile.json

runtime-helpers.mddocs/

Runtime Helpers

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

Development vs Production

Runtime helpers are optimized differently in development and production builds:

  • Development: Includes debug information and error checking
  • Production: Minimal runtime overhead with tree-shaking support
  • SSR: May include additional server-specific optimizations

The compiler automatically selects appropriate helper implementations based on the build environment.