@hypen-space/web 0.4.37 → 0.4.38

package/README.md

@@ -15,7 +15,7 @@ bun add @hypen-space/core @hypen-space/web
 The simplest way to use Hypen in the browser:
 
 ```typescript
-import { render } from "@hypen-space/web";
+import { render } from "@hypen-space/web-engine";
 
 // Auto-discovers and loads components from ./src/components
 await render("HomePage", "#app");
@@ -24,7 +24,7 @@ await render("HomePage", "#app");
 ### With Explicit Configuration
 
 ```typescript
-import { Hypen } from "@hypen-space/web";
+import { Hypen } from "@hypen-space/web-engine";
 
 const hypen = new Hypen({
   componentsDir: "./src/components",
@@ -86,7 +86,7 @@ export default app
 ## Hypen Class API
 
 ```typescript
-import { Hypen } from "@hypen-space/web";
+import { Hypen } from "@hypen-space/web-engine";
 
 const hypen = new Hypen({
   componentsDir: "./src/components", // Default
@@ -130,7 +130,8 @@ await hypen.unmount();
 For custom integrations:
 
 ```typescript
-import { Engine, app } from "@hypen-space/core";
+import { app } from "@hypen-space/core";
+import { Engine } from "@hypen-space/web-engine";
 import { DOMRenderer } from "@hypen-space/web";
 
 const engine = new Engine();
@@ -282,10 +283,10 @@ remote.dispatchAction("login", { user: "admin" });
 
 | Export | Description |
 |--------|-------------|
-| `@hypen-space/web` | Main - Hypen, render, DOMRenderer, CanvasRenderer |
-| `@hypen-space/web/hypen` | High-level Hypen class |
+| `@hypen-space/web` | Main - DOMRenderer, CanvasRenderer, ComponentRegistry, ApplicatorRegistry |
 | `@hypen-space/web/dom` | DOM renderer and utilities |
 | `@hypen-space/web/canvas` | Canvas renderer |
+| `@hypen-space/web-engine` | Hypen orchestrator, render, renderWithComponents, Engine (browser) |
 
 ## Requirements
 

package/dist/index.d.ts

@@ -5,10 +5,10 @@
  * This entry point is WASM-free — it only contains renderers and the remote UI
  * embed component.
  *
- * For client-side rendering (with WASM engine), use "@hypen-space/web/client":
+ * For client-side rendering (with WASM engine), use "@hypen-space/web-engine":
  *
  * ```typescript
- * import { render } from "@hypen-space/web/client";
+ * import { render } from "@hypen-space/web-engine";
  * await render("Counter", "#app");
  * ```
  *

package/dist/index.js

@@ -5,10 +5,10 @@
  * This entry point is WASM-free — it only contains renderers and the remote UI
  * embed component.
  *
- * For client-side rendering (with WASM engine), use "@hypen-space/web/client":
+ * For client-side rendering (with WASM engine), use "@hypen-space/web-engine":
  *
  * ```typescript
- * import { render } from "@hypen-space/web/client";
+ * import { render } from "@hypen-space/web-engine";
  * await render("Counter", "#app");
  * ```
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.4.37",
+  "version": "0.4.38",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,20 +28,6 @@
       "bun": "./src/canvas/index.ts",
       "import": "./dist/canvas/index.js",
       "default": "./dist/canvas/index.js"
-    },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "browser": "./dist/client.js",
-      "bun": "./src/client.ts",
-      "import": "./dist/client.js",
-      "default": "./dist/client.js"
-    },
-    "./hypen": {
-      "types": "./dist/hypen.d.ts",
-      "browser": "./dist/hypen.js",
-      "bun": "./src/hypen.ts",
-      "import": "./dist/hypen.js",
-      "default": "./dist/hypen.js"
     }
   },
   "files": [
@@ -56,7 +42,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.4.37"
+    "@hypen-space/core": "^0.4.38"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/canvas/QUICKSTART.md

@@ -5,7 +5,7 @@ Get started with the Hypen Canvas Renderer in 5 minutes.
 ## Installation
 
 ```bash
-bun add @hypen-space/core
+bun add @hypen-space/core @hypen-space/web @hypen-space/web-engine
 ```
 
 ## Basic Setup
@@ -28,8 +28,9 @@ bun add @hypen-space/core
 ### 2. Create App (`app.ts`)
 
 ```typescript
-import { Engine, app, HypenModuleInstance } from "@hypen-space/core";
-import { CanvasRenderer } from "@hypen-space/core/canvas";
+import { app, HypenModuleInstance } from "@hypen-space/core";
+import { Engine } from "@hypen-space/web-engine";
+import { CanvasRenderer } from "@hypen-space/web/canvas";
 
 // Define state
 type AppState = {

package/src/canvas/README.md

@@ -14,8 +14,9 @@ The Canvas Renderer is a complete alternative to the DOM renderer that draws all
 ## Quick Start
 
 ```typescript
-import { Engine, app } from "@hypen-space/core";
-import { CanvasRenderer } from "@hypen-space/core/canvas";
+import { app } from "@hypen-space/core";
+import { Engine } from "@hypen-space/web-engine";
+import { CanvasRenderer } from "@hypen-space/web/canvas";
 
 // Setup canvas
 const canvas = document.getElementById("app") as HTMLCanvasElement;

package/src/dom/README.md

@@ -38,8 +38,9 @@ src/dom/
 ### Browser Import
 
 ```typescript
-import { Engine, app, HypenModuleInstance } from "@hypen-space/core";
-import { DOMRenderer } from "@hypen-space/core/dom";
+import { app, HypenModuleInstance } from "@hypen-space/core";
+import { Engine } from "@hypen-space/web-engine";
+import { DOMRenderer } from "@hypen-space/web";
 
 const engine = new Engine();
 await engine.init();
@@ -54,7 +55,7 @@ engine.setRenderCallback((patches) => {
 
 ```typescript
 // This will fail in Node.js/Bun (no DOM)
-import { DOMRenderer } from "@hypen-space/core/dom"; // ❌ Error
+import { DOMRenderer } from "@hypen-space/web"; // ❌ Error (no DOM in Node.js)
 
 // Use server-safe renderer instead
 import { ConsoleRenderer } from "@hypen-space/core"; // ✅ Works

package/src/index.ts

@@ -5,10 +5,10 @@
  * This entry point is WASM-free — it only contains renderers and the remote UI
  * embed component.
  *
- * For client-side rendering (with WASM engine), use "@hypen-space/web/client":
+ * For client-side rendering (with WASM engine), use "@hypen-space/web-engine":
  *
  * ```typescript
- * import { render } from "@hypen-space/web/client";
+ * import { render } from "@hypen-space/web-engine";
  * await render("Counter", "#app");
  * ```
  *

package/dist/client.d.ts

@@ -1,19 +0,0 @@
-/**
- * @hypen-space/web/client - Client-side rendering with WASM engine
- *
- * This entry point includes the Hypen orchestrator which connects the
- * BrowserEngine (WASM) with the DOM renderer. Use this when you want
- * to run the engine client-side in the browser.
- *
- * For remote UI (server-side engine, no WASM in browser), use the
- * default import from "@hypen-space/web" instead.
- *
- * @example
- * ```typescript
- * import { render } from "@hypen-space/web/client";
- *
- * await render("Counter", "#app");
- * ```
- */
-export { Hypen, render, renderWithComponents } from "./hypen.js";
-export type { HypenConfig } from "./hypen.js";

package/dist/client.js

@@ -1,19 +0,0 @@
-/**
- * @hypen-space/web/client - Client-side rendering with WASM engine
- *
- * This entry point includes the Hypen orchestrator which connects the
- * BrowserEngine (WASM) with the DOM renderer. Use this when you want
- * to run the engine client-side in the browser.
- *
- * For remote UI (server-side engine, no WASM in browser), use the
- * default import from "@hypen-space/web" instead.
- *
- * @example
- * ```typescript
- * import { render } from "@hypen-space/web/client";
- *
- * await render("Counter", "#app");
- * ```
- */
-export { Hypen, render, renderWithComponents } from "./hypen.js";
-//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}

package/dist/hypen.d.ts

@@ -1,140 +0,0 @@
-/**
- * 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>;