@hypen-space/web 0.4.3 → 0.4.11

package/dist/index.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)
@@ -5228,13 +5286,17 @@ class InputOverlay {
   overlay = null;
   focusedNode = null;
   onChangeCallback = null;
+  bindPath = null;
+  engine = null;
   constructor(container) {
     this.container = container || {};
   }
-  showInput(node, canvasBounds, onChange) {
+  showInput(node, canvasBounds, onChange, engine) {
     if (typeof document === "undefined")
       return;
     this.hideInput();
+    this.bindPath = node.props.bind || null;
+    this.engine = engine || null;
     const bounds = getAbsoluteBounds(node);
     if (!bounds)
       return;
@@ -5258,6 +5320,8 @@ class InputOverlay {
     }
     this.focusedNode = null;
     this.onChangeCallback = null;
+    this.bindPath = null;
+    this.engine = null;
   }
   updatePosition(node, canvasBounds) {
     if (!this.overlay || node !== this.focusedNode)
@@ -5319,6 +5383,12 @@ class InputOverlay {
       return;
     const value = this.overlay.value;
     this.onChangeCallback(value);
+    if (this.bindPath && this.engine) {
+      this.engine.dispatchAction("__hypen_bind", {
+        path: this.bindPath,
+        value
+      });
+    }
   }
   onBlur() {
     this.hideInput();
@@ -5559,6 +5629,9 @@ class CanvasRenderer {
       case "setProp":
         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;
@@ -5603,6 +5676,19 @@ class CanvasRenderer {
     }
     this.accessibilityLayer.updateNode(node);
   }
+  onRemoveProp(id, name) {
+    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);
+  }
   onSetText(id, text) {
     const node = this.nodes.get(id);
     if (!node)
@@ -5755,4 +5841,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=F23E5C520868952164756E2164756E21
+//# debugId=BCCCE4DA4D43838E64756E2164756E21