@hypen-space/web 0.4.3 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.4.3",
+  "version": "0.4.11",
   "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.3"
+    "@hypen-space/core": "^0.4.11"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/canvas/input.ts

@@ -7,6 +7,11 @@
 import type { VirtualNode, Rectangle } from "./types.js";
 import { getAbsoluteBounds } from "./utils.js";
 
+/** Minimal engine interface for dispatching bind actions */
+interface BindEngine {
+  dispatchAction(name: string, payload?: unknown): void;
+}
+
 /**
  * Input Overlay Manager
  */
@@ -15,6 +20,8 @@ export class InputOverlay {
   private overlay: HTMLInputElement | HTMLTextAreaElement | null = null;
   private focusedNode: VirtualNode | null = null;
   private onChangeCallback: ((value: string) => void) | null = null;
+  private bindPath: string | null = null;
+  private engine: BindEngine | null = null;
 
   constructor(container: HTMLElement | null) {
     this.container = container || ({} as HTMLElement);
@@ -26,13 +33,18 @@ export class InputOverlay {
   showInput(
     node: VirtualNode,
     canvasBounds: DOMRect,
-    onChange: (value: string) => void
+    onChange: (value: string) => void,
+    engine?: BindEngine | null
   ): void {
     // Skip if document is not available (non-browser environment)
     if (typeof document === "undefined") return;
 
     this.hideInput();
 
+    // Store bind path and engine for two-way binding
+    this.bindPath = (node.props.bind as string) || null;
+    this.engine = engine || null;
+
     const bounds = getAbsoluteBounds(node);
     if (!bounds) return;
 
@@ -71,6 +83,8 @@ export class InputOverlay {
     }
     this.focusedNode = null;
     this.onChangeCallback = null;
+    this.bindPath = null;
+    this.engine = null;
   }
 
   /**
@@ -164,6 +178,14 @@ export class InputOverlay {
 
     const value = this.overlay.value;
     this.onChangeCallback(value);
+
+    // Dispatch __hypen_bind for two-way binding
+    if (this.bindPath && this.engine) {
+      this.engine.dispatchAction("__hypen_bind", {
+        path: this.bindPath,
+        value,
+      });
+    }
   }
 
   /**

package/src/canvas/renderer.ts

@@ -141,6 +141,10 @@ export class CanvasRenderer implements Renderer {
         this.onSetProp(patch.id!, patch.name!, patch.value);
         break;
 
+      case "removeProp":
+        this.onRemoveProp(patch.id!, patch.name!);
+        break;
+
       case "setText":
         this.onSetText(patch.id!, patch.text!);
         break;
@@ -202,6 +206,25 @@ export class CanvasRenderer implements Renderer {
     this.accessibilityLayer.updateNode(node);
   }
 
+  /**
+   * Remove a property from a node
+   */
+  private onRemoveProp(id: string, name: string): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+
+    delete node.props[name];
+
+    if (name === "visible") {
+      node.visible = true;
+    }
+    if (name === "opacity") {
+      node.opacity = 1;
+    }
+
+    this.accessibilityLayer.updateNode(node);
+  }
+
   /**
    * Set text on node
    */

package/src/dom/applicators/advanced-layout.ts

@@ -23,10 +23,6 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
     el.style.alignContent = String(value);
   },
 
-  alignSelf: (el, value) => {
-    el.style.alignSelf = String(value);
-  },
-
   order: (el, value) => {
     el.style.order = String(value);
   },

package/src/dom/applicators/events.ts

@@ -492,4 +492,75 @@ export const eventHandlers: Record<string, ApplicatorHandler> = {
   // Mouse hover events
   onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
   onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+
+  // Two-way binding for .bind(@state.x)
+  bind: ((element: HTMLElement, value: unknown) => {
+    const bindPath = typeof value === "string" ? value : null;
+    if (!bindPath) return;
+
+    const disposables = getElementDisposables(element);
+    const eventKey = `bind:${bindPath}`;
+    if (getRegisteredEvents(element).has(eventKey)) return;
+    registerEvent(element, eventKey);
+
+    // Determine the target element, event type, and value extractor based on component type
+    const hypenType = element.dataset?.hypenType;
+
+    if (hypenType === "checkbox" || hypenType === "switch") {
+      // Checkbox/Switch: wrapper <label> containing <input type="checkbox">
+      const input = element.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
+      if (!input) return;
+
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: input.checked,
+          });
+        }
+      };
+
+      disposables.add(
+        disposableListener(input, "change", listener, { passive: true })
+      );
+    } else if (element instanceof HTMLSelectElement) {
+      // Select: listen to change event, read .value
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: element.value,
+          });
+        }
+      };
+
+      disposables.add(
+        disposableListener(element, "change", listener, { passive: true })
+      );
+    } else if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement
+    ) {
+      // Input/Textarea: listen to input event, read .value
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: element.value,
+          });
+        }
+      };
+
+      disposables.add(
+        disposableListener(element, "input", listener, { passive: true })
+      );
+    } else {
+      return;
+    }
+
+    disposables.addCallback(() => unregisterEvent(element, eventKey));
+  }) as ApplicatorHandler,
 };

