@hypen-space/web 0.2.0

package/src/dom/renderer.ts

@@ -0,0 +1,327 @@
+/**
+ * DOM Renderer
+ *
+ * Renders Hypen patches to the DOM
+ */
+
+import type { Patch } from "@hypen/core";
+import type { HypenModuleInstance, RouterContext } from "@hypen/core";
+import type { HypenRouter } from "@hypen/core";
+import type { HypenGlobalContext } from "@hypen/core";
+import { ComponentRegistry } from "./components/index.js";
+import { ApplicatorRegistry } from "./applicators/index.js";
+import { canvasHandler, canvasApplicators } from "./canvas/index.js";
+import { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./debug.js";
+
+// Interface for the engine that renderer needs
+interface IEngine {
+  dispatchAction(name: string, payload?: any): void;
+}
+
+export class DOMRenderer {
+  private container: HTMLElement;
+  private nodes: Map<string, HTMLElement> = new Map();
+  private rootId: string | null = null;
+  private components: ComponentRegistry;
+  private applicators: ApplicatorRegistry;
+  private engine: IEngine;
+  private currentState: Record<string, any> = {};
+  private routerContext: RouterContext | null = null;
+  private globalContext: HypenGlobalContext | null = null;
+  private componentInstances = new Map<string, HypenModuleInstance>();
+  private debugTracker: RerenderTracker;
+
+  constructor(container: HTMLElement, engine: IEngine, debugConfig?: Partial<DebugConfig>) {
+    this.container = container;
+    this.engine = engine;
+    this.components = new ComponentRegistry();
+    this.applicators = new ApplicatorRegistry();
+    this.debugTracker = new RerenderTracker({ ...defaultDebugConfig, ...debugConfig });
+
+    // Register canvas component and applicators
+    this.components.register("canvas", canvasHandler);
+    for (const [name, handler] of Object.entries(canvasApplicators)) {
+      this.applicators.register(name, handler);
+    }
+  }
+
+  /**
+   * Set router and global context for component composition
+   */
+  setContext(routerContext: RouterContext, globalContext: HypenGlobalContext): void {
+    this.routerContext = routerContext;
+    this.globalContext = globalContext;
+  }
+
+  /**
+   * Apply a batch of patches to the DOM
+   */
+  applyPatches(patches: Patch[]): void {
+    for (const patch of patches) {
+      this.applyPatch(patch);
+    }
+  }
+
+  /**
+   * Update state and interpolate text content
+   */
+  updateState(state: Record<string, any>): void {
+    console.log(`[Renderer] Updating state:`, state);
+    this.currentState = state;
+    this.interpolateAllText();
+  }
+
+  /**
+   * Merge component state into current state and re-interpolate
+   */
+  private mergeComponentState(componentState: Record<string, any>): void {
+    this.currentState = { ...this.currentState, ...componentState };
+    console.log(`[Renderer] Merged state:`, this.currentState);
+    this.interpolateAllText();
+  }
+
+  /**
+   * Interpolate state values in all text elements
+   */
+  private interpolateAllText(): void {
+    for (const [id, element] of this.nodes.entries()) {
+      if (element.dataset.hypenType === "text" && element.dataset.textTemplate) {
+        const template = element.dataset.textTemplate;
+        const interpolated = this.interpolateText(template, this.currentState);
+
+        // Track re-render if text actually changed
+        const currentText = element.textContent;
+        if (currentText !== interpolated) {
+          this.debugTracker.trackRerender(id, element, "interpolate");
+        }
+
+        element.textContent = interpolated;
+      }
+    }
+  }
+
+  /**
+   * Interpolate state values in text template
+   */
+  private interpolateText(template: string, state: Record<string, any>): string {
+    return template.replace(/\$\{([^}]+)\}/g, (match, path) => {
+      try {
+        const value = path.split('.').reduce((obj: any, key: string) => {
+          if (key === 'state') return state;
+          return obj?.[key];
+        }, state);
+        return value !== undefined ? String(value) : match;
+      } catch {
+        return match;
+      }
+    });
+  }
+
+  /**
+   * Apply a single patch
+   */
+  private applyPatch(patch: Patch): void {
+    switch (patch.type) {
+      case "create":
+        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});
+        break;
+      case "setProp":
+        this.onSetProp(patch.id!, patch.name!, patch.value);
+        break;
+      case "setText":
+        this.onSetText(patch.id!, patch.text!);
+        break;
+      case "insert":
+        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        break;
+      case "move":
+        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        break;
+      case "remove":
+        this.onRemove(patch.id!);
+        break;
+    }
+  }
+
+  /**
+   * Create a new element
+   */
+  private onCreate(id: string, elementType: string, props: Record<string, any> | Map<string, any>): void {
+    const propsObj = props instanceof Map ? Object.fromEntries(props) : props;
+
+    const element = this.components.createElement(elementType, propsObj);
+
+    if (!element) {
+      const fallback = document.createElement("div");
+      fallback.dataset.hypenType = elementType;
+      fallback.textContent = `Unknown component: ${elementType}`;
+      this.nodes.set(id, fallback);
+      return;
+    }
+
+    element.dataset.hypenType = elementType.toLowerCase();
+    element.dataset.hypenId = id;
+    (element as any).__hypenEngine = this.engine;
+
+    this.applicators.applyAll(element, propsObj);
+    this.nodes.set(id, element);
+    this.debugTracker.trackRerender(id, element, `create:${elementType}`);
+
+    if (!this.rootId) {
+      this.rootId = id;
+      if (!this.container.contains(element)) {
+        this.container.appendChild(element);
+      }
+    }
+  }
+
+  /**
+   * Set a property on an element
+   */
+  private onSetProp(id: string, name: string, value: any): void {
+    const element = this.nodes.get(id);
+    if (!element) return;
+
+    this.debugTracker.trackRerender(id, element, `setProp:${name}`);
+
+    if (name === "0" || name === "text") {
+      const elementType = element.dataset.hypenType;
+
+      if (elementType === "input") {
+        const inputEl = element as HTMLInputElement;
+        inputEl.value = String(value);
+        console.log(`[Renderer] Updated input value: "${value}"`);
+        return;
+      }
+
+      element.textContent = String(value);
+      if (element.dataset.textTemplate !== undefined) {
+        element.dataset.textTemplate = String(value);
+      }
+      console.log(`[Renderer] Updated text content: "${value}"`);
+      return;
+    }
+
+    this.applicators.apply(element, name, value);
+  }
+
+  /**
+   * Set text content
+   */
+  private onSetText(id: string, text: string): void {
+    const element = this.nodes.get(id);
+    if (!element) return;
+
+    this.debugTracker.trackRerender(id, element, "setText");
+    element.textContent = text;
+  }
+
+  /**
+   * Insert an element into the tree
+   */
+  private onInsert(parentId: string, id: string, beforeId?: string): void {
+    const parent = parentId === "root" ? this.container : this.nodes.get(parentId);
+    const child = this.nodes.get(id);
+
+    console.log(`[Renderer] Inserting ${id} into ${parentId}`, {
+      parent: parent ? `${parent.tagName}#${parent.id || 'no-id'}` : 'null',
+      child: child ? `${child.tagName}#${child.id || 'no-id'}` : 'null',
+      childText: child?.textContent?.substring(0, 20)
+    });
+
+    if (!parent || !child) return;
+
+    if (parentId === "root") {
+      this.rootId = id;
+    }
+
+    if (beforeId) {
+      const before = this.nodes.get(beforeId);
+      if (before && before.parentNode === parent) {
+        parent.insertBefore(child, before);
+      } else if (!parent.contains(child)) {
+        parent.appendChild(child);
+      }
+    } else {
+      if (!parent.contains(child)) {
+        parent.appendChild(child);
+      }
+    }
+  }
+
+  /**
+   * Move an element within the tree
+   */
+  private onMove(parentId: string, id: string, beforeId?: string): void {
+    this.onInsert(parentId, id, beforeId);
+  }
+
+  /**
+   * Remove an element from the tree
+   */
+  private onRemove(id: string): void {
+    const element = this.nodes.get(id);
+    if (!element) return;
+
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+
+    this.nodes.delete(id);
+
+    if (this.rootId === id) {
+      this.rootId = null;
+    }
+  }
+
+  /**
+   * Get an element by ID
+   */
+  getNode(id: string): HTMLElement | undefined {
+    return this.nodes.get(id);
+  }
+
+  /**
+   * Clear all nodes
+   */
+  clear(): void {
+    this.container.innerHTML = "";
+    this.nodes.clear();
+    this.rootId = null;
+  }
+
+  /**
+   * Get the component registry (for registering custom components)
+   */
+  getComponentRegistry(): ComponentRegistry {
+    return this.components;
+  }
+
+  /**
+   * Get the applicator registry (for registering custom applicators)
+   */
+  getApplicatorRegistry(): ApplicatorRegistry {
+    return this.applicators;
+  }
+
+  /**
+   * Enable or configure debug mode
+   */
+  setDebugConfig(config: Partial<DebugConfig>): void {
+    this.debugTracker.setConfig(config);
+  }
+
+  /**
+   * Reset debug tracking for all elements
+   */
+  resetDebugTracking(): void {
+    this.debugTracker.resetAll();
+  }
+
+  /**
+   * Get debug statistics
+   */
+  getDebugStats(): { totalRerenders: number; elementCount: number; avgRerenders: number } {
+    return this.debugTracker.getStats();
+  }
+}

