0
# Runtime Helpers
1

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

4
## Capabilities
5

6
### Core Helper Symbols
7

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

10
```typescript { .api }
11
/** Text interpolation helper for reactive data binding */
12
const SSR_INTERPOLATE: unique symbol;
13

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

65
/** Directive props extraction helper for custom directives */
66
const SSR_GET_DIRECTIVE_PROPS: unique symbol;
67
```
68

69
### Helper Name Mapping
70

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

73
```typescript { .api }
74
/**
75
 * Mapping of helper symbols to their string names for runtime function lookup
76
 * Used by the code generator to reference the correct server-side helper functions
77
 */
78
const ssrHelpers: Record<symbol, string>;
79
```
80

81
The `ssrHelpers` object contains the following mappings:
82

83
- `SSR_INTERPOLATE` → `"ssrInterpolate"`
84
- `SSR_RENDER_VNODE` → `"ssrRenderVNode"`
85
- `SSR_RENDER_COMPONENT` → `"ssrRenderComponent"`
86
- `SSR_RENDER_SLOT` → `"ssrRenderSlot"`
87
- `SSR_RENDER_SLOT_INNER` → `"ssrRenderSlotInner"`
88
- `SSR_RENDER_CLASS` → `"ssrRenderClass"`
89
- `SSR_RENDER_STYLE` → `"ssrRenderStyle"`
90
- `SSR_RENDER_ATTRS` → `"ssrRenderAttrs"`
91
- `SSR_RENDER_ATTR` → `"ssrRenderAttr"`
92
- `SSR_RENDER_DYNAMIC_ATTR` → `"ssrRenderDynamicAttr"`
93
- `SSR_RENDER_LIST` → `"ssrRenderList"`
94
- `SSR_INCLUDE_BOOLEAN_ATTR` → `"ssrIncludeBooleanAttr"`
95
- `SSR_LOOSE_EQUAL` → `"ssrLooseEqual"`
96
- `SSR_LOOSE_CONTAIN` → `"ssrLooseContain"`
97
- `SSR_RENDER_DYNAMIC_MODEL` → `"ssrRenderDynamicModel"`
98
- `SSR_GET_DYNAMIC_MODEL_PROPS` → `"ssrGetDynamicModelProps"`
99
- `SSR_RENDER_TELEPORT` → `"ssrRenderTeleport"`
100
- `SSR_RENDER_SUSPENSE` → `"ssrRenderSuspense"`
101
- `SSR_GET_DIRECTIVE_PROPS` → `"ssrGetDirectiveProps"`
102

103
## Helper Function Categories
104

105
### Text and Data Helpers
106

107
**SSR_INTERPOLATE**: Handles text interpolation for reactive data binding
108
- Used for `{{ }}` expressions in templates
109
- Ensures proper escaping and formatting for server-side output
110

111
**SSR_LOOSE_EQUAL** / **SSR_LOOSE_CONTAIN**: Comparison utilities
112
- Used for template conditional logic
113
- Handle Vue's loose equality semantics in SSR context
114

115
### Rendering Helpers
116

117
**SSR_RENDER_VNODE**: Renders virtual nodes in SSR context
118
- Used for nested component structures
119
- Handles VNode serialization to HTML strings
120

121
**SSR_RENDER_COMPONENT**: Renders Vue component instances
122
- Primary helper for component rendering
123
- Manages component lifecycle in SSR context
124

125
**SSR_RENDER_LIST**: Handles v-for list rendering
126
- Processes arrays and objects for list iteration
127
- Manages keyed list rendering for SSR
128

129
### Slot Helpers
130

131
**SSR_RENDER_SLOT** / **SSR_RENDER_SLOT_INNER**: Slot content rendering
132
- Handle component slot rendering
133
- Manage fallback content and slot props
134
- Support nested slot structures
135

136
### Attribute Helpers
137

138
**SSR_RENDER_ATTRS**: Renders multiple element attributes
139
- Handles static and dynamic attribute rendering
140
- Manages attribute serialization to HTML
141

142
**SSR_RENDER_ATTR**: Renders individual attributes
143
- Used for single attribute rendering
144
- Handles attribute value escaping
145

146
**SSR_RENDER_DYNAMIC_ATTR**: Renders computed attribute names
147
- Handles `:[dynamicName]="value"` syntax
148
- Manages dynamic attribute resolution
149

150
**SSR_RENDER_CLASS** / **SSR_RENDER_STYLE**: Specialized attribute helpers
151
- Handle class and style attribute rendering
152
- Support object and array syntax for classes/styles
153

154
**SSR_INCLUDE_BOOLEAN_ATTR**: Boolean attribute handling
155
- Manages HTML boolean attributes (checked, disabled, etc.)
156
- Handles conditional inclusion/exclusion
157

158
### Form Helpers
159

160
**SSR_RENDER_DYNAMIC_MODEL**: v-model with dynamic binding
161
- Handles `v-model:[dynamicProperty]` syntax
162
- Manages form element binding in SSR
163

164
**SSR_GET_DYNAMIC_MODEL_PROPS**: Form element prop extraction
165
- Extracts v-model related props for form elements
166
- Handles different input types (text, checkbox, radio, etc.)
167

168
**SSR_GET_DIRECTIVE_PROPS**: Custom directive prop extraction
169
- Handles custom directive prop extraction
170
- Manages directive argument and modifier processing
171

172
### Advanced Feature Helpers
173

174
**SSR_RENDER_TELEPORT**: Teleport component rendering
175
- Handles Vue teleport component in SSR
176
- Manages teleport target handling
177

178
**SSR_RENDER_SUSPENSE**: Suspense component rendering
179
- Handles Vue suspense component in SSR
180
- Manages async component rendering
181

182
## Usage in Generated Code
183

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

186
```javascript
187
// Example generated code using runtime helpers
188
import { ssrRenderComponent, ssrInterpolate, ssrRenderAttrs } from 'vue/server-renderer';
189

190
function render(_ctx, _push, _parent, _attrs) {
191
  _push(`<div${ssrRenderAttrs(_attrs)}>`);
192
  _push(`<h1>${ssrInterpolate(_ctx.title)}</h1>`);
193
  ssrRenderComponent(MyComponent, { prop: _ctx.data }, null, _parent);
194
  _push(`</div>`);
195
}
196
```
197

198
## Note on Helper Implementation
199

200
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.