package/src/dom/renderer.ts

@@ -5,7 +5,7 @@
  */
 
 import type { Patch } from "@hypen-space/core/types";
-import type { HypenModuleInstance, RouterContext } from "@hypen-space/core/app";
+import type { HypenModuleInstance } from "@hypen-space/core/app";
 import type { HypenRouter } from "@hypen-space/core/router";
 import type { HypenGlobalContext } from "@hypen-space/core/context";
 import { frameworkLoggers } from "@hypen-space/core/logger";
@@ -30,7 +30,7 @@ export class DOMRenderer {
   private applicators: ApplicatorRegistry;
   private engine: IEngine;
   private currentState: Record<string, any> = {};
-  private routerContext: RouterContext | null = null;
+  private router: HypenRouter | null = null;
   private globalContext: HypenGlobalContext | null = null;
   private componentInstances = new Map<string, HypenModuleInstance>();
   private debugTracker: RerenderTracker;
@@ -52,8 +52,8 @@ export class DOMRenderer {
   /**
    * Set router and global context for component composition
    */
-  setContext(routerContext: RouterContext, globalContext: HypenGlobalContext): void {
-    this.routerContext = routerContext;
+  setContext(router: HypenRouter | null, globalContext: HypenGlobalContext): void {
+    this.router = router;
     this.globalContext = globalContext;
   }
 
@@ -144,6 +144,9 @@ export class DOMRenderer {
       case "setProp":
         this.onSetProp(id!, patch.name!, patch.value);
         break;
+      case "removeProp":
+        this.onRemoveProp(id!, patch.name!);
+        break;
       case "setText":
         this.onSetText(id!, patch.text!);
         break;
@@ -239,6 +242,17 @@ export class DOMRenderer {
     this.applicators.apply(element, name, value);
   }
 
+  /**
+   * Remove a property from an element
+   */
+  private onRemoveProp(id: string, name: string): void {
+    const element = this.nodes.get(id);
+    if (!element) return;
+
+    this.debugTracker.trackRerender(id, element, `removeProp:${name}`);
+    this.applicators.apply(element, name, undefined);
+  }
+
   /**
    * Set text content
    */

package/src/hypen.ts

@@ -6,7 +6,7 @@
 
 import { Engine } from "@hypen-space/core/engine/browser";
 import { HypenModuleInstance } from "@hypen-space/core/app";
-import type { RouterContext, HypenModuleDefinition } from "@hypen-space/core/app";
+import type { HypenModuleDefinition } from "@hypen-space/core/app";
 import { HypenRouter } from "@hypen-space/core/router";
 import { HypenGlobalContext } from "@hypen-space/core/context";
 import { componentLoader } from "@hypen-space/core/loader";
@@ -65,8 +65,7 @@ export class Hypen {
     componentLoader.register("Route", Route, "");
     componentLoader.register("Link", Link, "");
 
-    // Store router and hypen instance in global context for access in components
-    (this.globalContext as any).__router = this.router;
+    // Store hypen engine instance in global context for built-in component access
     (this.globalContext as any).__hypenEngine = this;
   }
 
@@ -150,14 +149,8 @@ export class Hypen {
       this.renderer!.applyPatches(patches);
     });
 
-    // Create router context
-    const routerContext: RouterContext = {
-      root: this.router,
-      current: this.router,
-    };
-
     // Set context on renderer for component composition
-    this.renderer.setContext(routerContext, this.globalContext);
+    this.renderer.setContext(this.router, this.globalContext);
 
     // Extract module ID from component name or .id() applicator
     const moduleId = this.extractModuleId(componentName, component.template);
@@ -166,7 +159,7 @@ export class Hypen {
     this.moduleInstance = new HypenModuleInstance(
       this.engine,
       component.module,
-      routerContext,
+      this.router,
       this.globalContext
     );
 
@@ -305,15 +298,10 @@ export class Hypen {
     if (component.module && !this.moduleInstances.has(componentName)) {
       const moduleId = this.extractModuleId(componentName, template);
 
-      const routerContext: RouterContext = {
-        root: this.router,
-        current: this.router,
-      };
-
       const moduleInstance = new HypenModuleInstance(
         this.engine,
         component.module,
-        routerContext,
+        this.router,
         this.globalContext
       );
 
@@ -366,17 +354,12 @@ export class Hypen {
    * Create module instances for all components that have state
    */
   private createNestedModuleInstances(): void {
-    const routerContext: RouterContext = {
-      root: this.router,
-      current: this.router,
-    };
-
     // Create built-in Router module instance
     if (Router && !this.moduleInstances.has("Router")) {
       const routerInstance = new HypenModuleInstance(
         this.engine!,
         Router,
-        routerContext,
+        this.router,
         this.globalContext
       );
       this.globalContext.registerModule("Router", routerInstance);
@@ -408,7 +391,7 @@ export class Hypen {
       const moduleInstance = new HypenModuleInstance(
         this.engine!,
         comp.module,
-        routerContext,
+        this.router,
         this.globalContext
       );