@hypen-space/core 0.3.9 → 0.3.11

package/src/context.ts

@@ -5,6 +5,9 @@
 import type { HypenModuleInstance } from "./app.js";
 import { getStateSnapshot } from "./state.js";
 import { TypedEventEmitter, type HypenFrameworkEvents } from "./events.js";
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.context;
 
 export type ModuleReference<T = unknown> = {
   state: T; // Live proxy state
@@ -47,10 +50,10 @@ export class HypenGlobalContext<TEvents extends Record<string, unknown> = HypenF
    */
   registerModule(id: string, instance: HypenModuleInstance) {
     if (this.modules.has(id)) {
-      console.warn(`Module "${id}" is already registered. Overwriting.`);
+      log.warn(`Module "${id}" is already registered. Overwriting.`);
     }
     this.modules.set(id, instance);
-    console.log(`Registered module: ${id}`);
+    log.debug(`Registered module: ${id}`);
   }
 
   /**
@@ -58,7 +61,7 @@ export class HypenGlobalContext<TEvents extends Record<string, unknown> = HypenF
    */
   unregisterModule(id: string) {
     this.modules.delete(id);
-    console.log(`Unregistered module: ${id}`);
+    log.debug(`Unregistered module: ${id}`);
   }
 
   /**
@@ -111,14 +114,14 @@ export class HypenGlobalContext<TEvents extends Record<string, unknown> = HypenF
   emit(event: string, payload?: unknown): void {
     const handlers = this.legacyEventBus.get(event);
     if (!handlers || handlers.size === 0) {
-      console.log(`Event "${event}" emitted but no listeners`);
+      log.debug(`Event "${event}" emitted but no listeners`);
     } else {
-      console.log(`Emitting event: ${event}`, payload);
+      log.debug(`Emitting event: ${event}`, payload);
       handlers.forEach((handler) => {
         try {
           handler(payload);
         } catch (error) {
-          console.error(`Error in event handler for "${event}":`, error);
+          log.error(`Error in event handler for "${event}":`, error);
         }
       });
     }
@@ -141,7 +144,7 @@ export class HypenGlobalContext<TEvents extends Record<string, unknown> = HypenF
     const handlers = this.legacyEventBus.get(event)!;
     handlers.add(handler);
 
-    console.log(`Listening to event: ${event}`);
+    log.debug(`Listening to event: ${event}`);
 
     // Return unsubscribe function
     return () => {

package/src/discovery.ts

@@ -13,6 +13,7 @@
 import { existsSync, readdirSync, readFileSync, watch } from "fs";
 import { join, basename, resolve } from "path";
 import type { HypenModuleDefinition } from "./app.js";
+import { frameworkLoggers } from "./logger.js";
 
 export interface DiscoveredComponent {
   name: string;
@@ -99,7 +100,7 @@ export async function discoverComponents(
   } = options;
 
   const log = debug
-    ? (...args: unknown[]) => console.log("[discovery]", ...args)
+    ? (...args: unknown[]) => frameworkLoggers.discovery.debug(...args)
     : () => {};
 
   const resolvedDir = resolve(baseDir);
@@ -379,7 +380,7 @@ export function watchComponents(
   } = options;
 
   const log = debug
-    ? (...args: unknown[]) => console.log("[discovery:watch]", ...args)
+    ? (...args: unknown[]) => frameworkLoggers.discovery.debug("[watch]", ...args)
     : () => {};
 
   let currentComponents = new Map<string, DiscoveredComponent>();

package/src/disposable.ts

@@ -5,6 +5,10 @@
  * event listeners, timers, WebSocket connections, etc.
  */
 
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.lifecycle;
+
 /**
  * Interface for objects that can be disposed
  */
@@ -72,7 +76,7 @@ export class DisposableStack implements Disposable {
         item.dispose();
       } catch (error) {
         // Log but continue disposing other items
-        console.error('[DisposableStack] Error during dispose:', error);
+        log.error('Error during dispose:', error);
       }
     }
   }
