@hypen-space/web 0.4.2 → 0.4.5

package/dist/hypen.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Hypen - High-Level API for Web Applications
+ *
+ * Simple API for rendering Hypen applications (like ReactDOM.render)
+ */
+import { HypenModuleInstance } 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";
+export interface HypenConfig {
+    /** Base directory for components (default: "./src/components") */
+    componentsDir?: string;
+    /** Enable debug logging */
+    debug?: boolean;
+    /** Custom WASM URL */
+    wasmUrl?: string;
+    /** Custom WASM JS glue URL */
+    jsUrl?: string;
+    /** Enable re-render heatmap debugging */
+    debugHeatmap?: boolean;
+    /** Heatmap increment per re-render (default: 5%) */
+    heatmapIncrement?: number;
+    /** Heatmap fade out duration in ms (default: 2000) */
+    heatmapFadeOut?: number;
+}
+export declare class Hypen {
+    private engine;
+    private renderer;
+    private moduleInstance;
+    private container;
+    private config;
+    private router;
+    private globalContext;
+    private moduleInstances;
+    constructor(config?: HypenConfig);
+    /**
+     * Initialize the Hypen runtime
+     * Must be called before render()
+     */
+    init(): Promise<void>;
+    /**
+     * Load all components from the components directory
+     */
+    loadComponents(componentsDir?: string): Promise<void>;
+    /**
+     * Render a component to a DOM container
+     *
+     * @param componentName - Name of the component to render (e.g., "HomePage")
+     * @param containerSelector - CSS selector or HTMLElement for the mount point
+     */
+    render(componentName: string, containerSelector: string | HTMLElement): Promise<void>;
+    /**
+     * Unmount and cleanup
+     */
+    unmount(): Promise<void>;
+    /**
+     * Get the current module instance
+     */
+    getModuleInstance(): HypenModuleInstance<any> | null;
+    /**
+     * Get the current state
+     */
+    getState(): any;
+    /**
+     * Get the router instance
+     */
+    getRouter(): HypenRouter;
+    /**
+     * Get the global context
+     */
+    getGlobalContext(): HypenGlobalContext;
+    /**
+     * Enable or disable debug heatmap mode
+     */
+    setDebugHeatmap(enabled: boolean): void;
+    /**
+     * Reset debug tracking for all elements
+     */
+    resetDebugTracking(): void;
+    /**
+     * Get debug statistics
+     */
+    getDebugStats(): {
+        totalRerenders: number;
+        elementCount: number;
+        avgRerenders: number;
+    } | null;
+    /**
+     * Render a lazy route component into a specific route element
+     * This is called by the Router when a route becomes active
+     */
+    renderLazyRoute(routePath: string, componentName: string, routeElement: HTMLElement): Promise<void>;
+    /**
+     * Extract module ID from component name or .id() applicator
+     */
+    private extractModuleId;
+    /**
+     * Create module instances for all components that have state
+     */
+    private createNestedModuleInstances;
+    /**
+     * Get merged state from all module instances
+     */
+    private getMergedState;
+    /**
+     * Set up component resolver for the engine
+     */
+    private setupComponentResolver;
+}
+/**
+ * Quick render function (like ReactDOM.render)
+ *
+ * @example
+ * ```typescript
+ * import { render } from "@hypen-space/web/client";
+ *
+ * await render("HomePage", "#app");
+ * ```
+ */
+export declare function render(componentName: string, containerSelector: string | HTMLElement, config?: HypenConfig): Promise<Hypen>;
+/**
+ * Render with explicit component loading
+ *
+ * @example
+ * ```typescript
+ * import { renderWithComponents } from "@hypen-space/web/client";
+ * import HomePage from "./components/HomePage/component";
+ * import homePageTemplate from "./components/HomePage/component.hypen";
+ *
+ * await renderWithComponents(
+ *   { HomePage: { module: HomePage, template: homePageTemplate } },
+ *   "HomePage",
+ *   "#app"
+ * );
+ * ```
+ */
+export declare function renderWithComponents(components: Record<string, {
+    module: HypenModuleDefinition;
+    template: string;
+}>, componentName: string, containerSelector: string | HTMLElement, config?: HypenConfig): Promise<Hypen>;

package/dist/hypen.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;
     }
   }
@@ -3517,7 +3593,7 @@ import { HypenRouter } from "@hypen-space/core/router";
 import { HypenGlobalContext } from "@hypen-space/core/context";
 import { componentLoader } from "@hypen-space/core/loader";
 import { Router, Route, Link } from "@hypen-space/core/components";
-import { frameworkLoggers as frameworkLoggers6, setDebugMode } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers6, setDebugMode } from "@hypen-space/core/logger";
 var log6 = frameworkLoggers6.hypen;
 
 class Hypen {
@@ -3543,7 +3619,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() {
@@ -3590,13 +3665,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(() => {
@@ -3664,11 +3735,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(() => {
@@ -3695,12 +3762,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(() => {
@@ -3719,7 +3782,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(() => {
@@ -3816,4 +3879,4 @@ export {
   Hypen
 };
 
-//# debugId=08D4121802D226C564756E2164756E21
+//# debugId=17A9DA4178E1757864756E2164756E21