@noego/app 0.0.7 → 0.0.10

package/src/client.js

@@ -70,6 +70,7 @@ export async function clientBoot() {
   const root = config.root || process.cwd();
   const require = createRequire(path.join(root, 'package.json'));
   const { createServer: createForgeServer } = require('@noego/forge/server');
+  const { assets } = require('@noego/forge/assets');
 
   // Setup Forge (SSR)
   // Forge expects paths relative to viteOptions.root
@@ -88,11 +89,23 @@ export async function clientBoot() {
           }
         : undefined
     },
-    component_dir: config.client?.component_dir,
+    // IMPORTANT: Forge uses component_dir for BOTH SSR and client
+    // - SSR (server-side): Loads from filesystem using this path directly
+    // - Client (browser): Forge injects window.__COMPONENT_DIR__ which browser uses for imports
+    // So we pass the SSR path here, and Forge will handle client path injection
+    component_dir: config.client?.component_dir_ssr || config.client?.component_dir || '.app/ssr',
     open_api_path: config.client?.openapi_path,
     renderer: config.client?.shell_path,
     middleware_path: config.server?.middleware_path,
     development: config.mode !== 'production',
+    assets: assets((() => {
+      if (config.mode === 'production') {
+        const route = config.client?.component_base_path || '/assets';
+        const dir = config.client?.assets_build_dir || '.app/assets';
+        return { [route]: [dir] };
+      }
+      return {};
+    })()),
   };
   
   await createForgeServer(app, forgeOptions);
@@ -138,4 +151,3 @@ export const client = {
   boot: clientBoot,
   init: clientInit  // Browser-side initialization
 };
-

package/src/commands/dev.js

@@ -1,12 +1,48 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { spawn } from 'node:child_process';
+import { spawn, execSync } from 'node:child_process';
 import { createBuildContext } from '../build/context.js';
 import { findConfigFile } from '../runtime/index.js';
 import { loadConfig } from '../runtime/config-loader.js';
+import globParent from 'glob-parent';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/**
+ * Kill a process and all its descendants (entire process tree)
+ * This ensures no orphaned processes remain when killing a parent
+ */
+function killProcessTree(pid, signal = 'SIGKILL') {
+  if (!pid) return;
+
+  try {
+    // On Unix systems, use pkill to kill all descendants
+    if (process.platform !== 'win32') {
+      // Kill all child processes first
+      try {
+        execSync(`pkill -P ${pid}`, { stdio: 'ignore' });
+      } catch (e) {
+        // No children or already dead, that's fine
+      }
+      // Then kill the parent
+      try {
+        process.kill(pid, signal);
+      } catch (e) {
+        // Process may already be dead
+      }
+    } else {
+      // On Windows, use taskkill with /T flag to kill process tree
+      try {
+        execSync(`taskkill /pid ${pid} /T /F`, { stdio: 'ignore' });
+      } catch (e) {
+        // Process may already be dead
+      }
+    }
+  } catch (error) {
+    // Ignore errors - process might already be dead
+  }
+}
+
 export async function runDev(config) {
   const context = createBuildContext(config);
   const { logger } = context;
@@ -222,8 +258,14 @@ async function runSplitServeNoWatch(tsxExecutable, tsxArgs, baseEnv, routerPort,
     detached: false
   });
 