@@ -242,7 +246,7 @@ export function compositeDisposable(...disposables: Disposable[]): Disposable {
         try {
           d.dispose();
         } catch (error) {
-          console.error('[compositeDisposable] Error during dispose:', error);
+          log.error('Error during dispose:', error);
         }
       }
     },

package/src/engine.browser.ts

@@ -3,6 +3,10 @@
  * Uses web target for browser environments
  */
 
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.engine;
+
 // Dynamic import path - will be configured at build time
 // For browser, the WASM needs to be served and initialized explicitly
 let wasmInit: ((path?: string) => Promise<void>) | null = null;
@@ -11,14 +15,14 @@ let WasmEngineClass: any = null;
 export type Patch = {
   type: "create" | "setProp" | "setText" | "insert" | "move" | "remove" | "attachEvent" | "detachEvent";
   id?: string;
-  element_type?: string;
-  props?: Record<string, any> | Map<string, any>;
+  elementType?: string;
+  props?: Record<string, any>;
   name?: string;
   value?: any;
   text?: string;
-  parent_id?: string;
-  before_id?: string;
-  event_name?: string;
+  parentId?: string;
+  beforeId?: string;
+  eventName?: string;
 };
 
 export type Action = {
@@ -111,7 +115,7 @@ export class Engine {
       this.wasmEngine = new WasmEngineClass();
       this.initialized = true;
     } catch (error) {
-      console.error("[Hypen] Failed to initialize WASM engine:", error);
+      log.error("Failed to initialize WASM engine:", error);
       throw error;
     }
   }
@@ -173,16 +177,31 @@ export class Engine {
   }
 
   /**
-   * Notify the engine of state changes
+   * Notify the engine of state changes using sparse updates
    */
-  notifyStateChange(paths: string[], currentState: Record<string, any>): void {
+  notifyStateChange(paths: string[], values: Record<string, any>): void {
     const engine = this.ensureInitialized();
 
+    if (paths.length === 0) {
+      return;
+    }
+
+    const plainValues = JSON.parse(JSON.stringify(values));
+    engine.updateStateSparse(paths, plainValues);
+    log.debug("State changed (sparse):", paths);
+  }
+
+  /**
+   * Notify the engine of state changes using full state replacement
+   * @deprecated Use notifyStateChange with sparse values instead
+   */
+  notifyStateChangeFull(paths: string[], currentState: Record<string, any>): void {
+    const engine = this.ensureInitialized();
     const plainObject = JSON.parse(JSON.stringify(currentState));
     engine.updateState(plainObject);
 
     if (paths.length > 0) {
-      console.debug("[Hypen] State changed:", paths);
+      log.debug("State changed (full):", paths);
     }
   }
 
@@ -201,7 +220,7 @@ export class Engine {
    */
   dispatchAction(name: string, payload?: any): void {
     const engine = this.ensureInitialized();
-    console.log(`[Engine] Action dispatched: ${name}`);
+    log.debug(`Action dispatched: ${name}`);
     engine.dispatchAction(name, payload ?? null);
   }
 
@@ -215,7 +234,7 @@ export class Engine {
         ...action,
         payload: action.payload ? mapToObject(action.payload) : action.payload,
       };
-      Promise.resolve(handler(normalizedAction)).catch(console.error);
+      Promise.resolve(handler(normalizedAction)).catch((err) => log.error("Action handler error:", err));
     });
   }
 

package/src/engine.ts

