@sigil-dev/compiler 0.9.3 → 0.9.5

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 (40) hide show
  1. package/index.ts +4 -4
  2. package/jsr.json +8 -8
  3. package/package.json +9 -8
  4. package/src/babel/handlers/dom/derived.ts +62 -62
  5. package/src/babel/handlers/dom/effect.ts +15 -15
  6. package/src/babel/handlers/dom/globals.ts +105 -105
  7. package/src/babel/handlers/dom/state.ts +107 -107
  8. package/src/babel/handlers/ssr/derived.ts +27 -27
  9. package/src/babel/handlers/ssr/state.ts +11 -11
  10. package/src/babel/index.ts +13 -0
  11. package/src/babel/jsx/anchor-mount.ts +385 -389
  12. package/src/babel/jsx/children.ts +124 -124
  13. package/src/babel/jsx/element.ts +848 -831
  14. package/src/babel/jsx/fragment.ts +282 -282
  15. package/src/babel/jsx/index.ts +2 -2
  16. package/src/babel/jsx/keyed-list.ts +309 -278
  17. package/src/babel/jsx/ssr.ts +351 -319
  18. package/src/babel/jsx/text-node.ts +192 -192
  19. package/src/babel/jsx/utils.ts +179 -179
  20. package/src/babel/util/bind.ts +139 -139
  21. package/src/babel/util/css.ts +151 -151
  22. package/src/babel/util/dead-code.ts +28 -28
  23. package/src/babel/util/helpers.ts +46 -46
  24. package/src/babel/util/magic.ts +11 -11
  25. package/src/bun-plugin.ts +92 -92
  26. package/src/vite/index.ts +58 -58
  27. package/test/async-components.test.ts +59 -59
  28. package/test/components.test.ts +129 -129
  29. package/test/containsSignal.test.ts +288 -288
  30. package/test/fragments.test.ts +90 -90
  31. package/test/helpers/transform.ts +45 -45
  32. package/test/hydration.test.ts +147 -147
  33. package/test/jsx.test.ts +227 -197
  34. package/test/keyed-lists.test.ts +126 -88
  35. package/test/reactivity.test.ts +225 -225
  36. package/test/scoped-css.test.ts +129 -129
  37. package/test/ssr.test.ts +130 -130
  38. package/test/style-object.test.ts +13 -0
  39. package/test/tree-shaking.test.ts +78 -78
  40. package/tsconfig.json +30 -30
