@hypen-space/web 0.4.31 → 0.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.4.31",
+  "version": "0.4.35",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.4.31"
+    "@hypen-space/core": "^0.4.35"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/canvas/events.ts

@@ -23,6 +23,15 @@ export class CanvasEventManager {
   private focusedNode: VirtualNode | null = null;
   private mouseDownNode: VirtualNode | null = null;
 
+  // Bound handler references for cleanup
+  private boundOnMouseMove!: (e: MouseEvent) => void;
+  private boundOnMouseDown!: (e: MouseEvent) => void;
+  private boundOnMouseUp!: (e: MouseEvent) => void;
+  private boundOnClick!: (e: MouseEvent) => void;
+  private boundOnDoubleClick!: (e: MouseEvent) => void;
+  private boundOnKeyDown!: (e: KeyboardEvent) => void;
+  private boundOnKeyUp!: (e: KeyboardEvent) => void;
+
   constructor(canvas: HTMLCanvasElement, engine: IEngine) {
     this.canvas = canvas;
     this.engine = engine;
@@ -40,13 +49,21 @@ export class CanvasEventManager {
    * Setup canvas event listeners
    */
   private setupEventListeners(): void {
-    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
-    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
-    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
-    this.canvas.addEventListener("click", this.onClick.bind(this));
-    this.canvas.addEventListener("dblclick", this.onDoubleClick.bind(this));
-    this.canvas.addEventListener("keydown", this.onKeyDown.bind(this));
-    this.canvas.addEventListener("keyup", this.onKeyUp.bind(this));
+    this.boundOnMouseMove = this.onMouseMove.bind(this);
+    this.boundOnMouseDown = this.onMouseDown.bind(this);
+    this.boundOnMouseUp = this.onMouseUp.bind(this);
+    this.boundOnClick = this.onClick.bind(this);
+    this.boundOnDoubleClick = this.onDoubleClick.bind(this);
+    this.boundOnKeyDown = this.onKeyDown.bind(this);
+    this.boundOnKeyUp = this.onKeyUp.bind(this);
+
+    this.canvas.addEventListener("mousemove", this.boundOnMouseMove);
+    this.canvas.addEventListener("mousedown", this.boundOnMouseDown);
+    this.canvas.addEventListener("mouseup", this.boundOnMouseUp);
+    this.canvas.addEventListener("click", this.boundOnClick);
+    this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
+    this.canvas.addEventListener("keydown", this.boundOnKeyDown);
+    this.canvas.addEventListener("keyup", this.boundOnKeyUp);
   }
 
   /**
@@ -293,7 +310,17 @@ export class CanvasEventManager {
    * Cleanup
    */
   destroy(): void {
-    // Remove event listeners if needed
+    this.canvas.removeEventListener("mousemove", this.boundOnMouseMove);
+    this.canvas.removeEventListener("mousedown", this.boundOnMouseDown);
+    this.canvas.removeEventListener("mouseup", this.boundOnMouseUp);
+    this.canvas.removeEventListener("click", this.boundOnClick);
+    this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
+    this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
+    this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
+    this.rootNode = null;
+    this.hoveredNode = null;
+    this.focusedNode = null;
+    this.mouseDownNode = null;
   }
 }
 

package/src/canvas/paint.ts

@@ -416,6 +416,62 @@ function paintInput(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   }
 }
 
+/**
+ * Image cache for canvas renderer
+ */
+const MAX_IMAGE_CACHE_SIZE = 100;
+const MAX_FAIL_CACHE_SIZE = 200;
+const imageCache = new Map<string, HTMLImageElement>();
+const imagePending = new Set<string>();
+const imageInFlight = new Map<string, HTMLImageElement>();
+const imageFailCache = new Map<string, { failedAt: number; attempts: number }>();
+const IMAGE_FAIL_COOLDOWN_MS = 30_000;
+const IMAGE_MAX_ATTEMPTS = 3;
+
+/**
+ * Evict oldest entries from a Map when it exceeds the given maximum size.
+ */
+function evictMap<V>(map: Map<string, V>, max: number): void {
+  while (map.size > max) {
+    const oldest = map.keys().next().value;
+    if (oldest === undefined) break;
+    map.delete(oldest);
+  }
+}
+
+/**
+ * Purge expired entries from imageFailCache.
+ */
+function purgeExpiredFailures(): void {
+  const now = Date.now();
+  for (const [key, entry] of imageFailCache) {
+    if (entry.attempts >= IMAGE_MAX_ATTEMPTS) continue; // Keep max-attempt entries until evicted by size
+    if (now - entry.failedAt >= IMAGE_FAIL_COOLDOWN_MS) {
+      imageFailCache.delete(key);
+    }
+  }
+}
+
+/**
+ * Clear the image cache and cancel all in-flight loads, freeing resources.
+ */
+export function clearImageCache(): void {
+  // Cancel in-flight Image loads so their callbacks cannot repopulate caches
+  for (const img of imageInFlight.values()) {
+    img.onload = null;
+    img.onerror = null;
+    img.src = "";
+  }
+  imageInFlight.clear();
+
+  for (const img of imageCache.values()) {
+    img.src = "";
+  }
+  imageCache.clear();
+  imagePending.clear();
+  imageFailCache.clear();
+}
+
 /**
  * Paint image node
  */
@@ -426,13 +482,19 @@ function paintImage(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   const src = props.src || props[0];
   if (!src) return;
 
-  // TODO: Load and cache images
-  // For now, just draw a placeholder
   const x = layout.x;
   const y = layout.y;
   const width = layout.width;
   const height = layout.height;
 
+  const cached = imageCache.get(src);
+  if (cached && cached.complete && cached.naturalWidth > 0) {
+    // Draw the loaded image
+    ctx.drawImage(cached, x, y, width, height);
+    return;
+  }
+
+  // Draw placeholder while loading
   ctx.fillStyle = "#e0e0e0";
   ctx.fillRect(x, y, width, height);
 
@@ -440,12 +502,50 @@ function paintImage(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   ctx.lineWidth = 1;
   ctx.strokeRect(x, y, width, height);
 
-  // Draw "IMG" text
   ctx.fillStyle = "#666666";
   ctx.font = "14px sans-serif";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.fillText("IMG", x + width / 2, y + height / 2);
+
+  // Check if this URL has failed recently
+  const failEntry = imageFailCache.get(src);
+  if (failEntry) {
+    if (failEntry.attempts >= IMAGE_MAX_ATTEMPTS || Date.now() - failEntry.failedAt < IMAGE_FAIL_COOLDOWN_MS) {
+      ctx.fillText("Failed", x + width / 2, y + height / 2);
+      return;
+    }
+  }
+
+  ctx.fillText("Loading...", x + width / 2, y + height / 2);
+
+  // Start loading if not already pending
+  if (!imagePending.has(src)) {
+    imagePending.add(src);
+    const canvas = ctx.canvas;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    imageInFlight.set(src, img);
+    img.onload = () => {
+      imageInFlight.delete(src);
+      imageCache.set(src, img);
+      imagePending.delete(src);
+      imageFailCache.delete(src);
+      evictMap(imageCache, MAX_IMAGE_CACHE_SIZE);
+      // Request a repaint so the loaded image is drawn
+      canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
+    };
+    img.onerror = () => {
+      imageInFlight.delete(src);
+      imagePending.delete(src);
+      purgeExpiredFailures();
+      imageFailCache.set(src, {
+        failedAt: Date.now(),
+        attempts: (imageFailCache.get(src)?.attempts ?? 0) + 1,
+      });
+      evictMap(imageFailCache, MAX_FAIL_CACHE_SIZE);
+    };
+    img.src = src;
+  }
 }
 
 /**

package/src/dom/applicators/events.ts

@@ -246,10 +246,14 @@ function createEventHandler(
             ? options.extractPayload(event, element)
             : extractEventData(event, element);
 
-      // Dispatch to engine
+      // Dispatch to engine, catching any async rejections
       const engine = getEngine(element);
       if (engine) {
-        engine.dispatchAction(actionName, payload);
+        try {
+          engine.dispatchAction(actionName, payload);
+        } catch (err) {
+          log.error(`Error dispatching action "${actionName}":`, err);
+        }
       }
     };
 
@@ -558,6 +562,11 @@ export const eventHandlers: Record<string, ApplicatorHandler> = {
         disposableListener(element, "input", listener, { passive: true })
       );
     } else {
+      log.warn(
+        `.bind() is not supported on element type "${element.dataset?.hypenType || element.tagName}". ` +
+        `Supported types: input, textarea, checkbox, switch, select.`
+      );
+      unregisterEvent(element, eventKey);
       return;
     }
 

package/src/dom/components/textarea.ts

@@ -8,14 +8,14 @@ export const textareaHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.createElement("textarea");
     el.dataset.hypenType = "textarea";
-    return el as any as HTMLElement;
+    return el as HTMLElement;
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
     const textarea = el as HTMLTextAreaElement;
 
-    // Value property
-    const value = props["0"] || props.value;
+    // Value property - check named prop first, then positional (consistent with Input)
+    const value = props.value ?? props["0"];
     if (value !== undefined) {
       textarea.value = String(value);
     }

package/src/dom/events.ts

@@ -60,13 +60,20 @@ export class EventManager {
       }
     };
 
-    // Store listener reference
+    // Store listener reference using `domEventName` so `detach()` uses the correct name
     let elementBindings = this.bindings.get(elementId);
     if (!elementBindings) {
       elementBindings = new Map();
       this.bindings.set(elementId, elementBindings);
     }
-    elementBindings.set(eventName, listener);
+
+    // Remove any previously attached listener for this event before overwriting,
+    // otherwise the old DOM listener leaks and fires alongside the new one.
+    const existingListener = elementBindings.get(domEventName);
+    if (existingListener) {
+      element.removeEventListener(domEventName, existingListener);
+    }
+    elementBindings.set(domEventName, listener);
 
     // Attach to DOM
     element.addEventListener(domEventName, listener);
@@ -77,26 +84,21 @@ export class EventManager {
       dataset: element.dataset,
       textContent: element.textContent?.substring(0, 50)
     });
-
-    // Test: Add a simple click listener to verify DOM events work
-    if (domEventName === "click") {
-      element.addEventListener("click", (e) => {
-        log.debug(`Raw DOM click detected on ${element.tagName}`, e);
-      });
-    }
   }
 
   /**
    * Detach an event listener from an element
    */
   detach(elementId: string, element: HTMLElement, eventName: string): void {
+    // Convert framework event name to DOM event name, matching `attach()`
+    const domEventName = eventName === "onClick" ? "click" : eventName;
     const elementBindings = this.bindings.get(elementId);
     if (!elementBindings) return;
 
-    const listener = elementBindings.get(eventName);
+    const listener = elementBindings.get(domEventName);
     if (listener) {
-      element.removeEventListener(eventName, listener);
-      elementBindings.delete(eventName);
+      element.removeEventListener(domEventName, listener);
+      elementBindings.delete(domEventName);
     }
 
     if (elementBindings.size === 0) {

package/src/dom/renderer.ts

@@ -15,7 +15,7 @@ import { ComponentRegistry } from "./components/index.js";
 import { ApplicatorRegistry } from "./applicators/index.js";
 import { canvasHandler, canvasApplicators } from "./canvas/index.js";
 import { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./debug.js";
-import { setEngine } from "./element-data.js";
+import { setEngine, disposeHypenElement } from "./element-data.js";
 
 // Interface for the engine that renderer needs
 interface IEngine {
@@ -311,6 +311,9 @@ export class DOMRenderer {
     const element = this.nodes.get(id);
     if (!element) return;
 
+    // Dispose event listeners and other resources before removing from DOM
+    disposeHypenElement(element);
+
     if (element.parentNode) {
       element.parentNode.removeChild(element);
     }
@@ -333,6 +336,10 @@ export class DOMRenderer {
    * Clear all nodes
    */
   clear(): void {
+    // Dispose all element resources before clearing
+    for (const element of this.nodes.values()) {
+      disposeHypenElement(element);
+    }
     this.container.innerHTML = "";
     this.nodes.clear();
     this.rootId = null;