canvasengine 1.3.0 → 2.0.1-beta.1

package/.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CanvasEngine CI
+
+on:
+  push:
+    branches:
+      - '*'
+    paths-ignore:
+      - 'docs/**'
+  pull_request:
+    branches:
+      - '*'
+    paths-ignore:
+      - 'docs/**'
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm test

package/README.md

@@ -0,0 +1,79 @@
+# CanvasEngine - A reactive HTML5 Canvas management library built on top of PixiJS
+
+![CanvasEngine](logo.png)
+
+CanvasEngine is a reactive HTML5 Canvas management library built on top of PixiJS. It provides a component-oriented approach to canvas rendering, similar to modern frontend frameworks.
+
+Features:
+- Reactive components
+- Use flex in Canvas !
+- Easy Animation system 
+- Keyboard, Gamepad et Virtual Joystick
+- Tiled Map Editor integration
+- Particle Emitter
+- Audio System
+
+## Note: Performance Comparison with Pixi React
+
+CanvasEngine offers significant performance advantages over Pixi React. While Pixi React relies on React's detection cycles in addition to Pixi's traversal, which can be resource-intensive, CanvasEngine takes a more granular approach. It only updates the specific elements that have changed, resulting in more efficient rendering and better overall performance.
+
+## Installation
+
+```bash
+npx degit RSamaium/CanvasEngine/starter my-project
+cd my-project
+npm install
+npm run dev # and go to localhost:5173
+```
+
+## Documentation
+
+https://canvasengine.net
+
+## Example:
+
+```html
+<Container flexDirection="column" width="500px">
+    <Sprite 
+        image="/assets/logo.png" 
+        anchor="0.5" 
+        rotation
+        scale
+        @pointerenter={onEnter} 
+        @pointerleave={onLeave}
+    />
+    <Text text size="70" fontFamily="Helvetica" x="90" y="-30" />
+</Container>
+
+<script>
+import { signal, tick, animatedSignal, Easing } from "canvasengine";
+
+const { text } = defineProps();
+const rotation = signal(0);
+const scale = animatedSignal(1, {
+    duration: 300,
+    ease: Easing.easeInOut,
+});
+
+tick(() => {
+    rotation.update(rotation => rotation + 0.01);
+});
+
+const onEnter = () => {
+    scale.set(1.5);
+};
+
+const onLeave = () => {
+    scale.set(1);
+};
+</script>
+```
+
+## Contributing
+
+```bash
+git clone https://github.com/RSamaium/CanvasEngine.git
+cd CanvasEngine
+npm install
+npm run dev
+```

package/dist/compiler/vite.js

@@ -0,0 +1,119 @@
+// src/compiler/vite.ts
+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";
+var { generate } = pkg;
+var DEV_SRC = "../../src";
+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/compiler/grammar.pegjs", "src/compiler/grammar.pegjs"),
+    "utf8"
+  );
+  const parser = generate(grammar);
+  const isDev = process.env.NODE_ENV === "development";
+  const FLAG_COMMENT = "/*--[TPL]--*/";
+  const PRIMITIVE_COMPONENTS = [
+    "Canvas",
+    "Sprite",
+    "Text",
+    "Joystick",
+    "Viewport",
+    "Graphics",
+    "Container",
+    "ImageMap",
+    "NineSliceSprite",
+    "Rect",
+    "Circle",
+    "svg"
+  ];
+  return {
+    name: "vite-plugin-ce",
+    transform(code, id) {
+      if (!filter(id)) return;
+      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);
+      scriptContent += FLAG_COMMENT + parsedTemplate;
+      let transpiledCode = ts.transpileModule(scriptContent, {
+        compilerOptions: {
+          module: ts.ModuleKind.Preserve
+        }
+      }).outputText;
+      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0];
+      const parsed = parse(transpiledCode, {
+        sourceType: "module",
+        ecmaVersion: 2020
+      });
+      const imports = parsed.body.filter(
+        (node) => node.type === "ImportDeclaration"
+      );
+      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");
+      const requiredImports = ["h", "computed", "cond", "loop"];
+      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
+          )
+        )
+      );
+      if (missingImports.length > 0) {
+        const additionalImportCode = `import { ${missingImports.join(
+          ", "
+        )} } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"};`;
+        importsCode = `${additionalImportCode}
+${importsCode}`;
+      }
+      const primitiveImports = PRIMITIVE_COMPONENTS.filter(
+        (component) => parsedTemplate.includes(`h(${component}`)
+      );
+      primitiveImports.forEach((component) => {
+        const importStatement = `import { ${component} } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"};`;
+        if (!importsCode.includes(importStatement)) {
+          importsCode = `${importStatement}
+${importsCode}`;
+        }
+      });
+      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
+      };
+    }
+  };
+}
+export {
+  canvasengine as default
+};
+//# sourceMappingURL=vite.js.map

package/dist/compiler/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/compiler/vite.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\"; // Import TypeScript package\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/compiler/grammar.pegjs\", \"src/compiler/grammar.pegjs\"), \n  \"utf8\");\n  const parser = generate(grammar);\n  const isDev = process.env.NODE_ENV === \"development\";\n  const FLAG_COMMENT = \"/*--[TPL]--*/\";\n\n  const PRIMITIVE_COMPONENTS = [\n    \"Canvas\",\n    \"Sprite\",\n    \"Text\",\n    \"Joystick\",\n    \"Viewport\",\n    \"Graphics\",\n    \"Container\",\n    \"ImageMap\",\n    \"NineSliceSprite\",\n    \"Rect\",\n    \"Circle\",\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":[]}