@@ -1,282 +1,282 @@
1
- import { types as t } from "@babel/core";
2
- import { buildAnchorMount } from "./anchor-mount";
3
- import { processElement } from "./element";
4
- import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
5
- import { buildTextNode } from "./text-node";
6
- import { containsSignal, isPrimitive } from "./utils";
7
-
8
- /**
9
- * Process a JSX fragment (<>...</>).
10
- * In DOM mode: creates a DocumentFragment and appends all children to it.
11
- * In hydrate mode (inside element): children claim from parent's node pool; no fragment created.
12
- * In hydrate mode (top-level, no parentVar): creates a DocumentFragment so the IIFE returns
13
- * a valid node for SPA navigation (slot.replaceChildren). SSR hydration ignores the return value.
14
- */
15
- export function processFragment(
16
- node: t.JSXFragment,
17
- statements: t.Statement[],
18
- genId: () => string,
19
- signals: Set<string>,
20
- hash?: string,
21
- hydrate?: boolean,
22
- nodesVar?: string,
23
- parentVar?: string,
24
- ): string {
25
- const varName = genId();
26
- const currentNodesVar = nodesVar ?? "__nodes";
27
-
28
- // Where to append children in DOM / SPA mode:
29
- // DOM mode → varName (the DocumentFragment)
30
- // hydrate inside elem → parentVar (the real parent element)
31
- // hydrate top-level → varName (a DocumentFragment we create below)
32
- const effectiveParent = hydrate ? (parentVar ?? varName) : varName;
33
-
34
- // Create a DocumentFragment when:
35
- // - DOM mode: always (it IS the container)
36
- // - Hydrate top-level (no parentVar): needed so the IIFE can return a real node for SPA nav
37
- // (SSR hydration ignores the return value, so an empty fragment is harmless)
38
- if (!hydrate || !parentVar) {
39
- statements.push(
40
- t.variableDeclaration("const", [
41
- t.variableDeclarator(
42
- t.identifier(varName),
43
- t.callExpression(
44
- t.memberExpression(
45
- t.identifier("document"),
46
- t.identifier("createDocumentFragment"),
47
- ),
48
- [],
49
- ),
50
- ),
51
- ]),
52
- );
53
- }
54
-
55
- // Process each child and append to fragment (or claim in hydrate mode)
56
- for (const child of node.children) {
57
- if (t.isJSXElement(child)) {
58
- const childVar = processElement(
59
- child,
60
- statements,
61
- genId,
62
- signals,
63
- hash,
64
- hydrate,
65
- currentNodesVar,
66
- hydrate ? effectiveParent : undefined,
67
- );
68
- if (!hydrate) {
69
- statements.push(
70
- t.expressionStatement(
71
- t.callExpression(
72
- t.memberExpression(t.identifier(varName), t.identifier("append")),
73
- [t.identifier(childVar)],
74
- ),
75
- ),
76
- );
77
- }
78
- } else if (t.isJSXText(child)) {
79
- const text = child.value.trim();
80
- if (!text) continue;
81
- if (hydrate) {
82
- // SSR hydration: text already in DOM from SSR, do nothing.
83
- // SPA navigation: pool is empty, create text node and append to effectiveParent.
84
- const poolLen = t.memberExpression(
85
- t.identifier(currentNodesVar),
86
- t.identifier("length"),
87
- );
88
- statements.push(
89
- t.ifStatement(
90
- t.binaryExpression("===", poolLen, t.numericLiteral(0)),
91
- t.expressionStatement(
92
- t.callExpression(
93
- t.memberExpression(
94
- t.identifier(effectiveParent),
95
- t.identifier("append"),
96
- ),
97
- [
98
- t.callExpression(
99
- t.memberExpression(
100
- t.identifier("document"),
101
- t.identifier("createTextNode"),
102
- ),
103
- [t.stringLiteral(text)],
104
- ),
105
- ],
106
- ),
107
- ),
108
- ),
109
- );
110
- } else {
111
- statements.push(
112
- t.expressionStatement(
113
- t.callExpression(
114
- t.memberExpression(t.identifier(varName), t.identifier("append")),
115
- [
116
- t.callExpression(
117
- t.memberExpression(
118
- t.identifier("document"),
119
- t.identifier("createTextNode"),
120
- ),
121
- [t.stringLiteral(text)],
122
- ),
123
- ],
124
- ),
125
- ),
126
- );
127
- }
128
- } else if (t.isJSXExpressionContainer(child)) {
129
- if (t.isJSXEmptyExpression(child.expression)) continue;
130
- const expr = child.expression as t.Expression;
131
- if (t.isJSXElement(expr)) {
132
- const childVar = processElement(
133
- expr,
134
- statements,
135
- genId,
136
- signals,
137
- hash,
138
- hydrate,
139
- currentNodesVar,
140
- hydrate ? effectiveParent : undefined,
141
- );
142
- if (!hydrate) {
143
- statements.push(
144
- t.expressionStatement(
145
- t.callExpression(
146
- t.memberExpression(
147
- t.identifier(varName),
148
- t.identifier("append"),
149
- ),
150
- [t.identifier(childVar)],
151
- ),
152
- ),
153
- );
154
- }
155
- } else if (t.isJSXFragment(expr)) {
156
- const childVar = processFragment(
157
- expr,
158
- statements,
159
- genId,
160
- signals,
161
- hash,
162
- hydrate,
163
- currentNodesVar,
164
- hydrate ? effectiveParent : undefined,
165
- );
166
- if (!hydrate) {
167
- statements.push(
168
- t.expressionStatement(
169
- t.callExpression(
170
- t.memberExpression(
171
- t.identifier(varName),
172
- t.identifier("append"),
173
- ),
174
- [t.identifier(childVar)],
175
- ),
176
- ),
177
- );
178
- }
179
- } else if (containsSignal(expr, signals)) {
180
- if (isPrimitive(expr)) {
181
- buildTextNode(
182
- varName,
183
- expr,
184
- statements,
185
- genId,
186
- hydrate,
187
- currentNodesVar,
188
- hydrate ? effectiveParent : undefined,
189
- );
190
- } else {
191
- // Check for keyed list pattern
192
- const keyed = findKeyedMapExpr(expr, signals);
193
- if (keyed) {
194
- buildKeyedList(
195
- varName,
196
- keyed,
197
- statements,
198
- genId,
199
- signals,
200
- processElement,
201
- hash,
202
- hydrate,
203
- currentNodesVar,
204
- hydrate ? effectiveParent : undefined,
205
- );
206
- } else {
207
- buildAnchorMount(
208
- varName,
209
- expr,
210
- statements,
211
- genId,
212
- hydrate,
213
- currentNodesVar,
214
- hydrate ? effectiveParent : undefined,
215
- );
216
- }
217
- }
218
- } else {
219
- if (hydrate) {
220
- // Non-reactive expression in hydrate fragment
221
- const claimCommentArgs: t.Expression[] = [
222
- t.identifier(currentNodesVar),
223
- t.stringLiteral("g"),
224
- t.identifier(effectiveParent),
225
- ];
226
- const poolLen = t.memberExpression(
227
- t.identifier(currentNodesVar),
228
- t.identifier("length"),
229
- );
230
- const claimG = t.expressionStatement(
231
- t.callExpression(t.identifier("claimComment"), claimCommentArgs),
232
- );
233
- const claimSlashG = t.expressionStatement(
234
- t.callExpression(t.identifier("claimComment"), [
235
- t.identifier(currentNodesVar),
236
- t.stringLiteral("/g"),
237
- t.identifier(effectiveParent),
238
- ]),
239
- );
240
- // SPA navigation: pool empty, insert into effectiveParent
241
- const elseBranch = t.blockStatement([
242
- t.expressionStatement(
243
- t.callExpression(t.identifier("insert"), [
244
- t.identifier(effectiveParent),
245
- expr,
246
- ]),
247
- ),
248
- ]);
249
- statements.push(
250
- t.ifStatement(
251
- t.binaryExpression(">", poolLen, t.numericLiteral(0)),
252
- t.blockStatement([claimG, claimSlashG]),
253
- elseBranch,
254
- ),
255
- );
256
- } else {
257
- statements.push(
258
- t.expressionStatement(
259
- t.callExpression(
260
- t.memberExpression(
261
- t.identifier(varName),
262
- t.identifier("append"),
263
- ),
264
- [
265
- t.callExpression(
266
- t.memberExpression(
267
- t.identifier("document"),
268
- t.identifier("createTextNode"),
269
- ),
270
- [expr],
271
- ),
272
- ],
273
- ),
274
- ),
275
- );
276
- }
277
- }
278
- }
279
- }
280
-
281
- return varName;
282
- }
1
+ import { types as t } from "@babel/core";
2
+ import { buildAnchorMount } from "./anchor-mount";
3
+ import { processElement } from "./element";
4
+ import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
5
+ import { buildTextNode } from "./text-node";
6
+ import { containsSignal, isPrimitive } from "./utils";
7
+
8
+ /**
9
+ * Process a JSX fragment (<>...</>).
10
+ * In DOM mode: creates a DocumentFragment and appends all children to it.
11
+ * In hydrate mode (inside element): children claim from parent's node pool; no fragment created.
12
+ * In hydrate mode (top-level, no parentVar): creates a DocumentFragment so the IIFE returns
13
+ * a valid node for SPA navigation (slot.replaceChildren). SSR hydration ignores the return value.
14
+ */
15
+ export function processFragment(
16
+ node: t.JSXFragment,
17
+ statements: t.Statement[],
18
+ genId: () => string,
19
+ signals: Set<string>,
20
+ hash?: string,
21
+ hydrate?: boolean,
22
+ nodesVar?: string,
23
+ parentVar?: string,
24
+ ): string {
25
+ const varName = genId();
26
+ const currentNodesVar = nodesVar ?? "__nodes";
27
+
28
+ // Where to append children in DOM / SPA mode:
29
+ // DOM mode → varName (the DocumentFragment)
30
+ // hydrate inside elem → parentVar (the real parent element)
31
+ // hydrate top-level → varName (a DocumentFragment we create below)
32
+ const effectiveParent = hydrate ? (parentVar ?? varName) : varName;
33
+
34
+ // Create a DocumentFragment when:
35
+ // - DOM mode: always (it IS the container)
36
+ // - Hydrate top-level (no parentVar): needed so the IIFE can return a real node for SPA nav
37
+ // (SSR hydration ignores the return value, so an empty fragment is harmless)
38
+ if (!hydrate || !parentVar) {
39
+ statements.push(
40
+ t.variableDeclaration("const", [
41
+ t.variableDeclarator(
42
+ t.identifier(varName),
43
+ t.callExpression(
44
+ t.memberExpression(
45
+ t.identifier("document"),
46
+ t.identifier("createDocumentFragment"),
47
+ ),
48
+ [],
49
+ ),
50
+ ),
51
+ ]),
52
+ );
53
+ }
54
+
55
+ // Process each child and append to fragment (or claim in hydrate mode)
56
+ for (const child of node.children) {
57
+ if (t.isJSXElement(child)) {
58
+ const childVar = processElement(
59
+ child,
60
+ statements,
61
+ genId,
62
+ signals,
63
+ hash,
64
+ hydrate,
65
+ currentNodesVar,
66
+ hydrate ? effectiveParent : undefined,
67
+ );
68
+ if (!hydrate) {
69
+ statements.push(
70
+ t.expressionStatement(
71
+ t.callExpression(
72
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
73
+ [t.identifier(childVar)],
74
+ ),
75
+ ),
76
+ );
77
+ }
78
+ } else if (t.isJSXText(child)) {
79
+ const text = child.value.trim();
80
+ if (!text) continue;
81
+ if (hydrate) {
82
+ // SSR hydration: text already in DOM from SSR, do nothing.
83
+ // SPA navigation: pool is empty, create text node and append to effectiveParent.
84
+ const poolLen = t.memberExpression(
85
+ t.identifier(currentNodesVar),
86
+ t.identifier("length"),
87
+ );
88
+ statements.push(
89
+ t.ifStatement(
90
+ t.binaryExpression("===", poolLen, t.numericLiteral(0)),
91
+ t.expressionStatement(
92
+ t.callExpression(
93
+ t.memberExpression(
94
+ t.identifier(effectiveParent),
95
+ t.identifier("append"),
96
+ ),
97
+ [
98
+ t.callExpression(
99
+ t.memberExpression(
100
+ t.identifier("document"),
101
+ t.identifier("createTextNode"),
102
+ ),
103
+ [t.stringLiteral(text)],
104
+ ),
105
+ ],
106
+ ),
107
+ ),
108
+ ),
109
+ );
110
+ } else {
111
+ statements.push(
112
+ t.expressionStatement(
113
+ t.callExpression(
114
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
115
+ [
116
+ t.callExpression(
117
+ t.memberExpression(
118
+ t.identifier("document"),
119
+ t.identifier("createTextNode"),
120
+ ),
121
+ [t.stringLiteral(text)],
122
+ ),
123
+ ],
124
+ ),
125
+ ),
126
+ );
127
+ }
128
+ } else if (t.isJSXExpressionContainer(child)) {
129
+ if (t.isJSXEmptyExpression(child.expression)) continue;
130
+ const expr = child.expression as t.Expression;
131
+ if (t.isJSXElement(expr)) {
132
+ const childVar = processElement(
133
+ expr,
134
+ statements,
135
+ genId,
136
+ signals,
137
+ hash,
138
+ hydrate,
139
+ currentNodesVar,
140
+ hydrate ? effectiveParent : undefined,
141
+ );
142
+ if (!hydrate) {
143
+ statements.push(
144
+ t.expressionStatement(
145
+ t.callExpression(
146
+ t.memberExpression(
147
+ t.identifier(varName),
148
+ t.identifier("append"),
149
+ ),
150
+ [t.identifier(childVar)],
151
+ ),
152
+ ),
153
+ );
154
+ }
155
+ } else if (t.isJSXFragment(expr)) {
156
+ const childVar = processFragment(
157
+ expr,
158
+ statements,
159
+ genId,
160
+ signals,
161
+ hash,
162
+ hydrate,
163
+ currentNodesVar,
164
+ hydrate ? effectiveParent : undefined,
165
+ );
166
+ if (!hydrate) {
167
+ statements.push(
168
+ t.expressionStatement(
169
+ t.callExpression(
170
+ t.memberExpression(
171
+ t.identifier(varName),
172
+ t.identifier("append"),
173
+ ),
174
+ [t.identifier(childVar)],
175
+ ),
176
+ ),
177
+ );
178
+ }
179
+ } else if (containsSignal(expr, signals)) {
180
+ if (isPrimitive(expr)) {
181
+ buildTextNode(
182
+ varName,
183
+ expr,
184
+ statements,
185
+ genId,
186
+ hydrate,
187
+ currentNodesVar,
188
+ hydrate ? effectiveParent : undefined,
189
+ );
190
+ } else {
191
+ // Check for keyed list pattern
192
+ const keyed = findKeyedMapExpr(expr, signals);
193
+ if (keyed) {
194
+ buildKeyedList(
195
+ varName,
196
+ keyed,
197
+ statements,
198
+ genId,
199
+ signals,
200
+ processElement,
201
+ hash,
202
+ hydrate,
203
+ currentNodesVar,
204
+ hydrate ? effectiveParent : undefined,
205
+ );
206
+ } else {
207
+ buildAnchorMount(
208
+ varName,
209
+ expr,
210
+ statements,
211
+ genId,
212
+ hydrate,
213
+ currentNodesVar,
214
+ hydrate ? effectiveParent : undefined,
215
+ );
216
+ }
217
+ }
218
+ } else {
219
+ if (hydrate) {
220
+ // Non-reactive expression in hydrate fragment
221
+ const claimCommentArgs: t.Expression[] = [
222
+ t.identifier(currentNodesVar),
223
+ t.stringLiteral("g"),
224
+ t.identifier(effectiveParent),
225
+ ];
226
+ const poolLen = t.memberExpression(
227
+ t.identifier(currentNodesVar),
228
+ t.identifier("length"),
229
+ );
230
+ const claimG = t.expressionStatement(
231
+ t.callExpression(t.identifier("claimComment"), claimCommentArgs),
232
+ );
233
+ const claimSlashG = t.expressionStatement(
234
+ t.callExpression(t.identifier("claimComment"), [
235
+ t.identifier(currentNodesVar),
236
+ t.stringLiteral("/g"),
237
+ t.identifier(effectiveParent),
238
+ ]),
239
+ );
240
+ // SPA navigation: pool empty, insert into effectiveParent
241
+ const elseBranch = t.blockStatement([
242
+ t.expressionStatement(
243
+ t.callExpression(t.identifier("insert"), [
244
+ t.identifier(effectiveParent),
245
+ expr,
246
+ ]),
247
+ ),
248
+ ]);
249
+ statements.push(
250
+ t.ifStatement(
251
+ t.binaryExpression(">", poolLen, t.numericLiteral(0)),
252
+ t.blockStatement([claimG, claimSlashG]),
253
+ elseBranch,
254
+ ),
255
+ );
256
+ } else {
257
+ statements.push(
258
+ t.expressionStatement(
259
+ t.callExpression(
260
+ t.memberExpression(
261
+ t.identifier(varName),
262
+ t.identifier("append"),
263
+ ),
264
+ [
265
+ t.callExpression(
266
+ t.memberExpression(
267
+ t.identifier("document"),
268
+ t.identifier("createTextNode"),
269
+ ),
270
+ [expr],
271
+ ),
272
+ ],
273
+ ),
274
+ ),
275
+ );
276
+ }
277
+ }
278
+ }
279
+ }
280
+
281
+ return varName;
282
+ }
@@ -1,2 +1,2 @@
1
- export { processElement } from "./element";
2
- export { processFragment } from "./fragment";
1
+ export { processElement } from "./element";
2
+ export { processFragment } from "./fragment";