@sigil-dev/compiler 0.7.6 → 0.7.7

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 +97 -95
  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/test/jsx.test.ts CHANGED
@@ -1,195 +1,197 @@
1
- import { describe, expect, test } from "bun:test";
2
- import { transform } from "./helpers/transform.ts";
3
-
4
- describe("JSX", () => {
5
- test("single static element", () => {
6
- const result = transform(`const el = <div />;`);
7
- expect(result).toContain('document.createElement("div")');
8
- });
9
-
10
- test("nested static elements", () => {
11
- const result = transform(`const el = <div><span /></div>;`);
12
- expect(result).toContain('document.createElement("div")');
13
- expect(result).toContain('document.createElement("span")');
14
- expect(result).toContain(".append(");
15
- });
16
-
17
- test("static string attribute", () => {
18
- const result = transform(`const el = <div class="app" />;`);
19
- expect(result).toContain('_el0.className = "app"');
20
- });
21
-
22
- test("attribute without mapping", () => {
23
- const result = transform(`const el = <input type="text" />;`);
24
- expect(result).toContain('_el0.type = "text"');
25
- });
26
-
27
- test("expression attribute", () => {
28
- const result = transform(`const el = <div id={myId} />;`);
29
- expect(result).toContain("_el0.id = myId");
30
- });
31
-
32
- describe("Reactivity", () => {
33
- test("dynamic attribute wraps in createEffect", () => {
34
- const result = transform(`
35
- let count = $state(0);
36
- const el = <div id={count} />;
37
- `);
38
- expect(result).toContain("createEffect(");
39
- expect(result).toContain("_el0.id = count()");
40
- });
41
-
42
- test("static expression attribute does not wrap in createEffect", () => {
43
- const result = transform(`
44
- const myId = "app";
45
- const el = <div id={myId} />;
46
- `);
47
- expect(result).not.toContain("createEffect(");
48
- expect(result).toContain("_el0.id = myId");
49
- });
50
-
51
- test("style object compiles to per-property assignment", () => {
52
- const code = transform(`
53
- const el = <div style={{ color: "red", fontSize: "16px" }} />;
54
- `);
55
- expect(code).toContain('.style.color = "red"');
56
- expect(code).toContain('.style.fontSize = "16px"');
57
- expect(code).not.toContain("[object Object]");
58
- });
59
-
60
- test("reactive style property wraps in createEffect", () => {
61
- const code = transform(`
62
- let size = $state(16);
63
- const el = <div style={{ fontSize: size + "px", color: "red" }} />;
64
- `);
65
- expect(code).toContain("createEffect");
66
- expect(code).toContain(".style.fontSize");
67
- expect(code).toContain('.style.color = "red"');
68
- });
69
- });
70
-
71
- describe("Children", () => {
72
- // text children
73
- test("static text child", () => {
74
- const result = transform(`const el = <div>hello</div>;`);
75
- expect(result).toContain('createTextNode("hello")');
76
- });
77
-
78
- test("dynamic text child", () => {
79
- const result = transform(`
80
- let count = $state(0);
81
- const el = <div>{count}</div>;
82
- `);
83
- expect(result).toContain("createEffect(");
84
- expect(result).toContain("count()");
85
- });
86
-
87
- // event handlers
88
- test("onClick handler", () => {
89
- const result = transform(
90
- `const el = <button onClick={() => {}}>click</button>;`,
91
- );
92
- expect(result).toContain('addEventListener("click"');
93
- });
94
-
95
- // combined
96
- test("counter shape", () => {
97
- const result = transform(`
98
- let count = $state(0);
99
- const el = (
100
- <div>
101
- <span>{count}</span>
102
- <button onClick={() => count++}>+</button>
103
- </div>
104
- );
105
- `);
106
- expect(result).toContain("createSignal(0)");
107
- expect(result).toContain('addEventListener("click"');
108
- expect(result).toContain("createEffect(");
109
- expect(result).toContain("createTextNode");
110
- });
111
- });
112
-
113
- describe("Events", () => {
114
- test("onClick handler", () => {
115
- const result = transform(
116
- `const el = <button onClick={() => {}}>click</button>;`,
117
- );
118
- expect(result).toContain('addEventListener("click"');
119
- });
120
- });
121
-
122
- describe("Integration", () => {
123
- test("counter shape", () => {
124
- const result = transform(`
125
- let count = $state(0);
126
- const el = (
127
- <div>
128
- <span>{count}</span>
129
- <button onClick={() => count++}>+</button>
130
- </div>
131
- );
132
- `);
133
- expect(result).toContain("createSignal(0)");
134
- expect(result).toContain('addEventListener("click"');
135
- expect(result).toContain("createEffect(");
136
- expect(result).toContain("createTextNode");
137
- });
138
- });
139
-
140
- describe("Bind", () => {
141
- test("bindValue compiles to effect + event listener", () => {
142
- const code = transform(`
143
- let text = $state("");
144
- const el = <input bindValue={text} />;
145
- `);
146
- // getter: createEffect(() => el.value = text())
147
- expect(code).toContain("createEffect");
148
- expect(code).toContain(".value = text()");
149
- // setter: addEventListener("input", e => text.set(e.target.value))
150
- expect(code).toContain('"input"');
151
- expect(code).toContain("text.set(e.target.value)");
152
- });
153
-
154
- test("bindChecked compiles to change event", () => {
155
- const code = transform(`
156
- let checked = $state(false);
157
- const el = <input type="checkbox" bindChecked={checked} />;
158
- `);
159
- expect(code).toContain(".checked = checked()");
160
- expect(code).toContain('"change"');
161
- expect(code).toContain("checked.set(e.target.checked)");
162
- });
163
-
164
- test("bindThis assigns element reference", () => {
165
- const code = transform(`
166
- let el = $state(null);
167
- const div = <div bindThis={el} />;
168
- `);
169
- expect(code).toContain("el.set(");
170
- expect(code).not.toContain("addEventListener");
171
- expect(code).not.toContain("createEffect(");
172
- });
173
-
174
- test("bindValue on object property uses proxy assignment", () => {
175
- const code = transform(`
176
- let form = $state({ name: "" });
177
- const el = <input bindValue={form.name} />;
178
- `);
179
- // getter: createEffect(() => el.value = form().name)
180
- expect(code).toContain("form().name");
181
- expect(code).toContain("createEffect(");
182
- // setter: proxy assignment, not .set()
183
- expect(code).toContain("form().name = e.target.value");
184
- expect(code).not.toContain("form.name.set");
185
- });
186
-
187
- test("bindValue does not affect non-signal expressions", () => {
188
- // static string should not compile — but if it does, at least no crash
189
- // this is a misuse case, just verify it does not throw
190
- expect(() => transform(`
191
- const el = <input bindValue={"static"} />;
192
- `)).not.toThrow();
193
- });
194
- });
195
- });
1
+ import { describe, expect, test } from "bun:test";
2
+ import { transform } from "./helpers/transform.ts";
3
+
4
+ describe("JSX", () => {
5
+ test("single static element", () => {
6
+ const result = transform(`const el = <div />;`);
7
+ expect(result).toContain('document.createElement("div")');
8
+ });
9
+
10
+ test("nested static elements", () => {
11
+ const result = transform(`const el = <div><span /></div>;`);
12
+ expect(result).toContain('document.createElement("div")');
13
+ expect(result).toContain('document.createElement("span")');
14
+ expect(result).toContain(".append(");
15
+ });
16
+
17
+ test("static string attribute", () => {
18
+ const result = transform(`const el = <div class="app" />;`);
19
+ expect(result).toContain('_el0.className = "app"');
20
+ });
21
+
22
+ test("attribute without mapping", () => {
23
+ const result = transform(`const el = <input type="text" />;`);
24
+ expect(result).toContain('_el0.type = "text"');
25
+ });
26
+
27
+ test("expression attribute", () => {
28
+ const result = transform(`const el = <div id={myId} />;`);
29
+ expect(result).toContain("_el0.id = myId");
30
+ });
31
+
32
+ describe("Reactivity", () => {
33
+ test("dynamic attribute wraps in createEffect", () => {
34
+ const result = transform(`
35
+ let count = $state(0);
36
+ const el = <div id={count} />;
37
+ `);
38
+ expect(result).toContain("createEffect(");
39
+ expect(result).toContain("_el0.id = count()");
40
+ });
41
+
42
+ test("static expression attribute does not wrap in createEffect", () => {
43
+ const result = transform(`
44
+ const myId = "app";
45
+ const el = <div id={myId} />;
46
+ `);
47
+ expect(result).not.toContain("createEffect(");
48
+ expect(result).toContain("_el0.id = myId");
49
+ });
50
+
51
+ test("style object compiles to per-property assignment", () => {
52
+ const code = transform(`
53
+ const el = <div style={{ color: "red", fontSize: "16px" }} />;
54
+ `);
55
+ expect(code).toContain('.style.color = "red"');
56
+ expect(code).toContain('.style.fontSize = "16px"');
57
+ expect(code).not.toContain("[object Object]");
58
+ });
59
+
60
+ test("reactive style property wraps in createEffect", () => {
61
+ const code = transform(`
62
+ let size = $state(16);
63
+ const el = <div style={{ fontSize: size + "px", color: "red" }} />;
64
+ `);
65
+ expect(code).toContain("createEffect");
66
+ expect(code).toContain(".style.fontSize");
67
+ expect(code).toContain('.style.color = "red"');
68
+ });
69
+ });
70
+
71
+ describe("Children", () => {
72
+ // text children
73
+ test("static text child", () => {
74
+ const result = transform(`const el = <div>hello</div>;`);
75
+ expect(result).toContain('createTextNode("hello")');
76
+ });
77
+
78
+ test("dynamic text child", () => {
79
+ const result = transform(`
80
+ let count = $state(0);
81
+ const el = <div>{count}</div>;
82
+ `);
83
+ expect(result).toContain("createEffect(");
84
+ expect(result).toContain("count()");
85
+ });
86
+
87
+ // event handlers
88
+ test("onClick handler", () => {
89
+ const result = transform(
90
+ `const el = <button onClick={() => {}}>click</button>;`,
91
+ );
92
+ expect(result).toContain('addEventListener("click"');
93
+ });
94
+
95
+ // combined
96
+ test("counter shape", () => {
97
+ const result = transform(`
98
+ let count = $state(0);
99
+ const el = (
100
+ <div>
101
+ <span>{count}</span>
102
+ <button onClick={() => count++}>+</button>
103
+ </div>
104
+ );
105
+ `);
106
+ expect(result).toContain("createSignal(0)");
107
+ expect(result).toContain('addEventListener("click"');
108
+ expect(result).toContain("createEffect(");
109
+ expect(result).toContain("createTextNode");
110
+ });
111
+ });
112
+
113
+ describe("Events", () => {
114
+ test("onClick handler", () => {
115
+ const result = transform(
116
+ `const el = <button onClick={() => {}}>click</button>;`,
117
+ );
118
+ expect(result).toContain('addEventListener("click"');
119
+ });
120
+ });
121
+
122
+ describe("Integration", () => {
123
+ test("counter shape", () => {
124
+ const result = transform(`
125
+ let count = $state(0);
126
+ const el = (
127
+ <div>
128
+ <span>{count}</span>
129
+ <button onClick={() => count++}>+</button>
130
+ </div>
131
+ );
132
+ `);
133
+ expect(result).toContain("createSignal(0)");
134
+ expect(result).toContain('addEventListener("click"');
135
+ expect(result).toContain("createEffect(");
136
+ expect(result).toContain("createTextNode");
137
+ });
138
+ });
139
+
140
+ describe("Bind", () => {
141
+ test("bindValue compiles to effect + event listener", () => {
142
+ const code = transform(`
143
+ let text = $state("");
144
+ const el = <input bindValue={text} />;
145
+ `);
146
+ // getter: createEffect(() => el.value = text())
147
+ expect(code).toContain("createEffect");
148
+ expect(code).toContain(".value = text()");
149
+ // setter: addEventListener("input", e => text.set(e.target.value))
150
+ expect(code).toContain('"input"');
151
+ expect(code).toContain("text.set(e.target.value)");
152
+ });
153
+
154
+ test("bindChecked compiles to change event", () => {
155
+ const code = transform(`
156
+ let checked = $state(false);
157
+ const el = <input type="checkbox" bindChecked={checked} />;
158
+ `);
159
+ expect(code).toContain(".checked = checked()");
160
+ expect(code).toContain('"change"');
161
+ expect(code).toContain("checked.set(e.target.checked)");
162
+ });
163
+
164
+ test("bindThis assigns element reference", () => {
165
+ const code = transform(`
166
+ let el = $state(null);
167
+ const div = <div bindThis={el} />;
168
+ `);
169
+ expect(code).toContain("el.set(");
170
+ expect(code).not.toContain("addEventListener");
171
+ expect(code).not.toContain("createEffect(");
172
+ });
173
+
174
+ test("bindValue on object property uses proxy assignment", () => {
175
+ const code = transform(`
176
+ let form = $state({ name: "" });
177
+ const el = <input bindValue={form.name} />;
178
+ `);
179
+ // getter: createEffect(() => el.value = form().name)
180
+ expect(code).toContain("form().name");
181
+ expect(code).toContain("createEffect(");
182
+ // setter: proxy assignment, not .set()
183
+ expect(code).toContain("form().name = e.target.value");
184
+ expect(code).not.toContain("form.name.set");
185
+ });
186
+
187
+ test("bindValue does not affect non-signal expressions", () => {
188
+ // static string should not compile — but if it does, at least no crash
189
+ // this is a misuse case, just verify it does not throw
190
+ expect(() =>
191
+ transform(`
192
+ const el = <input bindValue={"static"} />;
193
+ `),
194
+ ).not.toThrow();
195
+ });
196
+ });
197
+ });
package/test/tree-shaking.test.ts CHANGED
@@ -1,79 +1,78 @@
1
- import { describe, expect, spyOn, test } from "bun:test";
2
- import { transform } from "./helpers/transform.ts";
3
-
4
-
5
- describe("Dead code warnings", () => {
6
- test("warns on unused $state", () => {
7
- const warn = spyOn(console, "warn");
8
- transform(`
9
- let unused = $state(0);
10
- const el = <div />;
11
- `);
12
- expect(warn).toHaveBeenCalledWith(
13
- expect.stringContaining('unused reactive declaration: "unused"'),
14
- );
15
- warn.mockRestore();
16
- });
17
-
18
- test("warns on unused $derived", () => {
19
- const warn = spyOn(console, "warn");
20
- transform(`
21
- let count = $state(0);
22
- let doubled = $derived(count * 2);
23
- const el = <div>{count}</div>;
24
- `);
25
- expect(warn).toHaveBeenCalledWith(
26
- expect.stringContaining('unused reactive declaration: "doubled"'),
27
- );
28
- warn.mockRestore();
29
- });
30
-
31
- test("no warning when $state is used in JSX", () => {
32
- const warn = spyOn(console, "warn");
33
- transform(`
34
- let count = $state(0);
35
- const el = <div>{count}</div>;
36
- `);
37
- expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
38
- warn.mockRestore();
39
- });
40
-
41
- test("no warning when $state is used in effect", () => {
42
- const warn = spyOn(console, "warn");
43
- transform(`
44
- let count = $state(0);
45
- $effect(() => { console.log(count); });
46
- `);
47
- expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
48
- warn.mockRestore();
49
- });
50
-
51
- test("$store does not warn even if not used in same file", () => {
52
- const warn = spyOn(console, "warn");
53
- transform(`
54
- export let count = $store(0);
55
- export let user = $store({ name: "" });
56
- `);
57
- expect(warn).not.toHaveBeenCalledWith(
58
- expect.stringContaining("unused reactive declaration")
59
- );
60
- warn.mockRestore();
61
- });
62
-
63
- test("$store compiles to createSignal like $state", () => {
64
- const code = transform(`
65
- export let count = $store(0);
66
- `);
67
- expect(code).toContain("createSignal(0)");
68
- expect(code).not.toContain("$store");
69
- });
70
-
71
- test("$store in JSX works like $state", () => {
72
- const code = transform(`
73
- export let count = $store(0);
74
- const el = <div>{count}</div>;
75
- `);
76
- expect(code).toContain("count()");
77
- expect(code).not.toContain("$store");
78
- });
79
- });
1
+ import { describe, expect, spyOn, test } from "bun:test";
2
+ import { transform } from "./helpers/transform.ts";
3
+
4
+ describe("Dead code warnings", () => {
5
+ test("warns on unused $state", () => {
6
+ const warn = spyOn(console, "warn");
7
+ transform(`
8
+ let unused = $state(0);
9
+ const el = <div />;
10
+ `);
11
+ expect(warn).toHaveBeenCalledWith(
12
+ expect.stringContaining('unused reactive declaration: "unused"'),
13
+ );
14
+ warn.mockRestore();
15
+ });
16
+
17
+ test("warns on unused $derived", () => {
18
+ const warn = spyOn(console, "warn");
19
+ transform(`
20
+ let count = $state(0);
21
+ let doubled = $derived(count * 2);
22
+ const el = <div>{count}</div>;
23
+ `);
24
+ expect(warn).toHaveBeenCalledWith(
25
+ expect.stringContaining('unused reactive declaration: "doubled"'),
26
+ );
27
+ warn.mockRestore();
28
+ });
29
+
30
+ test("no warning when $state is used in JSX", () => {
31
+ const warn = spyOn(console, "warn");
32
+ transform(`
33
+ let count = $state(0);
34
+ const el = <div>{count}</div>;
35
+ `);
36
+ expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
37
+ warn.mockRestore();
38
+ });
39
+
40
+ test("no warning when $state is used in effect", () => {
41
+ const warn = spyOn(console, "warn");
42
+ transform(`
43
+ let count = $state(0);
44
+ $effect(() => { console.log(count); });
45
+ `);
46
+ expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
47
+ warn.mockRestore();
48
+ });
49
+
50
+ test("$store does not warn even if not used in same file", () => {
51
+ const warn = spyOn(console, "warn");
52
+ transform(`
53
+ export let count = $store(0);
54
+ export let user = $store({ name: "" });
55
+ `);
56
+ expect(warn).not.toHaveBeenCalledWith(
57
+ expect.stringContaining("unused reactive declaration"),
58
+ );
59
+ warn.mockRestore();
60
+ });
61
+
62
+ test("$store compiles to createSignal like $state", () => {
63
+ const code = transform(`
64
+ export let count = $store(0);
65
+ `);
66
+ expect(code).toContain("createSignal(0)");
67
+ expect(code).not.toContain("$store");
68
+ });
69
+
70
+ test("$store in JSX works like $state", () => {
71
+ const code = transform(`
72
+ export let count = $store(0);
73
+ const el = <div>{count}</div>;
74
+ `);
75
+ expect(code).toContain("count()");
76
+ expect(code).not.toContain("$store");
77
+ });
78
+ });