package/src/index.ts

@@ -0,0 +1,56 @@
+/**
+ * @hypen/web - Hypen Web Renderers
+ *
+ * Browser-only package providing DOM and Canvas rendering for Hypen applications.
+ * Requires @hypen/core for the engine and state management.
+ *
+ * ## Quick Start
+ *
+ * ```typescript
+ * import { Engine, app } from "@hypen/core";
+ * import { DOMRenderer } from "@hypen/web";
+ *
+ * // Initialize engine
+ * const engine = new Engine();
+ * await engine.init({ wasmPath: "/hypen_engine_bg.wasm" });
+ *
+ * // Create renderer
+ * const container = document.getElementById("app")!;
+ * const renderer = new DOMRenderer(container, engine);
+ *
+ * // Set up patch callback
+ * engine.setRenderCallback((patches) => {
+ *   renderer.applyPatches(patches);
+ * });
+ *
+ * // Render your app
+ * engine.renderSource(`Column { Text("Hello Hypen!") }`);
+ * ```
+ */
+
+// ============================================================================
+// DOM RENDERER
+// ============================================================================
+
+export { DOMRenderer } from "./dom/renderer.js";
+export { ComponentRegistry } from "./dom/components/index.js";
+export { ApplicatorRegistry } from "./dom/applicators/index.js";
+export { EventManager } from "./dom/events.js";
+export { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./dom/debug.js";
+
+// ============================================================================
+// CANVAS RENDERER
+// ============================================================================
+
+export { CanvasRenderer } from "./canvas/renderer.js";
+export { canvasHandler, canvasApplicators } from "./dom/canvas/index.js";
+
+// Re-export core types that web users commonly need
+export type {
+  Patch,
+  Action,
+  Renderer,
+  RouterContext,
+  HypenModuleInstance,
+  HypenGlobalContext,
+} from "@hypen/core";