@canvasengine/compiler 2.0.0-beta.27 → 2.0.0-beta.28

package/grammar.pegjs

@@ -248,8 +248,49 @@ simpleTextPart "simple text part"
     }
 
 simpleDynamicPart "simple dynamic part"
-  = "{" _ expr:attributeValue _ "}" {
-      // Handle dynamic expressions like {item.name} or {@text}
+  = "{{" _ expr:attributeValue _ "}}" {
+      // Handle double brace expressions like {{ object.x }} or {{ @object.x }} or {{ @object.@x }}
+      if (expr.trim().match(/^(@?[a-zA-Z_][a-zA-Z0-9_]*)(\.@?[a-zA-Z_][a-zA-Z0-9_]*)*$/)) {
+        let foundSignal = false;
+        let hasLiterals = false;
+        
+        // Split by dots to handle each part separately
+        const parts = expr.split('.');
+        const allLiterals = parts.every(part => part.trim().startsWith('@'));
+        
+        let computedValue;
+        
+        if (allLiterals) {
+          // All parts are literals, just remove @ prefixes
+          computedValue = parts.map(part => part.replace('@', '')).join('.');
+          hasLiterals = true;
+        } else {
+          // Transform each part individually
+          computedValue = parts.map(part => {
+            const trimmedPart = part.trim();
+            if (trimmedPart.startsWith('@')) {
+              hasLiterals = true;
+              return trimmedPart.substring(1); // Remove @ prefix for literals
+            } else {
+              // Don't transform keywords
+              if (['true', 'false', 'null'].includes(trimmedPart)) {
+                return trimmedPart;
+              }
+              foundSignal = true;
+              return `${trimmedPart}()`;
+            }
+          }).join('.');
+        }
+        
+        if (foundSignal && !allLiterals) {
+          return `computed(() => ${computedValue})`;
+        }
+        return computedValue;
+      }
+      return expr;
+    }
+  / "{" _ expr:attributeValue _ "}" {
+      // Handle single brace expressions like {item.name} or {@text}
       if (expr.trim().match(/^@?[a-zA-Z_][a-zA-Z0-9_.]*$/)) {
         let foundSignal = false;
         const computedValue = expr.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
@@ -403,9 +444,43 @@ dynamicAttribute "dynamic attribute"
           return `${formattedName}: ${attributeValue}`;
         }
         
-        // If it's a template string, preserve it as is
+        // If it's a template string, transform expressions inside ${}
       if (attributeValue.trim().startsWith('`') && attributeValue.trim().endsWith('`')) {
-        return `${formattedName}: ${attributeValue}`;
+        // Transform expressions inside ${} in template strings
+        let transformedTemplate = attributeValue;
+        
+        // Find and replace ${expression} patterns
+        let startIndex = 0;
+        while (true) {
+          const dollarIndex = transformedTemplate.indexOf('${', startIndex);
+          if (dollarIndex === -1) break;
+          
+          const braceIndex = transformedTemplate.indexOf('}', dollarIndex);
+          if (braceIndex === -1) break;
+          
+          const expr = transformedTemplate.substring(dollarIndex + 2, braceIndex);
+          const trimmedExpr = expr.trim();
+          
+          let replacement;
+          if (trimmedExpr.startsWith('@')) {
+            // Remove @ prefix for literals
+            replacement = '${' + trimmedExpr.substring(1) + '}';
+          } else if (trimmedExpr.match(/^[a-zA-Z_][a-zA-Z0-9_.]*$/)) {
+            // Transform identifiers to signals
+            replacement = '${' + trimmedExpr + '()}';
+          } else {
+            // Keep as is for complex expressions
+            replacement = '${' + expr + '}';
+          }
+          
+          transformedTemplate = transformedTemplate.substring(0, dollarIndex) + 
+                               replacement + 
+                               transformedTemplate.substring(braceIndex + 1);
+          
+          startIndex = dollarIndex + replacement.length;
+        }
+        
+        return formattedName + ': ' + transformedTemplate;
       }
       
       // Handle other types of values
@@ -414,31 +489,51 @@ dynamicAttribute "dynamic attribute"
       } else if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
         return `${formattedName}: ${attributeValue}`;
       } else {
+        // Check if this is an object or array literal
+        const isObjectLiteral = attributeValue.trim().startsWith('{ ') && attributeValue.trim().endsWith(' }');
+        const isArrayLiteral = attributeValue.trim().startsWith('[') && attributeValue.trim().endsWith(']');
+        
         let foundSignal = false;
         let hasLiterals = false;
-        const computedValue = attributeValue.replace(/@?([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*:)/g, (match, p1, offset) => {
-          // Don't transform keywords, numbers, or if we're inside quotes
-          if (['true', 'false', 'null'].includes(p1) || /^\d+(\.\d+)?$/.test(p1)) {
-            return match;
-          }
-          
-          // Check if we're inside a string literal
-          const beforeMatch = attributeValue.substring(0, offset);
-          const singleQuotesBefore = (beforeMatch.match(/'/g) || []).length;
-          const doubleQuotesBefore = (beforeMatch.match(/"/g) || []).length;
-          
-          // If we're inside quotes, don't transform
-          if (singleQuotesBefore % 2 === 1 || doubleQuotesBefore % 2 === 1) {
-            return match;
-          }
+        let computedValue = attributeValue;
+        
+        // For simple object and array literals (like {x: x, y: 20} or [x, 20]), 
+        // don't use computed() at all and don't transform identifiers
+        if ((isObjectLiteral || isArrayLiteral) && !attributeValue.includes('()')) {
+          // Don't transform anything, return as is
+          foundSignal = false;
+          computedValue = attributeValue;
+        } else {
+          // Apply signal transformation for other values
+          computedValue = attributeValue.replace(/@?([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*:)/g, (match, p1, offset) => {
+            // Don't transform keywords, numbers, or if we're inside quotes
+            if (['true', 'false', 'null'].includes(p1) || /^\d+(\.\d+)?$/.test(p1)) {
+              return match;
+            }
+            
+            // Check if we're inside a string literal
+            const beforeMatch = attributeValue.substring(0, offset);
+            const singleQuotesBefore = (beforeMatch.match(/'/g) || []).length;
+            const doubleQuotesBefore = (beforeMatch.match(/"/g) || []).length;
+            
+            // If we're inside quotes, don't transform
+            if (singleQuotesBefore % 2 === 1 || doubleQuotesBefore % 2 === 1) {
+              return match;
+            }
+            
+            if (match.startsWith('@')) {
+              hasLiterals = true;
+              return p1; // Remove @ prefix
+            }
+            foundSignal = true;
+            return `${p1}()`;
+          });
           
-          if (match.startsWith('@')) {
-            hasLiterals = true;
-            return p1; // Remove @ prefix
+          // Check if any values already contain signals (ending with ())
+          if (attributeValue.includes('()')) {
+            foundSignal = true;
           }
-          foundSignal = true;
-          return `${p1}()`;
-        });
+        }
         
         if (foundSignal) {
           // For objects, wrap in parentheses
@@ -455,12 +550,7 @@ dynamicAttribute "dynamic attribute"
           return `${formattedName}: ${computedValue}`;
         }
         
-        // For static objects, add parentheses if it's an object
-        if (attributeValue.trim().startsWith('{') && attributeValue.trim().endsWith('}')) {
-          // Remove spaces for objects in parentheses
-          const cleanedObject = computedValue.replace(/{ /g, '{').replace(/ }/g, '}');
-          return `${formattedName}: (${cleanedObject})`;
-        }
+        // For static objects and arrays, return as is without parentheses
         return `${formattedName}: ${computedValue}`;
       }
     }
@@ -474,11 +564,7 @@ attributeValue "attribute value"
   / functionWithElement
   / objectLiteral
   / $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
-    const t = text().trim()
-    if (t.startsWith("{") && t.endsWith("}")) {
-      return `(${t})`;
-    }
-    return t
+    return text().trim()
   }
 
 objectLiteral "object literal"

package/package.json

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

package/tests/compiler.spec.ts

@@ -286,22 +286,23 @@ describe("Compiler", () => {
     const output = parser.parse(input);
     expect(output).toBe(`cond(sprite.visible, () => h(Sprite), [sprite.loading, () => h(Text, { text: 'Loading...' })], () => h(Text, { text: 'Not available' }))`);
   });
-  // test("should compile component with templating string", () => {
-  //   const input = `<Canvas width={\`direction: \${direction}\`} />`;
-  //   const output = parser.parse(input);
-  //   expect(output).toBe(`h(Canvas, { width: \`direction: \${direction()}\` })`);
-  // });
-
-  // test("should compile component with templating string with @ (literal)", () => {
-  //   const input = `<Canvas width={\`direction: \${@direction}\`} />`;
-  //   const output = parser.parse(input);
-  //   expect(output).toBe(`h(Canvas, { width: \`direction: \${direction}\` })`);
-  // });
+  
+  test("should compile component with templating string", () => {
+    const input = `<Canvas width={\`direction: \${direction}\`} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { width: \`direction: \${direction()}\` })`);
+  });
+
+  test("should compile component with templating string with @ (literal)", () => {
+    const input = `<Canvas width={\`direction: \${@direction}\`} />`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, { width: \`direction: \${direction}\` })`);
+  });
 
   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: ({x: 10, y: 20}) })`);
+    expect(output).toBe(`h(Canvas, { width: { x: 10, y: 20 } })`);
   });
 
   test("should compile component with complex object attribute", () => {
@@ -343,6 +344,24 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Button, { style: { backgroundColor: { normal: "#6c757d", hover: "#5a6268", pressed: "#545b62" }, text: { fontSize: 16, color: "#ffffff" } } })`);
   });
 
+  test('should compile component with deep object attribute and shorthand', () => {
+    const input = `<Canvas>
+  <Container>
+    <Sprite x y sheet={{
+      definition,
+      playing: animationPlaying,
+      params: {
+          direction
+      }
+    }}
+    controls />
+  </Container>
+</Canvas>
+`;
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, null, h(Container, null, h(Sprite, { x, y, sheet: { definition, playing: animationPlaying, params: { direction } }, controls })))`);
+  });
+
   test("should compile component with deep object attribute but not transform to signal", () => {
     const input = `<Canvas width={@deep.value} />`;
     const output = parser.parse(input);
@@ -358,7 +377,7 @@ describe("Compiler", () => {
   test("should compile component with dynamic object attribute", () => {
     const input = `<Canvas width={ {x: x, y: 20} } />`;
     const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => ({x: x(), y: 20})) })`);
+    expect(output).toBe(`h(Canvas, { width: { x: x, y: 20 } })`);
   });
 
   test("should compile component with array attribute", () => {
@@ -370,7 +389,7 @@ describe("Compiler", () => {
   test("should compile component with dynamic array attribute", () => {
     const input = `<Canvas width={ [x, 20] } />`;
     const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => [x(), 20]) })`);
+    expect(output).toBe(`h(Canvas, { width: [x, 20] })`);
   });
 
   test("should compile component with standalone dynamic attribute", () => {
@@ -957,6 +976,24 @@ describe('DOM with special attributes', () => {
     const output = parser.parse(input);
     expect(output).toBe('h(DOMElement, { element: "input", attrs: { type: \'password\' }, x: 100, y: 100 })');
   });
+
+  test('should compile DOM with text object', () => {
+    const input = `<p>{{ object.x }}</p>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMElement, { element: "p", textContent: computed(() => object().x()) })');
+  });
+
+  test('should compile DOM with text object with @', () => {
+    const input = `<p>{{ @object.x }}</p>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMElement, { element: "p", textContent: computed(() => object.x()) })');
+  });
+
+  test('should compile DOM with text object with literal ', () => {
+    const input = `<p>{{ @object.@x }}</p>`;
+    const output = parser.parse(input);
+    expect(output).toBe('h(DOMElement, { element: "p", textContent: object.x })');
+  });
 });
 
 describe('DOM with Control Structures', () => {