@hypen-space/web 0.4.1 → 0.4.3

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,6 +2347,7 @@ 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 }),
@@ -2584,12 +2609,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 +3146,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 +3309,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 {
@@ -3363,24 +3382,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 +3542,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 {
@@ -3816,4 +3841,4 @@ export {
   Hypen
 };
 
-//# debugId=08D4121802D226C564756E2164756E21
+//# debugId=79019BA840D0560F64756E2164756E21