0
# Transform System
1

2
Comprehensive transformation system that handles specific Vue template features including elements, components, directives, and control flow structures for SSR rendering.
3

4
## Capabilities
5

6
### SSR Codegen Transform
7

8
Main transform function that converts the template AST into SSR-specific JavaScript AST by replacing the original codegenNode with SSR-optimized code generation.
9

10
```typescript { .api }
11
/**
12
 * Main SSR codegen transform that converts template AST to SSR-specific JavaScript AST
13
 * @param ast - Root AST node to transform
14
 * @param options - Compiler options for transformation
15
 */
16
function ssrCodegenTransform(
17
  ast: RootNode,
18
  options: CompilerOptions
19
): void;
20
```
21

22
### Transform Context
23

24
Context object that maintains state and provides utilities during the SSR transformation process.
25

26
```typescript { .api }
27
interface SSRTransformContext {
28
  /** Root AST node being transformed */
29
  root: RootNode;
30
  /** Compiler options for the transformation */
31
  options: CompilerOptions;
32
  /** Generated JavaScript statements and expressions */
33
  body: (JSChildNode | IfStatement)[];
34
  /** Set of runtime helpers used in the transformation */
35
  helpers: Set<symbol>;
36
  /** Whether to include slot scope IDs */
37
  withSlotScopeId: boolean;
38
  /** Error handler for transformation errors */
39
  onError: (error: CompilerError) => void;
40
  /** Register and return a runtime helper symbol */
41
  helper<T extends symbol>(name: T): T;
42
  /** Add a string part to the current template literal */
43
  pushStringPart(part: TemplateLiteral['elements'][0]): void;
44
  /** Add a JavaScript statement to the output */
45
  pushStatement(statement: IfStatement | CallExpression): void;
46
}
47
```
48

49
### Children Processing
50

51
Functions for processing child nodes during SSR transformation with optimized string generation.
52

53
```typescript { .api }
54
/**
55
 * Process child nodes during SSR transformation
56
 * @param parent - Container node with children to process
57
 * @param context - SSR transform context
58
 * @param asFragment - Whether to wrap in fragment comments
59
 * @param disableNestedFragments - Whether to disable nested fragment optimization
60
 * @param disableComment - Whether to disable comment generation
61
 */
62
function processChildren(
63
  parent: Container,
64
  context: SSRTransformContext,
65
  asFragment?: boolean,
66
  disableNestedFragments?: boolean,
67
  disableComment?: boolean
68
): void;
69

70
/**
71
 * Process child nodes as JavaScript statements
72
 * @param parent - Container node with children to process
73
 * @param parentContext - Parent SSR transform context
74
 * @param asFragment - Whether to wrap in fragment comments
75
 * @param withSlotScopeId - Whether to include slot scope IDs
76
 * @returns Block statement containing generated code
77
 */
78
function processChildrenAsStatement(
79
  parent: Container,
80
  parentContext: SSRTransformContext,
81
  asFragment?: boolean,
82
  withSlotScopeId?: boolean
83
): BlockStatement;
84
```
85

86
## Node Transforms
87

88
### Element Transform
89

90
Transforms element nodes (HTML tags) for SSR rendering, handling attributes, props, and child content.
91

92
```typescript { .api }
93
/**
94
 * Transform element nodes for SSR rendering
95
 * Handles HTML elements, attributes, and nested content
96
 */
97
const ssrTransformElement: NodeTransform;
98

99
/**
100
 * Process element nodes during SSR transformation
101
 * @param node - Element node to process
102
 * @param context - SSR transform context
103
 * @param parent - Parent node for context
104
 * @param slotScopeId - Optional slot scope identifier
105
 */
106
function ssrProcessElement(
107
  node: ElementNode,
108
  context: SSRTransformContext,
109
  parent: ParentNode,
110
  slotScopeId?: string
111
): void;
112

113
/**
114
 * Build SSR-optimized props object from element attributes and directives
115
 * @param props - Array of attributes and directives
116
 * @param context - SSR transform context
117
 * @returns Call expression for props rendering or undefined if no props
118
 */
119
function buildSSRProps(
120
  props: (AttributeNode | DirectiveNode)[],
121
  context: SSRTransformContext
122
): CallExpression | undefined;
123
```
124

