@canvasengine/compiler 2.0.0-beta.5 → 2.0.0-beta.7

package/grammar.pegjs

@@ -72,15 +72,17 @@ eventHandler
 
 dynamicAttribute
   = attributeName:attributeName _ "=" _ "{" _ attributeValue:attributeValue _ "}" {
-      if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
+      if (attributeValue.startsWith('h(') || attributeValue.includes('=>')) {
+        return `${attributeName}: ${attributeValue}`;
+      } else if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
         return `${attributeName}: ${attributeValue}`;
       } else {
-        let foundSignal = false
+        let foundSignal = false;
         const computedValue = attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
           if (match.startsWith('@')) {
             return match.substring(1);
           }
-          foundSignal = true
+          foundSignal = true;
           return `${match}()`;
         });
         if (foundSignal) {
@@ -94,7 +96,9 @@ dynamicAttribute
     }
 
 attributeValue
-  = $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
+  = element
+  / functionWithElement
+  / $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
     const t = text().trim()
     if (t.startsWith("{") && t.endsWith("}")) {
       return `(${t})`;
@@ -102,6 +106,25 @@ attributeValue
     return t
   }
 
+functionWithElement
+  = "(" _ params:functionParams? _ ")" _ "=>" _ elem:element {
+      return `${params ? `(${params}) =>` : '() =>'} ${elem}`;
+    }
+
+functionParams
+  = destructuredParams
+  / simpleParams
+
+destructuredParams
+  = "{" _ param:identifier rest:(_ "," _ identifier)* _ "}" {
+      return `{${[param].concat(rest.map(r => r[3])).join(', ')}}`;
+    }
+
+simpleParams
+  = param:identifier rest:(_ "," _ identifier)* {
+      return [param].concat(rest.map(r => r[3])).join(', ');
+    }
+
 staticAttribute
   = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
       return `${attributeName}: ${attributeValue}`;
@@ -139,8 +162,13 @@ textElement
     }
 
 forLoop
-  = _ "@for" _ "(" _ variableName:identifier _ "of" _ iterable:identifier _ ")" _ "{" _ content:content _ "}" _ {
-      return `loop(${iterable}, (${variableName}) => ${content})`;
+  = _ "@for" _ "(" _ variableName:(tupleDestructuring / identifier) _ "of" _ iterable:identifier _ ")" _ "{" _ content:content _ "}" _ {
+      return `loop(${iterable}, ${variableName} => ${content})`;
+    }
+
+tupleDestructuring
+  = "(" _ first:identifier _ "," _ second:identifier _ ")" {
+      return `(${first}, ${second})`;
     }
 
 ifCondition
@@ -164,7 +192,30 @@ iterable
   = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
 
 condition
-  = $([^)]*) { return text().trim(); }
+  = functionCall
+  / $([^)]*) { return text().trim(); }
+
+functionCall
+  = name:identifier "(" args:functionArgs? ")" {
+    return `${name}(${args || ''})`;
+  }
+
+functionArgs
+  = arg:functionArg rest:("," _ functionArg)* {
+    return [arg].concat(rest.map(r => r[2])).join(', ');
+  }
+
+functionArg
+  = _ value:(identifier / number / string) _ {
+    return value;
+  }
+
+number
+  = [0-9]+ ("." [0-9]+)? { return text(); }
+
+string
+  = '"' chars:[^"]* '"' { return text(); }
+  / "'" chars:[^']* "'" { return text(); }
 
 eventAction
   = [^"]* { return text(); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvasengine/compiler",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.7",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/tests/compiler.spec.ts

@@ -177,11 +177,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", () => {
@@ -195,7 +236,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, "")
     );
   });
 
@@ -207,7 +248,19 @@ 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 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, "")
     );
   });
 
@@ -221,7 +274,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,
         ""
       )
@@ -240,6 +293,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) {
@@ -314,7 +377,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, "")
     );
   });
 
@@ -328,7 +391,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, "")
     );
   });
 
@@ -345,7 +408,7 @@ 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, "")
     );
   });