canvasengine 2.0.0-beta.1 → 2.0.1-beta.2

package/index.d.ts

@@ -0,0 +1,6 @@
+import { ComponentFunction } from "./src/engine/signal";
+
+declare module '*.ce' {
+    const content: any;
+    export default content;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "canvasengine",
   "description": "A reactive HTML5 Canvas management library built on top of PixiJS",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.1-beta.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,60 +18,47 @@
   "scripts": {
     "dev": "cd sample && vite",
     "build": "tsup",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
+    "watch": "tsup --watch",
     "test": "vitest",
-    "docs": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "publish": "npm run build && npm publish"
+    "docs:build": "cd docs && npm run build",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
-    "@pixi/layers": "^2.1.0",
-    "@pixi/lights": "^4.1.0",
     "@pixi/tilemap": "^5.0.1",
     "@rpgjs/tiled": "^4.3.0",
     "@signe/reactive": "^1.0.1",
-    "animejs": "^3.2.2",
-    "d-path-parser": "^1.0.0",
-    "framer-motion": "^11.11.9",
     "howler": "^2.2.4",
-    "peggy": "^3.0.2",
     "pixi-filters": "^6.0.5",
-    "pixi-viewport": "^5.0.3",
+    "pixi-viewport": "^6.0.3",
     "pixi.js": "^8.6.4",
     "popmotion": "^11.0.5",
     "revolt-fx": "^1.3.5",
     "rxjs": "^7.8.1",
-    "stats.js": "^0.17.0",
-    "svg-arc-to-cubic-bezier": "^3.2.0",
-    "tinycolor2": "^1.6.0",
-    "tsup": "^8.2.4",
     "yoga-layout": "^2.0.1"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",
     "@types/node": "^22.10.2",
     "@types/stats.js": "^0.17.3",
-    "acorn": "^8.12.1",
     "canvas": "^2.11.2",
     "dedent": "^1.5.3",
     "eslint": "^8.57.0",
     "jsdom": "^25.0.1",
     "lightningcss": "^1.28.2",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "typescript": "^5.6.2",
+    "tsup": "^8.2.4",
     "vite": "^5.4.4",
-    "vitepress": "^1.3.4",
     "vitest": "^1.6.0",
-    "vitest-webgl-canvas-mock": "^1.1.0"
+    "vitest-webgl-canvas-mock": "^1.1.0",
+    "typescript": "^5.6.2"
   },
   "author": "Samuel Ronce",
   "license": "MIT",
   "homepage": "https://canvasengine.net",
   "repository": {
     "type": "git",
-    "url": "https://github.com/RSamaium/CanvasEngine.git"
+    "url": "git+https://github.com/RSamaium/CanvasEngine.git"
   },
   "bugs": {
     "url": "https://github.com/RSamaium/CanvasEngine/issues"
@@ -84,5 +71,10 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "overrides": {
+    "revolt-fx": {
+      "pixi.js": "^8.6.4"
+    }
   }
 }

package/src/directives/Scheduler.ts

@@ -1,5 +1,4 @@
 import { WritableSignal } from '@signe/reactive';
-import Stats from 'stats.js';
 import { Directive, registerDirective } from '../engine/directive';
 import { Element } from '../engine/reactive';
 import * as Utils from '../engine/utils';
@@ -22,8 +21,6 @@ export class Scheduler extends Directive {
     private _stop: boolean = false
     private tick: WritableSignal<Tick | null>
     
-    private stats = new Stats()
-
     onInit(element: Element) { 
         this.tick = element.propObservables?.tick as any
     }
@@ -36,22 +33,15 @@ export class Scheduler extends Directive {
         this.lastTimestamp = this.lastTimestamp || this.timestamp // first
         this.deltaTime = Utils.preciseNow() - this.timestamp
         this.timestamp = timestamp
-        this.stats.begin()
         this.tick.set({
             timestamp: this.timestamp,
             deltaTime: this.deltaTime,
             frame: this.frame,
             deltaRatio: ~~this.deltaTime / ~~Utils.fps2ms(this.fps)
         })
-        this.stats.end()
         this.lastTimestamp = this.timestamp
         this.frame++
     }
-
-    private showPanel() {
-        this.stats.showPanel(0)
-    }
-
     /**
      * start the schedule
      * @return {Scheduler} returns this scheduler instance
@@ -64,7 +54,6 @@ export class Scheduler extends Directive {
         if (options.maxFps) this.maxFps = options.maxFps
         if (options.fps) this.fps = options.fps
         if (options.delay) this.requestedDelay = options.delay
-        this.showPanel()
         const requestAnimationFrame = (fn: (timestamp: number) => void) => {
             if (Utils.isBrowser()) {
                 window.requestAnimationFrame(fn.bind(this))

package/tsconfig.json

@@ -19,14 +19,9 @@
     "noImplicitReturns": false,
     "declaration": true,
     "experimentalDecorators": true, 
-    "emitDecoratorMetadata": false,
+    "emitDecoratorMetadata": true,
     "stripInternal": true,
     "skipLibCheck": true,
     "types": ["node"]
-  },
-  "include": [
-      "src",
-      "sample"
-  ],
-  
+  }
 }

package/tsup.config.ts

@@ -1,28 +1,13 @@
 import { defineConfig } from 'tsup'
 
-export default [
-  defineConfig({
-    format: ['esm'],
-    target: 'es2020',
-    splitting: true,
-    clean: true,
-    shims: false,
-    dts: true,
-    sourcemap: true,
-    entry: ['src/index.ts'],
-    outDir: 'dist'
-  }),
-  
-  defineConfig({
-    format: ['esm'],
-    target: 'node20',
-    splitting: true,
-    clean: false,
-    shims: false,
-    dts: true,
-    sourcemap: true,
-    entry: ['src/compiler/vite.ts'],
-    outDir: 'dist/compiler',
-    external: ['vite', 'acorn', 'peggy', 'typescript'],
-  })
-]
+export default defineConfig({
+  format: ['esm'],
+  target: 'es2020',
+  splitting: true,
+  clean: true,
+  shims: false,
+  dts: true,
+  sourcemap: true,
+  entry: ['src/index.ts'],
+  outDir: 'dist'
+})

package/dist/compiler/vite.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/starter/components/app.ce

@@ -1,18 +0,0 @@
-<Canvas 
-    backgroundColor="#fff" 
-    width="100%" 
-    height="100%" 
-    antialias="true"
-    >
-    <Container
-        width="100%" 
-        height="100%" 
-        justifyContent="center"
-        alignItems="center">
-        <HelloWorld text="CanvasEngine" />
-    </Container>
-</Canvas>
-
-<script>
-    import HelloWorld from "./hello.ce";
-</script>

package/starter/components/hello.ce

@@ -1,34 +0,0 @@
-<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>

package/starter/index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Canvas Engine</title>
-    <style>
-      body, html, #root {
-        margin: 0;
-        padding: 0;
-        height: 100vh;
-        width: 100vw;
-        overflow: hidden;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.ts"></script>
-  </body>
-</html>

package/starter/main.ts

@@ -1,4 +0,0 @@
-import App from './components/app.ce'
-import { bootstrapCanvas } from 'canvasengine';
-
-await bootstrapCanvas(document.getElementById("root"), App);

package/starter/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "template",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "vite"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module",
-  "devDependencies": {
-    "vite": "^6.0.3"
-  }
-}

package/starter/vite.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'vite'
-import vitePluginCe from 'canvasengine/compiler'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vitePluginCe()],
-  resolve: {
-    alias: {
-      path: 'rollup-plugin-node-polyfills/polyfills/path',
-    }
-  }
-});