@canvasengine/compiler 2.0.0-beta.15 → 2.0.0-beta.17

package/dist/index.js

@@ -8,6 +8,20 @@ import * as ts from "typescript";
 import { fileURLToPath } from "url";
 var { generate } = pkg;
 var DEV_SRC = "../../src";
+function showErrorMessage(template, error) {
+  if (!error.location) {
+    return `Syntax error: ${error.message}`;
+  }
+  const lines = template.split("\n");
+  const { line, column } = error.location.start;
+  const errorLine = lines[line - 1] || "";
+  const pointer = " ".repeat(column - 1) + "^";
+  return `Syntax error at line ${line}, column ${column}: ${error.message}
+
+${errorLine}
+${pointer}
+`;
+}
 function canvasengine() {
   const filter = createFilter("**/*.ce");
   const __filename = fileURLToPath(import.meta.url);
@@ -46,7 +60,14 @@ function canvasengine() {
       template = template.replace(/<svg>([\s\S]*?)<\/svg>/g, (match, content) => {
         return `<Svg content="${content.trim()}" />`;
       });
-      const parsedTemplate = parser.parse(template);
+      let parsedTemplate;
+      try {
+        parsedTemplate = parser.parse(template);
+      } catch (error) {
+        const errorMsg = showErrorMessage(template, error);
+        throw new Error(`Error parsing template in file ${id}:
+${errorMsg}`);
+      }
       scriptContent += FLAG_COMMENT + parsedTemplate;
       let transpiledCode = ts.transpileModule(scriptContent, {
         compilerOptions: {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../index.ts"],"sourcesContent":["import { createFilter } from \"vite\";\nimport { parse } from \"acorn\";\nimport fs from \"fs\";\nimport pkg from \"peggy\";\nimport path from \"path\";\nimport * as ts from \"typescript\";\nimport { fileURLToPath } from 'url';\n\nconst { generate } = pkg;\n\nconst DEV_SRC = \"../../src\"\n\nexport default function canvasengine() {\n  const filter = createFilter(\"**/*.ce\");\n\n  // Convert import.meta.url to a file path\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n\n  const grammar = fs.readFileSync(\n    path.join(__dirname, \"grammar.pegjs\").replace(\"dist/grammar.pegjs\", \"grammar.pegjs\"), \n  \"utf8\");\n  const parser = generate(grammar);\n  const isDev = process.env.NODE_ENV === \"dev\";\n  const FLAG_COMMENT = \"/*--[TPL]--*/\";\n\n  const PRIMITIVE_COMPONENTS = [\n    \"Canvas\",\n    \"Sprite\",\n    \"Text\",\n    \"Viewport\",\n    \"Graphics\",\n    \"Container\",\n    \"ImageMap\",\n    \"NineSliceSprite\",\n    \"Rect\",\n    \"Circle\",\n    \"Ellipse\",\n    \"Triangle\",\n    \"TilingSprite\",\n    \"svg\",\n    \"Video\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Extract the script content\n      const scriptMatch = code.match(/<script>([\\s\\S]*?)<\\/script>/);\n      let scriptContent = scriptMatch ? scriptMatch[1].trim() : \"\";\n      \n      // Transform SVG tags to Svg components\n      let template = code.replace(/<script>[\\s\\S]*?<\\/script>/, \"\")\n        .replace(/^\\s+|\\s+$/g, '');\n      \n      // Add SVG transformation\n      template = template.replace(/<svg>([\\s\\S]*?)<\\/svg>/g, (match, content) => {\n        return `<Svg content=\"${content.trim()}\" />`;\n      });\n      \n      const parsedTemplate = parser.parse(template);\n\n      // trick to avoid typescript remove imports in scriptContent\n      scriptContent += FLAG_COMMENT + parsedTemplate\n\n      let transpiledCode = ts.transpileModule(scriptContent, {\n        compilerOptions: {\n          module: ts.ModuleKind.Preserve,\n        },\n      }).outputText;\n\n      // remove code after /*---*/\n      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]\n\n      // Use Acorn to parse the script content\n      const parsed = parse(transpiledCode, {\n        sourceType: \"module\",\n        ecmaVersion: 2020,\n      });\n\n      // Extract imports\n      const imports = parsed.body.filter(\n        (node) => node.type === \"ImportDeclaration\"\n      );\n\n      // Extract non-import statements from scriptContent\n      const nonImportCode = parsed.body\n        .filter((node) => node.type !== \"ImportDeclaration\")\n        .map((node) => transpiledCode.slice(node.start, node.end))\n        .join(\"\\n\");\n\n      let importsCode = imports\n        .map((imp) => {\n          let importCode = transpiledCode.slice(imp.start, imp.end);\n          if (isDev && importCode.includes(\"from 'canvasengine'\")) {\n            importCode = importCode.replace(\n              \"from 'canvasengine'\",\n              `from '${DEV_SRC}'`\n            );\n          }\n          return importCode;\n        })\n        .join(\"\\n\");\n\n      // Define an array for required imports\n      const requiredImports = [\"h\", \"computed\", \"cond\", \"loop\"];\n\n      // Check for missing imports\n      const missingImports = requiredImports.filter(\n        (importName) =>\n          !imports.some(\n            (imp) =>\n              imp.specifiers &&\n              imp.specifiers.some(\n                (spec) =>\n                  spec.type === \"ImportSpecifier\" &&\n                  spec.imported && \n                  'name' in spec.imported &&\n                  spec.imported.name === importName\n              )\n          )\n      );\n\n      // Add missing imports\n      if (missingImports.length > 0) {\n        const additionalImportCode = `import { ${missingImports.join(\n          \", \"\n        )} } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"};`;\n        importsCode = `${additionalImportCode}\\n${importsCode}`;\n      }\n\n      // Check for primitive components in parsedTemplate\n      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>\n        parsedTemplate.includes(`h(${component}`)\n      );\n\n      // Add missing imports for primitive components\n      primitiveImports.forEach((component) => {\n        const importStatement = `import { ${component} } from ${\n          isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"\n        };`;\n        if (!importsCode.includes(importStatement)) {\n          importsCode = `${importStatement}\\n${importsCode}`;\n        }\n      });\n\n      // Generate the output\n      const output = String.raw`\n      ${importsCode}\n      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"}\n\n      export default function component($$props) {\n        const $props = useProps($$props)\n        const defineProps = useDefineProps($$props)\n        ${nonImportCode}\n        let $this = ${parsedTemplate}\n        return $this\n      }\n      `;\n\n      return {\n        code: output,\n        map: null,\n      };\n    },\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../index.ts"],"sourcesContent":["import { createFilter } from \"vite\";\nimport { parse } from \"acorn\";\nimport fs from \"fs\";\nimport pkg from \"peggy\";\nimport path from \"path\";\nimport * as ts from \"typescript\";\nimport { fileURLToPath } from 'url';\n\nconst { generate } = pkg;\n\nconst DEV_SRC = \"../../src\"\n\n/**\n * Formats a syntax error message with visual pointer to the error location\n * \n * @param {string} template - The template content that failed to parse\n * @param {object} error - The error object with location information\n * @returns {string} - Formatted error message with a visual pointer\n * \n * @example\n * ```\n * const errorMessage = showErrorMessage(\"<Canvas>test(d)</Canvas>\", syntaxError);\n * // Returns a formatted error message with an arrow pointing to 'd'\n * ```\n */\nfunction showErrorMessage(template: string, error: any): string {\n  if (!error.location) {\n    return `Syntax error: ${error.message}`;\n  }\n\n  const lines = template.split('\\n');\n  const { line, column } = error.location.start;\n  const errorLine = lines[line - 1] || '';\n  \n  // Create a visual pointer with an arrow\n  const pointer = ' '.repeat(column - 1) + '^';\n  \n  return `Syntax error at line ${line}, column ${column}: ${error.message}\\n\\n` +\n         `${errorLine}\\n${pointer}\\n`;\n}\n\nexport default function canvasengine() {\n  const filter = createFilter(\"**/*.ce\");\n\n  // Convert import.meta.url to a file path\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n\n  const grammar = fs.readFileSync(\n    path.join(__dirname, \"grammar.pegjs\").replace(\"dist/grammar.pegjs\", \"grammar.pegjs\"), \n  \"utf8\");\n  const parser = generate(grammar);\n  const isDev = process.env.NODE_ENV === \"dev\";\n  const FLAG_COMMENT = \"/*--[TPL]--*/\";\n\n  const PRIMITIVE_COMPONENTS = [\n    \"Canvas\",\n    \"Sprite\",\n    \"Text\",\n    \"Viewport\",\n    \"Graphics\",\n    \"Container\",\n    \"ImageMap\",\n    \"NineSliceSprite\",\n    \"Rect\",\n    \"Circle\",\n    \"Ellipse\",\n    \"Triangle\",\n    \"TilingSprite\",\n    \"svg\",\n    \"Video\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Extract the script content\n      const scriptMatch = code.match(/<script>([\\s\\S]*?)<\\/script>/);\n      let scriptContent = scriptMatch ? scriptMatch[1].trim() : \"\";\n      \n      // Transform SVG tags to Svg components\n      let template = code.replace(/<script>[\\s\\S]*?<\\/script>/, \"\")\n        .replace(/^\\s+|\\s+$/g, '');\n      \n      // Add SVG transformation\n      template = template.replace(/<svg>([\\s\\S]*?)<\\/svg>/g, (match, content) => {\n        return `<Svg content=\"${content.trim()}\" />`;\n      });\n\n      let parsedTemplate;\n      try {\n        parsedTemplate = parser.parse(template);\n      } catch (error) {\n        const errorMsg = showErrorMessage(template, error);\n        throw new Error(`Error parsing template in file ${id}:\\n${errorMsg}`);\n      }\n\n      // trick to avoid typescript remove imports in scriptContent\n      scriptContent += FLAG_COMMENT + parsedTemplate\n\n      let transpiledCode = ts.transpileModule(scriptContent, {\n        compilerOptions: {\n          module: ts.ModuleKind.Preserve,\n        },\n      }).outputText;\n\n      // remove code after /*---*/\n      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]\n\n      // Use Acorn to parse the script content\n      const parsed = parse(transpiledCode, {\n        sourceType: \"module\",\n        ecmaVersion: 2020,\n      });\n\n      // Extract imports\n      const imports = parsed.body.filter(\n        (node) => node.type === \"ImportDeclaration\"\n      );\n\n      // Extract non-import statements from scriptContent\n      const nonImportCode = parsed.body\n        .filter((node) => node.type !== \"ImportDeclaration\")\n        .map((node) => transpiledCode.slice(node.start, node.end))\n        .join(\"\\n\");\n\n      let importsCode = imports\n        .map((imp) => {\n          let importCode = transpiledCode.slice(imp.start, imp.end);\n          if (isDev && importCode.includes(\"from 'canvasengine'\")) {\n            importCode = importCode.replace(\n              \"from 'canvasengine'\",\n              `from '${DEV_SRC}'`\n            );\n          }\n          return importCode;\n        })\n        .join(\"\\n\");\n\n      // Define an array for required imports\n      const requiredImports = [\"h\", \"computed\", \"cond\", \"loop\"];\n\n      // Check for missing imports\n      const missingImports = requiredImports.filter(\n        (importName) =>\n          !imports.some(\n            (imp) =>\n              imp.specifiers &&\n              imp.specifiers.some(\n                (spec) =>\n                  spec.type === \"ImportSpecifier\" &&\n                  spec.imported && \n                  'name' in spec.imported &&\n                  spec.imported.name === importName\n              )\n          )\n      );\n\n      // Add missing imports\n      if (missingImports.length > 0) {\n        const additionalImportCode = `import { ${missingImports.join(\n          \", \"\n        )} } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"};`;\n        importsCode = `${additionalImportCode}\\n${importsCode}`;\n      }\n\n      // Check for primitive components in parsedTemplate\n      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>\n        parsedTemplate.includes(`h(${component}`)\n      );\n\n      // Add missing imports for primitive components\n      primitiveImports.forEach((component) => {\n        const importStatement = `import { ${component} } from ${\n          isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"\n        };`;\n        if (!importsCode.includes(importStatement)) {\n          importsCode = `${importStatement}\\n${importsCode}`;\n        }\n      });\n\n      // Generate the output\n      const output = String.raw`\n      ${importsCode}\n      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : \"'canvasengine'\"}\n\n      export default function component($$props) {\n        const $props = useProps($$props)\n        const defineProps = useDefineProps($$props)\n        ${nonImportCode}\n        let $this = ${parsedTemplate}\n        return $this\n      }\n      `;\n\n      return {\n        code: output,\n        map: null,\n      };\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/grammar.pegjs

@@ -6,6 +6,29 @@
     throw new Error(errorMessage);
   }
 
+  /*——— Custom error handler for syntax errors ———*/
+  function parseError(error) {
+    // error.expected : array of { type, description }
+    // error.found    : string | null
+    // error.location : { start, end }
+    const { expected, found, location } = error;
+
+    // Group expected items by description to avoid duplicates
+    const uniqueExpected = [...new Set(expected.map(e => e.description))];
+    
+    // Format the expected values in a more readable way
+    const expectedDesc = uniqueExpected
+      .map(desc => `'${desc}'`)
+      .join(' or ');
+
+    const foundDesc = found === null ? 'end of input' : `'${found}'`;
+
+    generateError(
+      `Syntax error: expected ${expectedDesc} but found ${foundDesc}`,
+      location
+    );
+  }
+
   function formatAttributes(attributes) {
     if (attributes.length === 0) {
       return null;
@@ -43,23 +66,27 @@ start
     return `[${elements.join(',')}]`;
   }
 
-element
+element "component or control structure"
   = forLoop
   / ifCondition
   / selfClosingElement
   / openCloseElement
-  / comment 
+  / openUnclosedTag
+  / comment
 
-selfClosingElement
+selfClosingElement "self-closing component tag"
   = _ "<" _ tagName:tagName _ attributes:attributes _ "/>" _ {
       const attrsString = formatAttributes(attributes);
       return attrsString ? `h(${tagName}, ${attrsString})` : `h(${tagName})`;
     }
 
-openCloseElement
+openCloseElement "component with content"
   = "<" _ tagName:tagName _ attributes:attributes _ ">" _ content:content _ "</" _ closingTagName:tagName _ ">" _ {
       if (tagName !== closingTagName) {
-        error("Mismatched opening and closing tags");
+        generateError(
+          `Mismatched tag: opened <${tagName}> but closed </${closingTagName}>`,
+          location()
+        );
       }
       const attrsString = formatAttributes(attributes);
       const children = content ? content : null;
@@ -74,35 +101,37 @@ openCloseElement
       }
     }
 
-attributes
+attributes "component attributes"
   = attrs:(attribute (_ attribute)*)? {
       return attrs
         ? [attrs[0]].concat(attrs[1].map(a => a[1]))
         : [];
     }
 
-attribute
+attribute "attribute"
   = staticAttribute
   / dynamicAttribute
   / eventHandler
   / spreadAttribute
+  / unclosedQuote
+  / unclosedBrace
 
-spreadAttribute
+spreadAttribute "spread attribute"
   = "..." expr:(functionCallExpr / dotNotation) {
       return "..." + expr;
     }
 
-functionCallExpr
+functionCallExpr "function call"
   = name:dotNotation "(" args:functionArgs? ")" {
       return `${name}(${args || ''})`;
     }
 
-dotNotation
+dotNotation "property access"
   = first:identifier rest:("." identifier)* {
       return text();
     }
 
-eventHandler
+eventHandler "event handler"
   = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
       const needsQuotes = /[^a-zA-Z0-9_$]/.test(eventName);
       const formattedName = needsQuotes ? `'${eventName}'` : eventName;
@@ -113,7 +142,7 @@ eventHandler
       return needsQuotes ? `'${eventName}'` : eventName;
     }
 
-dynamicAttribute
+dynamicAttribute "dynamic attribute"
   = 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);
@@ -149,7 +178,7 @@ dynamicAttribute
       return needsQuotes ? `'${attributeName}'` : attributeName;
     }
 
-attributeValue
+attributeValue "attribute value"
   = element
   / functionWithElement
   / objectLiteral
@@ -161,7 +190,7 @@ attributeValue
     return t
   }
 
-objectLiteral
+objectLiteral "object literal"
   = "{" _ objContent:objectContent _ "}" {
     return `{ ${objContent} }`;
   }
@@ -196,7 +225,7 @@ stringLiteral
   = '"' chars:[^"]* '"' { return text(); }
   / "'" chars:[^']* "'" { return text(); }
 
-functionWithElement
+functionWithElement "function expression"
   = "(" _ params:functionParams? _ ")" _ "=>" _ elem:element {
       return `${params ? `(${params}) =>` : '() =>'} ${elem}`;
     }
@@ -215,7 +244,7 @@ simpleParams
       return [param].concat(rest.map(r => r[3])).join(', ');
     }
 
-staticAttribute
+staticAttribute "static attribute"
   = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
       const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
       const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
@@ -233,7 +262,7 @@ staticValue
       return `'${val}'`
     }
 
-content
+content "component content"
   = elements:(element)* {
       const filteredElements = elements.filter(el => el !== null);
       if (filteredElements.length === 0) return null;
@@ -253,27 +282,27 @@ textElement
       return trimmed ? JSON.stringify(trimmed) : null;
     }
 
-forLoop
-  = _ "@for" _ "(" _ variableName:(tupleDestructuring / identifier) _ "of" _ iterable:identifier _ ")" _ "{" _ content:content _ "}" _ {
+forLoop "for loop"
+  = _ "@for" _ "(" _ variableName:(tupleDestructuring / identifier) _ "of" _ iterable:iterable _ ")" _ "{" _ content:content _ "}" _ {
       return `loop(${iterable}, ${variableName} => ${content})`;
     }
 
-tupleDestructuring
+tupleDestructuring "destructuring pattern"
   = "(" _ first:identifier _ "," _ second:identifier _ ")" {
       return `(${first}, ${second})`;
     }
 
-ifCondition
+ifCondition "if condition"
   = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
       return `cond(${condition}, () => ${content})`;
     }
 
-tagName
+tagName "tag name"
   = segments:([a-zA-Z][a-zA-Z0-9]* ("." [a-zA-Z][a-zA-Z0-9]*)*) { 
     return text();
   }
 
-attributeName
+attributeName "attribute name"
   = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
 
 eventName
@@ -282,14 +311,49 @@ eventName
 variableName
   = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
 
-iterable
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
+iterable "iterable expression"
+  = id:identifier "(" _ args:functionArgs? _ ")" { // Direct function call
+      return `${id}(${args || ''})`;
+    }
+  / first:identifier "." rest:dotFunctionChain { // Dot notation possibly with function call
+      return `${first}.${rest}`;
+    }
+  / id:identifier { return id; }
+
+dotFunctionChain
+  = segment:identifier "(" _ args:functionArgs? _ ")" rest:("." dotFunctionChain)? {
+      const restStr = rest ? `.${rest[1]}` : '';
+      return `${segment}(${args || ''})${restStr}`;
+    }
+  / segment:identifier rest:("." dotFunctionChain)? {
+      const restStr = rest ? `.${rest[1]}` : '';
+      return `${segment}${restStr}`;
+    }
 
-condition
+condition "condition expression"
   = functionCall
-  / $([^)]*) { return text().trim(); }
+  / text_condition:$([^)]*) {
+      const originalText = text_condition.trim();
+
+      // Transform simple identifiers to function calls like "foo" to "foo()"
+      // This regex matches identifiers not followed by an opening parenthesis.
+      // This transformation should only apply if we are wrapping in 'computed'.
+      if (originalText.includes('!') || originalText.includes('&&') || originalText.includes('||')) {
+          const transformedText = originalText.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*\()/g, (match) => {
+              // Do not transform keywords (true, false, null) or numeric literals
+              if (['true', 'false', 'null'].includes(match) || /^\d+(\.\d+)?$/.test(match)) {
+                  return match;
+              }
+              return `${match}()`;
+          });
+          return `computed(() => ${transformedText})`;
+      }
+      // For simple conditions (no !, &&, ||), return the original text as is.
+      // Cases like `myFunction()` are handled by the `functionCall` rule.
+      return originalText;
+  }
 
