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

package/grammar.pegjs

@@ -92,24 +92,41 @@ attribute
   / spreadAttribute
 
 spreadAttribute
-  = "..." objectName:identifier {
-      return "..." + objectName;
+  = "..." expr:(functionCallExpr / dotNotation) {
+      return "..." + expr;
+    }
+
+functionCallExpr
+  = name:dotNotation "(" args:functionArgs? ")" {
+      return `${name}(${args || ''})`;
+    }
+
+dotNotation
+  = first:identifier rest:("." identifier)* {
+      return text();
     }
 
 eventHandler
   = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
-      return `${eventName}: ${handlerName}`;
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(eventName);
+      const formattedName = needsQuotes ? `'${eventName}'` : eventName;
+      return `${formattedName}: ${handlerName}`;
     }
      / "@" eventName:attributeName _ {
-      return eventName;
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(eventName);
+      return needsQuotes ? `'${eventName}'` : eventName;
     }
 
 dynamicAttribute
   = attributeName:attributeName _ "=" _ "{" _ attributeValue:attributeValue _ "}" {
+      // Check if attributeName needs to be quoted (contains dash or other invalid JS identifier chars)
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
+      
       if (attributeValue.startsWith('h(') || attributeValue.includes('=>')) {
-        return `${attributeName}: ${attributeValue}`;
+        return `${formattedName}: ${attributeValue}`;
       } else if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
-        return `${attributeName}: ${attributeValue}`;
+        return `${formattedName}: ${attributeValue}`;
       } else {
         let foundSignal = false;
         const computedValue = attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
@@ -120,13 +137,14 @@ dynamicAttribute
           return `${match}()`;
         });
         if (foundSignal) {
-          return `${attributeName}: computed(() => ${computedValue})`;
+          return `${formattedName}: computed(() => ${computedValue})`;
         }
-        return `${attributeName}: ${computedValue}`;
+        return `${formattedName}: ${computedValue}`;
       }
     }
   / attributeName:attributeName _ {
-      return attributeName;
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      return needsQuotes ? `'${attributeName}'` : attributeName;
     }
 
 attributeValue
@@ -161,7 +179,9 @@ simpleParams
 
 staticAttribute
   = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
-      return `${attributeName}: ${attributeValue}`;
+      const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
+      const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
+      return `${formattedName}: ${attributeValue}`;
     }
 
 eventAttribute

package/package.json

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

package/tests/compiler.spec.ts

@@ -69,6 +69,24 @@ describe("Compiler", () => {
     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);
@@ -141,6 +159,12 @@ describe("Compiler", () => {
     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);