canvasengine 1.3.0 → 2.0.1-beta.1

package/src/compiler/grammar.pegjs

@@ -0,0 +1,180 @@
+{
+  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/src/compiler/vite.ts

@@ -0,0 +1,166 @@
+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 TypeScript package
+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/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: 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/src/components/Canvas.ts

@@ -0,0 +1,134 @@
+import { effect, Signal, signal } from "@signe/reactive";
+import { Container, autoDetectRenderer } from "pixi.js";
+import { loadYoga } from "yoga-layout";
+import { Props, createComponent, registerComponent, Element } from "../engine/reactive";
+import { useProps } from "../hooks/useProps";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { SignalOrPrimitive } from "./types";
+import { Size } from "./types/DisplayObject";
+import { Scheduler, Tick } from "../directives/Scheduler";
+
+interface CanvasElement extends Element<ComponentInstance> {
+  render: (rootElement: HTMLElement) => void;
+  directives: {
+    tick: Scheduler
+  };
+  propObservables: {
+    tick: Signal<Tick>
+  };
+}
+
+registerComponent("Canvas", class Canvas extends DisplayObject(Container) {});
+
+export interface CanvasProps extends Props {
+  cursorStyles?: () => any;
+  width?: SignalOrPrimitive<Size>;
+  height?: SignalOrPrimitive<Size>;
+  canvasEl?: HTMLElement;
+  selector?: string;
+  isRoot?: boolean;
+  tick?: any;
+  class?: SignalOrPrimitive<string>;
+}
+
+export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
+  let { cursorStyles, width, height, class: className } = useProps(props);
+  const Yoga = await loadYoga();
+
+  if (!props.width) width = signal<Size>(800)
+  if (!props.height) height = signal<Size>(600)
+
+  const renderer = await autoDetectRenderer({
+    ...props,
+    width: width?.(),
+    height: height?.(),
+  });
+
+  const canvasSize = signal({
+    width: renderer.width,
+    height: renderer.height,
+  });
+
+  props.isRoot = true;
+  const options: CanvasProps = {
+    ...props,
+    context: {
+      Yoga,
+      renderer,
+      canvasSize,
+    },
+    width: width?.(),
+    height: height?.(),
+  };
+
+  if (!props.tick) {
+    options.context!.tick = options.tick = signal({
+      timestamp: 0,
+      deltaTime: 0,
+      frame: 0,
+      deltaRatio: 1,
+    });
+  }
+  const canvasElement = createComponent("Canvas", options) as CanvasElement;
+
+  canvasElement.render = (rootElement: HTMLElement) => {
+    const canvasEl = renderer.view.canvas as HTMLCanvasElement;
+
+    (globalThis as any).__PIXI_STAGE__ = canvasElement.componentInstance;
+    (globalThis as any).__PIXI_RENDERER__ = renderer;
+
+    if (props.tickStart !== false) canvasElement.directives.tick.start()
+
+    effect(() => {
+      canvasElement.propObservables!.tick();
+      renderer.render(canvasElement.componentInstance as any);
+    });
+
+    if (cursorStyles) {
+      effect(() => {
+        renderer.events.cursorStyles = cursorStyles();
+      });
+    }
+
+    if (className) {
+      effect(() => {
+        canvasEl.classList.add(className());
+      });
+    }
+
+    const resizeCanvas = async () => {
+      let w, h;
+      if (width?.() === "100%" && height?.() === "100%") {
+        const parent = canvasEl.parentElement;
+        w = parent ? parent.clientWidth : window.innerWidth;
+        h = parent ? parent.clientHeight : window.innerHeight;
+      } else {
+        w = width?.() ?? canvasEl.offsetWidth;
+        h = height?.() ?? canvasEl.offsetHeight;
+      }
+      renderer.resize(w, h);
+      canvasSize.set({ width: w, height: h });
+      canvasElement.componentInstance.setWidth(w)
+      canvasElement.componentInstance.setHeight(h)
+    };
+
+    // Listen for window resize events
+    window.addEventListener("resize", resizeCanvas);
+
+    // Check if a canvas already exists in the rootElement
+    const existingCanvas = rootElement.querySelector('canvas');
+    if (existingCanvas) {
+      // If it exists, replace it with the new canvas
+      rootElement.replaceChild(canvasEl, existingCanvas);
+    } else {
+      // If it doesn't exist, append the new canvas
+      rootElement.appendChild(canvasEl);
+    }
+
+     // Initial resize
+     resizeCanvas();
+  };
+
+  return canvasElement;
+};

package/src/components/Container.ts

@@ -0,0 +1,46 @@
+import { Container as PixiContainer } from "pixi.js";
+import { createComponent, registerComponent } from "../engine/reactive";
+import { DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+import { setObservablePoint } from "../engine/utils";
+
+interface ContainerProps extends DisplayObjectProps {
+  sortableChildren?: boolean;
+}
+
+export class CanvasContainer extends DisplayObject(PixiContainer) {
+  isCustomAnchor = true;
+  
+  onUpdate(props) {
+    if (props.anchor) {
+      setObservablePoint(this._anchorPoints, props.anchor);
+      props.pivot = [
+        this.getWidth() * this._anchorPoints.x,
+        this.getHeight() * this._anchorPoints.y
+      ]
+    }
+    super.onUpdate(props);
+    if (props.sortableChildren != undefined) {
+      this.sortableChildren = props.sortableChildren;
+    }
+  }
+  onMount(args) {
+    super.onMount(args);
+    const { componentInstance, props } = args;
+    const { pixiChildren } = props;
+    if (pixiChildren) {
+      pixiChildren.forEach((child) => {
+        componentInstance.addChild(child);
+      });
+    }
+  }
+}
+
+export interface CanvasContainer extends DisplayObjectProps {}
+
+registerComponent("Container", CanvasContainer);
+
+export const Container: ComponentFunction<ContainerProps> = (props) => {
+  return createComponent("Container", props);
+};