@canvasengine/compiler 2.0.0-beta.11 → 2.0.0-beta.12

package/grammar.pegjs

@@ -5,6 +5,34 @@
       `at line ${start.line}, column ${start.column} to line ${end.line}, column ${end.column}`;
     throw new Error(errorMessage);
   }
+
+  function formatAttributes(attributes) {
+    if (attributes.length === 0) {
+      return null;
+    }
+  
+    // Check if there's exactly one attribute and it's a spread attribute
+    if (attributes.length === 1 && attributes[0].startsWith('...')) {
+      // Return the identifier directly, removing the '...'
+      return attributes[0].substring(3);
+    }
+  
+    // Otherwise, format as an object literal
+    const formattedAttrs = attributes.map(attr => {
+      // If it's a spread attribute, keep it as is
+      if (attr.startsWith('...')) {
+        return attr;
+      }
+      // If it's a standalone attribute (doesn't contain ':'), format as shorthand property 'name'
+      if (!attr.includes(':')) {
+        return attr; // JS object literal shorthand
+      }
+      // Otherwise (key: value), keep it as is
+      return attr;
+    });
+  
+    return `{ ${formattedAttrs.join(', ')} }`;
+  }
 }
 
 start
@@ -24,8 +52,8 @@ element
 
 selfClosingElement
   = _ "<" _ tagName:tagName _ attributes:attributes _ "/>" _ {
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
-      return attrs ? `h(${tagName}, ${attrs})` : `h(${tagName})`;
+      const attrsString = formatAttributes(attributes);
+      return attrsString ? `h(${tagName}, ${attrsString})` : `h(${tagName})`;
     }
 
 openCloseElement
@@ -33,12 +61,12 @@ openCloseElement
       if (tagName !== closingTagName) {
         error("Mismatched opening and closing tags");
       }
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
+      const attrsString = formatAttributes(attributes);
       const children = content ? content : null;
-      if (attrs && children) {
-        return `h(${tagName}, ${attrs}, ${children})`;
-      } else if (attrs) {
-        return `h(${tagName}, ${attrs})`;
+      if (attrsString && children) {
+        return `h(${tagName}, ${attrsString}, ${children})`;
+      } else if (attrsString) {
+        return `h(${tagName}, ${attrsString})`;
       } else if (children) {
         return `h(${tagName}, null, ${children})`;
       } else {
@@ -61,6 +89,12 @@ attribute
   = staticAttribute
   / dynamicAttribute
   / eventHandler
+  / spreadAttribute
+
+spreadAttribute
+  = "..." objectName:identifier {
+      return "..." + objectName;
+    }
 
 eventHandler
   = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
@@ -177,7 +211,9 @@ ifCondition
     }
 
 tagName
-  = [a-zA-Z][a-zA-Z0-9]* { return text(); }
+  = segments:([a-zA-Z][a-zA-Z0-9]* ("." [a-zA-Z][a-zA-Z0-9]*)*) { 
+    return text();
+  }
 
 attributeName
   = [a-zA-Z][a-zA-Z0-9-]* { return text(); }

package/package.json

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

package/tests/compiler.spec.ts

@@ -51,12 +51,24 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Canvas)`);
   });
 
+  test("should compile component with dot notation", () => {
+    const input = `<MyComp.test />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(MyComp.test)`);
+  });
+
   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 dynamic attribute but is not a signal", () => {
     const input = `<Canvas width={20} />`;
     const output = parser.parse(input);