@canvasengine/compiler 2.0.0-beta.2 → 2.0.0-beta.20

package/tests/compiler.spec.ts

@@ -51,16 +51,106 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Canvas)`);
   });
 
+  describe("Dot notation", () => {
+    test("should compile component with dot notation", () => {
+      const input = `<MyComp.test />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp.test)`);
+    });
+  
+    test("object function call", () => {
+      const input = `<MyComp.test() />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp.test())`);
+    });
+  
+    test("function call with return object", () => {
+      const input = `<MyComp().test />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp().test)`);
+    });
+
+    test("function call with return object and params", () => {
+      const input = `<MyComp().test(x, y) />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp().test(x, y))`);
+    });
+
+    test("function call and params with return object and", () => {
+      const input = `<MyComp(x, y).test />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp(x, y).test)`);
+    });
+  
+    test("function call", () => {
+      const input = `<MyComp() />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp())`);
+    });
+  
+    test("function call and params", () => {
+      const input = `<MyComp(x, y) />`;
+      const output = parser.parse(input);
+      expect(output).toBe(`h(MyComp(x, y))`);
+    });
+  })
+
   test("should compile component with dynamic attribute", () => {
     const input = `<Canvas width={x} />`;
     const output = parser.parse(input);
     expect(output).toBe(`h(Canvas, { width: x })`);
   });
 
+  test("should compile component with spread operator", () => {
+    const input = `<Canvas ...obj />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, obj)`);
+  });
+
+  test("should compile component with spread operator object", () => {
+    const input = `<Canvas ...obj.prop />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, obj.prop)`);
+  });
+
+  test("should compile component with spread operator function", () => {
+    const input = `<Canvas ...fn() />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, fn())`);
+  });
+
+  test("should compile component with spread operator function and params", () => {
+    const input = `<Canvas ...fn(x, y) />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, fn(x, y))`);
+  });
+
+  test("should compile component with dynamic attribute but is not a signal", () => {
+    const input = `<Canvas width={20} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { width: 20 })`);
+  });
+
+
   test("should compile component with object attribute", () => {
     const input = `<Canvas width={ {x: 10, y: 20} } />`;
     const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => ({x: 10, y: 20})) })`);
+    expect(output).toBe(`h(Canvas, { width: ({x: 10, y: 20}) })`);
+  });
+
+  test("should compile component with complex object attribute", () => {
+    const input = `<Sprite 
+        sheet={{
+            definition,
+            playing: "stand",
+            params: {
+                direction: "right"
+            },
+            onFinish
+        }}
+    />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Sprite, { sheet: { definition, playing: "stand", params: { direction: "right" }, onFinish } })`);
   });
 
   test("should compile component with deep object attribute", () => {
@@ -78,7 +168,7 @@ describe("Compiler", () => {
   test("should compile component with deep object attribute but not all transform to signal", () => {
     const input = `<Canvas width={@deep.@value} />`;
     const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => deep.value) })`);
+    expect(output).toBe(`h(Canvas, { width: deep.value })`);
   });
 
   test("should compile component with dynamic object attribute", () => {
@@ -90,7 +180,7 @@ describe("Compiler", () => {
   test("should compile component with array attribute", () => {
     const input = `<Canvas width={ [10, 20] } />`;
     const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => [10, 20]) })`);
+    expect(output).toBe(`h(Canvas, { width: [10, 20] })`);
   });
 
   test("should compile component with dynamic array attribute", () => {
@@ -117,18 +207,24 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Canvas, { width: computed(() => x() * 2 * y()) })`);
   });
 
-  test("should compile component with static numeric attribute", () => {
-    const input = `<Canvas width="10" />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: 10 })`);
-  });
-
   test("should compile component with static string attribute", () => {
     const input = `<Canvas width="val" />`;
     const output = parser.parse(input);
     expect(output).toBe(`h(Canvas, { width: 'val' })`);
   });
 
+  test("should compile component with static string attribute with dash", () => {
+    const input = `<Canvas max-width="val" />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { 'max-width': 'val' })`);
+  });
+
+  test("should compile component with static attribute (with number)", () => {
+    const input = `<Canvas width="10" />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { width: '10' })`);
+  });
+
   test("should compile component with children", () => {
     const input = `
             <Canvas>
@@ -142,6 +238,18 @@ describe("Compiler", () => {
     );
   });
 
