@hypen-space/web 0.3.12 → 0.4.1

package/dist/index.js

@@ -3510,315 +3510,9 @@ class DOMRenderer {
   }
 }
 
-// src/hypen.ts
-import {
-  BrowserEngine as Engine,
-  HypenModuleInstance,
-  HypenRouter,
-  HypenGlobalContext,
-  componentLoader,
-  Router,
-  Route,
-  Link,
-  frameworkLoggers as frameworkLoggers6,
-  setDebugMode
-} from "@hypen-space/core";
-var log6 = frameworkLoggers6.hypen;
-
-class Hypen {
-  engine = null;
-  renderer = null;
-  moduleInstance = null;
-  container = null;
-  config;
-  router;
-  globalContext;
-  moduleInstances = new Map;
-  constructor(config = {}) {
-    this.config = {
-      componentsDir: "./src/components",
-      debug: false,
-      ...config
-    };
-    if (this.config.debug) {
-      setDebugMode(true);
-    }
-    this.router = new HypenRouter;
-    this.globalContext = new HypenGlobalContext;
-    componentLoader.register("Router", Router, "");
-    componentLoader.register("Route", Route, "");
-    componentLoader.register("Link", Link, "");
-    this.globalContext.__router = this.router;
-    this.globalContext.__hypenEngine = this;
-  }
-  async init() {
-    log6.debug("Initializing...");
-    this.engine = new Engine;
-    await this.engine.init({
-      wasmUrl: this.config.wasmUrl,
-      jsUrl: this.config.jsUrl
-    });
-    log6.debug("Engine initialized");
-  }
-  async loadComponents(componentsDir) {
-    const dir = componentsDir || this.config.componentsDir;
-    log6.debug(`Loading components from ${dir}...`);
-    await componentLoader.loadFromComponentsDir(dir);
-    log6.debug(`Loaded ${componentLoader.getNames().length} components`);
-  }
-  async render(componentName, containerSelector) {
-    if (!this.engine) {
-      throw new Error("[Hypen] Engine not initialized. Call init() first.");
-    }
-    if (typeof containerSelector === "string") {
-      const element = document.querySelector(containerSelector);
-      if (!element) {
-        throw new Error(`[Hypen] Container not found: ${containerSelector}`);
-      }
-      this.container = element;
-    } else {
-      this.container = containerSelector;
-    }
-    const component = componentLoader.get(componentName);
-    if (!component) {
-      throw new Error(`[Hypen] Component "${componentName}" not found. Available: ${componentLoader.getNames().join(", ")}`);
-    }
-    log6.debug(`Rendering ${componentName} to`, this.container);
-    this.renderer = new DOMRenderer(this.container, this.engine, {
-      enabled: this.config.debugHeatmap || false,
-      showHeatmap: this.config.debugHeatmap || false,
-      heatmapIncrement: this.config.heatmapIncrement || 5,
-      fadeOutDuration: this.config.heatmapFadeOut || 2000,
-      maxOpacity: 0.8
-    });
-    this.engine.setRenderCallback((patches) => {
-      log6.debug(`Applying ${patches.length} patches`);
-      this.renderer.applyPatches(patches);
-    });
-    const routerContext = {
-      root: this.router,
-      current: this.router
-    };
-    this.renderer.setContext(routerContext, this.globalContext);
-    const moduleId = this.extractModuleId(componentName, component.template);
-    this.moduleInstance = new HypenModuleInstance(this.engine, component.module, routerContext, this.globalContext);
-    this.globalContext.registerModule(moduleId, this.moduleInstance);
-    this.moduleInstances.set(moduleId, this.moduleInstance);
-    this.moduleInstance.onStateChange(() => {
-      const mergedState = this.getMergedState();
-      log6.debug(`State changed, merged state:`, mergedState);
-      this.renderer.updateState(mergedState);
-    });
-    this.setupComponentResolver();
-    this.createNestedModuleInstances();
-    this.engine.renderSource(component.template);
-    this.renderer.updateState(this.getMergedState());
-    log6.debug(`${componentName} rendered successfully`);
-  }
-  async unmount() {
-    log6.debug("Unmounting...");
-    if (this.moduleInstance) {
-      await this.moduleInstance.destroy();
-      this.moduleInstance = null;
-    }
-    if (this.container) {
-      this.container.innerHTML = "";
-      this.container = null;
-    }
-    this.renderer = null;
-    log6.debug("Unmounted");
-  }
-  getModuleInstance() {
-    return this.moduleInstance;
-  }
-  getState() {
-    return this.moduleInstance?.getState() ?? null;
-  }
-  getRouter() {
-    return this.router;
-  }
-  getGlobalContext() {
-    return this.globalContext;
-  }
-  setDebugHeatmap(enabled) {
-    if (this.renderer) {
-      this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });
-      log6.debug(`Debug heatmap ${enabled ? "enabled" : "disabled"}`);
-    }
-  }
-  resetDebugTracking() {
-    if (this.renderer) {
-      this.renderer.resetDebugTracking();
-      log6.debug("Debug tracking reset");
-    }
-  }
-  getDebugStats() {
-    return this.renderer?.getDebugStats() || null;
-  }
-  async renderLazyRoute(routePath, componentName, routeElement) {
-    if (!this.engine || !this.renderer) {
-      throw new Error("Engine not initialized");
-    }
-    const component = componentLoader.get(componentName);
-    if (!component) {
-      throw new Error(`Component ${componentName} not found`);
-    }
-    const template = component.template;
-    if (!template) {
-      throw new Error(`Component ${componentName} has no template`);
-    }
-    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);
-      this.globalContext.registerModule(moduleId, moduleInstance);
-      this.moduleInstances.set(componentName, moduleInstance);
-      moduleInstance.onStateChange(() => {
-        const mergedState2 = this.getMergedState();
-        log6.debug(`Lazy component ${componentName} state changed:`, mergedState2);
-        this.renderer.updateState(mergedState2);
-      });
-    }
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    const routeNodeId = routeElement.dataset.hypenId;
-    if (!routeNodeId) {
-      throw new Error(`Route element is missing data-hypen-id attribute`);
-    }
-    const mergedState = this.getMergedState();
-    this.engine.renderInto(template, routeNodeId, mergedState);
-    this.renderer.updateState(mergedState);
-  }
-  extractModuleId(componentName, template) {
-    const idMatch = template.match(/\.id\(["']([^"']+)["']\)/);
-    const matchedId = idMatch?.[1];
-    if (matchedId) {
-      return matchedId;
-    }
-    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);
-      this.globalContext.registerModule("Router", routerInstance);
-      this.moduleInstances.set("Router", routerInstance);
-      routerInstance.onStateChange(() => {
-        const mergedState = this.getMergedState();
-        log6.debug("Router state changed:", mergedState);
-        this.renderer.updateState(mergedState);
-      });
-    }
-    const componentNames = componentLoader.getNames();
-    for (const name of componentNames) {
-      if (this.moduleInstances.has(name)) {
-        continue;
-      }
-      const comp = componentLoader.get(name);
-      if (!comp || !comp.module) {
-        continue;
-      }
-      log6.debug(`Creating nested module instance for: ${name}`);
-      const moduleInstance = new HypenModuleInstance(this.engine, comp.module, routerContext, this.globalContext);
-      this.globalContext.registerModule(name, moduleInstance);
-      this.moduleInstances.set(name, moduleInstance);
-      moduleInstance.onStateChange(() => {
-        const mergedState = this.getMergedState();
-        log6.debug(`Nested component ${name} state changed:`, mergedState);
-        this.renderer.updateState(mergedState);
-      });
-    }
-  }
-  getMergedState() {
-    const merged = {};
-    if (this.moduleInstance) {
-      const mainState = this.moduleInstance.getState();
-      Object.assign(merged, mainState);
-    }
-    for (const [name, instance] of this.moduleInstances.entries()) {
-      const nestedState = instance.getState();
-      Object.assign(merged, nestedState);
-    }
-    return merged;
-  }
-  setupComponentResolver() {
-    if (!this.engine)
-      return;
-    const builtInElements = new Set([
-      "Column",
-      "Row",
-      "Text",
-      "Button",
-      "Image",
-      "Input",
-      "Container",
-      "Box",
-      "Center",
-      "List",
-      "Canvas",
-      "Spacer",
-      "Divider",
-      "ScrollView"
-    ]);
-    this.engine.setComponentResolver((componentName, contextPath) => {
-      if (builtInElements.has(componentName)) {
-        return null;
-      }
-      log6.debug(`Resolving component: ${componentName} (context: ${contextPath})`);
-      const componentDef = componentLoader.get(componentName);
-      if (!componentDef) {
-        log6.debug(`Component not found: ${componentName}`);
-        return null;
-      }
-      const isPassthrough = componentName === "Router";
-      const isLazy = componentName === "Route";
-      const resolved = {
-        source: componentDef.template,
-        path: componentDef.path || componentName,
-        passthrough: isPassthrough,
-        lazy: isLazy
-      };
-      const flags = [];
-      if (isPassthrough)
-        flags.push("passthrough");
-      if (isLazy)
-        flags.push("lazy");
-      const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
-      log6.debug(`Resolved ${componentName} -> ${resolved.path}${flagStr}`);
-      return resolved;
-    });
-  }
-}
-async function render(componentName, containerSelector, config) {
-  const hypen = new Hypen(config);
-  await hypen.init();
-  await hypen.loadComponents();
-  await hypen.render(componentName, containerSelector);
-  return hypen;
-}
-async function renderWithComponents(components, componentName, containerSelector, config) {
-  const hypen = new Hypen(config);
-  await hypen.init();
-  for (const [name, { module, template }] of Object.entries(components)) {
-    let processedTemplate = template;
-    const moduleMatch = template.match(/^\s*module\s+\w+\s*\{([\s\S]*)\}\s*$/);
-    if (moduleMatch && moduleMatch[1]) {
-      processedTemplate = moduleMatch[1].trim();
-    }
-    componentLoader.register(name, module, processedTemplate);
-  }
-  await hypen.render(componentName, containerSelector);
-  return hypen;
-}
-
 // src/dom/events.ts
