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

package/dist/index.js

@@ -66,7 +66,8 @@ function canvasengine() {
     "Mesh",
     "Svg",
     "DOMContainer",
-    "DOMElement"
+    "DOMElement",
+    "Button"
   ];
   return {
     name: "vite-plugin-ce",

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\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\n/**\n * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings\n * \n * This plugin allows importing shader files directly as string literals in your code.\n * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).\n * The content is loaded as a raw string and can be used directly with graphics APIs.\n * \n * @returns {object} - Vite plugin configuration object\n * \n * @example\n * ```typescript\n * // In your vite.config.ts\n * import { shaderLoader } from './path/to/compiler'\n * \n * export default defineConfig({\n *   plugins: [shaderLoader()]\n * })\n * \n * // In your code\n * import fragmentShader from './shader.frag'\n * import vertexShader from './shader.vert'\n * import computeShader from './shader.wgsl'\n * \n * console.log(fragmentShader) // Raw shader code as string\n * ```\n */\nexport function shaderLoader() {\n  const filter = createFilter(/\\.(frag|vert|wgsl)$/);\n\n  return {\n    name: \"vite-plugin-shader-loader\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Escape the shader code to be safely embedded in a JavaScript string\n      const escapedCode = code\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes\n        .replace(/`/g, '\\\\`')    // Escape backticks\n        .replace(/\\$/g, '\\\\$');  // Escape dollar signs\n\n      // Return the shader content as a default export string\n      return {\n        code: `export default \\`${escapedCode}\\`;`,\n        map: null,\n      };\n    },\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    \"Mesh\",\n    \"Svg\",\n    \"DOMContainer\",\n    \"DOMElement\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return null;\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      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":[]}
+{"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\n/**\n * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings\n * \n * This plugin allows importing shader files directly as string literals in your code.\n * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).\n * The content is loaded as a raw string and can be used directly with graphics APIs.\n * \n * @returns {object} - Vite plugin configuration object\n * \n * @example\n * ```typescript\n * // In your vite.config.ts\n * import { shaderLoader } from './path/to/compiler'\n * \n * export default defineConfig({\n *   plugins: [shaderLoader()]\n * })\n * \n * // In your code\n * import fragmentShader from './shader.frag'\n * import vertexShader from './shader.vert'\n * import computeShader from './shader.wgsl'\n * \n * console.log(fragmentShader) // Raw shader code as string\n * ```\n */\nexport function shaderLoader() {\n  const filter = createFilter(/\\.(frag|vert|wgsl)$/);\n\n  return {\n    name: \"vite-plugin-shader-loader\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return;\n\n      // Escape the shader code to be safely embedded in a JavaScript string\n      const escapedCode = code\n        .replace(/\\\\/g, '\\\\\\\\')  // Escape backslashes\n        .replace(/`/g, '\\\\`')    // Escape backticks\n        .replace(/\\$/g, '\\\\$');  // Escape dollar signs\n\n      // Return the shader content as a default export string\n      return {\n        code: `export default \\`${escapedCode}\\`;`,\n        map: null,\n      };\n    },\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    \"Mesh\",\n    \"Svg\",\n    \"DOMContainer\",\n    \"DOMElement\",\n    \"Button\"\n  ];\n\n  return {\n    name: \"vite-plugin-ce\",\n    transform(code: string, id: string) {\n      if (!filter(id)) return null;\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      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":";AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,YAAY,QAAQ;AACpB,SAAS,qBAAqB;AAE9B,IAAM,EAAE,SAAS,IAAI;AAErB,IAAM,UAAU;AAehB,SAAS,iBAAiB,UAAkB,OAAoB;AAC9D,MAAI,CAAC,MAAM,UAAU;AACnB,WAAO,iBAAiB,MAAM,OAAO;AAAA,EACvC;AAEA,QAAM,QAAQ,SAAS,MAAM,IAAI;AACjC,QAAM,EAAE,MAAM,OAAO,IAAI,MAAM,SAAS;AACxC,QAAM,YAAY,MAAM,OAAO,CAAC,KAAK;AAGrC,QAAM,UAAU,IAAI,OAAO,SAAS,CAAC,IAAI;AAEzC,SAAO,wBAAwB,IAAI,YAAY,MAAM,KAAK,MAAM,OAAO;AAAA;AAAA,EAC7D,SAAS;AAAA,EAAK,OAAO;AAAA;AACjC;AA4BO,SAAS,eAAe;AAC7B,QAAM,SAAS,aAAa,qBAAqB;AAEjD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAc,IAAY;AAClC,UAAI,CAAC,OAAO,EAAE,EAAG;AAGjB,YAAM,cAAc,KACjB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,KAAK,EACnB,QAAQ,OAAO,KAAK;AAGvB,aAAO;AAAA,QACL,MAAM,oBAAoB,WAAW;AAAA,QACrC,KAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;AAEe,SAAR,eAAgC;AACrC,QAAM,SAAS,aAAa,SAAS;AAGrC,QAAM,aAAa,cAAc,YAAY,GAAG;AAChD,QAAM,YAAY,KAAK,QAAQ,UAAU;AAEzC,QAAM,UAAU,GAAG;AAAA,IACjB,KAAK,KAAK,WAAW,eAAe,EAAE,QAAQ,sBAAsB,eAAe;AAAA,IACrF;AAAA,EAAM;AACN,QAAM,SAAS,SAAS,OAAO;AAC/B,QAAM,QAAQ,QAAQ,IAAI,aAAa;AACvC,QAAM,eAAe;AAErB,QAAM,uBAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAc,IAAY;AAClC,UAAI,CAAC,OAAO,EAAE,EAAG,QAAO;AAGxB,YAAM,cAAc,KAAK,MAAM,8BAA8B;AAC7D,UAAI,gBAAgB,cAAc,YAAY,CAAC,EAAE,KAAK,IAAI;AAG1D,UAAI,WAAW,KAAK,QAAQ,8BAA8B,EAAE,EACzD,QAAQ,cAAc,EAAE;AAE3B,UAAI;AACJ,UAAI;AACF,yBAAiB,OAAO,MAAM,QAAQ;AAAA,MACxC,SAAS,OAAO;AACd,cAAM,WAAW,iBAAiB,UAAU,KAAK;AACjD,cAAM,IAAI,MAAM,kCAAkC,EAAE;AAAA,EAAM,QAAQ,EAAE;AAAA,MACtE;AAGA,uBAAiB,eAAe;AAEhC,UAAI,iBAAoB,mBAAgB,eAAe;AAAA,QACrD,iBAAiB;AAAA,UACf,QAAW,cAAW;AAAA,QACxB;AAAA,MACF,CAAC,EAAE;AAGH,uBAAiB,eAAe,MAAM,YAAY,EAAE,CAAC;AAGrD,YAAM,SAAS,MAAM,gBAAgB;AAAA,QACnC,YAAY;AAAA,QACZ,aAAa;AAAA,MACf,CAAC;AAGD,YAAM,UAAU,OAAO,KAAK;AAAA,QAC1B,CAAC,SAAS,KAAK,SAAS;AAAA,MAC1B;AAGA,YAAM,gBAAgB,OAAO,KAC1B,OAAO,CAAC,SAAS,KAAK,SAAS,mBAAmB,EAClD,IAAI,CAAC,SAAS,eAAe,MAAM,KAAK,OAAO,KAAK,GAAG,CAAC,EACxD,KAAK,IAAI;AAEZ,UAAI,cAAc,QACf,IAAI,CAAC,QAAQ;AACZ,YAAI,aAAa,eAAe,MAAM,IAAI,OAAO,IAAI,GAAG;AACxD,YAAI,SAAS,WAAW,SAAS,qBAAqB,GAAG;AACvD,uBAAa,WAAW;AAAA,YACtB;AAAA,YACA,SAAS,OAAO;AAAA,UAClB;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC,EACA,KAAK,IAAI;AAGZ,YAAM,kBAAkB,CAAC,KAAK,YAAY,QAAQ,MAAM;AAGxD,YAAM,iBAAiB,gBAAgB;AAAA,QACrC,CAAC,eACC,CAAC,QAAQ;AAAA,UACP,CAAC,QACC,IAAI,cACJ,IAAI,WAAW;AAAA,YACb,CAAC,SACC,KAAK,SAAS,qBACd,KAAK,YACL,UAAU,KAAK,YACf,KAAK,SAAS,SAAS;AAAA,UAC3B;AAAA,QACJ;AAAA,MACJ;AAGA,UAAI,eAAe,SAAS,GAAG;AAC7B,cAAM,uBAAuB,YAAY,eAAe;AAAA,UACtD;AAAA,QACF,CAAC,WAAW,QAAQ,IAAI,OAAO,MAAM,gBAAgB;AACrD,sBAAc,GAAG,oBAAoB;AAAA,EAAK,WAAW;AAAA,MACvD;AAGA,YAAM,mBAAmB,qBAAqB;AAAA,QAAO,CAAC,cACpD,eAAe,SAAS,KAAK,SAAS,EAAE;AAAA,MAC1C;AAGA,uBAAiB,QAAQ,CAAC,cAAc;AACtC,cAAM,kBAAkB,YAAY,SAAS,WAC3C,QAAQ,IAAI,OAAO,MAAM,gBAC3B;AACA,YAAI,CAAC,YAAY,SAAS,eAAe,GAAG;AAC1C,wBAAc,GAAG,eAAe;AAAA,EAAK,WAAW;AAAA,QAClD;AAAA,MACF,CAAC;AAGD,YAAM,SAAS,OAAO;AAAA,QACpB,WAAW;AAAA,iDAC8B,QAAQ,IAAI,OAAO,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKhF,aAAa;AAAA,sBACD,cAAc;AAAA;AAAA;AAAA;AAK9B,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/grammar.pegjs

@@ -36,7 +36,7 @@
 
   // Framework components that should NOT be transformed to DOM elements
   const frameworkComponents = new Set([
-    'Canvas', 'Container', 'Sprite', 'Text', 'DOMElement', 'Svg'
+    'Canvas', 'Container', 'Sprite', 'Text', 'DOMElement', 'Svg', 'Button'
   ]);
 
   // DisplayObject special attributes that should not be in attrs
@@ -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) => {
@@ -396,14 +437,50 @@ dynamicAttribute "dynamic attribute"
       const needsQuotes = /[^a-zA-Z0-9_$]/.test(attributeName);
       const formattedName = needsQuotes ? `'${attributeName}'` : attributeName;
       
-      // If it's a complex object literal starting with curly braces, preserve it as is
-      if (attributeValue.trim().startsWith('{') && attributeValue.trim().endsWith('}')) {
-        return `${formattedName}: ${attributeValue}`;
-      }
       
-      // If it's a template string, preserve it as is
+        // If it's a complex object with strings, preserve it as is
+        if (attributeValue.trim().startsWith('{') && attributeValue.trim().endsWith('}') && 
+            (attributeValue.includes('"') || attributeValue.includes("'"))) {
+          return `${formattedName}: ${attributeValue}`;
+        }
+        
+        // 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
@@ -412,17 +489,68 @@ 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;
-        const computedValue = attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
-          if (match.startsWith('@')) {
-            return match.substring(1);
+        let hasLiterals = false;
+        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}()`;
+          });
+          
+          // Check if any values already contain signals (ending with ())
+          if (attributeValue.includes('()')) {
+            foundSignal = true;
           }
-          foundSignal = true;
-          return `${match}()`;
-        });
+        }
+        
         if (foundSignal) {
+          // For objects, wrap in parentheses
+          if (attributeValue.trim().startsWith('{') && attributeValue.trim().endsWith('}')) {
+            // Remove spaces for objects in parentheses
+            const cleanedObject = computedValue.replace(/{ /g, '{').replace(/ }/g, '}');
+            return `${formattedName}: computed(() => (${cleanedObject}))`;
+          }
           return `${formattedName}: computed(() => ${computedValue})`;
         }
+        
+        // If only literals (all @), don't use computed
+        if (hasLiterals && !foundSignal) {
+          return `${formattedName}: ${computedValue}`;
+        }
+        
+        // For static objects and arrays, return as is without parentheses
         return `${formattedName}: ${computedValue}`;
       }
     }
@@ -436,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"
@@ -467,6 +591,7 @@ propertyValue
   / element
   / functionWithElement
   / stringLiteral
+  / number
   / identifier
 
 nestedObject
@@ -548,8 +673,31 @@ tupleDestructuring "destructuring pattern"
     }
 
 ifCondition "if condition"
-  = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
-      return `cond(${condition}, () => ${content})`;
+  = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ elseIfs:elseIfClause* elseClause:elseClause? _ {
+      let result = `cond(${condition}, () => ${content}`;
+      
+      // Add else if clauses
+      elseIfs.forEach(elseIf => {
+        result += `, [${elseIf.condition}, () => ${elseIf.content}]`;
+      });
+      
+      // Add else clause if present
+      if (elseClause) {
+        result += `, () => ${elseClause}`;
+      }
+      
+      result += ')';
+      return result;
+    }
+
+elseIfClause "else if clause"
+  = _ "@else" _ "if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
+      return { condition, content };
+    }
+
+elseClause "else clause"
+  = _ "@else" _ "{" _ content:content _ "}" _ {
+      return content;
     }
 
 tagName "tag name"
@@ -601,12 +749,26 @@ condition "condition expression"
       // 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) => {
+      if (originalText.includes('!') || originalText.includes('&&') || originalText.includes('||') || 
+          originalText.includes('>=') || originalText.includes('<=') || originalText.includes('===') || 
+          originalText.includes('!==') || originalText.includes('==') || originalText.includes('!=') ||
+          originalText.includes('>') || originalText.includes('<')) {
+          const transformedText = originalText.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*\()/g, (match, p1, offset) => {
               // Do not transform keywords (true, false, null) or numeric literals
               if (['true', 'false', 'null'].includes(match) || /^\d+(\.\d+)?$/.test(match)) {
                   return match;
               }
+              // Check if the match is inside quotes
+              const beforeMatch = originalText.substring(0, offset);
+              const afterMatch = originalText.substring(offset + match.length);
+              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;
+              }
+              
               return `${match}()`;
           });
           return `computed(() => ${transformedText})`;

package/index.ts

@@ -121,7 +121,8 @@ export default function canvasengine() {
     "Mesh",
     "Svg",
     "DOMContainer",
-    "DOMElement"
+    "DOMElement",
+    "Button"
   ];
 
   return {

package/package.json

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

package/tests/compiler.spec.ts

@@ -131,23 +131,178 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Canvas, { width: 20 })`);
   });
 
-  // TODO
-  // 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 if/else condition", () => {
+    const input = `
+            @if (sprite) {
+                <Sprite />
+            }
+            @else {
+                <Text text="No sprite" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(sprite, () => h(Sprite), () => h(Text, { text: 'No sprite' }))`);
+  });
+
+  test("should compile if/else if condition", () => {
+    const input = `
+            @if (score >= 90) {
+                <Text text="A+" />
+            }
+            @else if (score >= 80) {
+                <Text text="A" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => score() >= 90), () => h(Text, { text: 'A+' }), [computed(() => score() >= 80), () => h(Text, { text: 'A' })])`);
+  });
+
+  test("should compile if/else if/else condition", () => {
+    const input = `
+            @if (score >= 90) {
+                <Text text="A+" />
+            }
+            @else if (score >= 80) {
+                <Text text="A" />
+            }
+            @else {
+                <Text text="F" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => score() >= 90), () => h(Text, { text: 'A+' }), [computed(() => score() >= 80), () => h(Text, { text: 'A' })], () => h(Text, { text: 'F' }))`);
+  });
+
+  test("should compile if/else if/else condition within canvas", () => {
+    const input = `<Canvas>
+  <Container>
+    @if (score >= 90) {
+        <Text text="Grade: A+" x={100} y={100} color="gold" size={24} />
+        <Text text="Excellent work!" x={100} y={130} color="gold" size={16} />
+    }
+  </Container>
+</Canvas>
+        `;
+
+    const output = parser.parse(input);
+    expect(output).toBe(`h(Canvas, null, h(Container, null, cond(computed(() => score() >= 90), () => [h(Text, { text: 'Grade: A+', x: 100, y: 100, color: 'gold', size: 24 }), h(Text, { text: 'Excellent work!', x: 100, y: 130, color: 'gold', size: 16 })])))`);
+  });
+
+  test("should compile multiple else if conditions", () => {
+    const input = `
+            @if (score >= 90) {
+                <Text text="A+" />
+            }
+            @else if (score >= 80) {
+                <Text text="A" />
+            }
+            @else if (score >= 70) {
+                <Text text="B" />
+            }
+            @else if (score >= 60) {
+                <Text text="C" />
+            }
+            @else {
+                <Text text="F" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => score() >= 90), () => h(Text, { text: 'A+' }), [computed(() => score() >= 80), () => h(Text, { text: 'A' })], [computed(() => score() >= 70), () => h(Text, { text: 'B' })], [computed(() => score() >= 60), () => h(Text, { text: 'C' })], () => h(Text, { text: 'F' }))`);
+  });
+
+  test("should compile if/else with multiple elements", () => {
+    const input = `
+            @if (user.role === 'admin') {
+                <Text text="Admin Panel" />
+                <Text text="Settings" />
+            }
+            @else {
+                <Text text="Please log in" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => user().role() === 'admin'), () => [h(Text, { text: 'Admin Panel' }), h(Text, { text: 'Settings' })], () => h(Text, { text: 'Please log in' }))`);
+  });
+
+  test("should compile nested if/else conditions", () => {
+    const input = `
+            @if (user) {
+                @if (user.isActive) {
+                    <Text text="Active user" />
+                }
+                @else {
+                    <Text text="Inactive user" />
+                }
+            }
+            @else {
+                <Text text="No user" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(user, () => cond(user.isActive, () => h(Text, { text: 'Active user' }), () => h(Text, { text: 'Inactive user' })), () => h(Text, { text: 'No user' }))`);
+  });
+
+  test("should compile if/else if with simple conditions", () => {
+    const input = `
+            @if (theme === 'dark') {
+                <Text text="Dark mode" />
+            }
+            @else if (theme === 'light') {
+                <Text text="Light mode" />
+            }
+            @else {
+                <Text text="Auto mode" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(computed(() => theme() === 'dark'), () => h(Text, { text: 'Dark mode' }), [computed(() => theme() === 'light'), () => h(Text, { text: 'Light mode' })], () => h(Text, { text: 'Auto mode' }))`);
+  });
+
+  test("should compile if/else with function conditions", () => {
+    const input = `
+            @if (isVisible()) {
+                <Sprite />
+            }
+            @else {
+                <Text text="Hidden" />
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(`cond(isVisible(), () => h(Sprite), () => h(Text, { text: 'Hidden' }))`);
+  });
+
+  test("should compile if/else if with object property conditions", () => {
+    const input = `
+            @if (sprite.visible) {
+                <Sprite />
+            }
+            @else if (sprite.loading) {
+                <Text text="Loading..." />
+            }
+            @else {
+                <Text text="Not available" />
+            }
+        `;
+    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 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", () => {
@@ -171,6 +326,42 @@ describe("Compiler", () => {
     expect(output).toBe(`h(Canvas, { width: computed(() => deep().value()) })`);
   });
 
+  test('should compile component with deep object attribute', () => {
+    const input = `<Button 
+      style={{
+        backgroundColor: {
+          normal: "#6c757d",
+          hover: "#5a6268",
+          pressed: "#545b62"
+        },
+        text: {
+          fontSize: 16,
+          color: "#ffffff"
+        }
+      }}
+    />`;
+    const output = parser.parse(input);
+    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);
@@ -186,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", () => {
@@ -198,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", () => {
@@ -576,6 +767,43 @@ describe("Condition", () => {
       `cond(sprite.visible, () => [h(Sprite), cond(deep, () => h(Sprite)), h(Sprite)])`
     );
   });
+
+  test("should compile if/else within canvas", () => {
+    const input = `
+            <Canvas>
+                @if (showSprite) {
+                    <Sprite />
+                }
+                @else {
+                    <Text text="No sprite" />
+                }
+            </Canvas>
+        `;
+    const output = parser.parse(input);
+    expect(output).toBe(
+      `h(Canvas, null, cond(showSprite, () => h(Sprite), () => h(Text, { text: 'No sprite' })))`
+    );
+  });
+
+  test("should compile if/else if/else within loop", () => {
+    const input = `
+            @for (item of items) {
+                @if (item.type === 'sprite') {
+                    <Sprite />
+                }
+                @else if (item.type === 'text') {
+                    <Text />
+                }
+                @else {
+                    <Container />
+                }
+            }
+        `;
+    const output = parser.parse(input);
+    expect(output.replace(/\s+/g, "")).toBe(
+      `loop(items,item=>cond(computed(()=>item().type()==='sprite'),()=>h(Sprite),[computed(()=>item().type()==='text'),()=>h(Text)],()=>h(Container)))`.replace(/\s+/g, "")
+    );
+  });
 });
 
 describe("Condition in Loops", () => {
@@ -748,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', () => {