@noego/app 0.0.9 → 0.0.10

package/src/build/ssr.js

@@ -57,20 +57,53 @@ export async function buildSsr(context, discovery) {
   const manifestPath = path.join(config.layout.ssrOutDir, 'manifest.json');
   await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
 
-  // Overlay SSR compiled modules into the mirrored UI root so runtime imports
-  // like component_path.replace('.svelte', '.js') resolve without loaders.
-  try {
-    await fs.mkdir(config.layout.uiOutDir, { recursive: true });
-    await fs.cp(config.layout.ssrOutDir, config.layout.uiOutDir, { recursive: true, force: true });
-  } catch (err) {
-    // non-fatal; report via console for visibility
-    console.warn('Failed to overlay SSR output into UI root:', err?.message || err);
+  // No overlay needed - Forge loads components directly from .app/ssr/
+  // Write entry-ssr.js to where components actually are (preserving full relative path)
+  const relativeComponentDir = config.client?.component_dir ? (() => {
+    const uiRoot = path.dirname(config.client.main_abs);
+    return path.relative(uiRoot, config.client.componentDir_abs);
+  })() : null;
+
+  const ssrComponentsDir = relativeComponentDir
+    ? path.join(config.layout.ssrOutDir, relativeComponentDir)
+    : config.layout.ssrOutDir;
+
+  // Copy RecursiveRender.js to components subdirectory if needed
+  if (relativeComponentDir && await pathExists(path.join(config.layout.ssrOutDir, 'RecursiveRender.js'))) {
+    await fs.mkdir(ssrComponentsDir, { recursive: true });
+    await fs.copyFile(
+      path.join(config.layout.ssrOutDir, 'RecursiveRender.js'),
+      path.join(ssrComponentsDir, 'RecursiveRender.js')
+    );
   }
 
-  await writeSsrEntryModule(context, resolution.components).catch((err) => {
+  await writeSsrEntryModule(context, resolution.components, ssrComponentsDir).catch((err) => {
     logger.warn(`Failed to generate SSR entry module: ${err?.message || err}`);
   });
 
+  // Minimal SSR parity fix: copy compiled loader files (*.load.js) from mirrored UI output
+  // into the SSR components directory so Forge can resolve loaders adjacent to SSR modules.
+  await copySsrLoaders(context, {
+    uiOutDir: config.layout.uiOutDir,
+    relativeComponentDir,
+    ssrComponentsDir
+  }).catch((err) => {
+    logger.warn(`Failed to copy SSR loaders: ${err?.message || err}`);
+  });
+
+  // Also copy UI support modules used by loaders via relative paths (e.g., '../../utils').
+  // This ensures SSR loader imports like '../../utils/api.js' resolve under SSR base.
+  const uiUtilsDir = path.join(config.layout.uiOutDir, 'utils');
+  const ssrUtilsDir = path.join(config.layout.ssrOutDir, 'utils');
+  if (await pathExists(uiUtilsDir)) {
+    try {
+      await fs.mkdir(path.dirname(ssrUtilsDir), { recursive: true });
+      await fs.cp(uiUtilsDir, ssrUtilsDir, { recursive: true, force: true });
+    } catch (e) {
+      logger.warn(`Failed to copy SSR utils directory: ${e?.message || e}`);
+    }
+  }
+
   return {
     manifestPath,
     manifest
@@ -132,10 +165,10 @@ async function buildForgeRecursiveRenderer(context) {
   }
 }
 
-async function writeSsrEntryModule(context, componentList = []) {
+async function writeSsrEntryModule(context, componentList = [], targetDir = null) {
   const { config } = context;
-  const uiOutDir = config.layout.uiOutDir;
-  const entryPath = path.join(uiOutDir, 'entry-ssr.js');
+  const outputDir = targetDir || config.layout.uiOutDir;
+  const entryPath = path.join(outputDir, 'entry-ssr.js');
 
   const uniqueComponents = Array.from(
     new Set(
@@ -151,7 +184,7 @@ async function writeSsrEntryModule(context, componentList = []) {
 
   for (const component of uniqueComponents) {
     const jsPathRelative = toPosix(component.replace(/\.svelte$/, '.js'));
-    const absoluteJsPath = path.join(uiOutDir, jsPathRelative);
+    const absoluteJsPath = path.join(outputDir, jsPathRelative);
     try {
       await fs.access(absoluteJsPath);
     } catch {
@@ -184,6 +217,81 @@ function toPosix(value) {
   return value.split(path.sep).join('/');
 }
 
+async function copySsrLoaders(context, { uiOutDir, relativeComponentDir, ssrComponentsDir }) {
+  const { requireFromRoot } = context;
+  if (!uiOutDir || !ssrComponentsDir) return;
+
+  const sourceRoot = relativeComponentDir
+    ? path.join(uiOutDir, relativeComponentDir)
+    : uiOutDir;
+
+  let glob;
+  try {
+    const globModule = requireFromRoot('glob');
+    glob = typeof globModule === 'function' ? globModule : globModule.glob.bind(globModule);
+  } catch {
+    glob = null;
+  }
+
+  // If glob is unavailable, do a shallow fallback copy of known locations
+  if (!glob) {
+    await copyLoaderTree(sourceRoot, ssrComponentsDir);
+    return;
+  }
+
+  const patterns = [
+    '**/*.load.js'
+  ];
+
+  for (const pattern of patterns) {
+    // eslint-disable-next-line no-await-in-loop
+    const matches = await glob(pattern, {
+      cwd: sourceRoot,
+      absolute: false,
+      nodir: true,
+      dot: true
+    });
+    for (const rel of matches) {
+      const from = path.join(sourceRoot, rel);
+      const to = path.join(ssrComponentsDir, rel);
+      // eslint-disable-next-line no-await-in-loop
+      await fs.mkdir(path.dirname(to), { recursive: true });
+      // eslint-disable-next-line no-await-in-loop
+      await fs.copyFile(from, to).catch(() => {});
+    }
+  }
+}
+
+async function copyLoaderTree(source, destination) {
+  try {
+    const entries = await fs.readdir(source, { withFileTypes: true });
+    for (const entry of entries) {
+      const from = path.join(source, entry.name);
+      const to = path.join(destination, entry.name);
+      if (entry.isDirectory()) {
+        // eslint-disable-next-line no-await-in-loop
+        await copyLoaderTree(from, to);
+      } else if (entry.isFile() && /\.load\.js$/.test(entry.name)) {
+        // eslint-disable-next-line no-await-in-loop
+        await fs.mkdir(path.dirname(to), { recursive: true });
+        // eslint-disable-next-line no-await-in-loop
+        await fs.copyFile(from, to).catch(() => {});
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+async function pathExists(targetPath) {
+  try {
+    await fs.access(targetPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function loadSveltePluginModule(context, searchRoots = []) {
   const attempted = new Set();
   for (const root of searchRoots.filter(Boolean)) {
@@ -243,6 +351,15 @@ function buildSsrManifest(config, discovery) {
 }
 
 function componentToSsrPath(componentPath, config) {
+  if (config.verbose) {
+    console.log('[ssr] componentToSsrPath called:', {
+      componentPath,
+      'config.ui': config.ui,
+      'config.ui.rootDir': config.ui?.rootDir,
+      'config.rootDir': config.rootDir
+    });
+  }
+
   const relative = componentPath.startsWith('.')
     ? path.normalize(componentPath)
     : componentPath;

package/src/build/ui-common.js

@@ -62,9 +62,15 @@ export async function createUiBuildConfig(context, options) {
   if (entryResolved) inputSet.add(entryResolved);
 
   for (const relative of componentRelatives) {
-    const absolute = path.resolve(config.ui.rootDir, relative);
+    const absFromUi = config.ui.rootDir ? path.resolve(config.ui.rootDir, relative) : null;
+    const absFromComp = config.client?.componentDir_abs ? path.resolve(config.client.componentDir_abs, relative) : null;
+    let absolute = absFromUi;
     // eslint-disable-next-line no-await-in-loop
-    if (await fileExists(absolute)) {
+    if (absFromComp && await fileExists(absFromComp)) {
+      absolute = absFromComp;
+    }
+    // eslint-disable-next-line no-await-in-loop
+    if (absolute && await fileExists(absolute)) {
       presentComponents.push(relative);
       inputSet.add(absolute);
     } else {
@@ -83,6 +89,11 @@ export async function createUiBuildConfig(context, options) {
     configFile,
     mode: config.mode,
     root: config.ui.rootDir,
+    // Use precalculated base path from bootstrap config
+    // Bootstrap determines this based on project structure
+    // SSR: undefined (Node doesn't need base path)
+    // Client: configured public base for assets (e.g., '/assets' or '/frontend')
+    base: ssr ? undefined : (config.client?.component_base_path || '/assets'),
     plugins: [
       clientExcludePlugin(config.ui.clientExclude, { projectRoot: config.rootDir })
     ],
@@ -166,6 +177,12 @@ function createEntryFileNames(context, entryResolved) {
       if (!relToUi.startsWith('..')) {
         return toOutputPath(relToUi);
       }
+      if (config.client?.componentDir_abs) {
+        const relToComp = path.relative(config.client.componentDir_abs, facade);
+        if (!relToComp.startsWith('..')) {
+          return toOutputPath(relToComp);
+        }
+      }
       const relToRoot = path.relative(config.rootDir, facade);
       if (!relToRoot.startsWith('..')) {
         return toOutputPath(relToRoot);

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/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);

package/test/asset-mounting.test.js

@@ -0,0 +1,211 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import path from 'node:path';
+
+/**
+ * TEST: Express Asset Mounting
+ *
+ * Validates that client.js correctly mounts assets based on bootstrap config.
+ * This test ensures:
+ * 1. We use assets_build_dir from bootstrap (not reconstruct paths)
+ * 2. Fallback mount is set up correctly
+ * 3. Express receives the correct directory paths
+ */
+
+/**
+ * Mock the assets() function from client.js
+ * This simulates what Forge's assets() helper does
+ */
+function mockExpressAssets(mountConfig) {
+  // Returns what Express would mount
+  const mounts = [];
+
+  for (const [route, dirs] of Object.entries(mountConfig)) {
+    if (Array.isArray(dirs)) {
+      dirs.forEach(dir => mounts.push({ route, dir }));
+    } else {
+      mounts.push({ route, dir: dirs });
+    }
+  }
+
+  return mounts;
+}
+
+/**
+ * Mock client.js asset mounting logic
+ */
+function calculateAssetMounts(bootstrapConfig, mode) {
+  const mountConfig = mode === 'production' && bootstrapConfig.component_suffix
+    ? {
+        '/assets': [path.join('.app/assets', bootstrapConfig.component_suffix)]
+      }
+    : {};
+
+  return mockExpressAssets(mountConfig);
+}
+
+/**
+ * BETTER: Use assets_build_dir directly from bootstrap
+ */
+function calculateAssetMountsBetter(bootstrapConfig, mode) {
+  const mountConfig = mode === 'production' && bootstrapConfig.assets_build_dir !== '.app/assets'
+    ? {
+        '/assets': [bootstrapConfig.assets_build_dir]
+      }
+    : {};
+
+  return mockExpressAssets(mountConfig);
+}
+
+/**
+ * Dual-mount strategy used by the runtime: mount at '/' and '/assets'
+ */
+function calculateAssetMountsDual(bootstrapConfig, mode) {
+  if (mode !== 'production') return [];
+  const dir = bootstrapConfig.assets_build_dir || '.app/assets';
+  const mountConfig = {
+    '/': [dir],
+    '/assets': [dir]
+  };
+  return mockExpressAssets(mountConfig);
+}
+
+test('markdown_view: Express mounts fallback for nested components', () => {
+  const bootstrap = {
+    component_dir_ssr: '.app/ssr/components',
+    component_dir_client: '/assets/components',
+    component_base_path: '/assets',
+    assets_build_dir: '.app/assets/components',
+    component_suffix: 'components'
+  };
+
+  const mounts = calculateAssetMounts(bootstrap, 'production');
+
+  console.log('Express mounts:', mounts);
+
+  // Should mount fallback
+  assert.strictEqual(mounts.length, 1, 'Should have 1 fallback mount');
+  assert.strictEqual(mounts[0].route, '/assets');
+  assert.strictEqual(mounts[0].dir, '.app/assets/components');
+
+  console.log('✅ Express will serve .app/assets/components at /assets');
+  console.log('   Browser request: /assets/layout/root.js');
+  console.log('   Express serves from: .app/assets/components/layout/root.js');
+});
+
+test('liftlog: No fallback mount needed (components at root)', () => {
+  const bootstrap = {
+    component_dir_ssr: '.app/ssr',
+    component_dir_client: '/assets',
+    component_base_path: '/assets',
+    assets_build_dir: '.app/assets',
+    component_suffix: null
+  };
+
+  const mounts = calculateAssetMounts(bootstrap, 'production');
+
+  console.log('Express mounts:', mounts);
+
+  // No fallback needed since components at root
+  assert.strictEqual(mounts.length, 0, 'Should have no fallback mount');
+
+  console.log('✅ No fallback needed - components at asset root');
+  console.log('   Forge default mount handles everything');
+});
+
+test('Better approach: Use assets_build_dir directly', () => {
+  const bootstrap = {
+    component_dir_ssr: '.app/ssr/components',
+    component_dir_client: '/assets/components',
+    component_base_path: '/assets',
+    assets_build_dir: '.app/assets/components',
+    component_suffix: 'components'
+  };
+
+  const mounts = calculateAssetMountsBetter(bootstrap, 'production');
+
+  console.log('Better Express mounts:', mounts);
+
+  assert.strictEqual(mounts.length, 1);
+  assert.strictEqual(mounts[0].dir, '.app/assets/components',
+    'Should use assets_build_dir directly, not reconstruct from component_suffix');
+
+  console.log('✅ Using assets_build_dir avoids path reconstruction');
+});
+
+test('Dual mount: serve assets at root and /assets', () => {
+  const bootstrap = {
+    assets_build_dir: '.app/assets/components'
+  };
+
+  const mounts = calculateAssetMountsDual(bootstrap, 'production');
+
+  // Expect two mounts
+  assert.strictEqual(mounts.length, 2);
+  const routes = mounts.map(m => m.route).sort();
+  assert.deepStrictEqual(routes, ['/', '/assets']);
+  mounts.forEach(m => assert.strictEqual(m.dir, '.app/assets/components'));
+
+  console.log('✅ Dual mount configured: "/" and "/assets" -> .app/assets/components');
+});
+
+test('Development mode: No fallback mounts', () => {
+  const bootstrap = {
+    component_dir_ssr: '.app/ssr/components',
+    component_dir_client: '.app/ssr/components',
+    component_base_path: '/assets',
+    assets_build_dir: '.app/assets/components',
+    component_suffix: 'components'
+  };
+
+  const mounts = calculateAssetMounts(bootstrap, 'development');
+
+  console.log('Dev mode mounts:', mounts);
+
+  assert.strictEqual(mounts.length, 0, 'Dev mode: no fallback mounts needed');
+
+  console.log('✅ Dev mode uses Vite dev server - no static mounts');
+});
+
+test('Verify client.js uses correct path construction', () => {
+  const bootstrap = {
+    component_suffix: 'components',
+    assets_build_dir: '.app/assets/components'
+  };
+
+  // Current approach (reconstructs path)
+  const currentPath = path.join('.app/assets', bootstrap.component_suffix);
+
+  // Better approach (uses precalculated)
+  const betterPath = bootstrap.assets_build_dir;
+
+  console.log('Current approach:', currentPath);
+  console.log('Better approach:', betterPath);
+
+  // They should produce same result
+  assert.strictEqual(currentPath, betterPath,
+    'Both approaches should produce same path');
+
+  console.log('✅ Current implementation is correct (but could use assets_build_dir directly)');
+  console.log('   Recommendation: Change client.js to use config.client.assets_build_dir');
+});
+
+test('Edge case: Deeply nested components', () => {
+  const bootstrap = {
+    component_suffix: 'components/shared',
+    assets_build_dir: '.app/assets/components/shared'
+  };
+
+  const currentPath = path.join('.app/assets', bootstrap.component_suffix);
+  const betterPath = bootstrap.assets_build_dir;
+
+  assert.strictEqual(currentPath, betterPath);
+
+  const mounts = [{
+    route: '/assets',
+    dir: betterPath
+  }];
+
+  console.log('Deeply nested mount:', mounts[0]);
+  console.log('✅ Works correctly for nested paths too');
+});