@noego/app 0.0.9 → 0.0.10

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

package/test/path-resolution.test.js

@@ -0,0 +1,164 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import path from 'node:path';
+
+/**
+ * These are the SAME functions used in bootstrap.js
+ * We're testing them in isolation with real project data
+ */
+function calculateComponentPaths(config) {
+  if (!config.client?.componentDir_abs) {
+    return {
+      component_dir: '.app/ssr',
+      componentDir_abs: '.app/ssr',
+      component_suffix: null
+    };
+  }
+
+  const uiRootAbs = config.client.main_abs ? path.dirname(config.client.main_abs) : config.root;
+  const relativeFromUiRoot = path.relative(uiRootAbs, config.client.componentDir_abs);
+
+  return {
+    component_dir: path.join('.app/ssr', relativeFromUiRoot),
+    componentDir_abs: path.join('.app/ssr', relativeFromUiRoot),
+    component_suffix: relativeFromUiRoot || null
+  };
+}
+
+function calculateAssetFallback(componentSuffix) {
+  if (!componentSuffix) {
+    return null;
+  }
+  return path.join('.app/assets', componentSuffix);
+}
+
+/**
+ * Test with REAL project configurations
+ */
+test('markdown_view: componentDir in subfolder', () => {
+  // Actual values from markdown_view/hammer.config.yml
+  const config = {
+    root: '/Users/shavauhngabay/dev/markdown_view',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/components'
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('markdown_view result:', result);
+  console.log('markdown_view asset fallback:', assetFallback);
+
+  // Expected: components are nested in 'components' subfolder
+  assert.strictEqual(result.component_dir, '.app/ssr/components', 'component_dir should be .app/ssr/components');
+  assert.strictEqual(result.component_suffix, 'components', 'component_suffix should be components');
+  assert.strictEqual(assetFallback, '.app/assets/components', 'asset fallback should be .app/assets/components');
+});
+
+test('noblelaw/liftlog: no explicit componentDir', () => {
+  // When componentDir is not explicitly set, it defaults to UI root
+  const config = {
+    root: '/Users/shavauhngabay/dev/noblelaw',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/noblelaw/ui/main.ts',
+      componentDir_abs: null
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('noblelaw result:', result);
+  console.log('noblelaw asset fallback:', assetFallback);
+
+  // Expected: no suffix, components at root
+  assert.strictEqual(result.component_dir, '.app/ssr', 'component_dir should be .app/ssr');
+  assert.strictEqual(result.component_suffix, null, 'component_suffix should be null');
+  assert.strictEqual(assetFallback, null, 'asset fallback should be null');
+});
+
+test('deeply nested componentDir', () => {
+  // Edge case: deeply nested component directory
+  const config = {
+    root: '/Users/test/project',
+    client: {
+      main_abs: '/Users/test/project/src/ui/main.ts',
+      componentDir_abs: '/Users/test/project/src/ui/components/shared'
+    }
+  };
+
+  const result = calculateComponentPaths(config);
+  const assetFallback = calculateAssetFallback(result.component_suffix);
+
+  console.log('nested result:', result);
+  console.log('nested asset fallback:', assetFallback);
+
+  // Expected: preserves nested structure
+  assert.strictEqual(result.component_dir, '.app/ssr/components/shared', 'component_dir should preserve nested path');
+  assert.strictEqual(result.component_suffix, 'components/shared', 'component_suffix should be components/shared');
+  assert.strictEqual(assetFallback, '.app/assets/components/shared', 'asset fallback should match nested structure');
+});
+
+/**
+ * Test the ACTUAL bug: verify that when we pass component_dir to client.js,
+ * we can extract the suffix without complex string manipulation
+ */
+test('verify simple suffix extraction', () => {
+  const testCases = [
+    { component_dir: '.app/ssr/components', expected: 'components' },
+    { component_dir: '.app/ssr', expected: null },
+    { component_dir: '.app/ssr/components/shared', expected: 'components/shared' }
+  ];
+
+  testCases.forEach(({ component_dir, expected }) => {
+    // This is what we should store in the config
+    const suffix = component_dir.replace('.app/ssr', '').replace(/^\//, '') || null;
+
+    console.log(`component_dir: ${component_dir} → suffix: ${suffix}`);
+
+    assert.strictEqual(
+      suffix,
+      expected,
+      `component_dir ${component_dir} should extract suffix ${expected}`
+    );
+  });
+});
+
+/**
+ * Integration test: Full pipeline from config → bootstrap → runtime
+ */
+test('full pipeline: markdown_view', () => {
+  // Step 1: Config input
+  const configInput = {
+    root: '/Users/shavauhngabay/dev/markdown_view',
+    client: {
+      main_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/frontend.ts',
+      componentDir_abs: '/Users/shavauhngabay/dev/markdown_view/frontend/components'
+    }
+  };
+
+  // Step 2: Bootstrap calculation
+  const bootstrapResult = calculateComponentPaths(configInput);
+
+  // Step 3: Runtime usage (what client.js needs)
+  const runtimeAssetFallback = calculateAssetFallback(bootstrapResult.component_suffix);
+
+  console.log('=== Full Pipeline Test ===');
+  console.log('Config input:', configInput.client);
+  console.log('Bootstrap result:', bootstrapResult);
+  console.log('Runtime asset fallback:', runtimeAssetFallback);
+
+  // Verify the entire flow
+  assert.strictEqual(bootstrapResult.component_dir, '.app/ssr/components');
+  assert.strictEqual(bootstrapResult.component_suffix, 'components');
+  assert.strictEqual(runtimeAssetFallback, '.app/assets/components');
+
+  // This is what we need to mount in Express
+  console.log('\n✅ Express should mount:');
+  console.log('  Primary: .app/assets at /assets');
+  console.log(`  Fallback: ${runtimeAssetFallback} at /assets`);
+  console.log('\n✅ This allows browser to request: /assets/layout/root.js');
+  console.log(`   And Express finds it at: ${runtimeAssetFallback}/layout/root.js`);
+});