@hypen-space/web 0.4.2 → 0.4.5

package/dist/dom/renderer.d.ts

@@ -0,0 +1,115 @@
+/**
+ * DOM Renderer
+ *
+ * Renders Hypen patches to the DOM
+ */
+import type { Patch } from "@hypen-space/core/types";
+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";
+import { type DebugConfig } from "./debug.js";
+interface IEngine {
+    dispatchAction(name: string, payload?: any): void;
+}
+export declare class DOMRenderer {
+    private container;
+    private nodes;
+    private rootId;
+    private components;
+    private applicators;
+    private engine;
+    private currentState;
+    private router;
+    private globalContext;
+    private componentInstances;
+    private debugTracker;
+    constructor(container: HTMLElement, engine: IEngine, debugConfig?: Partial<DebugConfig>);
+    /**
+     * Set router and global context for component composition
+     */
+    setContext(router: HypenRouter | null, globalContext: HypenGlobalContext): void;
+    /**
+     * Apply a batch of patches to the DOM
+     */
+    applyPatches(patches: Patch[]): void;
+    /**
+     * Update state and interpolate text content
+     */
+    updateState(state: Record<string, any>): void;
+    /**
+     * Merge component state into current state and re-interpolate
+     */
+    private mergeComponentState;
+    /**
+     * Interpolate state values in all text elements
+     */
+    private interpolateAllText;
+    /**
+     * Interpolate state values in text template
+     */
+    private interpolateText;
+    /**
+     * Apply a single patch
+     *
+     * Handles both camelCase (direct WASM) and snake_case (WebSocket JSON) field names.
+     */
+    private applyPatch;
+    /**
+     * Create a new element
+     */
+    private onCreate;
+    /**
+     * Set a property on an element
+     */
+    private onSetProp;
+    /**
+     * Set text content
+     */
+    private onSetText;
+    /**
+     * Insert an element into the tree
+     */
+    private onInsert;
+    /**
+     * Move an element within the tree
+     */
+    private onMove;
+    /**
+     * Remove an element from the tree
+     */
+    private onRemove;
+    /**
+     * Get an element by ID
+     */
+    getNode(id: string): HTMLElement | undefined;
+    /**
+     * Clear all nodes
+     */
+    clear(): void;
+    /**
+     * Get the component registry (for registering custom components)
+     */
+    getComponentRegistry(): ComponentRegistry;
+    /**
+     * Get the applicator registry (for registering custom applicators)
+     */
+    getApplicatorRegistry(): ApplicatorRegistry;
+    /**
+     * Enable or configure debug mode
+     */
+    setDebugConfig(config: Partial<DebugConfig>): void;
+    /**
+     * Reset debug tracking for all elements
+     */
+    resetDebugTracking(): void;
+    /**
+     * Get debug statistics
+     */
+    getDebugStats(): {
+        totalRerenders: number;
+        elementCount: number;
+        avgRerenders: number;
+    };
+}
+export {};

package/dist/dom/renderer.js