-import { frameworkLoggers as frameworkLoggers7 } from "@hypen-space/core";
-var log7 = frameworkLoggers7.events;
+import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core";
+var log6 = frameworkLoggers6.events;
 
 class EventManager {
   engine;
@@ -3828,22 +3522,22 @@ class EventManager {
   }
   attach(elementId, element, eventName, actionName) {
     const domEventName = eventName === "onClick" ? "click" : eventName;
-    log7.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
+    log6.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
     const listener = (event) => {
-      log7.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
-      log7.debug(`Event object:`, event);
-      log7.debug(`Element:`, element);
+      log6.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
+      log6.debug(`Event object:`, event);
+      log6.debug(`Element:`, element);
       if (eventName === "submit" || eventName === "click" && element.tagName === "A") {
         event.preventDefault();
       }
       const payload = this.extractEventData(event, element);
-      log7.debug(`Event payload:`, payload);
-      log7.debug(`Calling engine.dispatchAction(${actionName})`);
+      log6.debug(`Event payload:`, payload);
+      log6.debug(`Calling engine.dispatchAction(${actionName})`);
       try {
         this.engine.dispatchAction(actionName, payload);
-        log7.debug(`dispatchAction succeeded`);
+        log6.debug(`dispatchAction succeeded`);
       } catch (error) {
-        log7.error(`dispatchAction failed:`, error);
+        log6.error(`dispatchAction failed:`, error);
       }
     };
     let elementBindings = this.bindings.get(elementId);
@@ -3853,8 +3547,8 @@ class EventManager {
     }
     elementBindings.set(eventName, listener);
     element.addEventListener(domEventName, listener);
-    log7.debug(`Listener attached to DOM for ${domEventName}`);
-    log7.debug(`Element details:`, {
+    log6.debug(`Listener attached to DOM for ${domEventName}`);
+    log6.debug(`Element details:`, {
       tagName: element.tagName,
       id: element.id,
       dataset: element.dataset,
@@ -3862,7 +3556,7 @@ class EventManager {
     });
     if (domEventName === "click") {
       element.addEventListener("click", (e) => {
-        log7.debug(`Raw DOM click detected on ${element.tagName}`, e);
+        log6.debug(`Raw DOM click detected on ${element.tagName}`, e);
       });
     }
   }
@@ -4047,8 +3741,8 @@ function getAbsoluteBounds(node) {
 }
 
 // src/canvas/text.ts
-import { frameworkLoggers as frameworkLoggers8 } from "@hypen-space/core";
-var log8 = frameworkLoggers8.canvas;
+import { frameworkLoggers as frameworkLoggers7 } from "@hypen-space/core";
+var log7 = frameworkLoggers7.canvas;
 var textMetricsCache = new Map;
 function getCacheKey(text, fontStyle, maxWidth) {
   return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
@@ -4148,7 +3842,7 @@ async function loadFont(fontFamily, fontWeight = "normal") {
   try {
     await document.fonts.load(font);
   } catch (error) {
-    log8.warn(`Failed to load font: ${font}`, error);
+    log7.warn(`Failed to load font: ${font}`, error);
   }
 }
 
@@ -5763,8 +5457,8 @@ class AccessibilityLayer {
 }
 
 // src/canvas/renderer.ts
-import { frameworkLoggers as frameworkLoggers9 } from "@hypen-space/core";
-var log9 = frameworkLoggers9.canvas;
+import { frameworkLoggers as frameworkLoggers8 } from "@hypen-space/core";
+var log8 = frameworkLoggers8.canvas;
 var DEFAULT_OPTIONS = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
   backgroundColor: "#ffffff",
@@ -5972,7 +5666,7 @@ class CanvasRenderer {
       const elapsed = performance.now() - startTime;
       this.frameCount++;
       if (performance.now() - this.lastFrameTime > 1000) {
-        log9.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+        log8.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
         this.frameCount = 0;
         this.lastFrameTime = performance.now();
       }
@@ -6017,15 +5711,12 @@ class CanvasRenderer {
 // src/index.ts
 init_hypenapp();
 export {
-  renderWithComponents,
-  render,
   hypenAppHandler,
   disconnectHypenApp,
   defaultDebugConfig,
   canvasHandler,
   canvasApplicators,
   RerenderTracker,
-  Hypen,
   EventManager,
   DOMRenderer,
   ComponentRegistry,
@@ -6033,4 +5724,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=4FAEC1A16542965464756E2164756E21
+//# debugId=12C217F7874690EA64756E2164756E21