@noego/app 0.0.7 → 0.0.10

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');
+});

package/test/config-pipeline.test.js

@@ -0,0 +1,353 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import path from 'node:path';
+import { calculateComponentPaths } from '../src/build/bootstrap.js';
+
+/**
+ * COMPREHENSIVE PIPELINE TEST: Config → Bootstrap → Runtime
+ *
+ * This test validates the ENTIRE path calculation pipeline:
+ * 1. Config loading calculates base paths
+ * 2. Bootstrap generates no_ego.js with ALL necessary paths
+ * 3. Runtime code (client.js) uses these paths WITHOUT recalculation
+ *
+ * Key Requirements:
+ * - ALL paths must be RELATIVE (for Docker/deployment portability)
+ * - Calculate ONCE in bootstrap, use everywhere
+ * - No mode checks in runtime code
+ *
+ * IMPORTANT: This test uses the REAL calculateComponentPaths() function
+ * from bootstrap.js to ensure we're testing actual production code.
+ */
+
+/**
+ * Mock runtime usage - this is what client.js SHOULD do
+ */
+function runtimeGetComponentDir(bootstrapConfig, mode) {
+  // Runtime should NEVER check mode - just use precalculated value
+  return bootstrapConfig.component_dir_client;
+}
+
+/**
+ * Validate all paths are relative (no absolute filesystem paths)
+ */
+function assertAllPathsRelative(config, projectName) {
+  const paths = [
+    config.component_dir_ssr,
+    config.component_dir_client,
+    config.assets_build_dir
+  ];
+
+  paths.forEach(p => {
+    if (!p) return;
+
+    // Check it's not an absolute filesystem path
+    assert.ok(
+      !path.isAbsolute(p) || p.startsWith('/'),
+      `${projectName}: Path ${p} should be relative or HTTP absolute (starting with /), not filesystem absolute`
+    );
+
+    // Check it doesn't contain system-specific paths
+    assert.ok(
+      !p.includes('/Users/') && !p.includes('/home/') && !p.includes('C:\\'),
+      `${projectName}: Path ${p} contains absolute filesystem path - not portable for Docker`
+    );
+  });
+}
+
+/**
+ * Test 1: markdown_view (nested componentDir)
+ *
+ * Real failure we saw:
+ * - Browser requested: /chunks/props-B_GERzIc.js (404)
+ * - Should request: /assets/chunks/props-B_GERzIc.js
+ *
+ * Root cause:
+ * - component_dir was set to ".app/ssr/components" for browser
+ * - Forge client didn't detect "assets" in path
+ * - Used wrong import base
+ */
+test('markdown_view: nested componentDir with proper client/SSR separation', () => {
+  const projectConfig = {
+    mode: 'production',
+    rootDir: '/project/markdown_view',
+    client: {
+      main_abs: '/project/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/project/markdown_view/frontend/components'
+    }
+  };
+
+  const bootstrap = calculateComponentPaths(projectConfig);
+
+  console.log('markdown_view bootstrap config:', bootstrap);
+
+  // Bootstrap should calculate BOTH paths
+  assert.strictEqual(bootstrap.component_dir_ssr, '.app/ssr/components',
+    'SSR should load from .app/ssr/components');
+  assert.strictEqual(bootstrap.component_dir_client, '/assets/components',
+    'Browser should load from /assets/components');
+  assert.strictEqual(bootstrap.component_base_path, '/assets',
+    'Vite base should be /assets');
+  assert.strictEqual(bootstrap.assets_build_dir, '.app/assets/components',
+    'Assets should build to .app/assets/components');
+  assert.strictEqual(bootstrap.component_suffix, 'components',
+    'Suffix should be "components" for fallback mount');
+
+  // Validate all paths are relative
+  assertAllPathsRelative(bootstrap, 'markdown_view');
+
+  // Runtime should use precalculated client path (NO mode check)
+  const runtimePath = runtimeGetComponentDir(bootstrap, 'production');
+  assert.strictEqual(runtimePath, '/assets/components',
+    'Runtime should use precalculated client path');
+
+  // Verify Forge client will detect "assets" in path
+  assert.ok(runtimePath.indexOf('assets') !== -1,
+    'Client path MUST contain "assets" for Forge to use compiled imports');
+});
+
+/**
+ * Test 2: liftlog/noblelaw (no explicit componentDir)
+ *
+ * These projects don't specify componentDir in config.
+ * Components are at UI root (same dir as main file).
+ */
+test('liftlog/noblelaw: no explicit componentDir (components at UI root)', () => {
+  const projectConfig = {
+    mode: 'production',
+    rootDir: '/project/liftlog',
+    client: {
+      main_abs: '/project/liftlog/ui/main.ts',
+      componentDir_abs: null
+    }
+  };
+
+  const bootstrap = calculateComponentPaths(projectConfig);
+
+  console.log('liftlog bootstrap config:', bootstrap);
+
+  // No suffix since components at root
+  assert.strictEqual(bootstrap.component_dir_ssr, '.app/ssr');
+  assert.strictEqual(bootstrap.component_dir_client, '/assets');
+  assert.strictEqual(bootstrap.component_base_path, '/assets');
+  assert.strictEqual(bootstrap.assets_build_dir, '.app/assets');
+  assert.strictEqual(bootstrap.component_suffix, null);
+
+  assertAllPathsRelative(bootstrap, 'liftlog');
+
+  const runtimePath = runtimeGetComponentDir(bootstrap, 'production');
+  assert.strictEqual(runtimePath, '/assets');
+  assert.ok(runtimePath.indexOf('assets') !== -1);
+});
+
+/**
+ * Test 3: Development mode
+ *
+ * In dev mode:
+ * - Client should use SSR path (Vite dev server serves raw .svelte files)
+ * - No asset compilation
+ */
+test('development mode: client uses SSR path', () => {
+  const projectConfig = {
+    mode: 'development',
+    rootDir: '/project/markdown_view',
+    client: {
+      main_abs: '/project/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/project/markdown_view/frontend/components'
+    }
+  };
+
+  const bootstrap = calculateComponentPaths(projectConfig);
+
+  console.log('development bootstrap config:', bootstrap);
+
+  // In dev, client uses same path as SSR
+  assert.strictEqual(bootstrap.component_dir_ssr, '.app/ssr/components');
+  assert.strictEqual(bootstrap.component_dir_client, '.app/ssr/components',
+    'Dev mode: client should use SSR path');
+  assert.strictEqual(bootstrap.component_base_path, '/assets',
+    'Vite base is still /assets even in dev');
+
+  assertAllPathsRelative(bootstrap, 'dev-markdown_view');
+
+  const runtimePath = runtimeGetComponentDir(bootstrap, 'development');
+  assert.strictEqual(runtimePath, '.app/ssr/components',
+    'Dev runtime should use SSR path');
+});
+
+/**
+ * Test 4: Deeply nested componentDir
+ *
+ * Edge case: componentDir nested multiple levels deep
+ */
+test('deeply nested componentDir: preserves full path', () => {
+  const projectConfig = {
+    mode: 'production',
+    rootDir: '/project/test',
+    client: {
+      main_abs: '/project/test/src/ui/main.ts',
+      componentDir_abs: '/project/test/src/ui/components/shared'
+    }
+  };
+
+  const bootstrap = calculateComponentPaths(projectConfig);
+
+  console.log('nested bootstrap config:', bootstrap);
+
+  assert.strictEqual(bootstrap.component_dir_ssr, '.app/ssr/components/shared');
+  assert.strictEqual(bootstrap.component_dir_client, '/assets/components/shared');
+  assert.strictEqual(bootstrap.assets_build_dir, '.app/assets/components/shared');
+  assert.strictEqual(bootstrap.component_suffix, 'components/shared');
+
+  assertAllPathsRelative(bootstrap, 'nested-project');
+});
+
+/**
+ * Test 5: Path portability (Docker deployment)
+ *
+ * Simulates copying dist/ folder to different location.
+ * All paths must still work.
+ */
+test('portability: paths work when dist/ is moved', () => {
+  const projectConfig = {
+    mode: 'production',
+    rootDir: '/project/markdown_view',
+    client: {
+      main_abs: '/project/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/project/markdown_view/frontend/components'
+    }
+  };
+
+  const bootstrap = calculateComponentPaths(projectConfig);
+
+  // Simulate moving dist/ to Docker container at /app/dist
+  const originalLocation = '/project/markdown_view/dist';
+  const newLocation = '/app/dist';
+
+  // These paths should work at both locations (because they're relative)
+  const relativePaths = [
+    bootstrap.component_dir_ssr,
+    bootstrap.assets_build_dir
+  ];
+
+  relativePaths.forEach(p => {
+    if (!p) return;
+
+    // Path should work with both base directories
+    const path1 = path.join(originalLocation, p);
+    const path2 = path.join(newLocation, p);
+
+    // Both should resolve to the same relative structure
+    const rel1 = path.relative(originalLocation, path1);
+    const rel2 = path.relative(newLocation, path2);
+
+    assert.strictEqual(rel1, rel2,
+      `Path ${p} should maintain same structure when moved`);
+  });
+
+  console.log('✅ Paths are portable - can move dist/ folder');
+});
+
+/**
+ * Test 6: Runtime NEVER checks mode
+ *
+ * This validates that runtime code doesn't do mode-based logic.
+ * All decisions should be made in bootstrap.
+ */
+test('runtime code never checks mode', () => {
+  const prodConfig = {
+    mode: 'production',
+    rootDir: '/project/test',
+    client: {
+      main_abs: '/project/test/ui/main.ts',
+      componentDir_abs: '/project/test/ui/components'
+    }
+  };
+
+  const devConfig = { ...prodConfig, mode: 'development' };
+
+  const prodBootstrap = calculateComponentPaths(prodConfig);
+  const devBootstrap = calculateComponentPaths(devConfig);
+
+  // Runtime gets different precalculated values
+  const prodRuntime = runtimeGetComponentDir(prodBootstrap, 'production');
+  const devRuntime = runtimeGetComponentDir(devBootstrap, 'development');
+
+  // But runtime function doesn't care about mode - it just returns the value
+  // Verify this by passing WRONG mode to runtime
+  const prodRuntimeWrongMode = runtimeGetComponentDir(prodBootstrap, 'development');
+  const devRuntimeWrongMode = runtimeGetComponentDir(devBootstrap, 'production');
+
+  // Should get same result regardless of mode passed to runtime
+  assert.strictEqual(prodRuntime, prodRuntimeWrongMode,
+    'Runtime should not check mode - only use bootstrap value');
+  assert.strictEqual(devRuntime, devRuntimeWrongMode,
+    'Runtime should not check mode - only use bootstrap value');
+
+  console.log('✅ Runtime never checks mode');
+});
+
+/**
+ * Test 7: Integration - Full pipeline
+ *
+ * This tests the complete flow:
+ * Config → Bootstrap → no_ego.js → Runtime → Forge
+ */
+test('full pipeline: config → bootstrap → runtime → forge', () => {
+  // Step 1: Project config (from hammer.config.yml)
+  const projectConfig = {
+    mode: 'production',
+    rootDir: '/project/markdown_view',
+    client: {
+      main_abs: '/project/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/project/markdown_view/frontend/components'
+    }
+  };
+
+  // Step 2: Bootstrap calculates all paths
+  const bootstrapConfig = calculateComponentPaths(projectConfig);
+
+  // Step 3: no_ego.js would contain these values
+  const noEgoJs = {
+    mode: projectConfig.mode,
+    client: {
+      component_dir_ssr: bootstrapConfig.component_dir_ssr,
+      component_dir_client: bootstrapConfig.component_dir_client,
+      component_base_path: bootstrapConfig.component_base_path,
+      assets_build_dir: bootstrapConfig.assets_build_dir,
+      component_suffix: bootstrapConfig.component_suffix
+    }
+  };
+
+  console.log('Generated no_ego.js:', JSON.stringify(noEgoJs, null, 2));
+
+  // Step 4: Runtime (client.js) reads from no_ego.js
+  const runtimeComponentDir = noEgoJs.client.component_dir_client;
+
+  // Step 5: Forge receives this value
+  const forgeOptions = {
+    component_dir: runtimeComponentDir,
+    development: projectConfig.mode !== 'production'
+  };
+
+  console.log('Forge receives:', forgeOptions);
+
+  // Validate the pipeline
+  assert.strictEqual(forgeOptions.component_dir, '/assets/components',
+    'Forge should receive /assets/components for client imports');
+
+  // Verify Forge will use compiled imports
+  const forgeWillUseCompiledImports = forgeOptions.component_dir.indexOf('assets') !== -1;
+  assert.ok(forgeWillUseCompiledImports,
+    'Forge MUST detect "assets" in path to use compiled .js imports');
+
+  // Verify browser will request correct paths
+  const browserImportPath = `${forgeOptions.component_dir}/layout/root.js`;
+  assert.strictEqual(browserImportPath, '/assets/components/layout/root.js',
+    'Browser should import from /assets/components/layout/root.js');
+
+  console.log('✅ Full pipeline working correctly');
+  console.log(`   Browser will import: ${browserImportPath}`);
+  console.log(`   File exists at: .app/assets/components/layout/root.js`);
+  console.log(`   Express serves: .app/assets/components at /assets (with fallback)`);
+});