@canvasengine/compiler 2.0.0-beta.4 → 2.0.0-beta.40

package/dist/index.d.ts

@@ -1,9 +1,42 @@
-declare function canvasengine(): {
+/**
+ * Vite plugin to load shader files (.frag, .vert, .wgsl) as text strings
+ *
+ * This plugin allows importing shader files directly as string literals in your code.
+ * It supports fragment shaders (.frag), vertex shaders (.vert), and WebGPU shaders (.wgsl).
+ * The content is loaded as a raw string and can be used directly with graphics APIs.
+ *
+ * @returns {object} - Vite plugin configuration object
+ *
+ * @example
+ * ```typescript
+ * // In your vite.config.ts
+ * import { shaderLoader } from './path/to/compiler'
+ *
+ * export default defineConfig({
+ *   plugins: [shaderLoader()]
+ * })
+ *
+ * // In your code
+ * import fragmentShader from './shader.frag'
+ * import vertexShader from './shader.vert'
+ * import computeShader from './shader.wgsl'
+ *
+ * console.log(fragmentShader) // Raw shader code as string
+ * ```
+ */
+declare function shaderLoader(): {
     name: string;
     transform(code: string, id: string): {
         code: string;
         map: null;
     } | undefined;
 };
+declare function canvasengine(): {
+    name: string;
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
+};
 
-export { canvasengine as default };
+export { canvasengine as default, shaderLoader };

package/dist/index.js

@@ -8,12 +8,40 @@ 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 shaderLoader() {
+  const filter = createFilter(/\.(frag|vert|wgsl)$/);
+  return {
+    name: "vite-plugin-shader-loader",
+    transform(code, id) {
+      if (!filter(id)) return;
+      const escapedCode = code.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+      return {
+        code: `export default \`${escapedCode}\`;`,
+        map: null
+      };
+    }
+  };
+}
 function canvasengine() {
   const filter = createFilter("**/*.ce");
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
   const grammar = fs.readFileSync(
-    path.join(__dirname, "grammar.pegjs").replace("dist/grammar.pegjs", "grammar.pegjs"),
+    path.join(__dirname, "grammar.pegjs"),
     "utf8"
   );
   const parser = generate(grammar);
@@ -30,20 +58,33 @@ function canvasengine() {
     "NineSliceSprite",
     "Rect",
     "Circle",
+    "Ellipse",
+    "Triangle",
     "TilingSprite",
-    "svg"
+    "svg",
+    "Video",
+    "Mesh",
+    "Svg",
+    "DOMContainer",
+    "DOMElement",
+    "Button",
+    "Joystick"
   ];
   return {
     name: "vite-plugin-ce",
     transform(code, id) {
-      if (!filter(id)) return;
+      if (!filter(id)) return null;
       const scriptMatch = code.match(/<script>([\s\S]*?)<\/script>/);
       let scriptContent = scriptMatch ? scriptMatch[1].trim() : "";
       let template = code.replace(/<script>[\s\S]*?<\/script>/, "").replace(/^\s+|\s+$/g, "");
-      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: {
@@ -114,6 +155,7 @@ ${importsCode}`;
   };
 }
 export {
-  canvasengine as default
+  canvasengine as default,
+  shaderLoader
 };
 //# sourceMappingURL=index.js.map

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    \"TilingSprite\",\n    \"svg\"\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\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\"),\n    \"utf8\"\n  );\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    \"Joystick\"\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":[]}

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@canvasengine/compiler",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.40",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp grammar.pegjs ../../docs/public/grammar.pegjs",
     "dev": "tsup --watch"
   },
   "type": "module",

package/grammar.pegjs

@@ -1,180 +0,0 @@
-{
-  function generateError(message, location) {
-    const { start, end } = location;
-    const errorMessage = `${message}\n` +
-      `at line ${start.line}, column ${start.column} to line ${end.line}, column ${end.column}`;
-    throw new Error(errorMessage);
-  }
-}
-
-start
-  = _ elements:(element)* _ {
-    if (elements.length === 1) {
-      return elements[0];
-    }
-    return `[${elements.join(',')}]`;
-  }
-
-element
-  = forLoop
-  / ifCondition
-  / selfClosingElement
-  / openCloseElement
-  / comment 
-
-selfClosingElement
-  = _ "<" _ tagName:tagName _ attributes:attributes _ "/>" _ {
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
-      return attrs ? `h(${tagName}, ${attrs})` : `h(${tagName})`;
-    }
-
-openCloseElement
-  = "<" _ tagName:tagName _ attributes:attributes _ ">" _ content:content _ "</" _ closingTagName:tagName _ ">" {
-      if (tagName !== closingTagName) {
-        error("Mismatched opening and closing tags");
-      }
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
-      const children = content ? content : null;
-      if (attrs && children) {
-        return `h(${tagName}, ${attrs}, ${children})`;
-      } else if (attrs) {
-        return `h(${tagName}, ${attrs})`;
-      } else if (children) {
-        return `h(${tagName}, null, ${children})`;
-      } else {
-        return `h(${tagName})`;
-      }
-    }
-
-  / "<" _ tagName:tagName _ attributes:attributes _ {
-      generateError("Syntaxe d'élément invalide", location());
-    }
-
-attributes
-  = attrs:(attribute (_ attribute)*)? {
-      return attrs
-        ? [attrs[0]].concat(attrs[1].map(a => a[1]))
-        : [];
-    }
-
-attribute
-  = staticAttribute
-  / dynamicAttribute
-  / eventHandler
-
-eventHandler
-  = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
-      return `${eventName}: ${handlerName}`;
-    }
-     / "@" eventName:attributeName _ {
-      return eventName;
-    }
-
-dynamicAttribute
-  = attributeName:attributeName _ "=" _ "{" _ attributeValue:attributeValue _ "}" {
-      if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
-        return `${attributeName}: ${attributeValue}`;
-      } else {
-        return `${attributeName}: computed(() => ${attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
-          if (match.startsWith('@')) {
-            return match.substring(1);
-          }
-          return `${match}()`;
-        })})`;
-      }
-    }
-  / attributeName:attributeName _ {
-      return attributeName;
-    }
-
-attributeValue
-  = $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
-    const t = text().trim()
-    if (t.startsWith("{") && t.endsWith("}")) {
-      return `(${t})`;
-    }
-    return t
-  }
-
-staticAttribute
-  = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
-      return `${attributeName}: ${attributeValue}`;
-    }
-
-eventAttribute
-  = "(" _ eventName:eventName _ ")" _ "=" _ "\"" eventAction:eventAction "\"" {
-      return `${eventName}: () => { ${eventAction} }`;
-    }
-
-staticValue
-  = [^"]+ {
-      var val = text();
-      return isNaN(val) ? `'${val}'` : val;
-    }
-
-content
-  = elements:(element)* {
-      const filteredElements = elements.filter(el => el !== null);
-      if (filteredElements.length === 0) return null;
-      if (filteredElements.length === 1) return filteredElements[0];
-      return `[${filteredElements.join(', ')}]`;
-    }
-
-textNode
-  = text:$([^<]+) {
-      const trimmed = text.trim();
-      return trimmed ? `'${trimmed}'` : null;
-    }
-
-textElement
-  = text:[^<>]+ {
-      const trimmed = text.join('').trim();
-      return trimmed ? JSON.stringify(trimmed) : null;
-    }
-
-forLoop
-  = _ "@for" _ "(" _ variableName:identifier _ "of" _ iterable:identifier _ ")" _ "{" _ content:content _ "}" _ {
-      return `loop(${iterable}, (${variableName}) => ${content})`;
-    }
-
-ifCondition
-  = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
-      return `cond(${condition}, () => ${content})`;
-    }
-
-tagName
-  = [a-zA-Z][a-zA-Z0-9]* { return text(); }
-
-attributeName
-  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
-
-eventName
-  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
-
-variableName
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-iterable
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-condition
-  = $([^)]*) { return text().trim(); }
-
-eventAction
-  = [^"]* { return text(); }
-
-_ 'whitespace'
-  = [ \t\n\r]* 
-
-identifier
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-comment
-  = singleComment+ {
-    return null
-  }
-
-singleComment
-  = "<!--" _ content:((!("-->") .)* "-->") _ {
-      return null;
-    }

package/index.ts

@@ -1,166 +0,0 @@
-import { createFilter } from "vite";
-import { parse } from "acorn";
-import fs from "fs";
-import pkg from "peggy";
-import path from "path";
-import * as ts from "typescript";
-import { fileURLToPath } from 'url';
-
-const { generate } = pkg;
-
-const DEV_SRC = "../../src"
-
-export default function canvasengine() {
-  const filter = createFilter("**/*.ce");
-
-  // Convert import.meta.url to a file path
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
-
-  const grammar = fs.readFileSync(
-    path.join(__dirname, "grammar.pegjs").replace("dist/grammar.pegjs", "grammar.pegjs"), 
-  "utf8");
-  const parser = generate(grammar);
-  const isDev = process.env.NODE_ENV === "dev";
-  const FLAG_COMMENT = "/*--[TPL]--*/";
-
-  const PRIMITIVE_COMPONENTS = [
-    "Canvas",
-    "Sprite",
-    "Text",
-    "Viewport",
-    "Graphics",
-    "Container",
-    "ImageMap",
-    "NineSliceSprite",
-    "Rect",
-    "Circle",
-    "TilingSprite",
-    "svg"
-  ];
-
-  return {
-    name: "vite-plugin-ce",
-    transform(code: string, id: string) {
-      if (!filter(id)) return;
-
-      // Extract the script content
-      const scriptMatch = code.match(/<script>([\s\S]*?)<\/script>/);
-      let scriptContent = scriptMatch ? scriptMatch[1].trim() : "";
-      
-      // Transform SVG tags to Svg components
-      let template = code.replace(/<script>[\s\S]*?<\/script>/, "")
-        .replace(/^\s+|\s+$/g, '');
-      
-      // Add SVG transformation
-      template = template.replace(/<svg>([\s\S]*?)<\/svg>/g, (match, content) => {
-        return `<Svg content="${content.trim()}" />`;
-      });
-      
-      const parsedTemplate = parser.parse(template);
-
-      // trick to avoid typescript remove imports in scriptContent
-      scriptContent += FLAG_COMMENT + parsedTemplate
-
-      let transpiledCode = ts.transpileModule(scriptContent, {
-        compilerOptions: {
-          module: ts.ModuleKind.Preserve,
-        },
-      }).outputText;
-
-      // remove code after /*---*/
-      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]
-
-      // Use Acorn to parse the script content
-      const parsed = parse(transpiledCode, {
-        sourceType: "module",
-        ecmaVersion: 2020,
-      });
-
-      // Extract imports
-      const imports = parsed.body.filter(
-        (node) => node.type === "ImportDeclaration"
-      );
-
-      // Extract non-import statements from scriptContent
-      const nonImportCode = parsed.body
-        .filter((node) => node.type !== "ImportDeclaration")
-        .map((node) => transpiledCode.slice(node.start, node.end))
-        .join("\n");
-
-      let importsCode = imports
-        .map((imp) => {
-          let importCode = transpiledCode.slice(imp.start, imp.end);
-          if (isDev && importCode.includes("from 'canvasengine'")) {
-            importCode = importCode.replace(
-              "from 'canvasengine'",
-              `from '${DEV_SRC}'`
-            );
-          }
-          return importCode;
-        })
-        .join("\n");
-
-      // Define an array for required imports
-      const requiredImports = ["h", "computed", "cond", "loop"];
-
-      // Check for missing imports
-      const missingImports = requiredImports.filter(
-        (importName) =>
-          !imports.some(
-            (imp) =>
-              imp.specifiers &&
-              imp.specifiers.some(
-                (spec) =>
-                  spec.type === "ImportSpecifier" &&
-                  spec.imported && 
-                  'name' in spec.imported &&
-                  spec.imported.name === importName
-              )
-          )
-      );
-
-      // Add missing imports
-      if (missingImports.length > 0) {
-        const additionalImportCode = `import { ${missingImports.join(
-          ", "
-        )} } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"};`;
-        importsCode = `${additionalImportCode}\n${importsCode}`;
-      }
-
-      // Check for primitive components in parsedTemplate
-      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>
-        parsedTemplate.includes(`h(${component}`)
-      );
-
-      // Add missing imports for primitive components
-      primitiveImports.forEach((component) => {
-        const importStatement = `import { ${component} } from ${
-          isDev ? `'${DEV_SRC}'` : "'canvasengine'"
-        };`;
-        if (!importsCode.includes(importStatement)) {
-          importsCode = `${importStatement}\n${importsCode}`;
-        }
-      });
-
-      // Generate the output
-      const output = String.raw`
-      ${importsCode}
-      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"}
-
-      export default function component($$props) {
-        const $props = useProps($$props)
-        const defineProps = useDefineProps($$props)
-        ${nonImportCode}
-        let $this = ${parsedTemplate}
-        return $this
-      }
-      `;
-
-      return {
-        code: output,
-        map: null,
-      };
-    },
-  };
-}