@@ -1011,7 +1011,7 @@ var exports_route = {};
 __export(exports_route, {
   routeHandler: () => routeHandler
 });
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log, routeHandler;
 var init_route = __esm(() => {
   log = frameworkLoggers.router;
@@ -1046,7 +1046,7 @@ __export(exports_hypenapp, {
   disconnectHypenApp: () => disconnectHypenApp
 });
 import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
 function applyPatches(container, nodes, patches, engine, onRoot) {
   for (const patch of patches) {
     switch (patch.type) {
@@ -1202,8 +1202,6 @@ function applyProp(el, name, value) {
     border: "border",
     gap: "gap",
     flex: "flex",
-    alignItems: "alignItems",
-    justifyContent: "justifyContent",
     opacity: "opacity",
     overflow: "overflow"
   };
@@ -1301,6 +1299,26 @@ var init_hypenapp = __esm(() => {
   };
 });
 
+// src/dom/components/app.ts
+var exports_app = {};
+__export(exports_app, {
+  appHandler: () => appHandler
+});
+var appHandler;
+var init_app = __esm(() => {
+  appHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.minHeight = "100vh";
+      el.style.width = "100%";
+      el.dataset.hypenType = "app";
+      return el;
+    }
+  };
+});
+
 // src/dom/components/index.ts
 class ComponentRegistry {
   handlers = new Map;
@@ -1311,9 +1329,13 @@ class ComponentRegistry {
     this.handlers.set(type.toLowerCase(), handler);
   }
   get(type) {
+    if (!type)
+      return;
     return this.handlers.get(type.toLowerCase());
   }
   createElement(type, props = {}) {
+    if (!type)
+      return null;
     const handler = this.get(type);
     if (!handler)
       return null;
@@ -1355,6 +1377,8 @@ class ComponentRegistry {
     const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
     const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
     const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
+    const { appHandler: appHandler2 } = (init_app(), __toCommonJS(exports_app));
+    this.register("app", appHandler2);
     this.register("column", columnHandler2);
     this.register("row", rowHandler2);
     this.register("text", textHandler2);
@@ -2038,7 +2062,7 @@ import {
   disposableListener,
   disposableTimeout
 } from "@hypen-space/core/disposable";
-import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core/logger";
 var log3 = frameworkLoggers3.events;
 function toPlainObject(value) {
   if (value instanceof Map) {
@@ -2323,10 +2347,62 @@ var eventHandlers = {
     extractPayload: scrollPayload
   }),
   onLongClick: createLongClickHandler(500),
+  onLongPress: createLongClickHandler(500),
   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
@@ -2584,12 +2660,6 @@ var advancedLayoutHandlers = {
   flexBasis: (el, value) => {
     el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
   },
-  justifyContent: (el, value) => {
-    el.style.justifyContent = mapAlignmentValue(String(value));
-  },
-  alignItems: (el, value) => {
-    el.style.alignItems = mapAlignmentValue(String(value));
-  },
   alignContent: (el, value) => {
     el.style.alignContent = String(value);
   },
@@ -3127,7 +3197,7 @@ var canvasApplicators = {
 };
 
 // src/dom/debug.ts
-import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core/logger";
 var log4 = frameworkLoggers4.debug;
 var defaultDebugConfig = {
   enabled: false,
@@ -3290,7 +3360,7 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
-import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core/logger";
 var log5 = frameworkLoggers5.renderer;
 
 class DOMRenderer {
@@ -3301,7 +3371,7 @@ class DOMRenderer {
   applicators;
   engine;
   currentState = {};
-  routerContext = null;
+  router = null;
   globalContext = null;
   componentInstances = new Map;
   debugTracker;
@@ -3316,8 +3386,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) {
@@ -3363,24 +3433,30 @@ class DOMRenderer {
     });
   }
   applyPatch(patch) {
+    const p = patch;
+    const id = patch.id ?? p.id;
+    const elementType = patch.elementType ?? p.element_type;
+    const parentId = patch.parentId ?? p.parent_id;
+    const beforeId = patch.beforeId ?? p.before_id;
+    const eventName = patch.eventName ?? p.event_name;
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id, patch.elementType, patch.props || {});
+        this.onCreate(id, elementType ?? "container", patch.props || {});
         break;
       case "setProp":
-        this.onSetProp(patch.id, patch.name, patch.value);
+        this.onSetProp(id, patch.name, patch.value);
         break;
       case "setText":
-        this.onSetText(patch.id, patch.text);
+        this.onSetText(id, patch.text);
         break;
       case "insert":
-        this.onInsert(patch.parentId, patch.id, patch.beforeId);
+        this.onInsert(parentId, id, beforeId);
         break;
       case "move":
-        this.onMove(patch.parentId, patch.id, patch.beforeId);
+        this.onMove(parentId, id, beforeId);
         break;
       case "remove":
-        this.onRemove(patch.id);
+        this.onRemove(id);
         break;
     }
   }
@@ -3513,4 +3589,4 @@ export {
   DOMRenderer
 };
 
-//# debugId=2DB804639EB78B3764756E2164756E21
+//# debugId=747876C05653F2AC64756E2164756E21