-functionCall
+functionCall "function call"
   = name:identifier "(" args:functionArgs? ")" {
     return `${name}(${args || ''})`;
   }
@@ -328,4 +392,31 @@ comment
 singleComment
   = "<!--" _ content:((!("-->") .)* "-->") _ {
       return null;
+    }
+
+// Add a special error detection rule for unclosed tags
+openUnclosedTag "unclosed tag"
+  = "<" _ tagName:tagName _ attributes:attributes _ ">" _ content:content _ !("</" _ closingTagName:tagName _ ">") {
+      generateError(
+        `Unclosed tag: <${tagName}> is missing its closing tag`,
+        location()
+      );
+    }
+
+// Add error detection for unclosed quotes in static attributes
+unclosedQuote "unclosed string"
+  = attributeName:attributeName _ "=" _ "\"" [^"]* !("\"") {
+      generateError(
+        `Missing closing quote in attribute '${attributeName}'`,
+        location()
+      );
+    }
+
+// Add error detection for unclosed braces in dynamic attributes
+unclosedBrace "unclosed brace"
+  = attributeName:attributeName _ "=" _ "{" !("}" / _ "}") [^{}]* {
+      generateError(
+        `Missing closing brace in dynamic attribute '${attributeName}'`,
+        location()
+      );
     }