+  // Track if we're already shutting down
+  let isShuttingDown = false;
+
   // Handle shutdown
   const shutdown = (exitCode = 0) => {
+    if (isShuttingDown) return;
+    isShuttingDown = true;
+
     logger.info('Shutting down split-serve processes...');
     if (backendProc && !backendProc.killed) {
       backendProc.kill('SIGTERM');
@@ -259,10 +301,34 @@ async function runSplitServeNoWatch(tsxExecutable, tsxArgs, baseEnv, routerPort,
     shutdown(1);
   });
 
-  // Set up signal handlers to clean up on termination
+  // Handle graceful shutdown signals
   process.on('SIGINT', () => shutdown(0));
   process.on('SIGTERM', () => shutdown(0));
 
+  // Handle process exit - ensures children are killed even if parent crashes
+  process.on('exit', () => {
+    // Synchronous cleanup only - exit event doesn't allow async
+    // Kill entire process tree (including tsx wrappers and their children)
+    if (backendProc && backendProc.pid && !backendProc.killed) {
+      killProcessTree(backendProc.pid);
+    }
+    if (frontendProc && frontendProc.pid && !frontendProc.killed) {
+      killProcessTree(frontendProc.pid);
+    }
+  });
+
+  // Handle uncaught exceptions
+  process.on('uncaughtException', (error) => {
+    logger.error('Uncaught exception:', error);
+    shutdown(1);
+  });
+
+  // Handle unhandled promise rejections
+  process.on('unhandledRejection', (reason, promise) => {
+    logger.error('Unhandled rejection at:', promise, 'reason:', reason);
+    shutdown(1);
+  });
+
   // Wait a moment for spawned processes to start
   await new Promise(resolve => setTimeout(resolve, 2000));
 
@@ -291,7 +357,9 @@ async function runSplitServeNoWatch(tsxExecutable, tsxArgs, baseEnv, routerPort,
  */
 async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv, yamlConfig, configFilePath, routerPort, frontendPort, backendPort, logger) {
   const { createRequire } = await import('node:module');
-  const root = yamlConfig.root || path.dirname(configFilePath);
+  // Use context.config.rootDir for consistency with spawned processes
+  const root = context.config.rootDir;
+  logger.debug(`Using root directory for file watching: ${root}`);
   const requireFromRoot = createRequire(path.join(root, 'package.json'));
   const chokidar = requireFromRoot('chokidar');
   const picomatch = (await import('picomatch')).default;
@@ -301,8 +369,11 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   const normalizePattern = (pattern) => {
     // If pattern is absolute, make it relative to root
     if (path.isAbsolute(pattern)) {
-      return path.relative(root, pattern);
+      const normalized = path.relative(root, pattern);
+      logger.debug(`Normalized pattern: ${pattern} -> ${normalized}`);
+      return normalized;
     }
+    logger.debug(`Pattern already relative: ${pattern}`);
     return pattern;
   };
 
@@ -332,8 +403,28 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
     }
   }
   
-  // Combine all patterns for chokidar
+  // Combine all patterns (for classification)
   const allPatterns = [...sharedPatterns, ...backendPatterns, ...frontendPatterns];