125
### Component Transform
126

127
Transforms component nodes for SSR rendering, handling component props, slots, and lifecycle.
128

129
```typescript { .api }
130
/**
131
 * Transform component nodes for SSR rendering
132
 * Handles Vue components, props, slots, and component-specific features
133
 */
134
const ssrTransformComponent: NodeTransform;
135

136
/**
137
 * Process component nodes during SSR transformation
138
 * @param node - Component node to process
139
 * @param context - SSR transform context
140
 * @param parent - Parent node for context
141
 * @param slotScopeId - Optional slot scope identifier
142
 */
143
function ssrProcessComponent(
144
  node: ComponentNode,
145
  context: SSRTransformContext,
146
  parent: ParentNode,
147
  slotScopeId?: string
148
): void;
149
```
150

151
### Conditional Rendering Transform
152

153
Transforms v-if/v-else-if/v-else directives for SSR conditional rendering.
154

155
```typescript { .api }
156
/**
157
 * Transform v-if conditional nodes for SSR rendering
158
 * Handles conditional logic and branch processing
159
 */
160
const ssrTransformIf: NodeTransform;
161

162
/**
163
 * Process v-if nodes during SSR transformation
164
 * @param node - If node to process
165
 * @param context - SSR transform context
166
 * @param disableNestedFragments - Whether to disable nested fragment optimization
167
 */
168
function ssrProcessIf(
169
  node: IfNode,
170
  context: SSRTransformContext,
171
  disableNestedFragments?: boolean
172
): void;
173
```
174

175
### List Rendering Transform
176

177
Transforms v-for directives for SSR list rendering with proper iteration handling.
178

179
```typescript { .api }
180
/**
181
 * Transform v-for loop nodes for SSR rendering
182
 * Handles list iteration and scoped variables
183
 */
184
const ssrTransformFor: NodeTransform;
185

186
/**
187
 * Process v-for nodes during SSR transformation
188
 * @param node - For node to process
189
 * @param context - SSR transform context
190
 * @param disableNestedFragments - Whether to disable nested fragment optimization
191
 */
192
function ssrProcessFor(
193
  node: ForNode,
194
  context: SSRTransformContext,
195
  disableNestedFragments?: boolean
196
): void;
197
```
198

199
### Slot Transform
200

201
Transforms slot outlets and slot content for SSR rendering.
202

203
```typescript { .api }
204
/**
205
 * Transform slot outlet nodes for SSR rendering
206
 * Handles slot rendering and fallback content
207
 */
208
const ssrTransformSlotOutlet: NodeTransform;
209

210
/**
211
 * Process slot outlet nodes during SSR transformation
212
 * @param node - Slot outlet node to process
213
 * @param context - SSR transform context
214
 * @param parent - Parent node for context
215
 * @param slotScopeId - Optional slot scope identifier
216
 */
217
function ssrProcessSlotOutlet(
218
  node: SlotOutletNode,
219
  context: SSRTransformContext,
220
  parent: ParentNode,
221
  slotScopeId?: string
222
): void;
223
```
224

225
### Advanced Feature Transforms
226

227
Transforms for advanced Vue features like teleport, suspense, and transitions.
228

