@hypen-space/web 0.4.3 → 0.4.11

package/dist/hypen.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)
@@ -3568,7 +3626,6 @@ class Hypen {
     componentLoader.register("Router", Router, "");
     componentLoader.register("Route", Route, "");
     componentLoader.register("Link", Link, "");
-    this.globalContext.__router = this.router;
     this.globalContext.__hypenEngine = this;
   }
   async init() {
@@ -3615,13 +3672,9 @@ class Hypen {
       log6.debug(`Applying ${patches.length} patches`);
       this.renderer.applyPatches(patches);
     });
-    const routerContext = {
-      root: this.router,
-      current: this.router
-    };
-    this.renderer.setContext(routerContext, this.globalContext);
+    this.renderer.setContext(this.router, this.globalContext);
     const moduleId = this.extractModuleId(componentName, component.template);
-    this.moduleInstance = new HypenModuleInstance(this.engine, component.module, routerContext, this.globalContext);
+    this.moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
     this.globalContext.registerModule(moduleId, this.moduleInstance);
     this.moduleInstances.set(moduleId, this.moduleInstance);
     this.moduleInstance.onStateChange(() => {
@@ -3689,11 +3742,7 @@ class Hypen {
     }
     if (component.module && !this.moduleInstances.has(componentName)) {
       const moduleId = this.extractModuleId(componentName, template);
-      const routerContext = {
-        root: this.router,
-        current: this.router
-      };
-      const moduleInstance = new HypenModuleInstance(this.engine, component.module, routerContext, this.globalContext);
+      const moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
       this.globalContext.registerModule(moduleId, moduleInstance);
       this.moduleInstances.set(componentName, moduleInstance);
       moduleInstance.onStateChange(() => {
@@ -3720,12 +3769,8 @@ class Hypen {
     return componentName;
   }
   createNestedModuleInstances() {
-    const routerContext = {
-      root: this.router,
-      current: this.router
-    };
     if (Router && !this.moduleInstances.has("Router")) {
-      const routerInstance = new HypenModuleInstance(this.engine, Router, routerContext, this.globalContext);
+      const routerInstance = new HypenModuleInstance(this.engine, Router, this.router, this.globalContext);
       this.globalContext.registerModule("Router", routerInstance);
       this.moduleInstances.set("Router", routerInstance);
       routerInstance.onStateChange(() => {
@@ -3744,7 +3789,7 @@ class Hypen {
         continue;
       }
       log6.debug(`Creating nested module instance for: ${name}`);
-      const moduleInstance = new HypenModuleInstance(this.engine, comp.module, routerContext, this.globalContext);
+      const moduleInstance = new HypenModuleInstance(this.engine, comp.module, this.router, this.globalContext);
       this.globalContext.registerModule(name, moduleInstance);
       this.moduleInstances.set(name, moduleInstance);
       moduleInstance.onStateChange(() => {
@@ -3841,4 +3886,4 @@ export {
   Hypen
 };
 
-//# debugId=79019BA840D0560F64756E2164756E21
+//# debugId=8C40DA488E3B928064756E2164756E21