@@ -5,6 +5,9 @@
 
 // WASM module types
 import { WasmEngine } from "../wasm-node/hypen_engine.js";
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.engine;
 
 /**
  * Unwrap proxy objects to plain values for WASM serialization.
@@ -147,7 +150,7 @@ export class Engine {
     }
 
     engine.updateStateSparse(paths, unwrapForWasm(values));
-    console.debug("[Hypen] State changed (sparse):", paths);
+    log.debug("State changed (sparse):", paths);
   }
 
   /**
@@ -159,7 +162,7 @@ export class Engine {
     engine.updateState(unwrapForWasm(currentState));
 
     if (paths.length > 0) {
-      console.debug("[Hypen] State changed (full):", paths);
+      log.debug("State changed (full):", paths);
     }
   }
 
@@ -186,7 +189,7 @@ export class Engine {
   onAction(actionName: string, handler: ActionHandler): void {
     const engine = this.ensureInitialized();
     engine.onAction(actionName, (action: Action) => {
-      Promise.resolve(handler(action)).catch(console.error);
+      Promise.resolve(handler(action)).catch((err) => log.error("Action handler error:", err));
     });
   }
 

package/src/events.ts

@@ -4,6 +4,10 @@
  * Provides strongly-typed event emission and subscription with autocomplete support.
  */
 
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.events;
+
 export type EventHandler<T = unknown> = (payload: T) => void;
 
 /**
@@ -25,7 +29,7 @@ export class TypedEventEmitter<TEvents extends Record<string, unknown> = Record<
       try {
         handler(payload);
       } catch (error) {
-        console.error(`Error in event handler for "${String(event)}":`, error);
+        log.error(`Error in event handler for "${String(event)}":`, error);
       }
     });
   }

package/src/index.browser.ts

@@ -118,3 +118,23 @@ export {
   disposableSubscription,
 } from "./disposable.js";
 export type { Disposable } from "./disposable.js";
+
+// ============================================================================
+// LOGGER
+// ============================================================================
+
+export {
+  Logger,
+  createLogger,
+  logger,
+  log,
+  frameworkLoggers,
+  setLogLevel,
+  getLogLevel,
+  configureLogger,
+  enableLogging,
+  disableLogging,
+  setDebugMode,
+  isDebugMode,
+} from "./logger.js";
+export type { LogLevel, LoggerConfig, LogHandler } from "./logger.js";

package/src/index.ts

@@ -307,5 +307,7 @@ export {
   configureLogger,
   enableLogging,
   disableLogging,
+  setDebugMode,
+  isDebugMode,
 } from "./logger.js";
 export type { LogLevel, LoggerConfig, LogHandler } from "./logger.js";

package/src/loader.ts

@@ -8,6 +8,9 @@
 import { existsSync, readdirSync, readFileSync } from "fs";
 import { join } from "path";
 import type { HypenModuleDefinition } from "./app.js";
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.loader;
 
 export interface ComponentDefinition {
   name: string;
@@ -89,12 +92,9 @@ export class ComponentLoader {
       // Register the component
       this.register(name, module, template, dirPath);
 
-      console.log(`✓ Loaded component: ${name} from ${dirPath}`);
+      log.debug(`Loaded component: ${name} from ${dirPath}`);
     } catch (error) {
-      console.error(
-        `✗ Failed to load component ${name} from ${dirPath}:`,
-        error
-      );
+      log.error(`Failed to load component ${name} from ${dirPath}:`, error);
       throw error;
     }
   }
@@ -106,7 +106,7 @@ export class ComponentLoader {
   async loadFromComponentsDir(baseDir: string): Promise<void> {
     try {
       if (!existsSync(baseDir)) {
-        console.warn(`⚠ Components directory not found: ${baseDir}`);
+        log.warn(`Components directory not found: ${baseDir}`);
         return;
       }
 
@@ -124,9 +124,9 @@ export class ComponentLoader {
         }
       }
 
-      console.log(`✓ Loaded ${this.components.size} components from ${baseDir}`);
+      log.debug(`Loaded ${this.components.size} components from ${baseDir}`);
     } catch (error) {
-      console.error(`✗ Failed to load components from ${baseDir}:`, error);
+      log.error(`Failed to load components from ${baseDir}:`, error);
       throw error;
     }
   }

package/src/logger.ts

@@ -112,6 +112,27 @@ export function disableLogging(): void {
   config.level = "none";
 }
 
+/**
+ * Enable debug mode - alias for enableLogging()
+ * Call this at app startup to see all debug logs
+ *
+ * @example
+ * ```typescript
+ * import { setDebugMode } from "@hypen-space/core";
+ * setDebugMode(true);
+ * ```
+ */
+export function setDebugMode(enabled: boolean): void {
+  config.level = enabled ? "debug" : "error";
+}
+
+/**
+ * Check if debug mode is enabled
+ */
+export function isDebugMode(): boolean {
+  return config.level === "debug";
+}
+
 // ============================================================================
 // Utility Functions
 // ============================================================================
