0
# Template Compilation
1

2
Core compilation functionality that transforms Vue templates or parsed AST into SSR-optimized JavaScript code with full support for all Vue template features.
3

4
## Capabilities
5

6
### Compile Function
7

8
Main compilation function that transforms Vue templates into SSR-optimized JavaScript code. Handles all Vue template features including components, directives, reactive data binding, and control flow structures.
9

10
```typescript { .api }
11
/**
12
 * Compiles Vue templates or AST into SSR-optimized JavaScript code
13
 * @param source - String template or parsed RootNode AST to compile
14
 * @param options - Compilation options for customizing behavior
15
 * @returns CodegenResult containing generated JavaScript code and metadata
16
 */
17
function compile(
18
  source: string | RootNode,
19
  options?: CompilerOptions
20
): CodegenResult;
21
```
22

23
**Compilation Process:**
24
1. Parses string templates into AST (if source is string)
25
2. Applies SSR-specific transforms to the AST
26
3. Generates optimized JavaScript code for server-side rendering
27
4. Returns complete codegen result with generated code
28

29
**Usage Examples:**
30

31
```typescript
32
import { compile } from "@vue/compiler-ssr";
33

34
// Basic template compilation
35
const result = compile(`
36
  <div class="container">
37
    <h1>{{ title }}</h1>
38
    <p>{{ message }}</p>
39
  </div>
40
`);
41

42
// Compilation with options
43
const result = compile(`
44
  <div>
45
    <component :is="dynamicComponent" :props="componentProps" />
46
    <slot name="content" />
47
  </div>
48
`, {
49
  mode: 'function',
50
  prefixIdentifiers: true,
51
  scopeId: 'data-v-12345678'
52
});
53

54
// Compiling pre-parsed AST
55
import { baseParse } from '@vue/compiler-dom';
56
const ast = baseParse('<div>{{ message }}</div>');
57
const result = compile(ast, { mode: 'module' });
58
```
59

60
### Compiler Options
61

62
Configuration options that control the compilation behavior and output format.
63

64
```typescript { .api }
65
interface CompilerOptions {
66
  /** Output mode: 'module' for ES modules, 'function' for function expressions */
67
  mode?: 'module' | 'function';
68
  /** Whether to prefix identifiers to avoid name collisions */
69
  prefixIdentifiers?: boolean;
70
  /** Scoped CSS identifier for component isolation */
71
  scopeId?: string;
72
  /** Enable SSR mode (automatically set to true by compiler-ssr) */
73
  ssr?: boolean;
74
  /** Internal SSR flag (automatically set to true by compiler-ssr) */
75
  inSSR?: boolean;
76
  /** Whether to cache event handlers (disabled for SSR) */
77
  cacheHandlers?: boolean;
78
  /** Whether to hoist static elements (disabled for SSR) */
79
  hoistStatic?: boolean;
80
  /** Custom node transform functions */
81
  nodeTransforms?: NodeTransform[];
82
  /** Custom directive transform functions */
83
  directiveTransforms?: Record<string, DirectiveTransform>;
84
  /** CSS variables expression for SFC <style> integration */
85
  ssrCssVars?: string;
86
}
87
```
88

89
### Codegen Result
90

91
Result object returned by the compile function containing generated code and metadata.
92

93
```typescript { .api }
94
interface CodegenResult {
95
  /** Generated JavaScript code for SSR rendering */
96
  code: string;
97
  /** Optional preamble code (imports, declarations) */
98
  preamble?: string;
99
  /** Transformed AST used for code generation */
100
  ast: RootNode;
101
  /** Source map for debugging (when enabled) */
102
  map?: SourceMap;
103
}
104
```
105

106
## Advanced Compilation Options
107

108
### Function Mode vs Module Mode
109

110
**Function Mode** (`mode: 'function'`):
111
- Generates a function expression
112
- Suitable for runtime compilation
113
- No imports/exports in output
114

115
```typescript
116
const result = compile(template, { mode: 'function' });
117
// Output: function render(_ctx, _push, _parent, _attrs) { ... }
118
```
119