+  test("should compile component with multiple children", () => {
+    const input = `<Container>
+        <Container></Container>
+        <Container></Container>
+    </Container>
+        `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(Container,null,[h(Container),h(Container)])`.replace(/\s+/g, "")
+    );
+  });
+
   test("should compile component with multi children", () => {
     const input = `
            <Sprite />
@@ -171,11 +279,52 @@ describe("Compiler", () => {
       expect(output).toBe(`h(Sprite, { click: () => console.log('click') })`);
   });
 
-  // test("should compile component with component attribute", () => {
-  //   const input = `<Canvas child={<Sprite />} />`;
-  //   const output = parser.parse(input);
-  //   expect(output).toBe(`h(Canvas, { child: h(Sprite) })`);
-  // });
+  test("should compile component with component attribute", () => {
+    const input = `<Canvas child={<Sprite />} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: h(Sprite) })`);
+  });
+
+  test("should compile component with function returns component attribute", () => {
+    const input = `<Canvas child={() => <Sprite />} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: () => h(Sprite) })`);
+  });
+
+  test("should compile component with function (with params) returns component attribute", () => {
+    const input = `<Canvas child={(x, y) => <Sprite />} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: (x, y) => h(Sprite) })`);
+  });
+
+  test("should compile component with destructuring function (with params)", () => {
+    const input = `<Canvas child={({ x, y }) => <Sprite />} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: ({x, y}) => h(Sprite) })`);
+  });
+
+  test("should compile component with function returns component attribute and data", () => {
+    const input = `<Canvas child={() => <Text text="Hello" />} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: () => h(Text, { text: 'Hello' }) })`);
+  });
+
+  test("should compile component with function returns component attribute and child", () => {
+    const input = `<Canvas child={() => <Container>
+        <Text text="Hello" />
+    </Container>} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: () => h(Container, null, h(Text, { text: 'Hello' })) })`);
+  });
+
+  test("should compile component with function returns component attribute and children", () => {
+    const input = `<Canvas child={() => <Container>
+        <Text text="Hello 1" />
+        <Text text="Hello 2" />
+    </Container>} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { child: () => h(Container, null, [h(Text, { text: 'Hello 1' }), h(Text, { text: 'Hello 2' })]) })`);
+  });
 });
 
 describe("Loop", () => {
@@ -189,7 +338,7 @@ describe("Loop", () => {
     `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
+      `h(Canvas,null,loop(sprites,sprite=>h(Sprite)))`.replace(/\s+/g, "")
     );
   });
 
@@ -201,7 +350,79 @@ describe("Loop", () => {
     `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `loop(sprites,(sprite)=>h(Sprite))`.replace(/\s+/g, "")
+      `loop(sprites,sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with object", () => {
+    const input = `
+        @for (sprite of sprites.items) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items,sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with deep object", () => {
+    const input = `
+        @for (sprite of sprites.items.items) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items.items,sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with function", () => {
+    const input = `
+        @for (sprite of sprites()) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites(),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with function and params", () => {
+    const input = `
+        @for (sprite of sprites(x, y)) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites(x,y),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with object and function and params", () => {
+    const input = `
+        @for (sprite of sprites.items(x, y)) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items(x,y),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with destructuring", () => {
+    const input = `
+        @for ((sprite, index) of sprites) {
+            <Sprite key={index} />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites,(sprite,index)=>h(Sprite, { key: index }))`.replace(/\s+/g, "")
     );
   });
 
@@ -215,7 +436,7 @@ describe("Loop", () => {
     `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `loop(sprites,(sprite)=>loop(others,(other)=>h(Sprite)))`.replace(
+      `loop(sprites,sprite=>loop(others,other=>h(Sprite)))`.replace(
         /\s+/g,
         ""
       )
@@ -224,6 +445,46 @@ describe("Loop", () => {
 });
 
 describe("Condition", () => {
+  test("should compile condition", () => {
+    const input = `
+            @if (sprite) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(sprite, () => h(Sprite))`);
+  });
+
+  test("should compile negative condition", () => {
+    const input = `
+            @if (!sprite) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite()), () => h(Sprite))`);
+  });
+
+  test("should compile negative condition with multiple condition", () => {
+    const input = `
+            @if (!sprite && other) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite() && other()), () => h(Sprite))`);
+  });
+
+  test("should compile negative condition with multiple condition (or)", () => {
+    const input = `
+            @if (!sprite || other) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite() || other()), () => h(Sprite))`);
+  });
+
   test("should compile condition when sprite is visible", () => {
     const input = `
             @if (sprite.visible) {
@@ -234,6 +495,16 @@ describe("Condition", () => {
     expect(output).toBe(`cond(sprite.visible, () => h(Sprite))`);
   });
 
+  test("should compile condition when function value", () => {
+    const input = `
+            @if (val()) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(val(), () => h(Sprite))`);
+  });
+
   test("should compile condition for multiple sprites", () => {
     const input = `
             @if (sprite) {
@@ -308,7 +579,7 @@ describe("Condition in Loops", () => {
         `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>cond(sprite.visible,()=>h(Sprite))))`.replace(/\s+/g, "")
+      `h(Canvas,null,loop(sprites,sprite=>cond(sprite.visible,()=>h(Sprite))))`.replace(/\s+/g, "")
     );
   });
 
@@ -322,7 +593,7 @@ describe("Condition in Loops", () => {
         `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