229
```typescript { .api }
230
/**
231
 * Process teleport nodes during SSR transformation
232
 * @param node - Teleport node to process
233
 * @param context - SSR transform context
234
 */
235
function ssrProcessTeleport(
236
  node: TeleportNode,
237
  context: SSRTransformContext
238
): void;
239

240
/**
241
 * Process suspense nodes during SSR transformation
242
 * @param node - Suspense node to process
243
 * @param context - SSR transform context
244
 */
245
function ssrProcessSuspense(
246
  node: SuspenseNode,
247
  context: SSRTransformContext
248
): void;
249

250
/**
251
 * Transform transition nodes for SSR rendering
252
 * @param node - Component node representing transition
253
 * @param context - Transform context
254
 */
255
function ssrTransformTransition(
256
  node: ComponentNode,
257
  context: TransformContext
258
): void;
259

260
/**
261
 * Transform transition-group nodes for SSR rendering
262
 * @param node - Component node representing transition-group
263
 * @param context - Transform context
264
 */
265
function ssrTransformTransitionGroup(
266
  node: ComponentNode,
267
  context: TransformContext
268
): void;
269

270
/**
271
 * Transform suspense nodes for SSR rendering
272
 * @param node - Component node representing suspense
273
 * @param context - Transform context
274
 */
275
function ssrTransformSuspense(
276
  node: ComponentNode,
277
  context: TransformContext
278
): void;
279
```
280

281
## Directive Transforms
282

283
### Model Directive Transform
284

285
Transforms v-model directive for SSR form input handling.
286

287
```typescript { .api }
288
/**
289
 * Transform v-model directive for SSR rendering
290
 * Handles form input binding and value synchronization
291
 */
292
const ssrTransformModel: DirectiveTransform;
293
```
294

295
### Show Directive Transform
296

297
Transforms v-show directive for SSR conditional display.
298

299
```typescript { .api }
300
/**
301
 * Transform v-show directive for SSR rendering
302
 * Handles conditional display with CSS display property
303
 */
304
const ssrTransformShow: DirectiveTransform;
305
```
306

307
### Attribute Injection Transforms
308

309
Transforms for injecting fallthrough attributes and CSS variables.
310

311
```typescript { .api }
312
/**
313
 * Inject fallthrough attributes for SSR rendering
314
 * Handles attribute inheritance for components
315
 */
316
const ssrInjectFallthroughAttrs: NodeTransform;
317

318
/**
319
 * Inject CSS variable handling for SSR rendering
320
 * Handles SFC <style> CSS variable integration
321
 */
322
const ssrInjectCssVars: NodeTransform;
323
```
324

325
## Data Management
326

327
### Built-in Component Transforms
328

329
Transforms for advanced Vue features like teleport, suspense, and transitions.
330

331
```typescript { .api }
332
/**
333
 * Process teleport nodes during SSR transformation
334
 * @param node - Teleport node to process
335
 * @param context - SSR transform context
336
 */
337
function ssrProcessTeleport(
338
  node: TeleportNode,
339
  context: SSRTransformContext
340
): void;
341

342
/**
343
 * Process suspense nodes during SSR transformation
344
 * @param node - Suspense node to process
345
 * @param context - SSR transform context
346
 */
347
function ssrProcessSuspense(
348
  node: SuspenseNode,
349
  context: SSRTransformContext
350
): void;
351

352
/**
353
 * Transform transition nodes for SSR rendering
354
 * @param node - Component node representing transition
355
 * @param context - Transform context
356
 */
357
function ssrTransformTransition(
358
  node: ComponentNode,
359
  context: TransformContext
360
): void;
361

362
/**
363
 * Transform transition-group nodes for SSR rendering
364
 * @param node - Component node representing transition-group
365
 * @param context - Transform context
366
 */
367
function ssrTransformTransitionGroup(
368
  node: ComponentNode,
369
  context: TransformContext
370
): void;
371

372
/**
373
 * Transform suspense nodes for SSR rendering
374
 * @param node - Component node representing suspense
375
 * @param context - Transform context
376
 */
377
function ssrTransformSuspense(
378
  node: ComponentNode,
379
  context: TransformContext
380
): void;
381
```
382

383
### Raw Options Map
384

385
WeakMap that stores raw compiler options for AST nodes, used during sub-transformations on slot vnode branches.
386

387
```typescript { .api }
388
/**
389
 * Stores raw compiler options for AST nodes
390
 * Used during sub-transformations on slot vnode branches
391
 */
392
const rawOptionsMap: WeakMap<RootNode, CompilerOptions>;
393
```