Runtime Helpers

Collection of symbolic identifiers and mappings for SSR runtime helper functions that handle specific rendering operations like interpolation, component rendering, and attribute handling.

Capabilities

Core Helper Symbols

Unique symbols that identify specific SSR runtime helper functions used during code generation.

/** Text interpolation helper for reactive data binding */
const SSR_INTERPOLATE: unique symbol;

/** VNode rendering helper for nested component structures */
const SSR_RENDER_VNODE: unique symbol;

/** Component rendering helper for Vue component instances */
const SSR_RENDER_COMPONENT: unique symbol;

/** Slot rendering helper for component slot content */
const SSR_RENDER_SLOT: unique symbol;

/** Inner slot rendering helper for nested slot structures */
const SSR_RENDER_SLOT_INNER: unique symbol;

/** Class attribute rendering helper for dynamic classes */
const SSR_RENDER_CLASS: unique symbol;

/** Style attribute rendering helper for dynamic styles */
const SSR_RENDER_STYLE: unique symbol;

/** Multiple attributes rendering helper for element attributes */
const SSR_RENDER_ATTRS: unique symbol;

/** Single attribute rendering helper for individual attributes */
const SSR_RENDER_ATTR: unique symbol;

/** Dynamic attribute rendering helper for computed attribute names */
const SSR_RENDER_DYNAMIC_ATTR: unique symbol;

/** List rendering helper for v-for directive processing */
const SSR_RENDER_LIST: unique symbol;

/** Boolean attribute inclusion helper for HTML boolean attributes */
const SSR_INCLUDE_BOOLEAN_ATTR: unique symbol;

/** Loose equality comparison helper for template comparisons */
const SSR_LOOSE_EQUAL: unique symbol;

/** Loose containment check helper for array/object containment */
const SSR_LOOSE_CONTAIN: unique symbol;

/** Dynamic model rendering helper for v-model with dynamic binding */
const SSR_RENDER_DYNAMIC_MODEL: unique symbol;

/** Dynamic model props extraction helper for form elements */
const SSR_GET_DYNAMIC_MODEL_PROPS: unique symbol;

/** Teleport rendering helper for Vue teleport component */
const SSR_RENDER_TELEPORT: unique symbol;

/** Suspense rendering helper for Vue suspense component */
const SSR_RENDER_SUSPENSE: unique symbol;

/** Directive props extraction helper for custom directives */
const SSR_GET_DIRECTIVE_PROPS: unique symbol;

Helper Name Mapping

Record that maps helper symbols to their corresponding string names for runtime function lookup.

/**
 * Mapping of helper symbols to their string names for runtime function lookup
 * Used by the code generator to reference the correct server-side helper functions
 */
const ssrHelpers: Record<symbol, string>;

The ssrHelpers object contains the following mappings:

• SSR_INTERPOLATE → "ssrInterpolate"
• SSR_RENDER_VNODE → "ssrRenderVNode"
• SSR_RENDER_COMPONENT → "ssrRenderComponent"
• SSR_RENDER_SLOT → "ssrRenderSlot"
• SSR_RENDER_SLOT_INNER → "ssrRenderSlotInner"
• SSR_RENDER_CLASS → "ssrRenderClass"
• SSR_RENDER_STYLE → "ssrRenderStyle"
• SSR_RENDER_ATTRS → "ssrRenderAttrs"
• SSR_RENDER_ATTR → "ssrRenderAttr"
• SSR_RENDER_DYNAMIC_ATTR → "ssrRenderDynamicAttr"
• SSR_RENDER_LIST → "ssrRenderList"
• SSR_INCLUDE_BOOLEAN_ATTR → "ssrIncludeBooleanAttr"
• SSR_LOOSE_EQUAL → "ssrLooseEqual"
• SSR_LOOSE_CONTAIN → "ssrLooseContain"
• SSR_RENDER_DYNAMIC_MODEL → "ssrRenderDynamicModel"
• SSR_GET_DYNAMIC_MODEL_PROPS → "ssrGetDynamicModelProps"
• SSR_RENDER_TELEPORT → "ssrRenderTeleport"
• SSR_RENDER_SUSPENSE → "ssrRenderSuspense"
• SSR_GET_DIRECTIVE_PROPS → "ssrGetDirectiveProps"

Helper Function Categories

Text and Data Helpers

SSR_INTERPOLATE: Handles text interpolation for reactive data binding

• Used for {{ }} expressions in templates
• Ensures proper escaping and formatting for server-side output

SSR_LOOSE_EQUAL / SSR_LOOSE_CONTAIN: Comparison utilities

• Used for template conditional logic
• Handle Vue's loose equality semantics in SSR context

Rendering Helpers

SSR_RENDER_VNODE: Renders virtual nodes in SSR context

• Used for nested component structures
• Handles VNode serialization to HTML strings

SSR_RENDER_COMPONENT: Renders Vue component instances

• Primary helper for component rendering
• Manages component lifecycle in SSR context

SSR_RENDER_LIST: Handles v-for list rendering

• Processes arrays and objects for list iteration
• Manages keyed list rendering for SSR

Slot Helpers

SSR_RENDER_SLOT / SSR_RENDER_SLOT_INNER: Slot content rendering

• Handle component slot rendering
• Manage fallback content and slot props
• Support nested slot structures

Attribute Helpers

SSR_RENDER_ATTRS: Renders multiple element attributes

• Handles static and dynamic attribute rendering
• Manages attribute serialization to HTML

SSR_RENDER_ATTR: Renders individual attributes

• Used for single attribute rendering
• Handles attribute value escaping

SSR_RENDER_DYNAMIC_ATTR: Renders computed attribute names

• Handles :[dynamicName]="value" syntax
• Manages dynamic attribute resolution

SSR_RENDER_CLASS / SSR_RENDER_STYLE: Specialized attribute helpers

• Handle class and style attribute rendering
• Support object and array syntax for classes/styles

SSR_INCLUDE_BOOLEAN_ATTR: Boolean attribute handling

• Manages HTML boolean attributes (checked, disabled, etc.)
• Handles conditional inclusion/exclusion

Form Helpers

SSR_RENDER_DYNAMIC_MODEL: v-model with dynamic binding

• Handles v-model:[dynamicProperty] syntax
• Manages form element binding in SSR

SSR_GET_DYNAMIC_MODEL_PROPS: Form element prop extraction

• Extracts v-model related props for form elements
• Handles different input types (text, checkbox, radio, etc.)

SSR_GET_DIRECTIVE_PROPS: Custom directive prop extraction

• Handles custom directive prop extraction
• Manages directive argument and modifier processing

Advanced Feature Helpers

SSR_RENDER_TELEPORT: Teleport component rendering

• Handles Vue teleport component in SSR
• Manages teleport target handling

SSR_RENDER_SUSPENSE: Suspense component rendering

• Handles Vue suspense component in SSR
• Manages async component rendering

Usage in Generated Code

These helpers are automatically imported and used in generated SSR code:

// Example generated code using runtime helpers
import { ssrRenderComponent, ssrInterpolate, ssrRenderAttrs } from 'vue/server-renderer';

function render(_ctx, _push, _parent, _attrs) {
  _push(`<div${ssrRenderAttrs(_attrs)}>`);
  _push(`<h1>${ssrInterpolate(_ctx.title)}</h1>`);
  ssrRenderComponent(MyComponent, { prop: _ctx.data }, null, _parent);
  _push(`</div>`);
}

Note on Helper Implementation

The actual helper function implementations are provided by @vue/server-renderer. The compiler-ssr package only defines the symbols and mappings - the runtime functions themselves are imported from the server renderer at runtime.