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

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,21 +89,44 @@ attribute
   = staticAttribute
   / dynamicAttribute
   / eventHandler
+  / spreadAttribute
+
+spreadAttribute
+  = "..." 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) => {
@@ -86,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
@@ -127,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
@@ -177,7 +231,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.13",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/tests/compiler.spec.ts

@@ -51,12 +51,42 @@ 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 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);
@@ -129,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);