@sigil-dev/compiler 0.7.6 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/package.json +2 -1
  2. package/src/babel/handlers/ssr/state.ts +10 -10
  3. package/src/babel/index.ts +480 -430
  4. package/src/babel/jsx/anchor-mount.ts +28 -5
  5. package/src/babel/jsx/children.ts +124 -124
  6. package/src/babel/jsx/element.ts +830 -803
  7. package/src/babel/jsx/ssr.ts +319 -319
  8. package/src/babel/jsx/utils.ts +47 -3
  9. package/src/babel/util/bind.ts +139 -126
  10. package/src/babel/util/css.ts +151 -151
  11. package/src/babel/util/dead-code.ts +28 -28
  12. package/src/babel/util/magic.ts +1 -0
  13. package/src/bun-plugin.ts +89 -86
  14. package/test/hydration.test.ts +1 -1
  15. package/test/jsx.test.ts +197 -195
  16. package/test/tree-shaking.test.ts +78 -79
package/src/babel/jsx/element.ts CHANGED
@@ -1,803 +1,830 @@
1
- import { types as t } from "@babel/core";
2
- import {generate} from "@babel/generator"
3
- import { buildBind, buildProxyBind } from "../util/bind";
4
- import { handleGlobalComponent, isGlobalComponent } from "../handlers/dom/globals";
5
- import { buildAnchorMount } from "./anchor-mount";
6
- import { collectChildren } from "./children";
7
- import { processFragment } from "./fragment";
8
- import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
9
- import { buildTextNode } from "./text-node";
10
- import {
11
- ATTR_MAP,
12
- buildHydrationScope,
13
- containsSignal,
14
- getCreateElement,
15
- isPrimitive,
16
- } from "./utils";
17
-
18
- /**
19
- * Build a property-access expression for a JSX attribute name.
20
- * Dashed names (data-*, aria-*) require computed access (e.g. el["data-id"])
21
- * because t.identifier() rejects names with dashes.
22
- */
23
- function attrAccess(varName: string, attrName: string): t.MemberExpression {
24
- if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
25
- return t.memberExpression(t.identifier(varName), t.identifier(attrName));
26
- }
27
- return t.memberExpression(
28
- t.identifier(varName),
29
- t.stringLiteral(attrName),
30
- true,
31
- );
32
- }
33
-
34
- /**
35
- * Build an object property key (identifier for valid names, string literal for dashed).
36
- */
37
- function attrKey(attrName: string): t.Identifier | t.StringLiteral {
38
- if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
39
- return t.identifier(attrName);
40
- }
41
- return t.stringLiteral(attrName);
42
- }
43
-
44
- /**
45
- * Add classList.add(hash) statement for scoped CSS.
46
- */
47
- function addScopedClass(
48
- varName: string,
49
- hash: string,
50
- statements: t.Statement[],
51
- ): void {
52
- statements.push(
53
- t.expressionStatement(
54
- t.callExpression(
55
- t.memberExpression(
56
- t.memberExpression(t.identifier(varName), t.identifier("classList")),
57
- t.identifier("add"),
58
- ),
59
- [t.stringLiteral(hash)],
60
- ),
61
- ),
62
- );
63
- }
64
-
65
- export function processElement(
66
- node: t.JSXElement,
67
- statements: t.Statement[],
68
- genId: () => string,
69
- signals: Set<string>,
70
- hash?: string,
71
- hydrate?: boolean,
72
- nodesVar?: string,
73
- parentVar?: string,
74
- ): string {
75
- const varName = genId();
76
- const tag = (node.openingElement.name as t.JSXIdentifier).name;
77
- const isComponent = /^[A-Z]/.test(tag);
78
-
79
- if (isComponent) {
80
- // Global components: Window, Document, Body
81
- if (isGlobalComponent(tag)) {
82
- return handleGlobalComponent(tag, node, statements, genId);
83
- }
84
-
85
- // Component: call the function with a props object
86
- const propsObj = t.objectExpression([]);
87
-
88
- // Add attributes to props (including spread)
89
- for (const attr of node.openingElement.attributes) {
90
- if (t.isJSXSpreadAttribute(attr)) {
91
- // {…obj} — spread into props
92
- propsObj.properties.push(t.spreadElement(attr.argument));
93
- continue;
94
- }
95
- if (!t.isJSXAttribute(attr)) continue;
96
- const attrName = (attr.name as t.JSXIdentifier).name;
97
-
98
- if (t.isStringLiteral(attr.value)) {
99
- propsObj.properties.push(
100
- t.objectProperty(attrKey(attrName), attr.value),
101
- );
102
- } else if (t.isJSXExpressionContainer(attr.value)) {
103
- const expr = attr.value.expression as t.Expression;
104
- propsObj.properties.push(
105
- t.objectProperty(attrKey(attrName), expr),
106
- );
107
- }
108
- }
109
-
110
- // Add children to props
111
- const childrenExpr = collectChildren(
112
- node,
113
- statements,
114
- genId,
115
- signals,
116
- hash,
117
- hydrate,
118
- nodesVar,
119
- );
120
- if (childrenExpr) {
121
- propsObj.properties.push(
122
- t.objectProperty(t.identifier("children"), childrenExpr),
123
- );
124
- }
125
-
126
- const componentCall = t.callExpression(t.identifier(tag), [propsObj]);
127
-
128
- if (hydrate && nodesVar) {
129
- // Push the parent's child pool before calling the component so that
130
- // getHydrationNodes() inside the component returns the right scope.
131
- // In SSR hydration the component claims its root node from that pool
132
- // (it's already in the DOM). In empty-pool / SPA mode the component
133
- // creates a fresh node, so we explicitly insert it when the pool is empty.
134
- statements.push(
135
- t.expressionStatement(
136
- t.callExpression(t.identifier("pushHydrationNodes"), [
137
- t.identifier(nodesVar),
138
- ]),
139
- ),
140
- );
141
- statements.push(
142
- t.variableDeclaration("const", [
143
- t.variableDeclarator(t.identifier(varName), componentCall),
144
- ]),
145
- );
146
- statements.push(
147
- t.expressionStatement(
148
- t.callExpression(t.identifier("popHydrationNodes"), []),
149
- ),
150
- );
151
- if (parentVar) {
152
- // Insert only when the pool was empty (fresh DOM); if the pool had
153
- // nodes the component already claimed its SSR element (already in DOM).
154
- statements.push(
155
- t.ifStatement(
156
- t.binaryExpression(
157
- "===",
158
- t.memberExpression(
159
- t.identifier(nodesVar),
160
- t.identifier("length"),
161
- ),
162
- t.numericLiteral(0),
163
- ),
164
- t.expressionStatement(
165
- t.callExpression(t.identifier("insert"), [
166
- t.identifier(parentVar),
167
- t.identifier(varName),
168
- ]),
169
- ),
170
- ),
171
- );
172
- }
173
- } else {
174
- statements.push(
175
- t.variableDeclaration("const", [
176
- t.variableDeclarator(t.identifier(varName), componentCall),
177
- ]),
178
- );
179
- }
180
-
181
- return varName;
182
- }
183
-
184
- // Native element: claim (hydrate) or create (dom)
185
- const currentNodesVar = nodesVar ?? "__nodes";
186
- statements.push(
187
- t.variableDeclaration("const", [
188
- t.variableDeclarator(
189
- t.identifier(varName),
190
- getCreateElement(
191
- tag,
192
- !!hydrate,
193
- currentNodesVar,
194
- hydrate ? parentVar : undefined,
195
- ),
196
- ),
197
- ]),
198
- );
199
-
200
- // In hydrate mode, scope to this element's children for descendants
201
- let childNodesVar: string | undefined;
202
- if (hydrate) {
203
- childNodesVar = genId();
204
- buildHydrationScope(varName, statements, childNodesVar);
205
- }
206
-
207
- // attributes
208
- const seenAttrs = new Set<string>();
209
- for (const attr of node.openingElement.attributes) {
210
- if (t.isJSXSpreadAttribute(attr)) {
211
- // {…obj} — spread onto native element
212
- statements.push(
213
- t.expressionStatement(
214
- t.callExpression(t.identifier("Object.assign"), [
215
- t.identifier(varName),
216
- attr.argument as t.Expression,
217
- ]),
218
- ),
219
- );
220
- continue;
221
- }
222
- if (!t.isJSXAttribute(attr)) continue;
223
- let attrName: string;
224
- let attrNamespace: string | undefined;
225
- if (t.isJSXNamespacedName(attr.name)) {
226
- attrNamespace = attr.name.namespace.name;
227
- attrName = attr.name.name.name;
228
- } else {
229
- attrName = (attr.name as t.JSXIdentifier).name;
230
- }
231
- const realAttr = ATTR_MAP[attrName] ?? attrName;
232
-
233
- if (seenAttrs.has(realAttr)) {
234
- throw new TypeError(
235
- `Duplicate attribute "${realAttr}" (via "${attrName}"). Use class or className, not both.`,
236
- );
237
- }
238
- seenAttrs.add(realAttr);
239
- if (attrName === "use") {
240
- // use={directive} or use={[directive, params]}
241
- const expr = (attr.value as t.JSXExpressionContainer)
242
- .expression as t.Expression;
243
- statements.push(
244
- t.expressionStatement(
245
- t.callExpression(t.identifier("applyDirective"), [
246
- t.identifier(varName),
247
- expr,
248
- ]),
249
- ),
250
- );
251
- } else if (/^on[A-Z]/.test(attrName)) {
252
- // Standard JSX: onClick, onSubmit, onMouseenter, etc.
253
- // Convert camelCase to lowercase: onClick -> click, onMouseenter -> mouseenter
254
- const event = attrName.slice(2).toLowerCase();
255
- const handler = (attr.value as t.JSXExpressionContainer)
256
- .expression as t.Expression;
257
- statements.push(
258
- t.expressionStatement(
259
- t.callExpression(
260
- t.memberExpression(
261
- t.identifier(varName),
262
- t.identifier("addEventListener"),
263
- ),
264
- [t.stringLiteral(event), handler],
265
- ),
266
- ),
267
- );
268
- } else if (attrNamespace === "bind") {
269
- const bindProp = attrName;
270
- const signal = (attr.value as t.JSXExpressionContainer)
271
- .expression as t.Expression;
272
-
273
- if (bindProp === "this") {
274
- statements.push(
275
- t.expressionStatement(
276
- t.callExpression(
277
- t.memberExpression(
278
- (signal as t.CallExpression).callee as t.Expression,
279
- t.identifier("set"),
280
- ),
281
- [t.identifier(varName)],
282
- ),
283
- ),
284
- );
285
- continue;
286
- }
287
-
288
- if (bindProp === "group") {
289
- // Scan element attributes for type and value
290
- let inputType = "";
291
- let inputValue: t.StringLiteral | undefined;
292
- for (const a of node.openingElement.attributes) {
293
- if (t.isJSXAttribute(a) && t.isJSXIdentifier(a.name)) {
294
- if (a.name.name === "type" && t.isStringLiteral(a.value)) {
295
- inputType = a.value.value;
296
- }
297
- if (a.name.name === "value" && t.isStringLiteral(a.value)) {
298
- inputValue = a.value;
299
- }
300
- }
301
- }
302
-
303
- if (inputType === "radio" || inputType === "") {
304
- const isTopLevel = t.isCallExpression(signal) &&
305
- t.isIdentifier((signal as t.CallExpression).callee) &&
306
- signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
307
-
308
- if (isTopLevel) {
309
- const signalId = (signal as t.CallExpression).callee as t.Identifier;
310
- statements.push(
311
- t.expressionStatement(
312
- t.callExpression(
313
- t.memberExpression(t.identifier(varName), t.identifier("addEventListener")),
314
- [
315
- t.stringLiteral("change"),
316
- t.arrowFunctionExpression(
317
- [],
318
- t.callExpression(
319
- t.memberExpression(signalId, t.identifier("set")),
320
- [
321
- t.memberExpression(
322
- t.identifier(varName),
323
- t.identifier("value"),
324
- ),
325
- ],
326
- ),
327
- ),
328
- ],
329
- ),
330
- ),
331
- );
332
- }
333
- } else if (inputType === "checkbox") {
334
- const isTopLevel = t.isCallExpression(signal) &&
335
- t.isIdentifier((signal as t.CallExpression).callee) &&
336
- signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
337
-
338
- if (isTopLevel) {
339
- const callExpr = signal as t.CallExpression;
340
- statements.push(
341
- t.expressionStatement(
342
- t.callExpression(
343
- t.memberExpression(t.identifier(varName), t.identifier("addEventListener")),
344
- [
345
- t.stringLiteral("change"),
346
- t.arrowFunctionExpression(
347
- [],
348
- t.blockStatement([
349
- t.ifStatement(
350
- t.memberExpression(t.identifier(varName), t.identifier("checked")),
351
- // checked: push value into array
352
- t.blockStatement([
353
- t.expressionStatement(
354
- t.callExpression(
355
- t.memberExpression(
356
- t.callExpression(callExpr, []),
357
- t.identifier("push"),
358
- ),
359
- [
360
- t.memberExpression(
361
- t.identifier(varName),
362
- t.identifier("value"),
363
- ),
364
- ],
365
- ),
366
- ),
367
- ]),
368
- // unchecked: splice value out of array
369
- t.blockStatement([
370
- t.expressionStatement(
371
- t.callExpression(
372
- t.memberExpression(
373
- t.callExpression(callExpr, []),
374
- t.identifier("splice"),
375
- ),
376
- [
377
- t.callExpression(
378
- t.memberExpression(
379
- t.callExpression(callExpr, []),
380
- t.identifier("indexOf"),
381
- ),
382
- [
383
- t.memberExpression(
384
- t.identifier(varName),
385
- t.identifier("value"),
386
- ),
387
- ],
388
- ),
389
- t.numericLiteral(1),
390
- ],
391
- ),
392
- ),
393
- ]),
394
- ),
395
- ]),
396
- ),
397
- ],
398
- ),
399
- ),
400
- );
401
- }
402
- } else {
403
- console.warn(
404
- `[sigil] bind:group requires type="radio" or type="checkbox" on the element. ` +
405
- `Got: type="${inputType}".`
406
- );
407
- }
408
- continue;
409
- }
410
-
411
- // Generic bind:innerHTML, bind:textContent, bind:value, bind:checked, etc.
412
- const isTopLevelSignal = t.isCallExpression(signal) &&
413
- t.isIdentifier((signal as t.CallExpression).callee) &&
414
- signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
415
-
416
- const isMemberOfSignal = t.isMemberExpression(signal) &&
417
- t.isCallExpression((signal as t.MemberExpression).object) &&
418
- t.isIdentifier(((signal as t.MemberExpression).object as t.CallExpression).callee) &&
419
- signals.has((((signal as t.MemberExpression).object as t.CallExpression).callee as t.Identifier).name);
420
-
421
- if (isTopLevelSignal) {
422
- buildBind(varName, bindProp, attr, statements);
423
- } else if (isMemberOfSignal) {
424
- buildProxyBind(varName, bindProp, attr, statements, signal);
425
- } else {
426
- console.warn(
427
- `[sigil] bind:${bindProp}={...} requires a $state signal or $state object property. ` +
428
- `Got: ${generate(signal).code}. ` +
429
- `Hint: change to a $state() call.`
430
- );
431
- }
432
- } else if (t.isStringLiteral(attr.value)) {
433
- statements.push(
434
- t.expressionStatement(
435
- t.assignmentExpression(
436
- "=",
437
- attrAccess(varName, realAttr),
438
- attr.value,
439
- ),
440
- ),
441
- );
442
- } else if (t.isJSXExpressionContainer(attr.value)) {
443
- const expr = attr.value.expression as t.Expression;
444
- // style={{ color: "red", fontSize: val }} — per-property assignment
445
- if (attrName === "style" && t.isObjectExpression(expr)) {
446
- for (const prop of expr.properties) {
447
- if (!t.isObjectProperty(prop)) continue;
448
- const key = t.isIdentifier(prop.key)
449
- ? prop.key.name
450
- : t.isStringLiteral(prop.key)
451
- ? prop.key.value
452
- : null;
453
- if (!key) continue;
454
- const val = prop.value as t.Expression;
455
- const styleProp = t.memberExpression(
456
- t.memberExpression(t.identifier(varName), t.identifier("style")),
457
- t.identifier(key),
458
- );
459
- if (containsSignal(val, signals)) {
460
- statements.push(
461
- t.expressionStatement(
462
- t.callExpression(t.identifier("createEffect"), [
463
- t.arrowFunctionExpression(
464
- [],
465
- t.blockStatement([
466
- t.expressionStatement(
467
- t.assignmentExpression("=", styleProp, val),
468
- ),
469
- ]),
470
- ),
471
- ]),
472
- ),
473
- );
474
- } else {
475
- statements.push(
476
- t.expressionStatement(
477
- t.assignmentExpression("=", styleProp, val),
478
- ),
479
- );
480
- }
481
- }
482
- // done with this attribute
483
- } else if (containsSignal(expr, signals)) {
484
- // Dynamic class with scoped CSS: use classList.value to preserve hash
485
- if (attrName === "class" && hash) {
486
- statements.push(
487
- t.expressionStatement(
488
- t.callExpression(t.identifier("createEffect"), [
489
- t.arrowFunctionExpression(
490
- [],
491
- t.blockStatement([
492
- t.expressionStatement(
493
- t.assignmentExpression(
494
- "=",
495
- t.memberExpression(
496
- t.memberExpression(
497
- t.identifier(varName),
498
- t.identifier("classList"),
499
- ),
500
- t.identifier("value"),
501
- ),
502
- expr,
503
- ),
504
- ),
505
- t.expressionStatement(
506
- t.callExpression(
507
- t.memberExpression(
508
- t.memberExpression(
509
- t.identifier(varName),
510
- t.identifier("classList"),
511
- ),
512
- t.identifier("add"),
513
- ),
514
- [t.stringLiteral(hash)],
515
- ),
516
- ),
517
- ]),
518
- ),
519
- ]),
520
- ),
521
- );
522
- } else {
523
- // createEffect(() => varName.realAttr = expr)
524
- statements.push(
525
- t.expressionStatement(
526
- t.callExpression(t.identifier("createEffect"), [
527
- t.arrowFunctionExpression(
528
- [],
529
- t.blockStatement([
530
- t.expressionStatement(
531
- t.assignmentExpression(
532
- "=",
533
- attrAccess(varName, realAttr),
534
- expr,
535
- ),
536
- ),
537
- ]),
538
- ),
539
- ]),
540
- ),
541
- );
542
- }
543
- } else {
544
- // varName.realAttr = expr
545
- statements.push(
546
- t.expressionStatement(
547
- t.assignmentExpression(
548
- "=",
549
- attrAccess(varName, realAttr),
550
- expr,
551
- ),
552
- ),
553
- );
554
- }
555
- }
556
- }
557
-
558
- // Add scoped CSS hash to classList (if hash is present)
559
- if (hash) {
560
- addScopedClass(varName, hash, statements);
561
- }
562
-
563
- // children
564
- for (const child of node.children) {
565
- if (t.isJSXElement(child)) {
566
- const childVar = processElement(
567
- child,
568
- statements,
569
- genId,
570
- signals,
571
- hash,
572
- hydrate,
573
- childNodesVar,
574
- hydrate ? varName : undefined,
575
- );
576
- if (!hydrate) {
577
- statements.push(
578
- t.expressionStatement(
579
- t.callExpression(
580
- t.memberExpression(t.identifier(varName), t.identifier("append")),
581
- [t.identifier(childVar)],
582
- ),
583
- ),
584
- );
585
- }
586
- } else if (t.isJSXFragment(child)) {
587
- const childVar = processFragment(
588
- child,
589
- statements,
590
- genId,
591
- signals,
592
- hash,
593
- hydrate,
594
- childNodesVar,
595
- hydrate ? varName : undefined,
596
- );
597
- if (!hydrate) {
598
- statements.push(
599
- t.expressionStatement(
600
- t.callExpression(
601
- t.memberExpression(t.identifier(varName), t.identifier("append")),
602
- [t.identifier(childVar)],
603
- ),
604
- ),
605
- );
606
- }
607
- } else if (t.isJSXText(child)) {
608
- const text = child.value;
609
- if (!text.trim()) continue;
610
- if (hydrate) {
611
- // SSR hydration: text already in DOM from SSR, do nothing.
612
- // SPA navigation: childNodesVar pool is empty, create text node.
613
- const poolLen = t.memberExpression(
614
- t.identifier(childNodesVar!),
615
- t.identifier("length"),
616
- );
617
- statements.push(
618
- t.ifStatement(
619
- t.binaryExpression("===", poolLen, t.numericLiteral(0)),
620
- t.expressionStatement(
621
- t.callExpression(
622
- t.memberExpression(
623
- t.identifier(varName),
624
- t.identifier("append"),
625
- ),
626
- [
627
- t.callExpression(
628
- t.memberExpression(
629
- t.identifier("document"),
630
- t.identifier("createTextNode"),
631
- ),
632
- [t.stringLiteral(text.replace(/\s*\n\s*/g, " "))],
633
- ),
634
- ],
635
- ),
636
- ),
637
- ),
638
- );
639
- } else {
640
- statements.push(
641
- t.expressionStatement(
642
- t.callExpression(
643
- t.memberExpression(t.identifier(varName), t.identifier("append")),
644
- [
645
- t.callExpression(
646
- t.memberExpression(
647
- t.identifier("document"),
648
- t.identifier("createTextNode"),
649
- ),
650
- [t.stringLiteral(text)],
651
- ),
652
- ],
653
- ),
654
- ),
655
- );
656
- }
657
- } else if (t.isJSXExpressionContainer(child)) {
658
- if (t.isJSXEmptyExpression(child.expression)) continue;
659
- const expr = child.expression as t.Expression;
660
- if (t.isJSXElement(expr)) {
661
- const childVar = processElement(
662
- expr,
663
- statements,
664
- genId,
665
- signals,
666
- hash,
667
- hydrate,
668
- childNodesVar,
669
- hydrate ? varName : undefined,
670
- );
671
- if (!hydrate) {
672
- statements.push(
673
- t.expressionStatement(
674
- t.callExpression(
675
- t.memberExpression(
676
- t.identifier(varName),
677
- t.identifier("append"),
678
- ),
679
- [t.identifier(childVar)],
680
- ),
681
- ),
682
- );
683
- }
684
- } else if (t.isJSXFragment(expr)) {
685
- const childVar = processFragment(
686
- expr,
687
- statements,
688
- genId,
689
- signals,
690
- hash,
691
- hydrate,
692
- childNodesVar,
693
- hydrate ? varName : undefined,
694
- );
695
- if (!hydrate) {
696
- statements.push(
697
- t.expressionStatement(
698
- t.callExpression(
699
- t.memberExpression(
700
- t.identifier(varName),
701
- t.identifier("append"),
702
- ),
703
- [t.identifier(childVar)],
704
- ),
705
- ),
706
- );
707
- }
708
- } else if (containsSignal(expr, signals)) {
709
- if (isPrimitive(expr)) {
710
- // fast path: text node + textContent
711
- buildTextNode(
712
- varName,
713
- expr,
714
- statements,
715
- genId,
716
- hydrate,
717
- childNodesVar,
718
- hydrate ? varName : undefined,
719
- );
720
- } else {
721
- // Check for keyed list pattern
722
- const keyed = findKeyedMapExpr(expr, signals);
723
- if (keyed) {
724
- buildKeyedList(
725
- varName,
726
- keyed,
727
- statements,
728
- genId,
729
- signals,
730
- processElement,
731
- hash,
732
- hydrate,
733
- childNodesVar,
734
- hydrate ? varName : undefined,
735
- );
736
- } else {
737
- buildAnchorMount(
738
- varName,
739
- expr,
740
- statements,
741
- genId,
742
- hydrate,
743
- childNodesVar,
744
- hydrate ? varName : undefined,
745
- );
746
- }
747
- }
748
- } else {
749
- // non-reactive: set once
750
- if (hydrate) {
751
- const claimCommentArgs: t.Expression[] = [
752
- t.identifier(childNodesVar!),
753
- t.stringLiteral("g"),
754
- ];
755
- if (varName) claimCommentArgs.push(t.identifier(varName));
756
- const poolLen = t.memberExpression(
757
- t.identifier(childNodesVar!),
758
- t.identifier("length"),
759
- );
760
- // Pool has elements (initial load): SSR content already in DOM, just consume delimiters
761
- const claimG = t.expressionStatement(
762
- t.callExpression(t.identifier("claimComment"), claimCommentArgs),
763
- );
764
- const claimSlashG = (() => {
765
- const args: t.Expression[] = [
766
- t.identifier(childNodesVar!),
767
- t.stringLiteral("/g"),
768
- ];
769
- if (varName) args.push(t.identifier(varName));
770
- return t.expressionStatement(
771
- t.callExpression(t.identifier("claimComment"), args),
772
- );
773
- })();
774
- // Pool empty (SPA nav): create and insert fresh elements
775
- const insertCall = t.expressionStatement(
776
- t.callExpression(t.identifier("insert"), [
777
- t.identifier(varName),
778
- expr,
779
- ]),
780
- );
781
- statements.push(
782
- t.ifStatement(
783
- t.binaryExpression(">", poolLen, t.numericLiteral(0)),
784
- t.blockStatement([claimG, claimSlashG]),
785
- t.blockStatement([insertCall]),
786
- ),
787
- );
788
- } else {
789
- statements.push(
790
- t.expressionStatement(
791
- t.callExpression(t.identifier("insert"), [
792
- t.identifier(varName),
793
- expr,
794
- ]),
795
- ),
796
- );
797
- }
798
- }
799
- }
800
- }
801
-
802
- return varName;
803
- }
1
+ import { types as t } from "@babel/core";
2
+ import { generate } from "@babel/generator";
3
+ import {
4
+ handleGlobalComponent,
5
+ isGlobalComponent,
6
+ } from "../handlers/dom/globals";
7
+ import { buildBind, buildProxyBind } from "../util/bind";
8
+ import { buildAnchorMount } from "./anchor-mount";
9
+ import { collectChildren } from "./children";
10
+ import { processFragment } from "./fragment";
11
+ import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
12
+ import { buildTextNode } from "./text-node";
13
+ import {
14
+ ATTR_MAP,
15
+ buildHydrationScope,
16
+ containsSignal,
17
+ getCreateElement,
18
+ isPrimitive,
19
+ } from "./utils";
20
+
21
+ /**
22
+ * Build a property-access expression for a JSX attribute name.
23
+ * Dashed names (data-*, aria-*) require computed access (e.g. el["data-id"])
24
+ * because t.identifier() rejects names with dashes.
25
+ */
26
+ function attrAccess(varName: string, attrName: string): t.MemberExpression {
27
+ if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
28
+ return t.memberExpression(t.identifier(varName), t.identifier(attrName));
29
+ }
30
+ return t.memberExpression(
31
+ t.identifier(varName),
32
+ t.stringLiteral(attrName),
33
+ true,
34
+ );
35
+ }
36
+
37
+ /**
38
+ * Build an object property key (identifier for valid names, string literal for dashed).
39
+ */
40
+ function attrKey(attrName: string): t.Identifier | t.StringLiteral {
41
+ if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(attrName)) {
42
+ return t.identifier(attrName);
43
+ }
44
+ return t.stringLiteral(attrName);
45
+ }
46
+
47
+ /**
48
+ * Add classList.add(hash) statement for scoped CSS.
49
+ */
50
+ function addScopedClass(
51
+ varName: string,
52
+ hash: string,
53
+ statements: t.Statement[],
54
+ ): void {
55
+ statements.push(
56
+ t.expressionStatement(
57
+ t.callExpression(
58
+ t.memberExpression(
59
+ t.memberExpression(t.identifier(varName), t.identifier("classList")),
60
+ t.identifier("add"),
61
+ ),
62
+ [t.stringLiteral(hash)],
63
+ ),
64
+ ),
65
+ );
66
+ }
67
+
68
+ export function processElement(
69
+ node: t.JSXElement,
70
+ statements: t.Statement[],
71
+ genId: () => string,
72
+ signals: Set<string>,
73
+ hash?: string,
74
+ hydrate?: boolean,
75
+ nodesVar?: string,
76
+ parentVar?: string,
77
+ ): string {
78
+ const varName = genId();
79
+ const tag = (node.openingElement.name as t.JSXIdentifier).name;
80
+ const isComponent = /^[A-Z]/.test(tag);
81
+
82
+ if (isComponent) {
83
+ // Global components: Window, Document, Body
84
+ if (isGlobalComponent(tag)) {
85
+ return handleGlobalComponent(tag, node, statements, genId);
86
+ }
87
+
88
+ // Component: call the function with a props object
89
+ const propsObj = t.objectExpression([]);
90
+
91
+ // Add attributes to props (including spread)
92
+ for (const attr of node.openingElement.attributes) {
93
+ if (t.isJSXSpreadAttribute(attr)) {
94
+ // {…obj} — spread into props
95
+ propsObj.properties.push(t.spreadElement(attr.argument));
96
+ continue;
97
+ }
98
+ if (!t.isJSXAttribute(attr)) continue;
99
+ const attrName = (attr.name as t.JSXIdentifier).name;
100
+
101
+ if (t.isStringLiteral(attr.value)) {
102
+ propsObj.properties.push(
103
+ t.objectProperty(attrKey(attrName), attr.value),
104
+ );
105
+ } else if (t.isJSXExpressionContainer(attr.value)) {
106
+ const expr = attr.value.expression as t.Expression;
107
+ propsObj.properties.push(t.objectProperty(attrKey(attrName), expr));
108
+ }
109
+ }
110
+
111
+ // Add children to props
112
+ const childrenExpr = collectChildren(
113
+ node,
114
+ statements,
115
+ genId,
116
+ signals,
117
+ hash,
118
+ hydrate,
119
+ nodesVar,
120
+ );
121
+ if (childrenExpr) {
122
+ propsObj.properties.push(
123
+ t.objectProperty(t.identifier("children"), childrenExpr),
124
+ );
125
+ }
126
+
127
+ const componentCall = t.callExpression(t.identifier(tag), [propsObj]);
128
+
129
+ if (hydrate && nodesVar) {
130
+ // Push the parent's child pool before calling the component so that
131
+ // getHydrationNodes() inside the component returns the right scope.
132
+ // In SSR hydration the component claims its root node from that pool
133
+ // (it's already in the DOM). In empty-pool / SPA mode the component
134
+ // creates a fresh node, so we explicitly insert it when the pool is empty.
135
+ statements.push(
136
+ t.expressionStatement(
137
+ t.callExpression(t.identifier("pushHydrationNodes"), [
138
+ t.identifier(nodesVar),
139
+ ]),
140
+ ),
141
+ );
142
+ statements.push(
143
+ t.variableDeclaration("const", [
144
+ t.variableDeclarator(t.identifier(varName), componentCall),
145
+ ]),
146
+ );
147
+ statements.push(
148
+ t.expressionStatement(
149
+ t.callExpression(t.identifier("popHydrationNodes"), []),
150
+ ),
151
+ );
152
+ if (parentVar) {
153
+ // Insert only when the pool was empty (fresh DOM); if the pool had
154
+ // nodes the component already claimed its SSR element (already in DOM).
155
+ statements.push(
156
+ t.ifStatement(
157
+ t.binaryExpression(
158
+ "===",
159
+ t.memberExpression(
160
+ t.identifier(nodesVar),
161
+ t.identifier("length"),
162
+ ),
163
+ t.numericLiteral(0),
164
+ ),
165
+ t.expressionStatement(
166
+ t.callExpression(t.identifier("insert"), [
167
+ t.identifier(parentVar),
168
+ t.identifier(varName),
169
+ ]),
170
+ ),
171
+ ),
172
+ );
173
+ }
174
+ } else {
175
+ statements.push(
176
+ t.variableDeclaration("const", [
177
+ t.variableDeclarator(t.identifier(varName), componentCall),
178
+ ]),
179
+ );
180
+ }
181
+
182
+ return varName;
183
+ }
184
+
185
+ // Native element: claim (hydrate) or create (dom)
186
+ const currentNodesVar = nodesVar ?? "__nodes";
187
+ statements.push(
188
+ t.variableDeclaration("const", [
189
+ t.variableDeclarator(
190
+ t.identifier(varName),
191
+ getCreateElement(
192
+ tag,
193
+ !!hydrate,
194
+ currentNodesVar,
195
+ hydrate ? parentVar : undefined,
196
+ ),
197
+ ),
198
+ ]),
199
+ );
200
+
201
+ // In hydrate mode, scope to this element's children for descendants
202
+ let childNodesVar: string | undefined;
203
+ if (hydrate) {
204
+ childNodesVar = genId();
205
+ buildHydrationScope(varName, statements, childNodesVar);
206
+ }
207
+
208
+ // attributes
209
+ const seenAttrs = new Set<string>();
210
+ for (const attr of node.openingElement.attributes) {
211
+ if (t.isJSXSpreadAttribute(attr)) {
212
+ // {…obj} — spread onto native element
213
+ statements.push(
214
+ t.expressionStatement(
215
+ t.callExpression(t.identifier("Object.assign"), [
216
+ t.identifier(varName),
217
+ attr.argument as t.Expression,
218
+ ]),
219
+ ),
220
+ );
221
+ continue;
222
+ }
223
+ if (!t.isJSXAttribute(attr)) continue;
224
+ let attrName: string;
225
+ let attrNamespace: string | undefined;
226
+ if (t.isJSXNamespacedName(attr.name)) {
227
+ attrNamespace = attr.name.namespace.name;
228
+ attrName = attr.name.name.name;
229
+ } else {
230
+ attrName = (attr.name as t.JSXIdentifier).name;
231
+ // bindValue -> bind:value, bindChecked -> bind:checked
232
+ if (/^bind[A-Z]/.test(attrName)) {
233
+ attrNamespace = "bind";
234
+ attrName = attrName.slice(4).toLowerCase();
235
+ }
236
+ }
237
+ const realAttr = ATTR_MAP[attrName] ?? attrName;
238
+
239
+ if (seenAttrs.has(realAttr)) {
240
+ throw new TypeError(
241
+ `Duplicate attribute "${realAttr}" (via "${attrName}"). Use class or className, not both.`,
242
+ );
243
+ }
244
+ seenAttrs.add(realAttr);
245
+ if (attrName === "use") {
246
+ // use={directive} or use={[directive, params]}
247
+ const expr = (attr.value as t.JSXExpressionContainer)
248
+ .expression as t.Expression;
249
+ statements.push(
250
+ t.expressionStatement(
251
+ t.callExpression(t.identifier("applyDirective"), [
252
+ t.identifier(varName),
253
+ expr,
254
+ ]),
255
+ ),
256
+ );
257
+ } else if (/^on[A-Z]/.test(attrName)) {
258
+ // Standard JSX: onClick, onSubmit, onMouseenter, etc.
259
+ // Convert camelCase to lowercase: onClick -> click, onMouseenter -> mouseenter
260
+ const event = attrName.slice(2).toLowerCase();
261
+ const handler = (attr.value as t.JSXExpressionContainer)
262
+ .expression as t.Expression;
263
+ statements.push(
264
+ t.expressionStatement(
265
+ t.callExpression(
266
+ t.memberExpression(
267
+ t.identifier(varName),
268
+ t.identifier("addEventListener"),
269
+ ),
270
+ [t.stringLiteral(event), handler],
271
+ ),
272
+ ),
273
+ );
274
+ } else if (attrNamespace === "bind") {
275
+ const bindProp = attrName;
276
+ const signal = (attr.value as t.JSXExpressionContainer)
277
+ .expression as t.Expression;
278
+
279
+ if (bindProp === "this") {
280
+ statements.push(
281
+ t.expressionStatement(
282
+ t.callExpression(
283
+ t.memberExpression(
284
+ (signal as t.CallExpression).callee as t.Expression,
285
+ t.identifier("set"),
286
+ ),
287
+ [t.identifier(varName)],
288
+ ),
289
+ ),
290
+ );
291
+ continue;
292
+ }
293
+
294
+ if (bindProp === "group") {
295
+ // Scan element attributes for type and value
296
+ let inputType = "";
297
+ let inputValue: t.StringLiteral | undefined;
298
+ for (const a of node.openingElement.attributes) {
299
+ if (t.isJSXAttribute(a) && t.isJSXIdentifier(a.name)) {
300
+ if (a.name.name === "type" && t.isStringLiteral(a.value)) {
301
+ inputType = a.value.value;
302
+ }
303
+ if (a.name.name === "value" && t.isStringLiteral(a.value)) {
304
+ inputValue = a.value;
305
+ }
306
+ }
307
+ }
308
+
309
+ if (inputType === "radio" || inputType === "") {
310
+ const isTopLevel =
311
+ t.isCallExpression(signal) &&
312
+ t.isIdentifier((signal as t.CallExpression).callee) &&
313
+ signals.has(
314
+ ((signal as t.CallExpression).callee as t.Identifier).name,
315
+ );
316
+
317
+ if (isTopLevel) {
318
+ const signalId = (signal as t.CallExpression)
319
+ .callee as t.Identifier;
320
+ statements.push(
321
+ t.expressionStatement(
322
+ t.callExpression(
323
+ t.memberExpression(
324
+ t.identifier(varName),
325
+ t.identifier("addEventListener"),
326
+ ),
327
+ [
328
+ t.stringLiteral("change"),
329
+ t.arrowFunctionExpression(
330
+ [],
331
+ t.callExpression(
332
+ t.memberExpression(signalId, t.identifier("set")),
333
+ [
334
+ t.memberExpression(
335
+ t.identifier(varName),
336
+ t.identifier("value"),
337
+ ),
338
+ ],
339
+ ),
340
+ ),
341
+ ],
342
+ ),
343
+ ),
344
+ );
345
+ }
346
+ } else if (inputType === "checkbox") {
347
+ const isTopLevel =
348
+ t.isCallExpression(signal) &&
349
+ t.isIdentifier((signal as t.CallExpression).callee) &&
350
+ signals.has(
351
+ ((signal as t.CallExpression).callee as t.Identifier).name,
352
+ );
353
+
354
+ if (isTopLevel) {
355
+ const callExpr = signal as t.CallExpression;
356
+ statements.push(
357
+ t.expressionStatement(
358
+ t.callExpression(
359
+ t.memberExpression(
360
+ t.identifier(varName),
361
+ t.identifier("addEventListener"),
362
+ ),
363
+ [
364
+ t.stringLiteral("change"),
365
+ t.arrowFunctionExpression(
366
+ [],
367
+ t.blockStatement([
368
+ t.ifStatement(
369
+ t.memberExpression(
370
+ t.identifier(varName),
371
+ t.identifier("checked"),
372
+ ),
373
+ // checked: push value into array
374
+ t.blockStatement([
375
+ t.expressionStatement(
376
+ t.callExpression(
377
+ t.memberExpression(
378
+ t.callExpression(callExpr, []),
379
+ t.identifier("push"),
380
+ ),
381
+ [
382
+ t.memberExpression(
383
+ t.identifier(varName),
384
+ t.identifier("value"),
385
+ ),
386
+ ],
387
+ ),
388
+ ),
389
+ ]),
390
+ // unchecked: splice value out of array
391
+ t.blockStatement([
392
+ t.expressionStatement(
393
+ t.callExpression(
394
+ t.memberExpression(
395
+ t.callExpression(callExpr, []),
396
+ t.identifier("splice"),
397
+ ),
398
+ [
399
+ t.callExpression(
400
+ t.memberExpression(
401
+ t.callExpression(callExpr, []),
402
+ t.identifier("indexOf"),
403
+ ),
404
+ [
405
+ t.memberExpression(
406
+ t.identifier(varName),
407
+ t.identifier("value"),
408
+ ),
409
+ ],
410
+ ),
411
+ t.numericLiteral(1),
412
+ ],
413
+ ),
414
+ ),
415
+ ]),
416
+ ),
417
+ ]),
418
+ ),
419
+ ],
420
+ ),
421
+ ),
422
+ );
423
+ }
424
+ } else {
425
+ console.warn(
426
+ `[sigil] bind:group requires type="radio" or type="checkbox" on the element. ` +
427
+ `Got: type="${inputType}".`,
428
+ );
429
+ }
430
+ continue;
431
+ }
432
+
433
+ // Generic bind:innerHTML, bind:textContent, bind:value, bind:checked, etc.
434
+ const isTopLevelSignal =
435
+ t.isCallExpression(signal) &&
436
+ t.isIdentifier((signal as t.CallExpression).callee) &&
437
+ signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
438
+
439
+ const isMemberOfSignal =
440
+ t.isMemberExpression(signal) &&
441
+ t.isCallExpression((signal as t.MemberExpression).object) &&
442
+ t.isIdentifier(
443
+ ((signal as t.MemberExpression).object as t.CallExpression).callee,
444
+ ) &&
445
+ signals.has(
446
+ (
447
+ ((signal as t.MemberExpression).object as t.CallExpression)
448
+ .callee as t.Identifier
449
+ ).name,
450
+ );
451
+
452
+ if (isTopLevelSignal) {
453
+ buildBind(varName, bindProp, attr, statements);
454
+ } else if (isMemberOfSignal) {
455
+ buildProxyBind(varName, bindProp, attr, statements, signal);
456
+ } else {
457
+ console.warn(
458
+ `[sigil] bind:${bindProp}={...} requires a $state signal or $state object property. ` +
459
+ `Got: ${generate(signal).code}. ` +
460
+ `Hint: change to a $state() call.`,
461
+ );
462
+ }
463
+ } else if (t.isStringLiteral(attr.value)) {
464
+ statements.push(
465
+ t.expressionStatement(
466
+ t.assignmentExpression(
467
+ "=",
468
+ attrAccess(varName, realAttr),
469
+ attr.value,
470
+ ),
471
+ ),
472
+ );
473
+ } else if (t.isJSXExpressionContainer(attr.value)) {
474
+ const expr = attr.value.expression as t.Expression;
475
+ // style={{ color: "red", fontSize: val }} — per-property assignment
476
+ if (attrName === "style" && t.isObjectExpression(expr)) {
477
+ for (const prop of expr.properties) {
478
+ if (!t.isObjectProperty(prop)) continue;
479
+ const key = t.isIdentifier(prop.key)
480
+ ? prop.key.name
481
+ : t.isStringLiteral(prop.key)
482
+ ? prop.key.value
483
+ : null;
484
+ if (!key) continue;
485
+ const val = prop.value as t.Expression;
486
+ const styleProp = t.memberExpression(
487
+ t.memberExpression(t.identifier(varName), t.identifier("style")),
488
+ t.identifier(key),
489
+ );
490
+ if (containsSignal(val, signals)) {
491
+ statements.push(
492
+ t.expressionStatement(
493
+ t.callExpression(t.identifier("createEffect"), [
494
+ t.arrowFunctionExpression(
495
+ [],
496
+ t.blockStatement([
497
+ t.expressionStatement(
498
+ t.assignmentExpression("=", styleProp, val),
499
+ ),
500
+ ]),
501
+ ),
502
+ ]),
503
+ ),
504
+ );
505
+ } else {
506
+ statements.push(
507
+ t.expressionStatement(
508
+ t.assignmentExpression("=", styleProp, val),
509
+ ),
510
+ );
511
+ }
512
+ }
513
+ // done with this attribute
514
+ } else if (containsSignal(expr, signals)) {
515
+ // Dynamic class with scoped CSS: use classList.value to preserve hash
516
+ if (attrName === "class" && hash) {
517
+ statements.push(
518
+ t.expressionStatement(
519
+ t.callExpression(t.identifier("createEffect"), [
520
+ t.arrowFunctionExpression(
521
+ [],
522
+ t.blockStatement([
523
+ t.expressionStatement(
524
+ t.assignmentExpression(
525
+ "=",
526
+ t.memberExpression(
527
+ t.memberExpression(
528
+ t.identifier(varName),
529
+ t.identifier("classList"),
530
+ ),
531
+ t.identifier("value"),
532
+ ),
533
+ expr,
534
+ ),
535
+ ),
536
+ t.expressionStatement(
537
+ t.callExpression(
538
+ t.memberExpression(
539
+ t.memberExpression(
540
+ t.identifier(varName),
541
+ t.identifier("classList"),
542
+ ),
543
+ t.identifier("add"),
544
+ ),
545
+ [t.stringLiteral(hash)],
546
+ ),
547
+ ),
548
+ ]),
549
+ ),
550
+ ]),
551
+ ),
552
+ );
553
+ } else {
554
+ // createEffect(() => varName.realAttr = expr)
555
+ statements.push(
556
+ t.expressionStatement(
557
+ t.callExpression(t.identifier("createEffect"), [
558
+ t.arrowFunctionExpression(
559
+ [],
560
+ t.blockStatement([
561
+ t.expressionStatement(
562
+ t.assignmentExpression(
563
+ "=",
564
+ attrAccess(varName, realAttr),
565
+ expr,
566
+ ),
567
+ ),
568
+ ]),
569
+ ),
570
+ ]),
571
+ ),
572
+ );
573
+ }
574
+ } else {
575
+ // varName.realAttr = expr
576
+ statements.push(
577
+ t.expressionStatement(
578
+ t.assignmentExpression("=", attrAccess(varName, realAttr), expr),
579
+ ),
580
+ );
581
+ }
582
+ }
583
+ }
584
+
585
+ // Add scoped CSS hash to classList (if hash is present)
586
+ if (hash) {
587
+ addScopedClass(varName, hash, statements);
588
+ }
589
+
590
+ // children
591
+ for (const child of node.children) {
592
+ if (t.isJSXElement(child)) {
593
+ const childVar = processElement(
594
+ child,
595
+ statements,
596
+ genId,
597
+ signals,
598
+ hash,
599
+ hydrate,
600
+ childNodesVar,
601
+ hydrate ? varName : undefined,
602
+ );
603
+ if (!hydrate) {
604
+ statements.push(
605
+ t.expressionStatement(
606
+ t.callExpression(
607
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
608
+ [t.identifier(childVar)],
609
+ ),
610
+ ),
611
+ );
612
+ }
613
+ } else if (t.isJSXFragment(child)) {
614
+ const childVar = processFragment(
615
+ child,
616
+ statements,
617
+ genId,
618
+ signals,
619
+ hash,
620
+ hydrate,
621
+ childNodesVar,
622
+ hydrate ? varName : undefined,
623
+ );
624
+ if (!hydrate) {
625
+ statements.push(
626
+ t.expressionStatement(
627
+ t.callExpression(
628
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
629
+ [t.identifier(childVar)],
630
+ ),
631
+ ),
632
+ );
633
+ }
634
+ } else if (t.isJSXText(child)) {
635
+ const text = child.value;
636
+ if (!text.trim()) continue;
637
+ if (hydrate) {
638
+ // SSR hydration: text already in DOM from SSR, do nothing.
639
+ // SPA navigation: childNodesVar pool is empty, create text node.
640
+ const poolLen = t.memberExpression(
641
+ t.identifier(childNodesVar!),
642
+ t.identifier("length"),
643
+ );
644
+ statements.push(
645
+ t.ifStatement(
646
+ t.binaryExpression("===", poolLen, t.numericLiteral(0)),
647
+ t.expressionStatement(
648
+ t.callExpression(
649
+ t.memberExpression(
650
+ t.identifier(varName),
651
+ t.identifier("append"),
652
+ ),
653
+ [
654
+ t.callExpression(
655
+ t.memberExpression(
656
+ t.identifier("document"),
657
+ t.identifier("createTextNode"),
658
+ ),
659
+ [t.stringLiteral(text.replace(/\s*\n\s*/g, " "))],
660
+ ),
661
+ ],
662
+ ),
663
+ ),
664
+ ),
665
+ );
666
+ } else {
667
+ statements.push(
668
+ t.expressionStatement(
669
+ t.callExpression(
670
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
671
+ [
672
+ t.callExpression(
673
+ t.memberExpression(
674
+ t.identifier("document"),
675
+ t.identifier("createTextNode"),
676
+ ),
677
+ [t.stringLiteral(text)],
678
+ ),
679
+ ],
680
+ ),
681
+ ),
682
+ );
683
+ }
684
+ } else if (t.isJSXExpressionContainer(child)) {
685
+ if (t.isJSXEmptyExpression(child.expression)) continue;
686
+ const expr = child.expression as t.Expression;
687
+ if (t.isJSXElement(expr)) {
688
+ const childVar = processElement(
689
+ expr,
690
+ statements,
691
+ genId,
692
+ signals,
693
+ hash,
694
+ hydrate,
695
+ childNodesVar,
696
+ hydrate ? varName : undefined,
697
+ );
698
+ if (!hydrate) {
699
+ statements.push(
700
+ t.expressionStatement(
701
+ t.callExpression(
702
+ t.memberExpression(
703
+ t.identifier(varName),
704
+ t.identifier("append"),
705
+ ),
706
+ [t.identifier(childVar)],
707
+ ),
708
+ ),
709
+ );
710
+ }
711
+ } else if (t.isJSXFragment(expr)) {
712
+ const childVar = processFragment(
713
+ expr,
714
+ statements,
715
+ genId,
716
+ signals,
717
+ hash,
718
+ hydrate,
719
+ childNodesVar,
720
+ hydrate ? varName : undefined,
721
+ );
722
+ if (!hydrate) {
723
+ statements.push(
724
+ t.expressionStatement(
725
+ t.callExpression(
726
+ t.memberExpression(
727
+ t.identifier(varName),
728
+ t.identifier("append"),
729
+ ),
730
+ [t.identifier(childVar)],
731
+ ),
732
+ ),
733
+ );
734
+ }
735
+ } else if (containsSignal(expr, signals)) {
736
+ if (isPrimitive(expr)) {
737
+ // fast path: text node + textContent
738
+ buildTextNode(
739
+ varName,
740
+ expr,
741
+ statements,
742
+ genId,
743
+ hydrate,
744
+ childNodesVar,
745
+ hydrate ? varName : undefined,
746
+ );
747
+ } else {
748
+ // Check for keyed list pattern
749
+ const keyed = findKeyedMapExpr(expr, signals);
750
+ if (keyed) {
751
+ buildKeyedList(
752
+ varName,
753
+ keyed,
754
+ statements,
755
+ genId,
756
+ signals,
757
+ processElement,
758
+ hash,
759
+ hydrate,
760
+ childNodesVar,
761
+ hydrate ? varName : undefined,
762
+ );
763
+ } else {
764
+ buildAnchorMount(
765
+ varName,
766
+ expr,
767
+ statements,
768
+ genId,
769
+ hydrate,
770
+ childNodesVar,
771
+ hydrate ? varName : undefined,
772
+ );
773
+ }
774
+ }
775
+ } else {
776
+ // non-reactive: set once
777
+ if (hydrate) {
778
+ const claimCommentArgs: t.Expression[] = [
779
+ t.identifier(childNodesVar!),
780
+ t.stringLiteral("g"),
781
+ ];
782
+ if (varName) claimCommentArgs.push(t.identifier(varName));
783
+ const poolLen = t.memberExpression(
784
+ t.identifier(childNodesVar!),
785
+ t.identifier("length"),
786
+ );
787
+ // Pool has elements (initial load): SSR content already in DOM, just consume delimiters
788
+ const claimG = t.expressionStatement(
789
+ t.callExpression(t.identifier("claimComment"), claimCommentArgs),
790
+ );
791
+ const claimSlashG = (() => {
792
+ const args: t.Expression[] = [
793
+ t.identifier(childNodesVar!),
794
+ t.stringLiteral("/g"),
795
+ ];
796
+ if (varName) args.push(t.identifier(varName));
797
+ return t.expressionStatement(
798
+ t.callExpression(t.identifier("claimComment"), args),
799
+ );
800
+ })();
801
+ // Pool empty (SPA nav): create and insert fresh elements
802
+ const insertCall = t.expressionStatement(
803
+ t.callExpression(t.identifier("insert"), [
804
+ t.identifier(varName),
805
+ expr,
806
+ ]),
807
+ );
808
+ statements.push(
809
+ t.ifStatement(
810
+ t.binaryExpression(">", poolLen, t.numericLiteral(0)),
811
+ t.blockStatement([claimG, claimSlashG]),
812
+ t.blockStatement([insertCall]),
813
+ ),
814
+ );
815
+ } else {
816
+ statements.push(
817
+ t.expressionStatement(
818
+ t.callExpression(t.identifier("insert"), [
819
+ t.identifier(varName),
820
+ expr,
821
+ ]),
822
+ ),
823
+ );
824
+ }
825
+ }
826
+ }
827
+ }
828
+
829
+ return varName;
830
+ }