@hypen-space/web 0.4.45 → 0.4.81

package/src/dom/renderer.ts

@@ -11,9 +11,14 @@ import type { HypenGlobalContext } from "@hypen-space/core/context";
 import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.renderer;
+
+/** Element types that treat the "action" prop as an onClick handler */
+const ACTIONABLE_TYPES = new Set(["button", "link", "card"]);
+
 import { ComponentRegistry } from "./components/index.js";
 import { ApplicatorRegistry } from "./applicators/index.js";
 import { canvasHandler, canvasApplicators } from "./canvas/index.js";
+import { CanvasRenderer } from "../canvas/renderer.js";
 import { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./debug.js";
 import { setEngine, disposeHypenElement } from "./element-data.js";
 
@@ -35,6 +40,14 @@ export class DOMRenderer {
   private componentInstances = new Map<string, HypenModuleInstance>();
   private debugTracker: RerenderTracker;
 
+  // Canvas subtree routing — Canvas components get their own CanvasRenderer
+  // and all descendant patches are forwarded to it instead of the DOM.
+  private canvasRenderers = new Map<string, CanvasRenderer>();
+  private canvasSubtreeMap = new Map<string, string>(); // nodeId → canvasRootId
+  private canvasElements = new Map<string, HTMLCanvasElement>();
+  /** Props stashed at create-time so we can forward them to CanvasRenderer */
+  private pendingCreateProps = new Map<string, { elementType: string; props: Record<string, any> }>();
+
   constructor(container: HTMLElement, engine: IEngine, debugConfig?: Partial<DebugConfig>) {
     this.container = container;
     this.engine = engine;
@@ -58,12 +71,86 @@ export class DOMRenderer {
   }
 
   /**
-   * Apply a batch of patches to the DOM
+   * Apply a batch of patches to the DOM.
+   *
+   * Uses two-pass routing: first discovers which nodes belong to a Canvas
+   * subtree (via insert/move parents), then routes each patch to either
+   * the DOMRenderer or the owning CanvasRenderer.
    */
   applyPatches(patches: Patch[]): void {
+    // Phase 1: scan inserts to discover new canvas-subtree members
     for (const patch of patches) {
+      if (patch.type === "insert" || patch.type === "move") {
+        const parentId = patch.parentId;
+        const childId = patch.id;
+        if (!parentId || !childId) continue;
+
+        // Is the parent a canvas root or inside a canvas subtree?
+        const canvasRootId =
+          this.canvasRenderers.has(parentId) ? parentId
+          : this.canvasSubtreeMap.get(parentId);
+        if (canvasRootId) {
+          this.canvasSubtreeMap.set(childId, canvasRootId);
+        }
+      }
+    }
+
+    // Phase 2: route patches
+    const canvasBatches = new Map<string, Patch[]>();
+    const domPatches: Patch[] = [];
+
+    for (const patch of patches) {
+      const canvasRootId = this.getCanvasRouteTarget(patch);
+      if (canvasRootId) {
+        let batch = canvasBatches.get(canvasRootId);
+        if (!batch) { batch = []; canvasBatches.set(canvasRootId, batch); }
+        batch.push(patch);
+      } else {
+        domPatches.push(patch);
+      }
+    }
+
+    // Apply DOM patches normally
+    for (const patch of domPatches) {
       this.applyPatch(patch);
     }
+
+    // Forward canvas-subtree patches to their CanvasRenderer instances
+    for (const [rootId, batch] of canvasBatches) {
+      const renderer = this.canvasRenderers.get(rootId);
+      if (renderer) {
+        renderer.applyPatches(batch);
+      }
+    }
+  }
+
+  /**
+   * Determine which canvas root (if any) a patch should be routed to.
+   * Returns the canvas root node ID, or undefined for DOM patches.
+   */
+  private getCanvasRouteTarget(patch: Patch): string | undefined {
+    const id = patch.id;
+    const parentId = patch.parentId;
+
+    switch (patch.type) {
+      case "insert":
+      case "move": {
+        // Route by parent — if parent is a canvas root or inside one
+        if (!parentId) return undefined;
+        if (this.canvasRenderers.has(parentId)) return parentId;
+        return this.canvasSubtreeMap.get(parentId);
+      }
+      case "create": {
+        // create patches are routed if the node was pre-registered in phase 1
+        if (!id) return undefined;
+        return this.canvasSubtreeMap.get(id);
+      }
+      default: {
+        // setProp, removeProp, setText, remove — route by node id
+        if (!id) return undefined;
+        return this.canvasSubtreeMap.get(id);
+      }
+    }
   }
 
   /**
@@ -105,10 +192,12 @@ export class DOMRenderer {
   }
 
   /**
-   * Interpolate state values in text template
+   * Interpolate state values in text template.
+   *
+   * Bindings use the `@{state.path}` syntax (matching the engine's parser).
    */
   private interpolateText(template: string, state: Record<string, any>): string {
-    return template.replace(/\$\{([^}]+)\}/g, (match, path) => {
+    return template.replace(/@\{([^}]+)\}/g, (match, path) => {
       try {
         const value = path.split('.').reduce((obj: any, key: string) => {
           if (key === 'state') return state;
@@ -122,20 +211,13 @@ export class DOMRenderer {
   }
 
   /**
-   * Apply a single patch
-   *
-   * Handles both camelCase (direct WASM) and snake_case (WebSocket JSON) field names.
+   * Apply a single patch.
    */
   private applyPatch(patch: Patch): void {
-    // Normalize: accept both camelCase and snake_case field names.
-    // WASM serde outputs camelCase, but patches forwarded via JSON over WebSocket
-    // may arrive with snake_case depending on the serialization path.
-    const p = patch as any;
-    const id: string | undefined = patch.id ?? p.id;
-    const elementType: string | undefined = patch.elementType ?? p.element_type;
-    const parentId: string | undefined = patch.parentId ?? p.parent_id;
-    const beforeId: string | undefined = patch.beforeId ?? p.before_id;
-    const eventName: string | undefined = patch.eventName ?? p.event_name;
+    const id = patch.id;
+    const elementType = patch.elementType;
+    const parentId = patch.parentId;
+    const beforeId = patch.beforeId;
 
     switch (patch.type) {
       case "create":
@@ -186,9 +268,34 @@ export class DOMRenderer {
     setEngine(element, this.engine);
 
     this.applicators.applyAll(element, propsObj);
+
+    // Actionable components: wire "action" prop as onClick
+    if (propsObj.action && ACTIONABLE_TYPES.has(elementType.toLowerCase())) {
+      this.applicators.apply(element, "onClick", propsObj.action);
+    }
+
     this.nodes.set(id, element);
     this.debugTracker.trackRerender(id, element, `create:${elementType}`);
 
+    // Canvas component: create a CanvasRenderer for its subtree
+    if (elementType.toLowerCase() === "canvas") {
+      const canvasEl = element as unknown as HTMLCanvasElement;
+      // Apply sensible defaults if no explicit size
+      if (!canvasEl.width || canvasEl.width === 300) canvasEl.width = propsObj.width ? Number(propsObj.width) : 800;
+      if (!canvasEl.height || canvasEl.height === 150) canvasEl.height = propsObj.height ? Number(propsObj.height) : 600;
+
+      const canvasRenderer = new CanvasRenderer(canvasEl, this.engine);
+      this.canvasRenderers.set(id, canvasRenderer);
+      this.canvasElements.set(id, canvasEl);
+
+      // Bootstrap a root container inside the CanvasRenderer so child
+      // inserts with parentId === this canvas node find a parent.
+      canvasRenderer.applyPatches([
+        { type: "create", id, elementType: "container", props: {} },
+        { type: "insert", parentId: "root", id },
+      ]);
+    }
+
     if (!this.rootId) {
       this.rootId = id;
       if (!this.container.contains(element)) {
@@ -223,8 +330,8 @@ export class DOMRenderer {
       // Engine patches may send interpolated strings; if we overwrite the template,
       // future state updates won't be able to re-interpolate.
       const currentTemplate = element.dataset.textTemplate;
-      const nextLooksLikeTemplate = nextText.includes("${");
-      const currentLooksLikeTemplate = typeof currentTemplate === "string" && currentTemplate.includes("${");
+      const nextLooksLikeTemplate = nextText.includes("@{");
+      const currentLooksLikeTemplate = typeof currentTemplate === "string" && currentTemplate.includes("@{");
 
       if (nextLooksLikeTemplate) {
         element.dataset.textTemplate = nextText;
@@ -239,7 +346,19 @@ export class DOMRenderer {
       return;
     }
 
+    // Actionable components: wire "action" prop as onClick
+    if (name === "action" && ACTIONABLE_TYPES.has(element.dataset.hypenType || "")) {
+      this.applicators.apply(element, "onClick", value);
+      return;
+    }
+
     this.applicators.apply(element, name, value);
+
+    // Forward canvas dimension changes to its CanvasRenderer
+    if ((name === "width" || name === "height") && this.canvasRenderers.has(id)) {
+      const canvasEl = this.canvasElements.get(id)!;
+      this.canvasRenderers.get(id)!.resize(canvasEl.width, canvasEl.height);
+    }
   }
 
   /**
@@ -311,6 +430,17 @@ export class DOMRenderer {
     const element = this.nodes.get(id);
     if (!element) return;
 
+    // Clean up canvas renderer if this is a canvas root
+    if (this.canvasRenderers.has(id)) {
+      this.canvasRenderers.get(id)!.destroy();
+      this.canvasRenderers.delete(id);
+      this.canvasElements.delete(id);
+      // Remove all subtree entries pointing to this canvas root
+      for (const [nodeId, rootId] of this.canvasSubtreeMap) {
+        if (rootId === id) this.canvasSubtreeMap.delete(nodeId);
+      }
+    }
+
     // Dispose event listeners and other resources before removing from DOM
     disposeHypenElement(element);
 
@@ -336,6 +466,14 @@ export class DOMRenderer {
    * Clear all nodes
    */
   clear(): void {
+    // Destroy all canvas renderers
+    for (const renderer of this.canvasRenderers.values()) {
+      renderer.destroy();
+    }
+    this.canvasRenderers.clear();
+    this.canvasElements.clear();
+    this.canvasSubtreeMap.clear();
+
     // Dispose all element resources before clearing
     for (const element of this.nodes.values()) {
       disposeHypenElement(element);