@@ -327,6 +348,7 @@ export const log = {
 // ============================================================================
 
 export const frameworkLoggers = {
+  hypen: createLogger("Hypen"),
   engine: createLogger("Engine"),
   router: createLogger("Router"),
   state: createLogger("State"),
@@ -335,4 +357,10 @@ export const frameworkLoggers = {
   renderer: createLogger("Renderer"),
   module: createLogger("Module"),
   lifecycle: createLogger("Lifecycle"),
+  loader: createLogger("Loader"),
+  context: createLogger("Context"),
+  discovery: createLogger("Discovery"),
+  plugin: createLogger("Plugin"),
+  canvas: createLogger("Canvas"),
+  debug: createLogger("Debug"),
 };

package/src/plugin.ts

@@ -16,6 +16,7 @@
 import type { BunPlugin } from "bun";
 import { readFileSync, existsSync } from "fs";
 import { dirname, basename, join, resolve } from "path";
+import { frameworkLoggers } from "./logger.js";
 
 export interface HypenPluginOptions {
   /**
@@ -141,7 +142,7 @@ export function hypenPlugin(options: HypenPluginOptions = {}): BunPlugin {
     options;
 
   const log = debug
-    ? (...args: unknown[]) => console.log("[hypen-plugin]", ...args)
+    ? (...args: unknown[]) => frameworkLoggers.plugin.debug(...args)
     : () => {};
 
   return {

package/src/remote/client.ts

@@ -51,6 +51,9 @@ import {
   disposableListener,
 } from "../disposable.js";
 import { retry, type RetryOptions } from "../retry.js";
+import { frameworkLoggers } from "../logger.js";
+
+const log = frameworkLoggers.remote;
 
 export type RemoteConnectionState =
   | "disconnected"
@@ -261,7 +264,7 @@ export class RemoteEngine implements Disposable {
    */
   dispatchAction(action: string, payload?: unknown): void {
     if (this.state !== "connected" || !this.ws) {
-      console.warn("Cannot dispatch action: not connected");
+      log.warn("Cannot dispatch action: not connected");
       return;
     }
 
@@ -388,7 +391,7 @@ export class RemoteEngine implements Disposable {
           break;
       }
     } catch (e) {
-      console.error("Error handling remote message:", e);
+      log.error("Error handling remote message:", e);
       const error = e instanceof Error ? e : new Error(String(e));
       this.errorCallbacks.forEach((cb) => cb(error));
     }
@@ -428,9 +431,7 @@ export class RemoteEngine implements Disposable {
   private handlePatch(message: PatchMessage): void {
     // Check revision ordering
     if (message.revision <= this.currentRevision) {
-      console.warn(
-        `Out of order patch: expected > ${this.currentRevision}, got ${message.revision}`
-      );
+      log.warn(`Out of order patch: expected > ${this.currentRevision}, got ${message.revision}`);
       return;
     }
 
@@ -465,13 +466,11 @@ export class RemoteEngine implements Disposable {
           maxDelayMs: 30000,
           jitter: 0.1,
           onRetry: (attempt, error) => {
-            console.log(
-              `Reconnection attempt ${attempt}/${this.options.maxReconnectAttempts} failed: ${error.message}`
-            );
+            log.debug(`Reconnection attempt ${attempt}/${this.options.maxReconnectAttempts} failed: ${error.message}`);
           },
         }
       ).catch((error) => {
-        console.error("Max reconnection attempts reached:", error.message);
+        log.error("Max reconnection attempts reached:", error.message);
         this.errorCallbacks.forEach((cb) =>
           cb(new ConnectionError(this.url, error, this.options.maxReconnectAttempts))
         );

package/src/remote/server.ts

@@ -47,6 +47,9 @@ import type {
 import type { Patch } from "../engine.js";
 import type { ServerWebSocket } from "bun";
 import { SessionManager } from "./session.js";
+import { frameworkLoggers } from "../logger.js";
+
+const log = frameworkLoggers.remote;
 
 interface ClientData {
   id: string;
@@ -182,7 +185,7 @@ export class RemoteServer {
       },
     });
 
-    console.log(`🚀 Hypen app streaming on ws://${hostname}:${finalPort}`);
+    log.info(`Hypen app streaming on ws://${hostname}:${finalPort}`);
 
     return this;
   }
@@ -249,7 +252,7 @@ export class RemoteServer {
       }, 1000); // 1 second grace period
 
     } catch (error) {
-      console.error("Error handling WebSocket open:", error);
+      log.error("Error handling WebSocket open:", error);
       ws.close(1011, "Internal server error");
     }
   }
@@ -514,7 +517,7 @@ export class RemoteServer {
           break;
       }
     } catch (error) {
-      console.error("Error handling WebSocket message:", error);
+      log.error("Error handling WebSocket message:", error);
     }
   }
 

