Internal Runtime Helpers

/**
 * Renders a VNode to SSR buffer with optional parent component context
 * @param vnode - VNode to render
 * @param parentComponent - Optional parent component instance for context
 * @param slotScopeId - Optional slot scope ID for scoped slots
 * @returns SSR buffer or Promise resolving to SSR buffer
 */
function ssrRenderVNode(
  vnode: VNode,
  parentComponent?: ComponentInternalInstance | null,
  slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer>;

type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean };
type SSRBufferItem = string | SSRBuffer | Promise<SSRBuffer>;
type Props = Record<string, unknown>;

type SSRSlots = Record<string, SSRSlot>;
type SSRSlot = (
  props: Props,
  push: PushFn,
  parentComponent: ComponentInternalInstance | null,
  scopeId: string | null,
) => void;

type PushFn = (item: SSRBufferItem) => void;

/**
 * Renders a component to SSR buffer
 * @param comp - Component to render
 * @param props - Component props
 * @param children - Component children (slots)
 * @param parentComponent - Parent component context
 * @param slotScopeId - Slot scope ID
 * @returns Rendered component output
 */
function ssrRenderComponent(
  comp: Component,
  props: Props | null,
  children: Slots | SSRSlots | null,
  parentComponent: ComponentInternalInstance | null,
  slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer>;

/**
 * Renders all attributes for an element as a string
 * @param props - Props object containing attributes
 * @param tag - Optional HTML tag name for tag-specific handling
 * @returns String containing all rendered attributes
 */
function ssrRenderAttrs(
  props: Record<string, unknown>,
  tag?: string
): string;

import { ssrRenderAttrs } from "@vue/server-renderer";

// Basic attribute rendering
const attrs = ssrRenderAttrs({
  id: 'my-element',
  class: ['active', 'primary'],
  'data-value': 42,
  disabled: true
});
console.log(attrs);
// Output: ' id="my-element" class="active primary" data-value="42" disabled'

// Tag-specific handling
const textareaAttrs = ssrRenderAttrs({
  value: 'Some text',
  rows: 10
}, 'textarea');
// 'value' is excluded for textarea tags

/**
 * Renders a single attribute
 * @param key - Attribute name
 * @param value - Attribute value
 * @param tag - Optional HTML tag for context
 * @returns Rendered attribute string
 */
function ssrRenderAttr(key: string, value: unknown, tag?: string): string;

/**
 * Renders a dynamic attribute with proper escaping
 * @param key - Attribute name
 * @param value - Attribute value
 * @param tag - Optional HTML tag for context
 * @returns Rendered attribute string
 */
function ssrRenderDynamicAttr(key: string, value: unknown, tag?: string): string;

/**
 * Renders class attribute with array/object support
 * @param value - Class value (string, array, or object)
 * @returns Normalized class string
 */
function ssrRenderClass(value: unknown): string;

/**
 * Renders style attribute with object support
 * @param value - Style value (string or object)
 * @returns Normalized style string
 */
function ssrRenderStyle(value: unknown): string;

/**
 * Safely interpolates a value for SSR output
 * @param value - Value to interpolate
 * @returns HTML-escaped string representation
 */
function ssrInterpolate(value: unknown): string;

import { ssrInterpolate } from "@vue/server-renderer";

// Safe interpolation with escaping
console.log(ssrInterpolate('<script>alert("xss")</script>'));
// Output: "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

console.log(ssrInterpolate({ name: 'John', age: 30 }));
// Output: "[object Object]"

console.log(ssrInterpolate(['a', 'b', 'c']));
// Output: "a,b,c"

console.log(ssrInterpolate(null));
// Output: ""

console.log(ssrInterpolate(undefined));
// Output: ""

/**
 * Renders a list using v-for logic
 * @param source - Source data (array, object, string, or number)
 * @param renderItem - Function to render each item
 * @returns Array of rendered items
 */
function ssrRenderList(
  source: any,
  renderItem: (value: any, key: any, index: number) => any
): any[];

import { ssrRenderList, ssrInterpolate } from "@vue/server-renderer";

// Render array
const items = ['apple', 'banana', 'cherry'];
const listHtml = ssrRenderList(items, (item, index) => {
  return `<li key="${index}">${ssrInterpolate(item)}</li>`;
}).join('');
console.log(listHtml);
// Output: <li key="0">apple</li><li key="1">banana</li><li key="2">cherry</li>

// Render object
const user = { name: 'John', age: 30, city: 'New York' };
const userFields = ssrRenderList(user, (value, key) => {
  return `<div>${key}: ${ssrInterpolate(value)}</div>`;
}).join('');

/**
 * Renders slot content with fallback support
 * @param slots - Slots object (regular or SSR slots)
 * @param slotName - Slot name
 * @param slotProps - Props to pass to slot
 * @param fallbackRenderFn - Fallback content function
 * @param push - Push function for SSR buffer
 * @param parentComponent - Parent component context
 * @param slotScopeId - Slot scope ID
 */
function ssrRenderSlot(
  slots: Slots | SSRSlots,
  slotName: string,
  slotProps: Props,
  fallbackRenderFn: (() => void) | null,
  push: PushFn,
  parentComponent: ComponentInternalInstance,
  slotScopeId?: string
): void;

/**
 * Internal slot rendering helper without fragment wrapping
 * @param slots - Slots object (regular or SSR slots)
 * @param slotName - Slot name
 * @param slotProps - Props to pass to slot
 * @param fallbackRenderFn - Fallback content function
 * @param push - Push function for SSR buffer
 * @param parentComponent - Parent component context
 * @param slotScopeId - Slot scope ID
 * @param transition - Whether slot is in transition
 */
function ssrRenderSlotInner(
  slots: Slots | SSRSlots,
  slotName: string,
  slotProps: Props,
  fallbackRenderFn: (() => void) | null,
  push: PushFn,
  parentComponent: ComponentInternalInstance,
  slotScopeId?: string,
  transition?: boolean
): void;

/**
 * Renders teleport content to appropriate targets
 * @param parentPush - Parent push function
 * @param content - Teleport content renderer
 * @param target - Teleport target selector
 * @param disabled - Whether teleport is disabled
 * @param parentComponent - Parent component context
 */
function ssrRenderTeleport(
  parentPush: PushFn,
  content: () => void,
  target: string | null,
  disabled: boolean,
  parentComponent: ComponentInternalInstance
): void;

/**
 * Renders Suspense component with async content handling
 * @param push - Push function for SSR buffer
 * @param suspenseInstance - Suspense component instance
 */
function ssrRenderSuspense(
  push: PushFn,
  suspenseInstance: ComponentInternalInstance
): void;

/**
 * Loose equality comparison for v-model
 * @param a - First value
 * @param b - Second value
 * @returns Whether values are loosely equal
 */
function ssrLooseEqual(a: unknown, b: unknown): boolean;

/**
 * Checks if array loosely contains a value
 * @param arr - Array to search
 * @param value - Value to find
 * @returns Whether array contains the value
 */
function ssrLooseContain(arr: unknown[], value: unknown): boolean;

/**
 * Renders dynamic v-model attributes based on input type
 * @param type - Input type (radio, checkbox, etc.)
 * @param model - Model value
 * @param value - Input value
 * @returns Appropriate attribute string
 */
function ssrRenderDynamicModel(
  type: unknown,
  model: unknown,
  value: unknown
): string;

/**
 * Gets dynamic model properties for v-bind + v-model
 * @param existingProps - Existing props object
 * @param model - Model value
 * @returns Properties to merge with existing props
 */
function ssrGetDynamicModelProps(
  existingProps: any,
  model: unknown
): { checked: true } | { value: any } | null;

import { 
  ssrRenderDynamicModel, 
  ssrGetDynamicModelProps 
} from "@vue/server-renderer";

// Radio button v-model
const radioAttr = ssrRenderDynamicModel('radio', 'selected', 'option1');
console.log(radioAttr); // ' checked' if model === 'option1'

// Checkbox v-model with array
const checkboxAttr = ssrRenderDynamicModel('checkbox', ['a', 'b'], 'b');
console.log(checkboxAttr); // ' checked'

// Dynamic props
const props = ssrGetDynamicModelProps({ type: 'text' }, 'hello');
console.log(props); // { value: 'hello' }

/**
 * Extracts props from directive bindings
 * @param instance - Component instance
 * @param dir - Directive binding
 * @param value - Directive value
 * @param arg - Directive argument
 * @param modifiers - Directive modifiers
 * @returns Props object from directive
 */
function ssrGetDirectiveProps(
  instance: ComponentInternalInstance,
  dir: DirectiveBinding,
  value?: any,
  arg?: string,
  modifiers?: Record<string, boolean>
): Record<string, any> | null;

/**
 * Determines if a boolean attribute should be included
 * @param value - Attribute value
 * @returns Whether to include the attribute
 */
function ssrIncludeBooleanAttr(value: unknown): boolean;

import { 
  ssrRenderVNode, 
  ssrRenderAttrs, 
  ssrInterpolate 
} from "@vue/server-renderer";
import { h } from "vue";

// Custom rendering function
async function customRender(vnode: VNode): Promise<string> {
  const buffer = await ssrRenderVNode(vnode);
  
  // Convert buffer to string (simplified)
  function bufferToString(buf: SSRBuffer): string {
    return buf.map(item => 
      typeof item === 'string' ? item : bufferToString(item)
    ).join('');
  }
  
  return bufferToString(buffer);
}

// Usage
const vnode = h('div', { class: 'custom' }, [
  h('h1', 'Custom Renderer'),
  h('p', 'Rendered with internal helpers')
]);

const html = await customRender(vnode);

import { 
  ssrRenderAttrs, 
  ssrInterpolate, 
  ssrRenderList 
} from "@vue/server-renderer";

// Compiled template function (generated by Vue compiler)
function render(_ctx: any, _push: PushFn) {
  _push('<div');
  _push(ssrRenderAttrs({ 
    class: _ctx.containerClass,
    id: _ctx.elementId 
  }));
  _push('>');
  
  _push('<h1>');
  _push(ssrInterpolate(_ctx.title));
  _push('</h1>');
  
  _push('<ul>');
  ssrRenderList(_ctx.items, (item, index) => {
    _push('<li key="');
    _push(ssrInterpolate(index));
    _push('">');
    _push(ssrInterpolate(item.name));
    _push('</li>');
  });
  _push('</ul>');
  
  _push('</div>');
}

import { ssrRenderAttrs, ssrInterpolate } from "@vue/server-renderer";

// Cache frequently used attribute combinations
const attrCache = new Map();

function cachedRenderAttrs(props: Record<string, unknown>): string {
  const key = JSON.stringify(props);
  if (!attrCache.has(key)) {
    attrCache.set(key, ssrRenderAttrs(props));
  }
  return attrCache.get(key);
}

// Batch interpolation for arrays
function batchInterpolate(values: unknown[]): string[] {
  return values.map(ssrInterpolate);
}

import { ssrInterpolate, ssrRenderAttrs } from "@vue/server-renderer";

// All user content is automatically escaped
const userInput = '<script>alert("xss")</script>';
const safeOutput = ssrInterpolate(userInput);
// Output: "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

// Attribute values are also escaped
const attrs = ssrRenderAttrs({
  title: 'Hello "world"',
  'data-content': '<div>content</div>'
});
// Output: ' title="Hello &quot;world&quot;" data-content="&lt;div&gt;content&lt;/div&gt;"'