@hypen-space/core 0.2.11 → 0.3.0

package/dist/src/discovery.js

@@ -15,39 +15,34 @@ function deepClone(obj) {
   if (obj === null || typeof obj !== "object") {
     return obj;
   }
+  if (typeof obj === "function") {
+    return obj;
+  }
+  if (typeof obj.__getSnapshot === "function") {
+    return obj.__getSnapshot();
+  }
+  if (obj instanceof WeakMap || obj instanceof WeakSet) {
+    return obj;
+  }
   const visited = new WeakMap;
   function cloneInternal(value) {
     if (value === null || typeof value !== "object") {
       return value;
     }
+    if (typeof value === "function") {
+      return value;
+    }
     if (visited.has(value)) {
       return visited.get(value);
     }
-    if (value instanceof Date) {
-      return new Date(value.getTime());
-    }
-    if (value instanceof RegExp) {
-      return new RegExp(value.source, value.flags);
-    }
-    if (value instanceof Map) {
-      const mapClone = new Map;
-      visited.set(value, mapClone);
-      for (const [k, v] of value.entries()) {
-        mapClone.set(cloneInternal(k), cloneInternal(v));
-      }
-      return mapClone;
-    }
-    if (value instanceof Set) {
-      const setClone = new Set;
-      visited.set(value, setClone);
-      for (const item of value.values()) {
-        setClone.add(cloneInternal(item));
-      }
-      return setClone;
-    }
     if (value instanceof WeakMap || value instanceof WeakSet) {
       return value;
     }
+    if (value instanceof Date || value instanceof RegExp || value instanceof Map || value instanceof Set || ArrayBuffer.isView(value) || value instanceof ArrayBuffer) {
+      try {
+        return structuredClone(value);
+      } catch {}
+    }
     if (Array.isArray(value)) {
       const arrClone = [];
       visited.set(value, arrClone);
@@ -59,7 +54,7 @@ function deepClone(obj) {
     const objClone = {};
     visited.set(value, objClone);
     for (const key in value) {
-      if (value.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(value, key)) {
         objClone[key] = cloneInternal(value[key]);
       }
     }
@@ -161,12 +156,15 @@ function createObservableState(initialState, options) {
   }
   const proxyCache = new WeakMap;
   function createProxy(target, basePath) {
-    if (proxyCache.has(target)) {
-      return proxyCache.get(target);
-    }
+    const cached = proxyCache.get(target);
+    if (cached)
+      return cached;
     const proxy = new Proxy(target, {
       get(obj, prop) {
-        const value = obj[prop];
+        if (prop === IS_PROXY)
+          return true;
+        if (prop === RAW_TARGET)
+          return obj;
         if (prop === "__beginBatch") {
           return () => {
             batchDepth++;
@@ -183,16 +181,28 @@ function createObservableState(initialState, options) {
         if (prop === "__getSnapshot") {
           return () => deepClone(obj);
         }
+        const value = obj[prop];
         if (value && typeof value === "object") {
+          if (value[IS_PROXY]) {
+            return value;
+          }
           if (value instanceof Date || value instanceof RegExp || value instanceof Map || value instanceof Set || value instanceof WeakMap || value instanceof WeakSet) {
             return value;
           }
-          return createProxy(value, basePath ? `${basePath}.${String(prop)}` : String(prop));
+          const cachedNested = proxyCache.get(value);
+          if (cachedNested) {
+            return cachedNested;
+          }
+          const nestedProxy = createProxy(value, basePath ? `${basePath}.${String(prop)}` : String(prop));
+          return nestedProxy;
         }
         return value;
       },
       set(obj, prop, value) {
         const oldValue = obj[prop];
+        if (value && typeof value === "object" && value[IS_PROXY]) {
+          value = value[RAW_TARGET];
+        }
         obj[prop] = value;
         if (oldValue !== value) {
           scheduleBatch();
@@ -233,6 +243,344 @@ function getStateSnapshot(state) {
   }
   return deepClone(state);
 }
+function isStateProxy(value) {
+  return value !== null && typeof value === "object" && value[IS_PROXY] === true;
+}
+function unwrapProxy(value) {
+  if (value !== null && typeof value === "object" && value[IS_PROXY]) {
+    return value[RAW_TARGET];
+  }
+  return value;
+}
+var IS_PROXY, RAW_TARGET;
+var init_state = __esm(() => {
+  IS_PROXY = Symbol.for("hypen.isProxy");
+  RAW_TARGET = Symbol.for("hypen.rawTarget");
+});
+
+// src/result.ts
+function Ok(value) {
+  return { ok: true, value };
+}
+function Err(error) {
+  return { ok: false, error };
+}
+function isOk(result) {
+  return result.ok;
+}
+function isErr(result) {
+  return !result.ok;
+}
+async function fromPromise(promise, mapError) {
+  try {
+    const value = await promise;
+    return Ok(value);
+  } catch (e) {
+    if (mapError) {
+      return Err(mapError(e));
+    }
+    return Err(e);
+  }
+}
+function fromTry(fn, mapError) {
+  try {
+    return Ok(fn());
+  } catch (e) {
+    if (mapError) {
+      return Err(mapError(e));
+    }
+    return Err(e);
+  }
+}
+function map(result, fn) {
+  if (result.ok) {
+    return Ok(fn(result.value));
+  }
+  return result;
+}
+function mapErr(result, fn) {
+  if (!result.ok) {
+    return Err(fn(result.error));
+  }
+  return result;
+}
+function flatMap(result, fn) {
+  if (result.ok) {
+    return fn(result.value);
+  }
+  return result;
+}
+function unwrap(result) {
+  if (result.ok) {
+    return result.value;
+  }
+  throw result.error;
+}
+function unwrapOr(result, defaultValue) {
+  if (result.ok) {
+    return result.value;
+  }
+  return defaultValue;
+}
+function unwrapOrElse(result, fn) {
+  if (result.ok) {
+    return result.value;
+  }
+  return fn(result.error);
+}
+function match(result, handlers) {
+  if (result.ok) {
+    return handlers.ok(result.value);
+  }
+  return handlers.err(result.error);
+}
+function all(results) {
+  const values = [];
+  for (const result of results) {
+    if (!result.ok) {
+      return result;
+    }
+    values.push(result.value);
+  }
+  return Ok(values);
+}
+var HypenError, ActionError, ConnectionError, StateError;
+var init_result = __esm(() => {
+  HypenError = class HypenError extends Error {
+    code;
+    context;
+    cause;
+    constructor(code, message, options) {
+      super(message);
+      this.name = "HypenError";
+      this.code = code;
+      this.context = options?.context;
+      this.cause = options?.cause;
+      Object.setPrototypeOf(this, new.target.prototype);
+    }
+  };
+  ActionError = class ActionError extends HypenError {
+    actionName;
+    constructor(actionName, cause) {
+      super("ACTION_ERROR", `Action handler "${actionName}" failed: ${cause instanceof Error ? cause.message : String(cause)}`, {
+        context: { actionName },
+        cause: cause instanceof Error ? cause : undefined
+      });
+      this.name = "ActionError";
+      this.actionName = actionName;
+    }
+  };
+  ConnectionError = class ConnectionError extends HypenError {
+    url;
+    attempt;
+    constructor(url, cause, attempt) {
+      super("CONNECTION_ERROR", `Connection to "${url}" failed${attempt ? ` (attempt ${attempt})` : ""}: ${cause instanceof Error ? cause.message : String(cause)}`, {
+        context: { url, attempt },
+        cause: cause instanceof Error ? cause : undefined
+      });
+      this.name = "ConnectionError";
+      this.url = url;
+      this.attempt = attempt;
+    }
+  };
+  StateError = class StateError extends HypenError {
+    path;
+    constructor(message, path, cause) {
+      super("STATE_ERROR", message, {
+        context: { path },
+        cause: cause instanceof Error ? cause : undefined
+      });
+      this.name = "StateError";
+      this.path = path;
+    }
+  };
+});
+
+// src/logger.ts
+function isProduction() {
+  if (typeof process !== "undefined" && process.env) {
+    return false;
+  }
+  return false;
+}
+function setLogLevel(level) {
+  config.level = level;
+}
+function getLogLevel() {
+  return config.level;
+}
+function configureLogger(options) {
+  config = { ...config, ...options };
+}
+function enableLogging() {
+  config.level = "debug";
+}
+function disableLogging() {
+  config.level = "none";
+}
+function shouldLog(level) {
+  return LOG_LEVEL_ORDER[level] >= LOG_LEVEL_ORDER[config.level];
+}
+function formatTag(tag, level) {
+  const timestamp = config.timestamps ? `${new Date().toISOString()} ` : "";
+  if (config.colors && level !== "none") {
+    const color = LOG_LEVEL_COLORS[level];
+    return `${timestamp}${color}[${tag}]${RESET_COLOR}`;
+  }
+  return `${timestamp}[${tag}]`;
+}
+
+class Logger {
+  tag;
+  constructor(tag) {
+    this.tag = tag;
+  }
+  debug(...args) {
+    if (!shouldLog("debug"))
+      return;
+    if (config.handler) {
+      config.handler.debug(this.tag, ...args);
+    } else {
+      console.log(formatTag(this.tag, "debug"), ...args);
+    }
+  }
+  info(...args) {
+    if (!shouldLog("info"))
+      return;
+    if (config.handler) {
+      config.handler.info(this.tag, ...args);
+    } else {
+      console.info(formatTag(this.tag, "info"), ...args);
+    }
+  }
+  warn(...args) {
+    if (!shouldLog("warn"))
+      return;
+    if (config.handler) {
+      config.handler.warn(this.tag, ...args);
+    } else {
+      console.warn(formatTag(this.tag, "warn"), ...args);
+    }
+  }
+  error(...args) {
+    if (!shouldLog("error"))
+      return;
+    if (config.handler) {
+      config.handler.error(this.tag, ...args);
+    } else {
+      console.error(formatTag(this.tag, "error"), ...args);
+    }
+  }
+  time(label, fn) {
+    if (!shouldLog("debug")) {
+      return fn();
+    }
+    const start = performance.now();
+    try {
+      return fn();
+    } finally {
+      const duration = performance.now() - start;
+      this.debug(`${label}: ${duration.toFixed(2)}ms`);
+    }
+  }
+  async timeAsync(label, fn) {
+    if (!shouldLog("debug")) {
+      return fn();
+    }
+    const start = performance.now();
+    try {
+      return await fn();
+    } finally {
+      const duration = performance.now() - start;
+      this.debug(`${label}: ${duration.toFixed(2)}ms`);
+    }
+  }
+  child(subTag) {
+    return new Logger(`${this.tag}:${subTag}`);
+  }
+  debugIf(condition, ...args) {
+    if (condition)
+      this.debug(...args);
+  }
+  warnIf(condition, ...args) {
+    if (condition)
+      this.warn(...args);
+  }
+  errorIf(condition, ...args) {
+    if (condition)
+      this.error(...args);
+  }
+  loggedOnce = new Set;
+  warnOnce(key, ...args) {
+    if (this.loggedOnce.has(key))
+      return;
+    this.loggedOnce.add(key);
+    this.warn(...args);
+  }
+  debugOnce(key, ...args) {
+    if (this.loggedOnce.has(key))
+      return;
+    this.loggedOnce.add(key);
+    this.debug(...args);
+  }
+}
+function createLogger(tag) {
+  return new Logger(tag);
+}
+var LOG_LEVEL_ORDER, LOG_LEVEL_COLORS, RESET_COLOR = "\x1B[0m", config, logger, log, frameworkLoggers;
+var init_logger = __esm(() => {
+  LOG_LEVEL_ORDER = {
+    debug: 0,
+    info: 1,
+    warn: 2,
+    error: 3,
+    none: 4
+  };
+  LOG_LEVEL_COLORS = {
+    debug: "\x1B[36m",
+    info: "\x1B[32m",
+    warn: "\x1B[33m",
+    error: "\x1B[31m"
+  };
+  config = {
+    level: isProduction() ? "error" : "debug",
+    colors: true,
+    timestamps: false
+  };
+  logger = createLogger("Hypen");
+  log = {
+    debug: (tag, ...args) => {
+      if (!shouldLog("debug"))
+        return;
+      console.log(formatTag(tag, "debug"), ...args);
+    },
+    info: (tag, ...args) => {
+      if (!shouldLog("info"))
+        return;
+      console.info(formatTag(tag, "info"), ...args);
+    },
+    warn: (tag, ...args) => {
+      if (!shouldLog("warn"))
+        return;
+      console.warn(formatTag(tag, "warn"), ...args);
+    },
+    error: (tag, ...args) => {
+      if (!shouldLog("error"))
+        return;
+      console.error(formatTag(tag, "error"), ...args);
+    }
+  };
+  frameworkLoggers = {
+    engine: createLogger("Engine"),
+    router: createLogger("Router"),
+    state: createLogger("State"),
+    events: createLogger("Events"),
+    remote: createLogger("Remote"),
+    renderer: createLogger("Renderer"),
+    module: createLogger("Module"),
+    lifecycle: createLogger("Lifecycle")
+  };
+});
 
 // src/app.ts
 var exports_app = {};
@@ -249,6 +597,11 @@ class HypenAppBuilder {
   createdHandler;
   actionHandlers = new Map;
   destroyedHandler;
+  disconnectHandler;
+  reconnectHandler;
+  expireHandler;
+  errorHandler;
+  template;
   constructor(initialState, options) {
     this.initialState = initialState;
     this.options = options || {};
@@ -265,6 +618,26 @@ class HypenAppBuilder {
     this.destroyedHandler = fn;
     return this;
   }
+  onDisconnect(fn) {
+    this.disconnectHandler = fn;
+    return this;
+  }
+  onReconnect(fn) {
+    this.reconnectHandler = fn;
+    return this;
+  }
+  onExpire(fn) {
+    this.expireHandler = fn;
+    return this;
+  }
+  onError(fn) {
+    this.errorHandler = fn;
+    return this;
+  }
+  ui(template) {
+    this.template = template;
+    return this.build();
+  }
   build() {
     const stateKeys = this.initialState !== null && typeof this.initialState === "object" ? Object.keys(this.initialState) : [];
     return {
@@ -274,10 +647,15 @@ class HypenAppBuilder {
       persist: this.options.persist,
       version: this.options.version,
       initialState: this.initialState,
+      template: this.template,
       handlers: {
         onCreated: this.createdHandler,
         onAction: this.actionHandlers,
-        onDestroyed: this.destroyedHandler
+        onDestroyed: this.destroyedHandler,
+        onDisconnect: this.disconnectHandler,
+        onReconnect: this.reconnectHandler,
+        onExpire: this.expireHandler,
+        onError: this.errorHandler
       }
     };
   }
@@ -310,9 +688,9 @@ class HypenModuleInstance {
     });
     this.engine.setModule(definition.name || "AnonymousModule", definition.actions, definition.stateKeys, getStateSnapshot(this.state));
     for (const [actionName, handler] of definition.handlers.onAction) {
-      console.log(`[ModuleInstance] Registering action handler: ${actionName} for module ${definition.name}`);
+      log2.debug(`Registering action handler: ${actionName} for module ${definition.name}`);
       this.engine.onAction(actionName, async (action) => {
-        console.log(`[ModuleInstance] Action handler fired: ${actionName}`, action);
+        log2.debug(`Action handler fired: ${actionName}`, action);
         const actionCtx = {
           name: action.name,
           payload: action.payload,
@@ -322,17 +700,19 @@ class HypenModuleInstance {
           router: this.routerContext?.root || null
         };
         const context = this.globalContext ? this.createGlobalContextAPI() : undefined;
-        try {
-          await handler({
-            action: actionCtx,
-            state: this.state,
-            next,
-            context
-          });
-          console.log(`[ModuleInstance] Action handler completed: ${actionName}`);
-        } catch (error) {
-          console.error(`[ModuleInstance] Action handler error for ${actionName}:`, error);
-          throw error;
+        const result = await this.executeAction(actionName, handler, {
+          action: actionCtx,
+          state: this.state,
+          next,
+          context
+        });
+        if (!result.ok) {
+          const shouldRethrow = await this.handleError(result.error, { actionName });
+          if (shouldRethrow) {
+            throw result.error;
+          }
+        } else {
+          log2.debug(`Action handler completed: ${actionName}`);
         }
       });
     }
@@ -359,6 +739,48 @@ class HypenModuleInstance {
     }
     return api;
   }
+  async executeAction(actionName, handler, ctx) {
+    try {
+      const result = handler(ctx);
+      await result;
+      return Ok(undefined);
+    } catch (e) {
+      return Err(new ActionError(actionName, e));
+    }
+  }
+  async handleError(error, context) {
+    const errorCtx = {
+      error,
+      state: this.state,
+      actionName: context.actionName,
+      lifecycle: context.lifecycle
+    };
+    if (this.definition.handlers.onError) {
+      try {
+        const result = await this.definition.handlers.onError(errorCtx);
+        if (result && typeof result === "object") {
+          if ("handled" in result && result.handled) {
+            return false;
+          }
+          if ("rethrow" in result && result.rethrow) {
+            return true;
+          }
+        }
+      } catch (handlerError) {
+        log2.error("Error in onError handler:", handlerError);
+      }
+    }
+    if (this.globalContext) {
+      const eventContext = context.actionName ? `action:${context.actionName}` : context.lifecycle ? `lifecycle:${context.lifecycle}` : "unknown";
+      this.globalContext.emit("error", {
+        message: error.message,
+        error,
+        context: eventContext
+      });
+    }
+    log2.error(`${context.actionName ? `Action "${context.actionName}"` : `Lifecycle "${context.lifecycle}"`} error:`, error);
+    return false;
+  }
   async callCreatedHandler() {
     if (this.definition.handlers.onCreated) {
       const context = this.globalContext ? this.createGlobalContextAPI() : undefined;
@@ -386,8 +808,12 @@ class HypenModuleInstance {
     Object.assign(this.state, patch);
   }
 }
-var app;
+var log2, app;
 var init_app = __esm(() => {
+  init_result();
+  init_state();
+  init_logger();
+  log2 = createLogger("ModuleInstance");
   app = new HypenApp;
 });
 
@@ -399,19 +825,19 @@ function removeImports(text) {
 }
 async function discoverComponents(baseDir, options = {}) {
   const {
-    patterns = ["folder", "sibling", "index"],
+    patterns = ["single-file", "folder", "sibling", "index"],
     recursive = false,
     debug = false
   } = options;
-  const log = debug ? (...args) => console.log("[discovery]", ...args) : () => {};
+  const log3 = debug ? (...args) => console.log("[discovery]", ...args) : () => {};
   const resolvedDir = resolve(baseDir);
   const components = [];
   const seen = new Set;
-  log("Scanning directory:", resolvedDir);
-  log("Patterns:", patterns);
-  const addComponent = (name, hypenPath, modulePath) => {
+  log3("Scanning directory:", resolvedDir);
+  log3("Patterns:", patterns);
+  const addTwoFileComponent = (name, hypenPath, modulePath) => {
     if (seen.has(name)) {
-      log(`Skipping duplicate: ${name}`);
+      log3(`Skipping duplicate: ${name}`);
       return;
     }
     seen.add(name);
@@ -422,9 +848,26 @@ async function discoverComponents(baseDir, options = {}) {
       hypenPath,
       modulePath,
       template,
-      hasModule: modulePath !== null
+      hasModule: modulePath !== null,
+      isSingleFile: false
     });
-    log(`Found: ${name} (${modulePath ? "with module" : "stateless"})`);
+    log3(`Found: ${name} (two-file, ${modulePath ? "with module" : "stateless"})`);
+  };
+  const addSingleFileComponent = (name, modulePath, template) => {
+    if (seen.has(name)) {
+      log3(`Skipping duplicate: ${name}`);
+      return;
+    }
+    seen.add(name);
+    components.push({
+      name,
+      hypenPath: null,
+      modulePath,
+      template,
+      hasModule: true,
+      isSingleFile: true
+    });
+    log3(`Found: ${name} (single-file with inline template)`);
   };
   const scanForFolderComponents = (dir) => {
     if (!existsSync(dir))
@@ -439,7 +882,7 @@ async function discoverComponents(baseDir, options = {}) {
         const hypenPath = join(folderPath, "component.hypen");
         if (existsSync(hypenPath)) {
           const modulePath = join(folderPath, "component.ts");
-          addComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
+          addTwoFileComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
           continue;
         }
       }
@@ -447,7 +890,7 @@ async function discoverComponents(baseDir, options = {}) {
         const hypenPath = join(folderPath, "index.hypen");
         if (existsSync(hypenPath)) {
           const modulePath = join(folderPath, "index.ts");
-          addComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
+          addTwoFileComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
           continue;
         }
       }
@@ -474,7 +917,43 @@ async function discoverComponents(baseDir, options = {}) {
       if (baseName === "component" || baseName === "index")
         continue;
       const modulePath = join(dir, `${baseName}.ts`);
-      addComponent(baseName, hypenPath, existsSync(modulePath) ? modulePath : null);
+      addTwoFileComponent(baseName, hypenPath, existsSync(modulePath) ? modulePath : null);
+    }
+  };
+  const scanForSingleFileComponents = async (dir) => {
+    if (!existsSync(dir))
+      return;
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (recursive) {
+          await scanForSingleFileComponents(join(dir, entry.name));
+        }
+        continue;
+      }
+      if (!entry.name.endsWith(".ts"))
+        continue;
+      if (entry.name.startsWith(".") || entry.name.includes(".test.") || entry.name.includes(".spec."))
+        continue;
+      const baseName = basename(entry.name, ".ts");
+      if (baseName === "component" || baseName === "index")
+        continue;
+      const hypenPath = join(dir, `${baseName}.hypen`);
+      if (existsSync(hypenPath))
+        continue;
+      const modulePath = join(dir, entry.name);
+      const content = readFileSync(modulePath, "utf-8");
+      if (content.includes(".ui(") || content.includes(".ui(hypen")) {
+        try {
+          const moduleExport = await import(modulePath);
+          const module = moduleExport.default;
+          if (module && typeof module === "object" && module.template) {
+            addSingleFileComponent(baseName, modulePath, module.template);
+          }
+        } catch (e) {
+          log3(`Failed to import potential single-file component: ${entry.name}`, e);
+        }
+      }
     }
   };
   if (patterns.includes("folder") || patterns.includes("index")) {
@@ -483,7 +962,10 @@ async function discoverComponents(baseDir, options = {}) {
   if (patterns.includes("sibling")) {
     scanForSiblingComponents(resolvedDir);
   }
-  log(`Discovered ${components.length} components`);
+  if (patterns.includes("single-file")) {
+    await scanForSingleFileComponents(resolvedDir);
+  }
+  log3(`Discovered ${components.length} components`);
   return components;
 }
 async function loadDiscoveredComponents(components) {
@@ -491,16 +973,20 @@ async function loadDiscoveredComponents(components) {
   const loaded = new Map;
   for (const component of components) {
     let module;
+    let template = component.template;
     if (component.modulePath) {
       const moduleExport = await import(component.modulePath);
       module = moduleExport.default;
+      if (component.isSingleFile && module.template) {
+        template = module.template;
+      }
     } else {
       module = app2.defineState({}).build();
     }
     loaded.set(component.name, {
       name: component.name,
       module,
-      template: component.template
+      template
     });
   }
   return loaded;
@@ -515,7 +1001,7 @@ function watchComponents(baseDir, options = {}) {
     debug = false,
     ...discoveryOptions
   } = options;
-  const log = debug ? (...args) => console.log("[discovery:watch]", ...args) : () => {};
+  const log3 = debug ? (...args) => console.log("[discovery:watch]", ...args) : () => {};
   let currentComponents = new Map;
   let debounceTimer = null;
   const initialScan = async () => {
@@ -528,22 +1014,22 @@ function watchComponents(baseDir, options = {}) {
       clearTimeout(debounceTimer);
     }
     debounceTimer = setTimeout(async () => {
-      log("Rescanning...");
+      log3("Rescanning...");
       const newComponents = await discoverComponents(resolvedDir, discoveryOptions);
       const newMap = new Map(newComponents.map((c) => [c.name, c]));
       for (const [name, component] of newMap) {
         const existing = currentComponents.get(name);
         if (!existing) {
-          log("Added:", name);
+          log3("Added:", name);
           onAdd?.(component);
         } else if (existing.template !== component.template || existing.modulePath !== component.modulePath) {
-          log("Updated:", name);
+          log3("Updated:", name);
           onUpdate?.(component);
         }
       }
       for (const name of currentComponents.keys()) {
         if (!newMap.has(name)) {
-          log("Removed:", name);
+          log3("Removed:", name);
           onRemove?.(name);
         }
       }
@@ -555,7 +1041,7 @@ function watchComponents(baseDir, options = {}) {
     if (!filename)
       return;
     if (filename.endsWith(".hypen") || filename.endsWith(".ts")) {
-      log("File changed:", filename);
+      log3("File changed:", filename);
       rescan();
     }
   });
@@ -590,8 +1076,15 @@ import { app } from "@hypen-space/core";
 
 `;
   for (const component of components) {
-    const templateJson = JSON.stringify(component.template);
-    if (component.hasModule) {
+    if (component.isSingleFile) {
+      code += `export const ${component.name} = {
+  module: ${component.name}Module,
+  template: ${component.name}Module.template,
+};
+
+`;
+    } else if (component.hasModule) {
+      const templateJson = JSON.stringify(component.template);
       code += `export const ${component.name} = {
   module: ${component.name}Module,
   template: ${templateJson},
@@ -599,6 +1092,7 @@ import { app } from "@hypen-space/core";
 
 `;
     } else {
+      const templateJson = JSON.stringify(component.template);
       code += `const ${component.name}Module = app.defineState({}).build();
 export const ${component.name} = {
   module: ${component.name}Module,
@@ -617,4 +1111,4 @@ export {
   discoverComponents
 };
 
-//# debugId=310D95D3289A0E7E64756E2164756E21
+//# debugId=8B91C0622F0CDB2064756E2164756E21