package/src/renderer.ts

@@ -6,6 +6,9 @@
  */
 
 import type { Patch } from "./engine.js";
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.renderer;
 
 /**
  * Renderer interface that all platform renderers must implement
@@ -93,10 +96,6 @@ export abstract class BaseRenderer implements Renderer {
  */
 export class ConsoleRenderer implements Renderer {
   applyPatches(patches: Patch[]): void {
-    console.group("Patches:");
-    for (const patch of patches) {
-      console.log(patch);
-    }
-    console.groupEnd();
+    log.debug("Patches:", patches);
   }
 }

package/src/router.ts

@@ -4,6 +4,9 @@
  */
 
 import { createObservableState, getStateSnapshot } from "./state.js";
+import { frameworkLoggers } from "./logger.js";
+
+const log = frameworkLoggers.router;
 
 export type RouteMatch = {
   params: Record<string, string>;
@@ -76,7 +79,7 @@ export class HypenRouter {
     });
 
     this.isInitialized = true;
-    console.log("Router initialized at:", initialPath);
+    log.debug("Router initialized at:", initialPath);
   }
 
   /**
@@ -113,7 +116,7 @@ export class HypenRouter {
    * Navigate to a new path
    */
   push(path: string) {
-    console.log("Router.push:", path);
+    log.debug("push:", path);
     this.updatePath(path, true);
   }
 
@@ -121,7 +124,7 @@ export class HypenRouter {
    * Replace current path without adding to history
    */
   replace(path: string) {
-    console.log("Router.replace:", path);
+    log.debug("replace:", path);
     this.updatePath(path, true, true);
   }
 
@@ -129,7 +132,7 @@ export class HypenRouter {
    * Go back in history
    */
   back() {
-    console.log("Router.back");
+    log.debug("back");
     if (typeof window !== "undefined") {
       window.history.back();
     }
@@ -139,7 +142,7 @@ export class HypenRouter {
    * Go forward in history
    */
   forward() {
-    console.log("Router.forward");
+    log.debug("forward");
     if (typeof window !== "undefined") {
       window.history.forward();
     }
@@ -289,7 +292,7 @@ export class HypenRouter {
     try {
       callback(this.getState());
     } catch (error) {
-      console.error("[HypenRouter] Error in route subscriber:", error);
+      log.error("Error in route subscriber:", error);
     }
 
     // Return unsubscribe function
@@ -307,7 +310,7 @@ export class HypenRouter {
       try {
         callback(routeState);
       } catch (error) {
-        console.error("[HypenRouter] Error in route subscriber:", error);
+        log.error("Error in route subscriber:", error);
       }
     });
   }

package/wasm-browser/package.json

@@ -5,7 +5,7 @@
     "Hypen Contributors"
   ],
   "description": "A Rust implementation of the Hypen engine",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "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.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,5 +16,7 @@
     "hypen_engine.d.ts"
   ],
   "main": "hypen_engine.js",
-  "types": "hypen_engine.d.ts"
-}
+  "types": "hypen_engine.d.ts",
+  "type": "commonjs",
+  "sideEffects": false
+}