@hypen-space/web 0.4.3 → 0.4.11

package/dist/dom/renderer.d.ts

@@ -4,7 +4,7 @@
  * Renders Hypen patches to the DOM
  */
 import type { Patch } from "@hypen-space/core/types";
-import type { RouterContext } from "@hypen-space/core/app";
+import type { HypenRouter } from "@hypen-space/core/router";
 import type { HypenGlobalContext } from "@hypen-space/core/context";
 import { ComponentRegistry } from "./components/index.js";
 import { ApplicatorRegistry } from "./applicators/index.js";
@@ -20,7 +20,7 @@ export declare class DOMRenderer {
     private applicators;
     private engine;
     private currentState;
-    private routerContext;
+    private router;
     private globalContext;
     private componentInstances;
     private debugTracker;
@@ -28,7 +28,7 @@ export declare class DOMRenderer {
     /**
      * Set router and global context for component composition
      */
-    setContext(routerContext: RouterContext, globalContext: HypenGlobalContext): void;
+    setContext(router: HypenRouter | null, globalContext: HypenGlobalContext): void;
     /**
      * Apply a batch of patches to the DOM
      */
@@ -63,6 +63,10 @@ export declare class DOMRenderer {
      * Set a property on an element
      */
     private onSetProp;
+    /**
+     * Remove a property from an element
+     */
+    private onRemoveProp;
     /**
      * Set text content
      */

package/dist/dom/renderer.js

@@ -2351,7 +2351,58 @@ var eventHandlers = {
   onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
   onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
   onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
+  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+  bind: (element, value) => {
+    const bindPath = typeof value === "string" ? value : null;
+    if (!bindPath)
+      return;
+    const disposables = getElementDisposables2(element);
+    const eventKey = `bind:${bindPath}`;
+    if (getRegisteredEvents(element).has(eventKey))
+      return;
+    registerEvent(element, eventKey);
+    const hypenType = element.dataset?.hypenType;
+    if (hypenType === "checkbox" || hypenType === "switch") {
+      const input = element.querySelector('input[type="checkbox"]');
+      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) {
+      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) {
+      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));
+  }
 };
 
 // src/dom/applicators/typography.ts
@@ -2612,9 +2663,6 @@ var advancedLayoutHandlers = {
   alignContent: (el, value) => {
     el.style.alignContent = String(value);
   },
-  alignSelf: (el, value) => {
-    el.style.alignSelf = String(value);
-  },
   order: (el, value) => {
     el.style.order = String(value);
   },
@@ -3320,7 +3368,7 @@ class DOMRenderer {
   applicators;
   engine;
   currentState = {};
-  routerContext = null;
+  router = null;
   globalContext = null;
   componentInstances = new Map;
   debugTracker;
@@ -3335,8 +3383,8 @@ class DOMRenderer {
       this.applicators.register(name, handler);
     }
   }
-  setContext(routerContext, globalContext) {
-    this.routerContext = routerContext;
+  setContext(router, globalContext) {
+    this.router = router;
     this.globalContext = globalContext;
   }
   applyPatches(patches) {
@@ -3395,6 +3443,9 @@ 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;
@@ -3462,6 +3513,13 @@ class DOMRenderer {
     }
     this.applicators.apply(element, name, value);
   }
+  onRemoveProp(id, name) {
+    const element = this.nodes.get(id);
+    if (!element)
+      return;
+    this.debugTracker.trackRerender(id, element, `removeProp:${name}`);
+    this.applicators.apply(element, name, undefined);
+  }
   onSetText(id, text) {
     const element = this.nodes.get(id);
     if (!element)
@@ -3538,4 +3596,4 @@ export {
   DOMRenderer
 };
 
-//# debugId=CB1F5BB91A5CA1C364756E2164756E21
+//# debugId=6DB06606E56538AC64756E2164756E21