@canvasengine/compiler 2.0.0-beta.4 → 2.0.0-beta.41
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.
- package/dist/grammar.pegjs +861 -0
- package/dist/index.d.ts +35 -2
- package/dist/index.js +50 -8
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
- package/grammar.pegjs +0 -180
- package/index.ts +0 -166
- package/tests/compiler.spec.ts +0 -346
- package/tsconfig.json +0 -29
- package/tsup.config.ts +0 -14
package/tests/compiler.spec.ts
DELETED
|
@@ -1,346 +0,0 @@
|
|
|
1
|
-
import pkg from "peggy";
|
|
2
|
-
import fs from "fs";
|
|
3
|
-
import { beforeAll, describe, test, expect } from "vitest";
|
|
4
|
-
|
|
5
|
-
const { generate } = pkg;
|
|
6
|
-
let parser: any;
|
|
7
|
-
|
|
8
|
-
beforeAll(() => {
|
|
9
|
-
const grammar = fs.readFileSync("packages/compiler/grammar.pegjs", "utf8");
|
|
10
|
-
parser = generate(grammar);
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
describe("Compiler", () => {
|
|
14
|
-
test("should compile comment", () => {
|
|
15
|
-
const input = `
|
|
16
|
-
<Canvas>
|
|
17
|
-
<!-- Comment -->
|
|
18
|
-
</Canvas>
|
|
19
|
-
`;
|
|
20
|
-
const output = parser.parse(input);
|
|
21
|
-
expect(output).toBe(`h(Canvas)`);
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
test("should compile multiple comment", () => {
|
|
25
|
-
const input = `
|
|
26
|
-
<Canvas>
|
|
27
|
-
<!-- Comment -->
|
|
28
|
-
<!-- Comment -->
|
|
29
|
-
</Canvas>
|
|
30
|
-
`;
|
|
31
|
-
const output = parser.parse(input);
|
|
32
|
-
expect(output).toBe(`h(Canvas)`);
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
test("should compile multiple line comment", () => {
|
|
36
|
-
const input = `
|
|
37
|
-
<Canvas>
|
|
38
|
-
<!--
|
|
39
|
-
Comment
|
|
40
|
-
Comment
|
|
41
|
-
-->
|
|
42
|
-
</Canvas>
|
|
43
|
-
`;
|
|
44
|
-
const output = parser.parse(input);
|
|
45
|
-
expect(output).toBe(`h(Canvas)`);
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
test("should compile simple component", () => {
|
|
49
|
-
const input = `<Canvas />`;
|
|
50
|
-
const output = parser.parse(input);
|
|
51
|
-
expect(output).toBe(`h(Canvas)`);
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
test("should compile component with dynamic attribute", () => {
|
|
55
|
-
const input = `<Canvas width={x} />`;
|
|
56
|
-
const output = parser.parse(input);
|
|
57
|
-
expect(output).toBe(`h(Canvas, { width: x })`);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
test("should compile component with object attribute", () => {
|
|
61
|
-
const input = `<Canvas width={ {x: 10, y: 20} } />`;
|
|
62
|
-
const output = parser.parse(input);
|
|
63
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => ({x: 10, y: 20})) })`);
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
test("should compile component with deep object attribute", () => {
|
|
67
|
-
const input = `<Canvas width={deep.value} />`;
|
|
68
|
-
const output = parser.parse(input);
|
|
69
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => deep().value()) })`);
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
test("should compile component with deep object attribute but not transform to signal", () => {
|
|
73
|
-
const input = `<Canvas width={@deep.value} />`;
|
|
74
|
-
const output = parser.parse(input);
|
|
75
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => deep.value()) })`);
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
test("should compile component with deep object attribute but not all transform to signal", () => {
|
|
79
|
-
const input = `<Canvas width={@deep.@value} />`;
|
|
80
|
-
const output = parser.parse(input);
|
|
81
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => deep.value) })`);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
test("should compile component with dynamic object attribute", () => {
|
|
85
|
-
const input = `<Canvas width={ {x: x, y: 20} } />`;
|
|
86
|
-
const output = parser.parse(input);
|
|
87
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => ({x: x(), y: 20})) })`);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
test("should compile component with array attribute", () => {
|
|
91
|
-
const input = `<Canvas width={ [10, 20] } />`;
|
|
92
|
-
const output = parser.parse(input);
|
|
93
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => [10, 20]) })`);
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
test("should compile component with dynamic array attribute", () => {
|
|
97
|
-
const input = `<Canvas width={ [x, 20] } />`;
|
|
98
|
-
const output = parser.parse(input);
|
|
99
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => [x(), 20]) })`);
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
test("should compile component with standalone dynamic attribute", () => {
|
|
103
|
-
const input = `<Canvas width />`;
|
|
104
|
-
const output = parser.parse(input);
|
|
105
|
-
expect(output).toBe(`h(Canvas, { width })`);
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
test("should compile component with computed dynamic attribute", () => {
|
|
109
|
-
const input = `<Canvas width={x * 2} />`;
|
|
110
|
-
const output = parser.parse(input);
|
|
111
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => x() * 2) })`);
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
test("should compile component with multiple computed dynamic attributes", () => {
|
|
115
|
-
const input = `<Canvas width={x * 2 * y} />`;
|
|
116
|
-
const output = parser.parse(input);
|
|
117
|
-
expect(output).toBe(`h(Canvas, { width: computed(() => x() * 2 * y()) })`);
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
test("should compile component with static numeric attribute", () => {
|
|
121
|
-
const input = `<Canvas width="10" />`;
|
|
122
|
-
const output = parser.parse(input);
|
|
123
|
-
expect(output).toBe(`h(Canvas, { width: 10 })`);
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
test("should compile component with static string attribute", () => {
|
|
127
|
-
const input = `<Canvas width="val" />`;
|
|
128
|
-
const output = parser.parse(input);
|
|
129
|
-
expect(output).toBe(`h(Canvas, { width: 'val' })`);
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
test("should compile component with children", () => {
|
|
133
|
-
const input = `
|
|
134
|
-
<Canvas>
|
|
135
|
-
<Sprite />
|
|
136
|
-
<Text />
|
|
137
|
-
</Canvas>
|
|
138
|
-
`;
|
|
139
|
-
const output = parser.parse(input);
|
|
140
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
141
|
-
`h(Canvas,null,[h(Sprite),h(Text)])`.replace(/\s+/g, "")
|
|
142
|
-
);
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
test("should compile component with multi children", () => {
|
|
146
|
-
const input = `
|
|
147
|
-
<Sprite />
|
|
148
|
-
<Sprite />
|
|
149
|
-
`;
|
|
150
|
-
const output = parser.parse(input);
|
|
151
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
152
|
-
`[h(Sprite),h(Sprite)]`.replace(/\s+/g, "")
|
|
153
|
-
);
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
test("should compile component with event handler", () => {
|
|
157
|
-
const input = `<Sprite @click={fn} />`;
|
|
158
|
-
const output = parser.parse(input);
|
|
159
|
-
expect(output).toBe(`h(Sprite, { click: fn })`);
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
test("should compile component with standalone event handler", () => {
|
|
163
|
-
const input = `<Sprite @click />`;
|
|
164
|
-
const output = parser.parse(input);
|
|
165
|
-
expect(output).toBe(`h(Sprite, { click })`);
|
|
166
|
-
});
|
|
167
|
-
|
|
168
|
-
test('should compile component with inline event handler', () => {
|
|
169
|
-
const input = `<Sprite @click={() => console.log('click')} />`;
|
|
170
|
-
const output = parser.parse(input);
|
|
171
|
-
expect(output).toBe(`h(Sprite, { click: () => console.log('click') })`);
|
|
172
|
-
});
|
|
173
|
-
|
|
174
|
-
// test("should compile component with component attribute", () => {
|
|
175
|
-
// const input = `<Canvas child={<Sprite />} />`;
|
|
176
|
-
// const output = parser.parse(input);
|
|
177
|
-
// expect(output).toBe(`h(Canvas, { child: h(Sprite) })`);
|
|
178
|
-
// });
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
describe("Loop", () => {
|
|
182
|
-
test("loop in canvas", () => {
|
|
183
|
-
const input = `
|
|
184
|
-
<Canvas>
|
|
185
|
-
@for (sprite of sprites) {
|
|
186
|
-
<Sprite />
|
|
187
|
-
}
|
|
188
|
-
</Canvas>
|
|
189
|
-
`;
|
|
190
|
-
const output = parser.parse(input);
|
|
191
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
192
|
-
`h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
|
|
193
|
-
);
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
test("should compile loop", () => {
|
|
197
|
-
const input = `
|
|
198
|
-
@for (sprite of sprites) {
|
|
199
|
-
<Sprite />
|
|
200
|
-
}
|
|
201
|
-
`;
|
|
202
|
-
const output = parser.parse(input);
|
|
203
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
204
|
-
`loop(sprites,(sprite)=>h(Sprite))`.replace(/\s+/g, "")
|
|
205
|
-
);
|
|
206
|
-
});
|
|
207
|
-
|
|
208
|
-
test("should compile nestedloop", () => {
|
|
209
|
-
const input = `
|
|
210
|
-
@for (sprite of sprites) {
|
|
211
|
-
@for (other of others) {
|
|
212
|
-
<Sprite />
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
`;
|
|
216
|
-
const output = parser.parse(input);
|
|
217
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
218
|
-
`loop(sprites,(sprite)=>loop(others,(other)=>h(Sprite)))`.replace(
|
|
219
|
-
/\s+/g,
|
|
220
|
-
""
|
|
221
|
-
)
|
|
222
|
-
);
|
|
223
|
-
});
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
describe("Condition", () => {
|
|
227
|
-
test("should compile condition when sprite is visible", () => {
|
|
228
|
-
const input = `
|
|
229
|
-
@if (sprite.visible) {
|
|
230
|
-
<Sprite />
|
|
231
|
-
}
|
|
232
|
-
`;
|
|
233
|
-
const output = parser.parse(input);
|
|
234
|
-
expect(output).toBe(`cond(sprite.visible, () => h(Sprite))`);
|
|
235
|
-
});
|
|
236
|
-
|
|
237
|
-
test("should compile condition for multiple sprites", () => {
|
|
238
|
-
const input = `
|
|
239
|
-
@if (sprite) {
|
|
240
|
-
<Sprite />
|
|
241
|
-
}
|
|
242
|
-
@if (other) {
|
|
243
|
-
<Sprite />
|
|
244
|
-
}
|
|
245
|
-
`;
|
|
246
|
-
const output = parser.parse(input);
|
|
247
|
-
expect(output).toBe(
|
|
248
|
-
`[cond(sprite, () => h(Sprite)),cond(other, () => h(Sprite))]`
|
|
249
|
-
);
|
|
250
|
-
});
|
|
251
|
-
|
|
252
|
-
test("should compile nested condition when sprite is visible", () => {
|
|
253
|
-
const input = `
|
|
254
|
-
@if (sprite.visible) {
|
|
255
|
-
@if (deep) {
|
|
256
|
-
<Sprite />
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
`;
|
|
260
|
-
const output = parser.parse(input);
|
|
261
|
-
expect(output).toBe(
|
|
262
|
-
`cond(sprite.visible, () => cond(deep, () => h(Sprite)))`
|
|
263
|
-
);
|
|
264
|
-
});
|
|
265
|
-
|
|
266
|
-
test("should compile condition with nested sprite when sprite is visible", () => {
|
|
267
|
-
const input = `
|
|
268
|
-
@if (sprite.visible) {
|
|
269
|
-
<Sprite />
|
|
270
|
-
@if (deep) {
|
|
271
|
-
<Sprite />
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
`;
|
|
275
|
-
const output = parser.parse(input);
|
|
276
|
-
expect(output).toBe(
|
|
277
|
-
`cond(sprite.visible, () => [h(Sprite), cond(deep, () => h(Sprite))])`
|
|
278
|
-
);
|
|
279
|
-
});
|
|
280
|
-
|
|
281
|
-
test("should compile condition with multiple sprites when sprite is visible", () => {
|
|
282
|
-
const input = `
|
|
283
|
-
@if (sprite.visible) {
|
|
284
|
-
<Sprite />
|
|
285
|
-
@if (deep) {
|
|
286
|
-
<Sprite />
|
|
287
|
-
}
|
|
288
|
-
<Sprite />
|
|
289
|
-
}
|
|
290
|
-
`;
|
|
291
|
-
const output = parser.parse(input);
|
|
292
|
-
expect(output).toBe(
|
|
293
|
-
`cond(sprite.visible, () => [h(Sprite), cond(deep, () => h(Sprite)), h(Sprite)])`
|
|
294
|
-
);
|
|
295
|
-
});
|
|
296
|
-
});
|
|
297
|
-
|
|
298
|
-
describe("Condition in Loops", () => {
|
|
299
|
-
test("should compile condition within a loop", () => { // New test for condition in a loop
|
|
300
|
-
const input = `
|
|
301
|
-
<Canvas>
|
|
302
|
-
@for (sprite of sprites) {
|
|
303
|
-
@if (sprite.visible) {
|
|
304
|
-
<Sprite />
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
</Canvas>
|
|
308
|
-
`;
|
|
309
|
-
const output = parser.parse(input);
|
|
310
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
311
|
-
`h(Canvas,null,loop(sprites,(sprite)=>cond(sprite.visible,()=>h(Sprite))))`.replace(/\s+/g, "")
|
|
312
|
-
);
|
|
313
|
-
});
|
|
314
|
-
|
|
315
|
-
test("should compile elements within a loop", () => { // New test for elements in a loop
|
|
316
|
-
const input = `
|
|
317
|
-
<Canvas>
|
|
318
|
-
@for (sprite of sprites) {
|
|
319
|
-
<Sprite />
|
|
320
|
-
}
|
|
321
|
-
</Canvas>
|
|
322
|
-
`;
|
|
323
|
-
const output = parser.parse(input);
|
|
324
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
325
|
-
`h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
|
|
326
|
-
);
|
|
327
|
-
});
|
|
328
|
-
|
|
329
|
-
test("should compile multiple loops at the same level", () => { // New test for multiple loops
|
|
330
|
-
const input = `
|
|
331
|
-
<Canvas>
|
|
332
|
-
@for (sprite of sprites) {
|
|
333
|
-
<Sprite />
|
|
334
|
-
}
|
|
335
|
-
@for (other of others) {
|
|
336
|
-
<Sprite />
|
|
337
|
-
}
|
|
338
|
-
</Canvas>
|
|
339
|
-
`;
|
|
340
|
-
const output = parser.parse(input);
|
|
341
|
-
expect(output.replace(/\s+/g, "")).toBe(
|
|
342
|
-
`h(Canvas,null,[loop(sprites,(sprite)=>h(Sprite)),loop(others,(other)=>h(Sprite))])`.replace(/\s+/g, "")
|
|
343
|
-
);
|
|
344
|
-
});
|
|
345
|
-
|
|
346
|
-
});
|
package/tsconfig.json
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"module": "ES2020",
|
|
5
|
-
"outDir": "./dist",
|
|
6
|
-
"rootDir": ".",
|
|
7
|
-
"strict": true,
|
|
8
|
-
"sourceMap": true,
|
|
9
|
-
"strictNullChecks": true,
|
|
10
|
-
"strictPropertyInitialization": false,
|
|
11
|
-
"moduleResolution": "node",
|
|
12
|
-
"esModuleInterop": true,
|
|
13
|
-
"removeComments": false,
|
|
14
|
-
"noUnusedParameters": false,
|
|
15
|
-
"noUnusedLocals": false,
|
|
16
|
-
"noImplicitThis": false,
|
|
17
|
-
"noImplicitAny": false,
|
|
18
|
-
"noImplicitReturns": false,
|
|
19
|
-
"declaration": true,
|
|
20
|
-
"experimentalDecorators": true,
|
|
21
|
-
"emitDecoratorMetadata": true,
|
|
22
|
-
"stripInternal": true,
|
|
23
|
-
"skipLibCheck": true,
|
|
24
|
-
"types": ["node"]
|
|
25
|
-
},
|
|
26
|
-
"include": [
|
|
27
|
-
"."
|
|
28
|
-
]
|
|
29
|
-
}
|
package/tsup.config.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from 'tsup'
|
|
2
|
-
|
|
3
|
-
export default defineConfig({
|
|
4
|
-
format: ['esm'],
|
|
5
|
-
target: 'node20',
|
|
6
|
-
splitting: true,
|
|
7
|
-
clean: true,
|
|
8
|
-
shims: false,
|
|
9
|
-
dts: true,
|
|
10
|
-
sourcemap: true,
|
|
11
|
-
entry: ['index.ts'],
|
|
12
|
-
outDir: 'dist',
|
|
13
|
-
external: ['vite', 'acorn', 'peggy', 'typescript'],
|
|
14
|
-
})
|