@hypen-space/core 0.4.3 → 0.4.5

package/src/remote/server.ts

@@ -1,36 +1,36 @@
 /**
  * RemoteServer - Stream Hypen apps over WebSocket with Session Management
  *
- * Usage:
+ * Usage with inline UI:
  * ```typescript
  * import { RemoteServer, app } from "@hypen-space/core";
  *
  * const counter = app
  *   .defineState({ count: 0 })
  *   .onAction("increment", ({ state }) => state.count++)
- *   .onDisconnect(async ({ state, session }) => {
- *     await redis.set(`session:${session.id}`, JSON.stringify(state));
- *   })
- *   .onReconnect(async ({ session, restore }) => {
- *     const saved = await redis.get(`session:${session.id}`);
- *     if (saved) restore(JSON.parse(saved));
- *   })
- *   .onExpire(async ({ session }) => {
- *     await redis.del(`session:${session.id}`);
- *   })
  *   .build();
  *
  * new RemoteServer()
  *   .module("Counter", counter)
  *   .ui(`Column { Text("Count: \${state.count}") }`)
- *   .session({ ttl: 3600, concurrent: "kick-old" })
  *   .listen(3000);
  * ```
+ *
+ * Usage with directory-based discovery (auto-resolves imports):
+ * ```typescript
+ * import { RemoteServer } from "@hypen-space/core";
+ * import chatModule from "./apps/chat/Chat/component.js";
+ *
+ * await new RemoteServer()
+ *   .source("./apps/chat")
+ *   .module("Chat", chatModule)
+ *   .listen(3001);
+ * ```
  */
 
 import { Engine } from "../engine.js";
 import { HypenModuleInstance } from "../app.js";
