@canvasengine/compiler 2.0.0-beta.5 → 2.0.0-beta.51

package/grammar.pegjs

@@ -1,186 +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 {
-        let foundSignal = false
-        const computedValue = attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
-          if (match.startsWith('@')) {
-            return match.substring(1);
-          }
-          foundSignal = true
-          return `${match}()`;
-        });
-        if (foundSignal) {
-          return `${attributeName}: computed(() => ${computedValue})`;
-        }
-        return `${attributeName}: ${computedValue}`;
-      }
-    }
-  / 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,167 +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",
-    "Video"
-  ];
-
-  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,
-      };
-    },
-  };
-}

package/tests/compiler.spec.ts

@@ -1,352 +0,0 @@
-import pkg from "peggy";
-import fs from "fs";
-import { beforeAll, describe, test, expect } from "vitest";
-
-const { generate } = pkg;
-let parser: any;
-
-beforeAll(() => {
-  const grammar = fs.readFileSync("packages/compiler/grammar.pegjs", "utf8");
-  parser = generate(grammar);
-});
-
-describe("Compiler", () => {
-  test("should compile comment", () => {
-    const input = `
-      <Canvas>
-        <!-- Comment -->
-      </Canvas>
-    `;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas)`);
-  });
-
-  test("should compile multiple comment", () => {
-    const input = `
-      <Canvas>
-        <!-- Comment -->
-        <!-- Comment -->
-      </Canvas>
-    `;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas)`);
-  });
-
-  test("should compile multiple line comment", () => {
-    const input = `
-      <Canvas>
-        <!--
-          Comment
-          Comment
-        -->
-      </Canvas>
-    `;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas)`);
-  });
-
-  test("should compile simple component", () => {
-    const input = `<Canvas />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas)`);
-  });
-
-  test("should compile component with dynamic attribute", () => {
-    const input = `<Canvas width={x} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: x })`);
-  });
-
-  test("should compile component with dynamic attribute but is not a signal", () => {
-    const input = `<Canvas width={20} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: 20 })`);
-  });
-
-  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}) })`);
-  });
-
-  test("should compile component with deep object attribute", () => {
-    const input = `<Canvas width={deep.value} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => deep().value()) })`);
-  });
-
-  test("should compile component with deep object attribute but not transform to signal", () => {
-    const input = `<Canvas width={@deep.value} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => deep.value()) })`);
-  });
-
-  test("should compile component with deep object attribute but not all transform to signal", () => {
-    const input = `<Canvas width={@deep.@value} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: deep.value })`);
-  });
-
-  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})) })`);
-  });
-
-  test("should compile component with array attribute", () => {
-    const input = `<Canvas width={ [10, 20] } />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: [10, 20] })`);
-  });
-
-  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]) })`);
-  });
-
-  test("should compile component with standalone dynamic attribute", () => {
-    const input = `<Canvas width />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width })`);
-  });
-
-  test("should compile component with computed dynamic attribute", () => {
-    const input = `<Canvas width={x * 2} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => x() * 2) })`);
-  });
-
-  test("should compile component with multiple computed dynamic attributes", () => {
-    const input = `<Canvas width={x * 2 * y} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: computed(() => x() * 2 * y()) })`);
-  });
-
-  test("should compile component with static numeric attribute", () => {
-    const input = `<Canvas width="10" />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: 10 })`);
-  });
-
-  test("should compile component with static string attribute", () => {
-    const input = `<Canvas width="val" />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Canvas, { width: 'val' })`);
-  });
-
-  test("should compile component with children", () => {
-    const input = `
-            <Canvas>
-                <Sprite />
-                <Text />
-            </Canvas>
-        `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,[h(Sprite),h(Text)])`.replace(/\s+/g, "")
-    );
-  });
-
-  test("should compile component with multi children", () => {
-    const input = `
-           <Sprite />
-           <Sprite />
-        `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `[h(Sprite),h(Sprite)]`.replace(/\s+/g, "")
-    );
-  });
-
-  test("should compile component with event handler", () => {
-    const input = `<Sprite @click={fn} />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Sprite, { click: fn })`);
-  });
-
-  test("should compile component with standalone event handler", () => {
-    const input = `<Sprite @click />`;
-    const output = parser.parse(input);
-    expect(output).toBe(`h(Sprite, { click })`);
-  });
-
-  test('should compile component with inline event handler', () => {
-      const input = `<Sprite @click={() => console.log('click')} />`;
-      const output = parser.parse(input);
-      expect(output).toBe(`h(Sprite, { click: () => console.log('click') })`);
-  });
-
-  // test("should compile component with component attribute", () => {
-  //   const input = `<Canvas child={<Sprite />} />`;
-  //   const output = parser.parse(input);
-  //   expect(output).toBe(`h(Canvas, { child: h(Sprite) })`);
-  // });
-});
-
-describe("Loop", () => {
-  test("loop in canvas", () => {
-    const input = `
-        <Canvas>
-            @for (sprite of sprites) {
-                <Sprite />
-            }
-        </Canvas>
-    `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
-    );
-  });
-
-  test("should compile loop", () => {
-    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 nestedloop", () => {
-    const input = `
-        @for (sprite of sprites) {
-            @for (other of others) {
-                <Sprite />
-            }
-        }
-    `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `loop(sprites,(sprite)=>loop(others,(other)=>h(Sprite)))`.replace(
-        /\s+/g,
-        ""
-      )
-    );
-  });
-});
-
-describe("Condition", () => {
-  test("should compile condition when sprite is visible", () => {
-    const input = `
-            @if (sprite.visible) {
-                <Sprite />
-            }
-        `;
-    const output = parser.parse(input);
-    expect(output).toBe(`cond(sprite.visible, () => h(Sprite))`);
-  });
-
-  test("should compile condition for multiple sprites", () => {
-    const input = `
-            @if (sprite) {
-              <Sprite />
-            }
-            @if (other) {
-                <Sprite />
-            }
-        `;
-    const output = parser.parse(input);
-    expect(output).toBe(
-      `[cond(sprite, () => h(Sprite)),cond(other, () => h(Sprite))]`
-    );
-  });
-
-  test("should compile nested condition when sprite is visible", () => {
-    const input = `
-            @if (sprite.visible) {
-               @if (deep) {
-                    <Sprite />
-                }
-            }
-        `;
-    const output = parser.parse(input);
-    expect(output).toBe(
-      `cond(sprite.visible, () => cond(deep, () => h(Sprite)))`
-    );
-  });
-
-  test("should compile condition with nested sprite when sprite is visible", () => {
-    const input = `
-            @if (sprite.visible) {
-                <Sprite />
-                @if (deep) {
-                    <Sprite />
-                }
-            }
-        `;
-    const output = parser.parse(input);
-    expect(output).toBe(
-      `cond(sprite.visible, () => [h(Sprite), cond(deep, () => h(Sprite))])`
-    );
-  });
-
-  test("should compile condition with multiple sprites when sprite is visible", () => {
-    const input = `
-            @if (sprite.visible) {
-                <Sprite />
-                @if (deep) {
-                    <Sprite />
-                }
-                <Sprite />
-            }
-        `;
-    const output = parser.parse(input);
-    expect(output).toBe(
-      `cond(sprite.visible, () => [h(Sprite), cond(deep, () => h(Sprite)), h(Sprite)])`
-    );
-  });
-});
-
-describe("Condition in Loops", () => {
-  test("should compile condition within a loop", () => { // New test for condition in a loop
-    const input = `
-            <Canvas>
-                @for (sprite of sprites) {
-                    @if (sprite.visible) {
-                        <Sprite />
-                    }
-                }
-            </Canvas>
-        `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>cond(sprite.visible,()=>h(Sprite))))`.replace(/\s+/g, "")
-    );
-  });
-
-  test("should compile elements within a loop", () => { // New test for elements in a loop
-    const input = `
-            <Canvas>
-                @for (sprite of sprites) {
-                    <Sprite />
-                }
-            </Canvas>
-        `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,loop(sprites,(sprite)=>h(Sprite)))`.replace(/\s+/g, "")
-    );
-  });
-
-  test("should compile multiple loops at the same level", () => { // New test for multiple loops
-    const input = `
-            <Canvas>
-                @for (sprite of sprites) {
-                    <Sprite />
-                }
-                @for (other of others) {
-                    <Sprite />
-                }
-            </Canvas>
-        `;
-    const output = parser.parse(input);
-    expect(output.replace(/\s+/g, "")).toBe(
-      `h(Canvas,null,[loop(sprites,(sprite)=>h(Sprite)),loop(others,(other)=>h(Sprite))])`.replace(/\s+/g, "")
-    );
-  });
-
-});