120
**Module Mode** (`mode: 'module'`):
121
- Generates ES module with exports
122
- Suitable for build-time compilation
123
- Includes import statements
124

125
```typescript
126
const result = compile(template, { mode: 'module' });
127
// Output: import { ssrRenderComponent } from 'vue/server-renderer'
128
//         export function render(_ctx, _push, _parent, _attrs) { ... }
129
```
130

131
### Scoped Styling Support
132

133
When `scopeId` is provided, the compiler automatically adds scoped attributes to elements:
134

135
```typescript
136
const result = compile(`<div class="container">Content</div>`, {
137
  scopeId: 'data-v-12345678'
138
});
139
// Generates code that adds data-v-12345678 to the div element
140
```
141

142
### CSS Variables Integration
143

144
The `ssrCssVars` option enables CSS variable injection for SFC <style> blocks:
145

146
```typescript
147
const result = compile(template, {
148
  ssrCssVars: 'color: red; background: blue'
149
});
150
// Generates code that injects CSS variables during SSR
151
```
152

153
## Processing Functions
154

155
Core processing functions that handle specific template nodes during SSR transformation.
156

157
### Children Processing
158

159
Functions for processing child nodes during SSR transformation with optimized string generation.
160

161
```typescript { .api }
162
/**
163
 * Process child nodes during SSR transformation
164
 * @param parent - Container node with children to process
165
 * @param context - SSR transform context
166
 * @param asFragment - Whether to wrap in fragment comments
167
 * @param disableNestedFragments - Whether to disable nested fragment optimization
168
 * @param disableComment - Whether to disable comment generation
169
 */
170
function processChildren(
171
  parent: Container,
172
  context: SSRTransformContext,
173
  asFragment?: boolean,
174
  disableNestedFragments?: boolean,
175
  disableComment?: boolean
176
): void;
177

178
/**
179
 * Process child nodes as JavaScript statements
180
 * @param parent - Container node with children to process
181
 * @param parentContext - Parent SSR transform context
182
 * @param asFragment - Whether to wrap in fragment comments  
183
 * @param withSlotScopeId - Whether to include slot scope IDs
184
 * @returns Block statement containing generated code
185
 */
186
function processChildrenAsStatement(
187
  parent: Container,
188
  parentContext: SSRTransformContext,
189
  asFragment?: boolean,
190
  withSlotScopeId?: boolean
191
): BlockStatement;
192
```
193

194
**Usage Example:**
195

196
```typescript
197
import { processChildren, createSSRTransformContext } from "@vue/compiler-ssr";
198

199
// Process template children during transformation
200
const context = createSSRTransformContext(ast, options);
201
processChildren(templateNode, context, false, false, false);
202
```
203

204
### Element Processing
205

206
Functions for processing element and component nodes during SSR transformation.
207

208
```typescript { .api }
209
/**
210
 * Process element nodes during SSR transformation
211
 * @param node - Element node to process
212
 * @param context - SSR transform context
213
 * @param parent - Parent node for context
214
 * @param slotScopeId - Optional slot scope identifier
215
 */
216
function ssrProcessElement(
217
  node: ElementNode,
218
  context: SSRTransformContext,
219
  parent: ParentNode,
220
  slotScopeId?: string
221
): void;
222

223
/**
224
 * Process component nodes during SSR transformation
225
 * @param node - Component node to process
226
 * @param context - SSR transform context
227
 * @param parent - Parent node for context
228
 * @param slotScopeId - Optional slot scope identifier
229
 */
230
function ssrProcessComponent(
231
  node: ComponentNode,
232
  context: SSRTransformContext,
233
  parent: ParentNode,
234
  slotScopeId?: string
235
): void;
236

237
/**
238
 * Build SSR-optimized props object from element attributes and directives
239
 * @param props - Array of attributes and directives
240
 * @param context - SSR transform context
241
 * @returns Call expression for props rendering or undefined if no props
242
 */
243
function buildSSRProps(
244
  props: (AttributeNode | DirectiveNode)[],
245
  context: SSRTransformContext
246
): CallExpression | undefined;
247
```