-import type { HypenModule } from "../app.js";
+import type { HypenModule, HypenModuleDefinition } from "../app.js";
 import type {
   RemoteMessage,
   RemoteClient,
@@ -44,10 +44,15 @@ import type {
   Session,
   SessionConfig,
 } from "./types.js";
-import type { Patch } from "../types.js";
+import type { Patch, ResolvedComponent } from "../types.js";
 import type { ServerWebSocket } from "bun";
 import { SessionManager } from "./session.js";
 import { frameworkLoggers } from "../logger.js";
+import {
+  discoverComponents,
+  loadDiscoveredComponents,
+  type DiscoveredComponent,
+} from "../discovery.js";
 
 const log = frameworkLoggers.remote;
 
@@ -72,6 +77,8 @@ export class RemoteServer {
   private _module: HypenModule<any> | null = null;
   private _moduleName: string = "App";
   private _ui: string = "";
+  private _sourceDir: string | null = null;
+  private _discoveredComponents: Map<string, { template: string; module?: HypenModuleDefinition<any> }> = new Map();
   private _config: RemoteServerConfig = {};
   private _sessionConfig: SessionConfig = {};
   private _onConnectionCallbacks: Array<(client: RemoteClient) => void> = [];
@@ -98,6 +105,26 @@ export class RemoteServer {
     return this;
   }
 
+  /**
+   * Set a source directory for automatic component discovery.
+   *
+   * All .hypen and .ts components in the directory (and subdirectories) are
+   * discovered automatically. The entry component's template is used as the
+   * UI, so calling .ui() is optional when .source() is set.
+   *
+   * @example
+   * ```typescript
+   * new RemoteServer()
+   *   .source("./apps/chat")
+   *   .module("Chat", chatModule)
+   *   .listen(3001);
+   * ```
+   */
+  source(dir: string): this {
+    this._sourceDir = dir;
+    return this;
+  }
+
   /**
    * Set server configuration
    */
@@ -133,13 +160,20 @@ export class RemoteServer {
   /**
    * Start the WebSocket server
    */
-  listen(port?: number): this {
+  async listen(port?: number): Promise<this> {
     if (!this._module) {
       throw new Error("Module not set. Call .module() before .listen()");
     }
 
+    // Run component discovery if source directory is set
+    if (this._sourceDir) {
+      await this.discoverFromSource();
+    }
+
     if (!this._ui) {
-      throw new Error("UI not set. Call .ui() before .listen()");
+      throw new Error(
+        "UI not set. Call .ui() or .source() before .listen()"
+      );
     }
 
     // Initialize session manager
@@ -214,6 +248,56 @@ export class RemoteServer {
     return `ws://${hostname}:${port}`;
   }
 
+  /**
+   * Discover components from the source directory.
+   * Populates _discoveredComponents and sets _ui from the entry component
+   * if not already set via .ui().
+   */
+  private async discoverFromSource(): Promise<void> {
+    const dir = this._sourceDir!;
+    log.info(`Discovering components from ${dir}...`);
+
+    const discovered = await discoverComponents(dir);
+    const loaded = await loadDiscoveredComponents(discovered);
+
+    for (const [name, { module, template }] of loaded) {
+      this._discoveredComponents.set(name, { template, module });
+    }
+
+    log.info(
+      `Discovered ${this._discoveredComponents.size} components: ${Array.from(this._discoveredComponents.keys()).join(", ")}`
+    );
+
+    // If .ui() was not called, use the entry component's template
+    if (!this._ui) {
+      const entry = this._discoveredComponents.get(this._moduleName);
+      if (entry) {
+        this._ui = entry.template;
+      }
+    }
+  }
+
+  /**
+   * Set up a component resolver on a client engine so that imports
+   * and component references in templates are resolved from discovered
+   * components.
+   */
+  private setupComponentResolver(engine: Engine): void {
+    if (this._discoveredComponents.size === 0) return;
+
+    engine.setComponentResolver(
+      (componentName: string, _contextPath: string | null) => {
+        const comp = this._discoveredComponents.get(componentName);
+        if (!comp) return null;
+
+        return {
+          source: comp.template,
+          path: componentName,
+        };
+      }
+    );
+  }
+
   /**
    * Handle new WebSocket connection
    * Waits for hello message before fully initializing
@@ -227,6 +311,9 @@ export class RemoteServer {
       const engine = new Engine();
       await engine.init();
 
+      // Wire up component resolver if we have discovered components
+      this.setupComponentResolver(engine);
+
       // Create module instance
       const moduleInstance = new HypenModuleInstance(engine, this._module!);
 
@@ -618,19 +705,27 @@ export class RemoteServer {
 /**
  * Convenience function to create and start a RemoteServer
  */
-export function serve(options: {
+export async function serve(options: {
   module: HypenModule<any>;
   moduleName?: string;
-  ui: string;
+  ui?: string;
+  source?: string;
   port?: number;
   hostname?: string;
   session?: SessionConfig;
   onConnection?: (client: RemoteClient) => void;
   onDisconnection?: (client: RemoteClient) => void;
-}): RemoteServer {
+}): Promise<RemoteServer> {
   const server = new RemoteServer()
-    .module(options.moduleName ?? "App", options.module)
-    .ui(options.ui);
+    .module(options.moduleName ?? "App", options.module);
+
+  if (options.source) {
+    server.source(options.source);
+  }
+
+  if (options.ui) {
+    server.ui(options.ui);
+  }
 
   if (options.port || options.hostname) {
     server.config({

package/src/result.ts

@@ -258,3 +258,51 @@ export class StateError extends HypenError {
     this.path = path;
   }
 }
+
+/**
+ * Error thrown when parsing Hypen DSL source fails
+ */
+export class ParseError extends HypenError {
+  readonly source?: string;
+
+  constructor(message: string, source?: string, cause?: unknown) {
+    super('PARSE_ERROR', message, {
+      context: { source },
+      cause: cause instanceof Error ? cause : undefined,
+    });
+    this.name = 'ParseError';
+    this.source = source;
+  }
+}
+
+/**
+ * Error thrown when rendering fails
+ */
+export class RenderError extends HypenError {
+  constructor(message: string, cause?: unknown) {
+    super('RENDER_ERROR', message, {
+      cause: cause instanceof Error ? cause : undefined,
+    });
+    this.name = 'RenderError';
+  }
+}
+
+/**
+ * Classify a WASM engine error string into the appropriate HypenError subclass.
+ * The engine returns JsValue error strings with known prefixes.
+ */
+export function classifyEngineError(err: unknown): HypenError {
+  const message = err instanceof Error ? err.message : String(err);
+
+  if (message.startsWith('Parse error:')) {
+    return new ParseError(message);
+  }
+  if (message.startsWith('Invalid state:') || message.startsWith('Invalid state patch:')) {
+    return new StateError(message);
+  }
+  if (message.startsWith('Parent node not found:')) {
+    return new RenderError(message);
+  }
+
+  return new RenderError(message);
+}

package/wasm-browser/package.json

@@ -5,7 +5,7 @@
     "Hypen Contributors"
   ],
   "description": "A Rust implementation of the Hypen engine",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/wasm-node/package.json

@@ -4,7 +4,7 @@
     "Hypen Contributors"
   ],
   "description": "A Rust implementation of the Hypen engine",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/dist/module-registry.d.ts

@@ -1,42 +0,0 @@
-/**
- * Module Registry — maps component names to module definitions.
- *
- * Used by the import resolution pipeline and ManagedRouter to look up
- * module definitions by their component name (e.g., "HomePage", "ProfilePage").
- */
-import type { HypenModuleDefinition } from "./app.js";
-export declare class ModuleRegistry {
-    private definitions;
-    /**
-     * Register a module definition under a component name.
-     */
-    register(name: string, definition: HypenModuleDefinition): void;
-    /**
-     * Get a module definition by component name.
-     */
-    get(name: string): HypenModuleDefinition | undefined;
-    /**
-     * Check if a module definition exists.
-     */
-    has(name: string): boolean;
-    /**
-     * Get all registered definitions.
-     */
-    getAll(): Map<string, HypenModuleDefinition>;
-    /**
-     * Get all registered component names.
-     */
-    getNames(): string[];
-    /**
-     * Unregister a module definition.
-     */
-    unregister(name: string): void;
-    /**
-     * Number of registered definitions.
-     */
-    get size(): number;
-    /**
-     * Clear all registered definitions.
-     */
-    clear(): void;
-}

package/src/module-registry.ts

@@ -1,76 +0,0 @@
-/**
- * Module Registry — maps component names to module definitions.
- *
- * Used by the import resolution pipeline and ManagedRouter to look up
- * module definitions by their component name (e.g., "HomePage", "ProfilePage").
- */
-
-import type { HypenModuleDefinition } from "./app.js";
-import { createLogger } from "./logger.js";
-
-const log = createLogger("ModuleRegistry");
-
-export class ModuleRegistry {
-  private definitions = new Map<string, HypenModuleDefinition>();
-
-  /**
-   * Register a module definition under a component name.
-   */
-  register(name: string, definition: HypenModuleDefinition): void {
-    if (this.definitions.has(name)) {
-      log.warn(`Module "${name}" is already registered. Overwriting.`);
-    }
-    this.definitions.set(name, definition);
-    log.debug(`Registered module definition: ${name}`);
-  }
-
-  /**
-   * Get a module definition by component name.
-   */
-  get(name: string): HypenModuleDefinition | undefined {
-    return this.definitions.get(name);
-  }
-
-  /**
-   * Check if a module definition exists.
-   */
-  has(name: string): boolean {
-    return this.definitions.has(name);
-  }
-
-  /**
-   * Get all registered definitions.
-   */
-  getAll(): Map<string, HypenModuleDefinition> {
-    return new Map(this.definitions);
-  }
-
-  /**
-   * Get all registered component names.
-   */
-  getNames(): string[] {
-    return Array.from(this.definitions.keys());
-  }
-
-  /**
-   * Unregister a module definition.
-   */
-  unregister(name: string): void {
-    this.definitions.delete(name);
-    log.debug(`Unregistered module definition: ${name}`);
-  }
-
-  /**
-   * Number of registered definitions.
-   */
-  get size(): number {
-    return this.definitions.size;
-  }
-
-  /**
-   * Clear all registered definitions.
-   */
-  clear(): void {
-    this.definitions.clear();
-  }
-}