+      `h(Canvas,null,loop(sprites,sprite=>h(Sprite)))`.replace(/\s+/g, "")
     );
   });
 
@@ -339,8 +610,282 @@ describe("Condition in Loops", () => {
         `;
     const output = parser.parse(input);
     expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,[loop(sprites,(sprite)=>h(Sprite)),loop(others,(other)=>h(Sprite))])`.replace(/\s+/g, "")
+      `h(Canvas,null,[loop(sprites,sprite=>h(Sprite)),loop(others,other=>h(Sprite))])`.replace(/\s+/g, "")
+    );
+  });
+
+});
+
+describe('Svg', () => {
+  test('should compile svg', () => {
+    const input = `<svg>
+      <path d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
+    </svg>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(Svg, { content: `<svg><path d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/></svg>` })');
+  });
+
+  test('should compile svg with canvas', () => {
+    const input = `<Canvas antialias={true}>
+    <svg height="400" width="450" xmlns="http://www.w3.org/2000/svg"></svg></Canvas>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(Canvas, { antialias: true }, h(Svg, { content: `<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg"></svg>` }))');
+  });
+});
+
+describe('DOM', () => {
+  test('should compile input DOM', () => {
+    const input = `<input type="text" />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "input", attrs: { type: \'text\' } })');
+  });
+
+  test('should compile div DOM', () => {
+    const input = `<div class="container" />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "div", attrs: { class: \'container\' } })');
+  });
+
+  test('should compile button DOM', () => {
+    const input = `<button type="submit" />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "button", attrs: { type: \'submit\' } })');
+  });
+
+  test('should compile button DOM', () => {
+    const input = `<button>Text</button>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "button", textContent: \'Text\' })');
+  });
+
+  test('should compile textarea DOM with dynamic attributes', () => {
+    const input = `<textarea rows={rows} cols={cols} />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "textarea", attrs: { rows: rows, cols: cols } })');
+  });
+
+  test('should not transform Canvas to DOM', () => {
+    const input = `<Canvas width={800} />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(Canvas, { width: 800 })');
+  });
+
+  test('should not transform Sprite to DOM', () => {
+    const input = `<Sprite image="test.png" />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(Sprite, { image: \'test.png\' })');
+  });
+
+  // Tests avec imbrications DOM
+  test('should compile nested DOM elements', () => {
+    const input = `<div class="container">
+      <p>Hello World</p>
+    </div>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "div", attrs: { class: \'container\' } }, h(DOMContainer, { element: "p", textContent: \'Hello World\' }))');
+  });
+
+  test('should compile deeply nested DOM elements', () => {
+    const input = `<div class="wrapper">
+      <section>
+        <h1>Title</h1>
+        <p>Content</p>
+      </section>
+    </div>`;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "div", attrs: { class: 'wrapper' } }, h(DOMContainer, { element: "section" }, [h(DOMContainer, { element: "h1", textContent: 'Title' }), h(DOMContainer, { element: "p", textContent: 'Content' })]))`.replace(/\s+/g, "")
     );
   });
 
+  test('should compile DOM with multiple children', () => {
+    const input = `<ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+    </ul>`;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "ul" }, [h(DOMContainer, { element: "li", textContent: 'Item 1' }), h(DOMContainer, { element: "li", textContent: 'Item 2' }), h(DOMContainer, { element: "li", textContent: 'Item 3' })])`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile mixed DOM and framework components', () => {
+    const input = `<div class="game-container">
+      <Canvas width={800} height={600} />
+      <div class="ui">
+        <button>Start Game</button>
+      </div>
+    </div>`;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "div", attrs: { class: 'game-container' } }, [h(Canvas, { width: 800, height: 600 }), h(DOMContainer, { element: "div", attrs: { class: 'ui' } }, h(DOMContainer, { element: "button", textContent: 'Start Game' }))])`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile DOM with attributes and text content', () => {
+    const input = `<button class="btn primary" type="submit">Submit Form</button>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "button", attrs: { class: \'btn primary\', type: \'submit\' }, textContent: \'Submit Form\' })');
+  });
+});
+
+describe('DOM with special attributes', () => {
+  test('should compile DOM with special attributes', () => {
+    const input = `<input type="password" x={100} y={100} />`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMContainer, { element: "input", attrs: { type: \'password\' }, x: 100, y: 100 })');
+  });
 });
+
+describe('DOM with Control Structures', () => {
+  test('should compile @for loop with DOM elements', () => {
+    const input = `
+      @for (item of items) {
+        <li>{item.name}</li>
+      }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(items, item => h(DOMContainer, { element: "li", textContent: computed(() => item().name()) }))`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile @for loop with nested DOM structure', () => {
+    const input = `
+      <ul class="menu">
+        @for (item of menuItems) {
+          <li class="menu-item">
+            <a href={item.url}>{item.title}</a>
+          </li>
+        }
+      </ul>
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "ul", attrs: { class: 'menu' } }, loop(menuItems, item => h(DOMContainer, { element: "li", attrs: { class: 'menu-item' } }, h(DOMContainer, { element: "a", attrs: { href: computed(() => item().url()) }, textContent: computed(() => item().title()) }))))`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile @if condition with DOM elements', () => {
+    const input = `
+      @if (showMessage) {
+        <div class="alert">
+          <p>Important message!</p>
+        </div>
+      }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `cond(showMessage, () => h(DOMContainer, { element: "div", attrs: { class: 'alert' } }, h(DOMContainer, { element: "p", textContent: 'Important message!' })))`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile @if condition with simple DOM element', () => {
+    const input = `
+      @if (isVisible) {
+        <button>Click me</button>
+      }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `cond(isVisible, () => h(DOMContainer, { element: "button", textContent: 'Click me' }))`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile nested @for and @if with DOM', () => {
+    const input = `
+      <div class="container">
+        @for (section of sections) {
+          @if (section.visible) {
+            <section class="content">
+              <h2>{section.title}</h2>
+              <div class="items">
+                @for (item of section.items) {
+                  <div class="item">{item.name}</div>
+                }
+              </div>
+            </section>
+          }
+        }
+      </div>
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "div", attrs: { class: 'container' } }, loop(sections, section => cond(section.visible, () => h(DOMContainer, { element: "section", attrs: { class: 'content' } }, [h(DOMContainer, { element: "h2", textContent: computed(() => section().title()) }), h(DOMContainer, { element: "div", attrs: { class: 'items' } }, loop(section.items, item => h(DOMContainer, { element: "div", attrs: { class: 'item' }, textContent: computed(() => item().name()) })))]))))`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile @for with DOM table structure', () => {
+    const input = `
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Age</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (user of users) {
+            <tr>
+              <td>{user.name}</td>
+              <td>{user.age}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "table" }, [h(DOMContainer, { element: "thead" }, h(DOMContainer, { element: "tr" }, [h(DOMContainer, { element: "th", textContent: 'Name' }), h(DOMContainer, { element: "th", textContent: 'Age' })])), h(DOMContainer, { element: "tbody" }, loop(users, user => h(DOMContainer, { element: "tr" }, [h(DOMContainer, { element: "td", textContent: computed(() => user().name()) }), h(DOMContainer, { element: "td", textContent: computed(() => user().age()) })])))])`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile @if with multiple DOM conditions', () => {
+    const input = `
+      <div class="status">
+        @if (isLoading) {
+          <div class="spinner">Loading...</div>
+        }
+        @if (hasError) {
+          <div class="error">Error occurred!</div>
+        }
+        @if (isSuccess) {
+          <div class="success">Success!</div>
+        }
+      </div>
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "div", attrs: { class: 'status' } }, [cond(isLoading, () => h(DOMContainer, { element: "div", attrs: { class: 'spinner' }, textContent: 'Loading...' })), cond(hasError, () => h(DOMContainer, { element: "div", attrs: { class: 'error' }, textContent: 'Error occurred!' })), cond(isSuccess, () => h(DOMContainer, { element: "div", attrs: { class: 'success' }, textContent: 'Success!' }))])`.replace(/\s+/g, "")
+    );
+  });
+
+  test('should compile mixed Canvas and DOM with control structures', () => {
+    const input = `
+      <div class="game-wrapper">
+        <Canvas width={800} height={600}>
+          @for (sprite of sprites) {
+            <Sprite x={sprite.x} y={sprite.y} />
+          }
+        </Canvas>
+        <div class="ui-overlay">
+          @if (showScore) {
+            <div class="score">Score: {score}</div>
+          }
+          @if (showMenu) {
+            <div class="menu">
+              @for (option of menuOptions) {
+                <button class="menu-btn">{option.label}</button>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `h(DOMContainer, { element: "div", attrs: { class: 'game-wrapper' } }, [h(Canvas, { width: 800, height: 600 }, loop(sprites, sprite => h(Sprite, { x: computed(() => sprite().x()), y: computed(() => sprite().y()) }))), h(DOMContainer, { element: "div", attrs: { class: 'ui-overlay' } }, [cond(showScore, () => h(DOMContainer, { element: "div", attrs: { class: 'score' }, textContent: computed(() => 'Score: ' + computed(() => score())) })), cond(showMenu, () => h(DOMContainer, { element: "div", attrs: { class: 'menu' } }, loop(menuOptions, option => h(DOMContainer, { element: "button", attrs: { class: 'menu-btn' }, textContent: computed(() => option().label()) }))))])])`.replace(/\s+/g, "")
+    );
+  });
+});