package/index.ts

@@ -10,6 +10,35 @@ const { generate } = pkg;
 
 const DEV_SRC = "../../src"
 
+/**
+ * Formats a syntax error message with visual pointer to the error location
+ * 
+ * @param {string} template - The template content that failed to parse
+ * @param {object} error - The error object with location information
+ * @returns {string} - Formatted error message with a visual pointer
+ * 
+ * @example
+ * ```
+ * const errorMessage = showErrorMessage("<Canvas>test(d)</Canvas>", syntaxError);
+ * // Returns a formatted error message with an arrow pointing to 'd'
+ * ```
+ */
+function showErrorMessage(template: string, error: any): string {
+  if (!error.location) {
+    return `Syntax error: ${error.message}`;
+  }
+
+  const lines = template.split('\n');
+  const { line, column } = error.location.start;
+  const errorLine = lines[line - 1] || '';
+  
+  // Create a visual pointer with an arrow
+  const pointer = ' '.repeat(column - 1) + '^';
+  
+  return `Syntax error at line ${line}, column ${column}: ${error.message}\n\n` +
+         `${errorLine}\n${pointer}\n`;
+}
+
 export default function canvasengine() {
   const filter = createFilter("**/*.ce");
 
@@ -59,8 +88,14 @@ export default function canvasengine() {
       template = template.replace(/<svg>([\s\S]*?)<\/svg>/g, (match, content) => {
         return `<Svg content="${content.trim()}" />`;
       });
-      
-      const parsedTemplate = parser.parse(template);
+
+      let parsedTemplate;
+      try {
+        parsedTemplate = parser.parse(template);
+      } catch (error) {
+        const errorMsg = showErrorMessage(template, error);
+        throw new Error(`Error parsing template in file ${id}:\n${errorMsg}`);
+      }
 
       // trick to avoid typescript remove imports in scriptContent
       scriptContent += FLAG_COMMENT + parsedTemplate

package/package.json

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

package/tests/compiler.spec.ts

@@ -316,6 +316,66 @@ describe("Loop", () => {
     );
   });
 
+  test("should compile loop with object", () => {
+    const input = `
+        @for (sprite of sprites.items) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items,sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with deep object", () => {
+    const input = `
+        @for (sprite of sprites.items.items) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items.items,sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with function", () => {
+    const input = `
+        @for (sprite of sprites()) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites(),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with function and params", () => {
+    const input = `
+        @for (sprite of sprites(x, y)) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites(x,y),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
+  test("should compile loop with object and function and params", () => {
+    const input = `
+        @for (sprite of sprites.items(x, y)) {
+            <Sprite />
+        }
+    `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(sprites.items(x,y),sprite=>h(Sprite))`.replace(/\s+/g, "")
+    );
+  });
+
   test("should compile loop with destructuring", () => {
     const input = `
         @for ((sprite, index) of sprites) {
@@ -347,6 +407,46 @@ describe("Loop", () => {
 });
 
 describe("Condition", () => {
+  test("should compile condition", () => {
+    const input = `
+            @if (sprite) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(sprite, () => h(Sprite))`);
+  });
+
+  test("should compile negative condition", () => {
+    const input = `
+            @if (!sprite) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite()), () => h(Sprite))`);
+  });
+
+  test("should compile negative condition with multiple condition", () => {
+    const input = `
+            @if (!sprite && other) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite() && other()), () => h(Sprite))`);
+  });
+
+  test("should compile negative condition with multiple condition (or)", () => {
+    const input = `
+            @if (!sprite || other) {
+                <Sprite />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => !sprite() || other()), () => h(Sprite))`);
+  });
+
   test("should compile condition when sprite is visible", () => {
     const input = `
             @if (sprite.visible) {