+
+  // Derive concrete watch targets (directories/files) from the patterns
+  // We watch directories; we use picomatch on the original patterns to classify events.
+  const watchTargets = new Set();
+  const GLOB_CHARS = /[\\*?\[\]\{\}\(\)!+@]/; // simple glob detector
+  const addWatchTarget = (pattern) => {
+    if (!pattern) return;
+    const rel = normalizePattern(pattern);
+    // Negative patterns are for filtering; don't watch them directly
+    if (rel.startsWith('!')) return;
+    const isGlob = GLOB_CHARS.test(rel);
+    if (!isGlob) {
+      // Literal path; watch the file itself
+      watchTargets.add(rel);
+      return;
+    }
+    const base = globParent(rel);
+    watchTargets.add(base && base.length > 0 ? base : '.');
+  };
+  for (const p of allPatterns) addWatchTarget(p);
   
   if (allPatterns.length === 0) {
     logger.warn('No watch patterns configured. Watching disabled.');
@@ -344,18 +435,23 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   logger.info(`  Shared: ${sharedPatterns.length} patterns`);
   logger.info(`  Backend: ${backendPatterns.length} patterns`);
   logger.info(`  Frontend: ${frontendPatterns.length} patterns`);
+  logger.info(`  Watch targets (${watchTargets.size}): ${JSON.stringify(Array.from(watchTargets), null, 2)}`);
   
   // Create matchers
   const sharedMatcher = sharedPatterns.length > 0 ? picomatch(sharedPatterns) : null;
   const backendMatcher = backendPatterns.length > 0 ? picomatch(backendPatterns) : null;
   const frontendMatcher = frontendPatterns.length > 0 ? picomatch(frontendPatterns) : null;
-  
+
   let backendProc = null;
   let frontendProc = null;
   let pending = false;
-  
+  let backendRestartCount = 0;
+  let frontendRestartCount = 0;
+  let isShuttingDown = false;
+
   const startBackend = () => {
-    logger.info(`Starting backend on port ${backendPort}...`);
+    backendRestartCount++;
+    logger.info(`🚀 [RESTART #${backendRestartCount}] Starting backend on port ${backendPort}...`);
     const backendEnv = {
       ...baseEnv,
       NOEGO_SERVICE: 'backend',
@@ -377,7 +473,8 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   };
   
   const startFrontend = () => {
-    logger.info(`Starting frontend on port ${frontendPort}...`);
+    frontendRestartCount++;
+    logger.info(`🚀 [RESTART #${frontendRestartCount}] Starting frontend on port ${frontendPort}...`);
     const frontendEnv = {
       ...baseEnv,
       NOEGO_SERVICE: 'frontend',
@@ -401,6 +498,7 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   const stopBackend = () =>
     new Promise((resolve) => {
       if (!backendProc) return resolve();
+      logger.info(`⏹️  Stopping backend (preparing for restart #${backendRestartCount + 1})...`);
       const to = setTimeout(resolve, 2000);
       backendProc.once('exit', () => {
         clearTimeout(to);
@@ -416,6 +514,7 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   const stopFrontend = () =>
     new Promise((resolve) => {
       if (!frontendProc) return resolve();
+      logger.info(`⏹️  Stopping frontend (preparing for restart #${frontendRestartCount + 1})...`);
       const to = setTimeout(resolve, 2000);
       frontendProc.once('exit', () => {
         clearTimeout(to);
@@ -427,7 +526,38 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
         resolve();
       }
     });
-  
+
+  async function shutdown(signal = 'SIGTERM', exitCode = 0) {
+    if (isShuttingDown) return;
+    isShuttingDown = true;
+
+    logger.info(`Shutting down split-serve processes (signal: ${signal})...`);
+
+    try {
+      if (watcher) {
+        await watcher.close();
+      }
+
+      await stopBackend();
+      await stopFrontend();
+
+      logger.info('All processes shut down successfully');
+    } catch (error) {
+      logger.error('Error during shutdown:', error);
+    }
+
+    process.exit(exitCode);
+  }
+
+  async function handleWatcherError(error) {
+    if (isShuttingDown) {
+      return;
+    }
+    logger.error('Watcher error:', error);
+    logger.error('File watching failed; shutting down dev server.');
+    await shutdown('watcherError', 1);
+  }
+
   const handleFileChange = async (reason, file) => {
     if (pending) return;
     pending = true;
@@ -442,19 +572,28 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
 
     if (sharedMatcher && sharedMatcher(relativePath)) {
       // Shared file changed - restart both
-      logger.info(`Shared file changed (${reason}): ${relativePath}`);
+      logger.info(`\n${'='.repeat(80)}`);
+      logger.info(`🔄 FILE CHANGE DETECTED: ${relativePath} (${reason})`);
+      logger.info(`   Type: SHARED - Will restart BOTH backend and frontend`);
+      logger.info('='.repeat(80));
       restartBackend = true;
       restartFrontend = true;
     } else if (backendMatcher && backendMatcher(relativePath)) {
       // Backend file changed
-      logger.info(`Backend file changed (${reason}): ${relativePath}`);
+      logger.info(`\n${'='.repeat(80)}`);
+      logger.info(`🔄 FILE CHANGE DETECTED: ${relativePath} (${reason})`);
+      logger.info(`   Type: BACKEND - Will restart backend only`);
+      logger.info('='.repeat(80));
       restartBackend = true;
     } else if (frontendMatcher && frontendMatcher(relativePath)) {
       // Frontend file changed
-      logger.info(`Frontend file changed (${reason}): ${relativePath}`);
+      logger.info(`\n${'='.repeat(80)}`);
+      logger.info(`🔄 FILE CHANGE DETECTED: ${relativePath} (${reason})`);
+      logger.info(`   Type: FRONTEND - Will restart frontend only`);
+      logger.info('='.repeat(80));
       restartFrontend = true;
     }
-    
+
     // Restart appropriate service(s)
     if (restartBackend) {
       await stopBackend();
@@ -464,39 +603,51 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
       await stopFrontend();
       startFrontend();
     }
-    
+
+    if (restartBackend || restartFrontend) {
+      logger.info(`✅ Restart complete\n`);
+    }
+
     pending = false;
   };
   
   // Create watcher
   // Use cwd with relative patterns for proper glob support
-  const watcher = chokidar.watch(allPatterns, {
-    cwd: root,
-    ignoreInitial: true
-  });
+  logger.info(`[WATCHER] Creating watcher with cwd: ${root}`);
+  logger.info(`[WATCHER] Patterns (classification only): ${JSON.stringify(allPatterns, null, 2)}`);
+  logger.info(`[WATCHER] Concrete targets: ${JSON.stringify(Array.from(watchTargets), null, 2)}`);
+
+  let watcher;
+  try {
+    watcher = chokidar.watch(Array.from(watchTargets), {
+      cwd: root,
+      ignoreInitial: true
+    });
+  } catch (error) {
+    await handleWatcherError(error);
+    return;
+  }
 
   // Debug: Log what patterns we're actually watching
   logger.info('Watch patterns:', allPatterns);
 
   watcher
     .on('add', (p) => {
-      logger.debug(`File add event: ${p}`);
+      logger.info(`[WATCHER] File add event: ${p}`);
       handleFileChange('add', p);
     })
     .on('change', (p) => {
-      logger.debug(`File change event: ${p}`);
+      logger.info(`[WATCHER] File change event: ${p}`);
       handleFileChange('change', p);
     })
     .on('unlink', (p) => {
-      logger.debug(`File unlink event: ${p}`);
+      logger.info(`[WATCHER] File unlink event: ${p}`);
       handleFileChange('unlink', p);
     })
     .on('ready', () => {
       logger.info('File watcher is ready');
     })
-    .on('error', (error) => {
-      logger.error('Watcher error:', error);
-    });
+    .on('error', handleWatcherError);
   
   // Start initial processes
   startBackend();
@@ -523,17 +674,38 @@ async function runSplitServeWithWatch(context, tsxExecutable, tsxArgs, baseEnv,
   // Use dynamic import instead of require for ES module compatibility
   await import(runtimeEntryPath);
 
-  // Handle shutdown
-  const shutdown = async () => {
-    logger.info('Shutting down split-serve processes...');
-    await stopBackend();
-    await stopFrontend();
-    await watcher.close();
-    process.exit(0);
-  };
-  
-  process.on('SIGINT', shutdown);
-  process.on('SIGTERM', shutdown);
+  // Handle graceful shutdown signals
+  process.on('SIGINT', () => shutdown('SIGINT', 0));
+  process.on('SIGTERM', () => shutdown('SIGTERM', 0));
+
+  // Handle process exit - this ensures children are killed even if parent crashes
+  process.on('exit', () => {
+    // Synchronous cleanup only - exit event doesn't allow async
+    // Kill entire process tree (including tsx wrappers and their children)
+    if (backendProc && backendProc.pid && !backendProc.killed) {
+      killProcessTree(backendProc.pid);
+    }
+    if (frontendProc && frontendProc.pid && !frontendProc.killed) {
+      killProcessTree(frontendProc.pid);
+    }
+  });
+
+  // Handle uncaught exceptions
+  process.on('uncaughtException', async (error) => {
+    logger.error('Uncaught exception:', error);
+    await shutdown('uncaughtException', 1);
+  });
+
+  // Handle unhandled promise rejections
+  process.on('unhandledRejection', async (reason, promise) => {
+    logger.error('Unhandled rejection at:', promise, 'reason:', reason);
+    await shutdown('unhandledRejection', 1);
+  });
+
+  // Keep process alive for file watching
+  // This promise never resolves, keeping the event loop running
+  // The process will only exit via the signal handlers above
+  await new Promise(() => {});
 }
 
 async function createWatcher(context, yamlConfig, configFilePath) {
@@ -580,12 +752,39 @@ async function createWatcher(context, yamlConfig, configFilePath) {
     return null;
   }
 
+  // Convert patterns to concrete watch targets (directories/files)
+  const GLOB_CHARS = /[\\*?\[\]\{\}\(\)!+@]/;
+  const watchTargets = new Set();
+  for (const p of patterns) {
+    const isGlob = GLOB_CHARS.test(p);
+    if (!isGlob) {
+      watchTargets.add(p);
+    } else {
+      const base = globParent(p);
+      watchTargets.add(base && base.length > 0 ? base : '.');
+    }
+  }
+
   logger.info('Watching for changes to restart server...');
-  // Use cwd with relative patterns for proper glob support
-  const watcher = chokidar.watch(Array.from(patterns), {
-    cwd: root,
-    ignoreInitial: true
+  logger.info(`[WATCHER] Concrete targets: ${JSON.stringify(Array.from(watchTargets), null, 2)}`);
+  // Use cwd with relative targets for proper glob support
+  let watcher;
+  try {
+    watcher = chokidar.watch(Array.from(watchTargets), {
+      cwd: root,
+      ignoreInitial: true
+    });
+  } catch (error) {
+    logger.error('Failed to start file watcher:', error);
+    throw error;
+  }
+
+  watcher.on('error', (error) => {
+    logger.error('Watcher error:', error);
+    logger.error('File watching is required for dev mode; exiting.');
+    process.exit(1);
   });
+
   return watcher;
 }
 

package/src/config.js

@@ -47,6 +47,15 @@ export async function loadBuildConfig(cliOptions = {}, { cwd = process.cwd() } =
   const uiRootDir = config.client?.main_abs ? path.dirname(config.client.main_abs) : null;
   const uiRelRoot = uiRootDir ? path.relative(config.root, uiRootDir) : null;
 
+  if (cliOptions.verbose) {
+    console.log('[config] uiRootDir calculation:', {
+      'config.client': config.client,
+      'config.client.main_abs': config.client?.main_abs,
+      'uiRootDir': uiRootDir,
+      'uiRelRoot': uiRelRoot
+    });
+  }
+
   const layout = {
     outDir,
     serverOutDir: path.join(outDir, 'server'),
@@ -61,6 +70,7 @@ export async function loadBuildConfig(cliOptions = {}, { cwd = process.cwd() } =
   const buildConfig = {
     ...config,
     rootDir: config.root,
+    verbose: cliOptions.verbose || false,
     layout,
     server: config.server ? {
       rootDir: config.server.main_abs ? path.dirname(config.server.main_abs) : config.root,

package/src/runtime/runtime.js

@@ -412,8 +412,11 @@ async function runFrontendService(config) {
       }
     }
   }
-  
-  setContext(frontendApp, config);
+
+  // Create HTTP server for WebSocket handling (Bug 1 fix)
+  const httpServer = http.createServer(frontendApp);
+
+  setContext(frontendApp, config, httpServer);
 
   // Only setup proxy if NOT running as a separate frontend service
   // In split-serve mode, the router handles proxying
@@ -435,7 +438,7 @@ async function runFrontendService(config) {
   console.log('[frontend] config.dev.port:', config.dev.port);
   console.log('[frontend] Using port:', frontendPort);
 
-  frontendApp.listen(frontendPort, '0.0.0.0', () => {
+  httpServer.listen(frontendPort, '0.0.0.0', () => {
     console.log(`Frontend server running on http://localhost:${frontendPort}`);
   });
   
@@ -446,8 +449,10 @@ async function runFrontendService(config) {
  * Run router service that proxies to frontend/backend
  */
 async function runRouterService(config) {
-  const appBootModule = await import(toFileUrl(config.app.boot_abs));
-  const routerApp = appBootModule.default(config);
+  // Router runs in main process without TypeScript support.
+  // Create a plain Express app instead of importing the user's boot file.
+  const express = (await import('express')).default;
+  const routerApp = express();
 
   attachCookiePolyfill(routerApp);
 
@@ -626,10 +631,46 @@ async function runRouterService(config) {
     });
   });
 
-  routerApp.listen(routerPort, '0.0.0.0', () => {
+  // Create HTTP server for WebSocket handling (Bug 2 fix)
+  const httpServer = http.createServer(routerApp);
+
+  // Set up WebSocket proxy
+  const httpProxy = await import('http-proxy');
+  const wsProxy = httpProxy.default.createProxyServer({ changeOrigin: true });
+
+  // Handle WebSocket upgrade requests
+  httpServer.on('upgrade', (req, socket, head) => {
+    const url = req.url || '';
+
+    // Path-based routing for WebSocket connections
+    // Vite HMR uses /__vite_hmr by default, but can be configured to /vite-hmr
+    const isHmr = url.startsWith('/__vite_hmr') || url.startsWith('/vite-hmr') ||
+                  String(req.headers['sec-websocket-protocol'] || '').includes('vite-hmr');
+
+    // Route both HMR and app WebSockets to frontend by default
+    // The frontend handles both Vite HMR and app WebSocket connections
+    // Only route to backend if explicitly needed (currently none)
+    const target = `ws://localhost:${frontendPort}`;
+
+    console.log(`[router][ws] Routing WebSocket ${url} to ${target}`);
+
+    wsProxy.ws(req, socket, head, { target }, (err) => {
+      console.error('[router][ws] proxy error:', err?.message);
+      try { socket.destroy(); } catch {}
+    });
+  });
+
+  // Optional: observe proxy-level errors
+  wsProxy.on('error', (err, req, socket) => {
+    console.error('[router][ws] proxy error (global):', err?.message);
+    try { socket?.destroy?.(); } catch {}
+  });
+
+  httpServer.listen(routerPort, '0.0.0.0', () => {
     console.log(`Router server running on http://localhost:${routerPort}`);
     console.log(`  Proxying to frontend on port ${frontendPort}`);
     console.log(`  Proxying to backend on port ${backendPort}`);
+    console.log(`  WebSocket support enabled via http-proxy`);
   });
 
   return routerApp;
@@ -660,7 +701,9 @@ export async function runCombinedServices(config, options = {}) {
     const require = createRequire(path.join(config.root, 'package.json'));
     const express = require('express');
     const clientStaticPath = path.join(config.outDir_abs, '.app', 'assets');
+    const chunksStaticPath = path.join(config.outDir_abs, '.app', 'ssr', 'chunks');
     app.use('/client', express.static(clientStaticPath));
+    app.use('/chunks', express.static(chunksStaticPath));
   }
   
   const httpServer = http.createServer(app);