@sigil-dev/compiler 0.3.0 → 0.5.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 (5) hide show
  1. package/jsr.json +1 -1
  2. package/package.json +1 -1
  3. package/src/babel/jsx/element.ts +516 -520
  4. package/src/babel/jsx/ssr.ts +2 -1
  5. package/src/babel/jsx/text-node.ts +192 -192
package/src/babel/jsx/ssr.ts CHANGED
@@ -139,7 +139,8 @@ export function processElementSSR(
139
139
  }
140
140
  // drop event handlers
141
141
  if (attrName.startsWith("on")) continue;
142
- // drop bind:* - no two-way binding on server
142
+ // drop client-only props
143
+ if (attrName === "use") continue;
143
144
  if (attrName.startsWith("bind")) continue;
144
145
 
145
146
  const domAttr = ATTR_MAP_SSR[attrName] ?? attrName;
package/src/babel/jsx/text-node.ts CHANGED
@@ -1,192 +1,192 @@
1
- import { types as t } from "@babel/core";
2
-
3
- /**
4
- * Create a reactive text node: `createEffect(() => node.textContent = String(expr))`
5
- * In hydrate mode:
6
- * - Claims <!--g--> anchor via claimComment (fixes adjacent-text bug vs DOM walk)
7
- * - Consumes <!--/g--> closing delimiter
8
- * - Gets nextSibling as the text node; if it's not a Text (SPA navigation), creates one
9
- * - Effect updates that text node's content
10
- * In dom mode: creates a new text node and appends it.
11
- */
12
- export function buildTextNode(
13
- varName: string,
14
- expr: t.Expression,
15
- statements: t.Statement[],
16
- genId: () => string,
17
- hydrate?: boolean,
18
- nodesVar?: string,
19
- parentVar?: string,
20
- ): void {
21
- if (hydrate) {
22
- const nodesId = t.identifier(nodesVar ?? "__nodes");
23
- const parentIdent = parentVar ? t.identifier(parentVar) : undefined;
24
-
25
- // const _anchor = claimComment(nodes, "g", parent) — claim/create <!--g-->
26
- const anchorVar = genId();
27
- const claimGArgs: t.Expression[] = [nodesId, t.stringLiteral("g")];
28
- if (parentIdent) claimGArgs.push(parentIdent);
29
- statements.push(
30
- t.variableDeclaration("const", [
31
- t.variableDeclarator(
32
- t.identifier(anchorVar),
33
- t.callExpression(t.identifier("claimComment"), claimGArgs),
34
- ),
35
- ]),
36
- );
37
-
38
- // claimComment(nodes, "/g", parent) — consume <!--/g--> from pool
39
- const claimSlashGArgs: t.Expression[] = [nodesId, t.stringLiteral("/g")];
40
- if (parentIdent) claimSlashGArgs.push(parentIdent);
41
- statements.push(
42
- t.expressionStatement(
43
- t.callExpression(t.identifier("claimComment"), claimSlashGArgs),
44
- ),
45
- );
46
-
47
- // let _t = _anchor?.nextSibling
48
- // In SSR hydration, this is the text node between the comment delimiters.
49
- // In SPA navigation, this is the closing <!--/g--> (not a Text), so we create one.
50
- const textVar = genId();
51
- statements.push(
52
- t.variableDeclaration("let", [
53
- t.variableDeclarator(
54
- t.identifier(textVar),
55
- t.optionalMemberExpression(
56
- t.identifier(anchorVar),
57
- t.identifier("nextSibling"),
58
- false,
59
- true,
60
- ),
61
- ),
62
- ]),
63
- );
64
-
65
- // if (!(_t instanceof Text)) { const _nt = createTextNode(""); if (_anchor) _anchor.after(_nt); _t = _nt; }
66
- const newTextVar = genId();
67
- statements.push(
68
- t.ifStatement(
69
- t.unaryExpression(
70
- "!",
71
- t.parenthesizedExpression(
72
- t.binaryExpression(
73
- "instanceof",
74
- t.identifier(textVar),
75
- t.identifier("Text"),
76
- ),
77
- ),
78
- ),
79
- t.blockStatement([
80
- t.variableDeclaration("const", [
81
- t.variableDeclarator(
82
- t.identifier(newTextVar),
83
- t.callExpression(
84
- t.memberExpression(
85
- t.identifier("document"),
86
- t.identifier("createTextNode"),
87
- ),
88
- [t.stringLiteral("")],
89
- ),
90
- ),
91
- ]),
92
- t.ifStatement(
93
- t.identifier(anchorVar),
94
- t.expressionStatement(
95
- t.callExpression(
96
- t.memberExpression(
97
- t.identifier(anchorVar),
98
- t.identifier("after"),
99
- ),
100
- [t.identifier(newTextVar)],
101
- ),
102
- ),
103
- ),
104
- t.expressionStatement(
105
- t.assignmentExpression(
106
- "=",
107
- t.identifier(textVar),
108
- t.identifier(newTextVar),
109
- ),
110
- ),
111
- ]),
112
- ),
113
- );
114
-
115
- // createEffect(() => { if (_t) _t.textContent = String(expr); })
116
- statements.push(
117
- t.expressionStatement(
118
- t.callExpression(t.identifier("createEffect"), [
119
- t.arrowFunctionExpression(
120
- [],
121
- t.blockStatement([
122
- t.ifStatement(
123
- t.identifier(textVar),
124
- t.expressionStatement(
125
- t.assignmentExpression(
126
- "=",
127
- t.memberExpression(
128
- t.identifier(textVar),
129
- t.identifier("textContent"),
130
- ),
131
- t.callExpression(t.identifier("String"), [expr]),
132
- ),
133
- ),
134
- ),
135
- ]),
136
- ),
137
- ]),
138
- ),
139
- );
140
- return;
141
- }
142
-
143
- // DOM mode: create text node and append
144
- const textVar = genId();
145
- statements.push(
146
- t.variableDeclaration("const", [
147
- t.variableDeclarator(
148
- t.identifier(textVar),
149
- t.callExpression(
150
- t.memberExpression(
151
- t.identifier("document"),
152
- t.identifier("createTextNode"),
153
- ),
154
- [t.stringLiteral("")],
155
- ),
156
- ),
157
- ]),
158
- );
159
-
160
- // createEffect(() => _t.textContent = String(expr))
161
- statements.push(
162
- t.expressionStatement(
163
- t.callExpression(t.identifier("createEffect"), [
164
- t.arrowFunctionExpression(
165
- [],
166
- t.blockStatement([
167
- t.expressionStatement(
168
- t.assignmentExpression(
169
- "=",
170
- t.memberExpression(
171
- t.identifier(textVar),
172
- t.identifier("textContent"),
173
- ),
174
- t.callExpression(t.identifier("String"), [expr]),
175
- ),
176
- ),
177
- ]),
178
- ),
179
- ]),
180
- ),
181
- );
182
-
183
- // varName.append(_t)
184
- statements.push(
185
- t.expressionStatement(
186
- t.callExpression(
187
- t.memberExpression(t.identifier(varName), t.identifier("append")),
188
- [t.identifier(textVar)],
189
- ),
190
- ),
191
- );
192
- }
1
+ import { types as t } from "@babel/core";
2
+
3
+ /**
4
+ * Create a reactive text node: `createEffect(() => node.textContent = String(expr))`
5
+ * In hydrate mode:
6
+ * - Claims <!--g--> anchor via claimComment (fixes adjacent-text bug vs DOM walk)
7
+ * - Consumes <!--/g--> closing delimiter
8
+ * - Gets nextSibling as the text node; if it's not a Text (SPA navigation), creates one
9
+ * - Effect updates that text node's content
10
+ * In dom mode: creates a new text node and appends it.
11
+ */
12
+ export function buildTextNode(
13
+ varName: string,
14
+ expr: t.Expression,
15
+ statements: t.Statement[],
16
+ genId: () => string,
17
+ hydrate?: boolean,
18
+ nodesVar?: string,
19
+ parentVar?: string,
20
+ ): void {
21
+ if (hydrate) {
22
+ const nodesId = t.identifier(nodesVar ?? "__nodes");
23
+ const parentIdent = parentVar ? t.identifier(parentVar) : undefined;
24
+
25
+ // const _anchor = claimComment(nodes, "g", parent) — claim/create <!--g-->
26
+ const anchorVar = genId();
27
+ const claimGArgs: t.Expression[] = [nodesId, t.stringLiteral("g")];
28
+ if (parentIdent) claimGArgs.push(parentIdent);
29
+ statements.push(
30
+ t.variableDeclaration("const", [
31
+ t.variableDeclarator(
32
+ t.identifier(anchorVar),
33
+ t.callExpression(t.identifier("claimComment"), claimGArgs),
34
+ ),
35
+ ]),
36
+ );
37
+
38
+ // claimComment(nodes, "/g", parent) — consume <!--/g--> from pool
39
+ const claimSlashGArgs: t.Expression[] = [nodesId, t.stringLiteral("/g")];
40
+ if (parentIdent) claimSlashGArgs.push(parentIdent);
41
+ statements.push(
42
+ t.expressionStatement(
43
+ t.callExpression(t.identifier("claimComment"), claimSlashGArgs),
44
+ ),
45
+ );
46
+
47
+ // let _t = _anchor?.nextSibling
48
+ // In SSR hydration, this is the text node between the comment delimiters.
49
+ // In SPA navigation, this is the closing <!--/g--> (not a Text), so we create one.
50
+ const textVar = genId();
51
+ statements.push(
52
+ t.variableDeclaration("let", [
53
+ t.variableDeclarator(
54
+ t.identifier(textVar),
55
+ t.optionalMemberExpression(
56
+ t.identifier(anchorVar),
57
+ t.identifier("nextSibling"),
58
+ false,
59
+ true,
60
+ ),
61
+ ),
62
+ ]),
63
+ );
64
+
65
+ // if (!(_t instanceof Text)) { const _nt = createTextNode(""); if (_anchor) _anchor.after(_nt); _t = _nt; }
66
+ const newTextVar = genId();
67
+ statements.push(
68
+ t.ifStatement(
69
+ t.unaryExpression(
70
+ "!",
71
+ t.parenthesizedExpression(
72
+ t.binaryExpression(
73
+ "instanceof",
74
+ t.identifier(textVar),
75
+ t.identifier("Text"),
76
+ ),
77
+ ),
78
+ ),
79
+ t.blockStatement([
80
+ t.variableDeclaration("const", [
81
+ t.variableDeclarator(
82
+ t.identifier(newTextVar),
83
+ t.callExpression(
84
+ t.memberExpression(
85
+ t.identifier("document"),
86
+ t.identifier("createTextNode"),
87
+ ),
88
+ [t.stringLiteral("")],
89
+ ),
90
+ ),
91
+ ]),
92
+ t.ifStatement(
93
+ t.identifier(anchorVar),
94
+ t.expressionStatement(
95
+ t.callExpression(
96
+ t.memberExpression(
97
+ t.identifier(anchorVar),
98
+ t.identifier("after"),
99
+ ),
100
+ [t.identifier(newTextVar)],
101
+ ),
102
+ ),
103
+ ),
104
+ t.expressionStatement(
105
+ t.assignmentExpression(
106
+ "=",
107
+ t.identifier(textVar),
108
+ t.identifier(newTextVar),
109
+ ),
110
+ ),
111
+ ]),
112
+ ),
113
+ );
114
+
115
+ // createEffect(() => { if (_t) _t.textContent = String(expr); })
116
+ statements.push(
117
+ t.expressionStatement(
118
+ t.callExpression(t.identifier("createEffect"), [
119
+ t.arrowFunctionExpression(
120
+ [],
121
+ t.blockStatement([
122
+ t.ifStatement(
123
+ t.identifier(textVar),
124
+ t.expressionStatement(
125
+ t.assignmentExpression(
126
+ "=",
127
+ t.memberExpression(
128
+ t.identifier(textVar),
129
+ t.identifier("textContent"),
130
+ ),
131
+ t.callExpression(t.identifier("String"), [expr]),
132
+ ),
133
+ ),
134
+ ),
135
+ ]),
136
+ ),
137
+ ]),
138
+ ),
139
+ );
140
+ return;
141
+ }
142
+
143
+ // DOM mode: create text node and append
144
+ const textVar = genId();
145
+ statements.push(
146
+ t.variableDeclaration("const", [
147
+ t.variableDeclarator(
148
+ t.identifier(textVar),
149
+ t.callExpression(
150
+ t.memberExpression(
151
+ t.identifier("document"),
152
+ t.identifier("createTextNode"),
153
+ ),
154
+ [t.stringLiteral("")],
155
+ ),
156
+ ),
157
+ ]),
158
+ );
159
+
160
+ // createEffect(() => _t.textContent = String(expr))
161
+ statements.push(
162
+ t.expressionStatement(
163
+ t.callExpression(t.identifier("createEffect"), [
164
+ t.arrowFunctionExpression(
165
+ [],
166
+ t.blockStatement([
167
+ t.expressionStatement(
168
+ t.assignmentExpression(
169
+ "=",
170
+ t.memberExpression(
171
+ t.identifier(textVar),
172
+ t.identifier("textContent"),
173
+ ),
174
+ t.callExpression(t.identifier("String"), [expr]),
175
+ ),
176
+ ),
177
+ ]),
178
+ ),
179
+ ]),
180
+ ),
181
+ );
182
+
183
+ // varName.append(_t)
184
+ statements.push(
185
+ t.expressionStatement(
186
+ t.callExpression(
187
+ t.memberExpression(t.identifier(varName), t.identifier("append")),
188
+ [t.identifier(textVar)],
189
+ ),
190
+ ),
191
+ );
192
+ }