@noego/wood 0.4.5 → 0.4.7

package/src/components/NavigationShell.browser.test.ts

@@ -0,0 +1,236 @@
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, test } from 'vitest';
+import { browser } from '../testing/browser';
+
+type ReproSnapshot = {
+  pageCreateCount: number;
+  layoutCreateCount: number;
+  disposeCounts: Record<string, number>;
+  rendered: string;
+  pageErrors: string[];
+};
+
+describe('NavigationShell failed transition recovery', () => {
+  const harnesses: Array<{ destroy(): Promise<void> }> = [];
+  const tempRoots: string[] = [];
+
+  afterEach(async () => {
+    while (harnesses.length > 0) {
+      await harnesses.pop()?.destroy();
+    }
+    while (tempRoots.length > 0) {
+      rmSync(tempRoots.pop()!, { recursive: true, force: true });
+    }
+  });
+
+  test('does not orphan a controller when a sibling layout creation rejects', async () => {
+    const woodRoot = path.resolve(__dirname, '../..');
+    const rootDir = mkdtempSync(path.join(os.tmpdir(), 'wood-navigation-shell-repro-'));
+    tempRoots.push(rootDir);
+    mkdirSync(path.join(rootDir, 'ui'), { recursive: true });
+
+    writeFileSync(
+      path.join(rootDir, 'ui', 'ReproView.svelte'),
+      `<script lang="ts">
+        let { data = {}, page = {} } = $props<{
+          data?: { id?: string };
+          page?: { params?: { threadId?: string } };
+        }>();
+      </script>
+
+      <main data-repro-view>
+        thread={page.params?.threadId ?? 'missing'};controller={data.id ?? 'missing'}
+      </main>`,
+    );
+
+    writeFileSync(
+      path.join(rootDir, 'ui', 'ReproLayout.svelte'),
+      `<script lang="ts">
+        import type { Snippet } from 'svelte';
+        let { children }: { children: Snippet } = $props();
+      </script>
+
+      <section data-repro-layout>{@render children()}</section>`,
+    );
+
+    writeFileSync(
+      path.join(rootDir, 'ui', 'NavigationShellRepro.svelte'),
+      `<script lang="ts">
+        import '/@fs/${woodRoot}/src/client/global_polyfill.ts';
+        import NavigationShell from '/@fs/${woodRoot}/src/components/NavigationShell.svelte';
+        import { getNavigation } from '/@fs/${woodRoot}/src/navigation/index.ts';
+        import ReproLayout from './ReproLayout.svelte';
+        import ReproView from './ReproView.svelte';
+
+        type ReproState = {
+          pageCreateCount: number;
+          layoutCreateCount: number;
+          disposeCounts: Record<string, number>;
+        };
+
+        const state: ReproState = {
+          pageCreateCount: 0,
+          layoutCreateCount: 0,
+          disposeCounts: {},
+        };
+        (window as unknown as { __WOOD_NAVIGATION_REPRO__: ReproState })
+          .__WOOD_NAVIGATION_REPRO__ = state;
+
+        function createController(id: string) {
+          state.disposeCounts[id] = 0;
+          return {
+            data: { id },
+            dispose() {
+              state.disposeCounts[id] += 1;
+            },
+          };
+        }
+
+        const entry = {
+          key: 'main.chat_dom',
+          windowName: 'main',
+          pageName: 'chat_dom',
+          layoutPaths: ['ui/ReproLayout.svelte'],
+          layoutControllers: ['repro-layout-controller'],
+          layoutPreserve: [false],
+          view: ReproView,
+          layouts: [ReproLayout],
+        };
+        const manifest = { [entry.key]: entry };
+        const initialController = createController('initial-page');
+        const initialLayoutControllers = [createController('initial-layout')];
+
+        async function createViewControllerFn() {
+          state.pageCreateCount += 1;
+          return createController(\`page-\${state.pageCreateCount}\`);
+        }
+
+        async function createLayoutControllersFn() {
+          state.layoutCreateCount += 1;
+          if (state.layoutCreateCount === 1) {
+            await Promise.resolve();
+            throw new Error('controlled layout creation failure');
+          }
+          return [createController(\`layout-\${state.layoutCreateCount}\`)];
+        }
+
+        function getViewManifestEntryFn(viewKey: string) {
+          return manifest[viewKey as keyof typeof manifest] ?? null;
+        }
+
+        const navigation = getNavigation();
+        navigation.replace(entry.key, { threadId: '1' }, {});
+        (window as unknown as {
+          __WOOD_NAVIGATION_REPRO_GO__: (threadId: string) => void;
+        }).__WOOD_NAVIGATION_REPRO_GO__ = (threadId: string) => {
+          navigation.go(entry.key, { threadId }, {});
+        };
+      </script>
+
+      <NavigationShell
+        {manifest}
+        initialEntry={entry}
+        {initialController}
+        {initialLayoutControllers}
+        {createViewControllerFn}
+        {createLayoutControllersFn}
+        {getViewManifestEntryFn}
+      />`,
+    );
+
+    const pageErrors: string[] = [];
+    const consoleErrors: string[] = [];
+    const harness = await browser.createHarness({
+      rootDir: woodRoot,
+      browser: { headless: true },
+      page: {
+        beforeMount({ page }) {
+          page.on('pageerror', (error: Error) => pageErrors.push(error.message));
+          page.on('console', (message: { type(): string; text(): string }) => {
+            if (message.type() === 'error') consoleErrors.push(message.text());
+          });
+        },
+      },
+    });
+    harnesses.push(harness);
+    const mounted = await harness.mountComponent(
+      path.join(rootDir, 'ui', 'NavigationShellRepro.svelte'),
+    );
+    await mounted.locator('[data-repro-view]').waitFor({ state: 'visible', timeout: 5_000 }).catch(
+      async (error: unknown) => {
+        throw new Error(
+          `${error instanceof Error ? error.message : String(error)}\n` +
+          `Page errors: ${pageErrors.join(' | ')}\n` +
+          `Console errors: ${consoleErrors.join(' | ')}\n` +
+          `HTML: ${await mounted.page.content()}`,
+        );
+      },
+    );
+
+    await expect.poll(async () => {
+      return (await mounted.locator('[data-repro-view]').textContent())?.replace(/\s+/g, ' ').trim();
+    }).toBe('thread=1;controller=initial-page');
+
+    await mounted.evaluate(() => {
+      (window as unknown as {
+        __WOOD_NAVIGATION_REPRO_GO__: (threadId: string) => void;
+      }).__WOOD_NAVIGATION_REPRO_GO__('2');
+    });
+    await expect.poll(async () => {
+      return await mounted.evaluate(() => {
+        return (window as unknown as {
+          __WOOD_NAVIGATION_REPRO__: { layoutCreateCount: number };
+        }).__WOOD_NAVIGATION_REPRO__.layoutCreateCount;
+      });
+    }).toBe(1);
+    await expect.poll(() => pageErrors.length + consoleErrors.length).toBeGreaterThan(0);
+
+    await mounted.evaluate(() => {
+      (window as unknown as {
+        __WOOD_NAVIGATION_REPRO_GO__: (threadId: string) => void;
+      }).__WOOD_NAVIGATION_REPRO_GO__('2');
+    });
+    await expect.poll(async () => {
+      return await mounted.evaluate(() => {
+        return (window as unknown as {
+          __WOOD_NAVIGATION_REPRO__: { pageCreateCount: number };
+        }).__WOOD_NAVIGATION_REPRO__.pageCreateCount;
+      });
+    }).toBe(2);
+    await expect.poll(async () => {
+      return (await mounted.locator('[data-repro-view]').textContent())?.replace(/\s+/g, ' ').trim();
+    }).toBe('thread=2;controller=page-2');
+
+    const snapshot = await mounted.evaluate<ReproSnapshot>(() => {
+      const state = (window as unknown as {
+        __WOOD_NAVIGATION_REPRO__: Omit<ReproSnapshot, 'rendered' | 'pageErrors'>;
+      }).__WOOD_NAVIGATION_REPRO__;
+      return {
+        ...state,
+        disposeCounts: { ...state.disposeCounts },
+        rendered: document.querySelector('[data-repro-view]')?.textContent?.replace(/\s+/g, ' ').trim() ?? '',
+        pageErrors: [],
+      };
+    });
+    snapshot.pageErrors = [...pageErrors];
+
+    expect(
+      snapshot,
+      'A failed transition must preserve committed controllers and dispose any staged controller before a retry.',
+    ).toEqual({
+      pageCreateCount: 2,
+      layoutCreateCount: 2,
+      disposeCounts: {
+        'initial-page': 1,
+        'initial-layout': 1,
+        'page-1': 1,
+        'page-2': 0,
+        'layout-2': 0,
+      },
+      rendered: 'thread=2;controller=page-2',
+      pageErrors: [],
+    });
+  }, 30_000);
+});

package/src/components/NavigationShell.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { setContext, onDestroy } from 'svelte';
-  import { getNavigation } from '@noego/wood/navigation';
+  import { getNavigation, type NavigationEntry } from '@noego/wood/navigation';
   import { disposeControllerLifecycle } from '../controller/controller_lifecycle';
   import { createNavigationMountKey } from '../navigation/navigation_identity';
   import WoodRecursiveRender from './WoodRecursiveRender.svelte';
+  import { getWoodAppEnv } from '../client/app_env';
 
   type ViewManifestEntry = {
     key: string;
@@ -74,6 +75,8 @@
       createLayoutMountKey(getInitialEntry(), index, activePageKey),
     ),
   );
+  let navigationTransitionQueue: Promise<void> = Promise.resolve();
+  let destroyed = false;
 
   let activePage = $derived({
     key: activeEntry.key,
@@ -84,6 +87,7 @@
   });
 
   const navigation = getNavigation();
+  const appEnv = getWoodAppEnv();
 
   function getWoodBridge(): WoodBridgeLike | null {
     if (typeof window === 'undefined') {
@@ -202,20 +206,74 @@
     return depth;
   }
 
+  async function disposeControllerSet(
+    controller: unknown,
+    layoutControllers: Array<unknown>,
+    fromLayoutIndex = 0,
+  ): Promise<void> {
+    await disposeControllerLifecycle(controller);
+    for (let index = fromLayoutIndex; index < layoutControllers.length; index += 1) {
+      await disposeControllerLifecycle(layoutControllers[index]);
+    }
+  }
+
   async function disposeActiveControllers(): Promise<void> {
-    await disposeControllerLifecycle(activeController);
-    for (const layoutController of activeLayoutControllers) {
+    await disposeControllerSet(activeController, activeLayoutControllers);
+  }
+
+  async function disposeLayoutControllers(layoutControllers: Array<unknown>): Promise<void> {
+    for (const layoutController of layoutControllers) {
       await disposeControllerLifecycle(layoutController);
     }
   }
 
-  async function disposeChangedControllers(fromLayoutIndex: number): Promise<void> {
-    await disposeControllerLifecycle(activeController);
-    for (let index = fromLayoutIndex; index < activeLayoutControllers.length; index += 1) {
-      await disposeControllerLifecycle(activeLayoutControllers[index]);
+  function reportNavigationError(context: string, error: unknown): void {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(`[wood] ${context}: ${message}`);
+  }
+
+  async function disposeStagedControllers(
+    controller: unknown,
+    layoutControllers: Array<unknown>,
+  ): Promise<void> {
+    const cleanupResults = await Promise.allSettled([
+      disposeControllerLifecycle(controller),
+      disposeLayoutControllers(layoutControllers),
+    ]);
+    for (const result of cleanupResults) {
+      if (result.status === 'rejected') {
+        reportNavigationError('navigation transition cleanup failed', result.reason);
+      }
     }
   }
 
+  async function createTransitionControllers(
+    entry: ViewManifestEntry,
+    preservedDepth: number,
+  ): Promise<{ controller: unknown; layoutControllers: Array<unknown> }> {
+    const [controllerResult, layoutControllersResult] = await Promise.allSettled([
+      createViewControllerFn(entry),
+      createLayoutControllersFn(entry, preservedDepth),
+    ]);
+
+    if (controllerResult.status === 'fulfilled' && layoutControllersResult.status === 'fulfilled') {
+      return {
+        controller: controllerResult.value,
+        layoutControllers: layoutControllersResult.value,
+      };
+    }
+
+    await disposeStagedControllers(
+      controllerResult.status === 'fulfilled' ? controllerResult.value : undefined,
+      layoutControllersResult.status === 'fulfilled' ? layoutControllersResult.value : [],
+    );
+
+    if (controllerResult.status === 'rejected') {
+      throw controllerResult.reason;
+    }
+    throw layoutControllersResult.reason;
+  }
+
   function mergeLayoutControllers(
     preservedDepth: number,
     createdControllers: Array<unknown>,
@@ -230,14 +288,69 @@
     return merged;
   }
 
+  async function applyNavigationEntry(navEntry: NavigationEntry | null): Promise<void> {
+    if (destroyed || !navEntry) return;
+
+    const newKey = navEntry.page;
+    const entry = getViewManifestEntryFn(newKey);
+    if (!entry) return;
+
+    const nextPageKey = createNavigationMountKey(newKey, navEntry.params);
+
+    if (nextPageKey === activePageKey) {
+      activeParams = { ...navEntry.params };
+      activeQuery = { ...navEntry.query };
+      return;
+    }
+
+    const preservedDepth = computePreservedLayoutDepth(
+      activeEntry,
+      entry,
+      navEntry.options ?? {},
+    );
+    const preservedLayoutKeys = activeLayoutKeys.slice(0, preservedDepth);
+    const previousController = activeController;
+    const previousLayoutControllers = [...activeLayoutControllers];
+    const { controller, layoutControllers } = await createTransitionControllers(entry, preservedDepth);
+
+    if (destroyed) {
+      await disposeStagedControllers(controller, layoutControllers);
+      return;
+    }
+
+    const nextLayoutControllers = mergeLayoutControllers(
+      preservedDepth,
+      layoutControllers,
+      entry.layoutPaths.length,
+    );
+    const nextLayoutKeys = createLayoutMountKeys(entry, nextPageKey, preservedLayoutKeys);
+
+    activeEntry = entry;
+    activeController = controller;
+    activeLayoutControllers = nextLayoutControllers;
+    activeParams = { ...navEntry.params };
+    activeQuery = { ...navEntry.query };
+    activePageKey = nextPageKey;
+    activeLayoutKeys = nextLayoutKeys;
+
+    await disposeControllerSet(previousController, previousLayoutControllers, preservedDepth);
+  }
+
+  function enqueueNavigationEntry(navEntry: NavigationEntry | null): void {
+    navigationTransitionQueue = navigationTransitionQueue
+      .then(() => applyNavigationEntry(navEntry))
+      .catch((error: unknown) => {
+        reportNavigationError('navigation transition failed', error);
+      });
+  }
+
   setContext('wood:navigate', (
     viewKey: string,
     params?: Record<string, unknown>,
     options?: { replace?: boolean; preserveLayouts?: boolean },
   ) => {
     void navigateWithinCurrentWindow(viewKey, params, options).catch((error) => {
-      const message = error instanceof Error ? error.message : String(error);
-      console.error(`[wood] navigation failed: ${message}`);
+      reportNavigationError('navigation failed', error);
     });
   });
 
@@ -256,7 +369,7 @@
 
   let initialFire = true;
 
-  const unsubscribe = navigation.subscribe(async (navEntry) => {
+  const unsubscribe = navigation.subscribe((navEntry) => {
     if (initialFire) {
       initialFire = false;
       if (navEntry) {
@@ -268,44 +381,7 @@
       return;
     }
 
-    if (!navEntry) return;
-
-    const newKey = navEntry.page;
-    const entry = getViewManifestEntryFn(newKey);
-    if (!entry) return;
-
-    const nextPageKey = createNavigationMountKey(newKey, navEntry.params);
-
-    if (nextPageKey === activePageKey) {
-      activeParams = { ...navEntry.params };
-      activeQuery = { ...navEntry.query };
-      return;
-    }
-
-    const preservedDepth = computePreservedLayoutDepth(
-      activeEntry,
-      entry,
-      navEntry.options ?? {},
-    );
-    const preservedLayoutKeys = activeLayoutKeys.slice(0, preservedDepth);
-
-    await disposeChangedControllers(preservedDepth);
-    const [controller, layoutControllers] = await Promise.all([
-      createViewControllerFn(entry),
-      createLayoutControllersFn(entry, preservedDepth),
-    ]);
-
-    activeEntry = entry;
-    activeController = controller;
-    activeLayoutControllers = mergeLayoutControllers(
-      preservedDepth,
-      layoutControllers,
-      entry.layoutPaths.length,
-    );
-    activeParams = { ...navEntry.params };
-    activeQuery = { ...navEntry.query };
-    activePageKey = nextPageKey;
-    activeLayoutKeys = createLayoutMountKeys(entry, nextPageKey, preservedLayoutKeys);
+    enqueueNavigationEntry(navEntry);
   });
 
   const bridge = getWoodBridge();
@@ -328,9 +404,14 @@
   });
 
   onDestroy(() => {
+    destroyed = true;
     unsubscribe();
     unsubscribeWindowNavigate?.();
-    void disposeActiveControllers();
+    void navigationTransitionQueue
+      .then(() => disposeActiveControllers())
+      .catch((error: unknown) => {
+        reportNavigationError('navigation teardown failed', error);
+      });
   });
 </script>
 
@@ -345,3 +426,35 @@
   query={activeQuery}
   page={activePage}
 />
+
+{#if appEnv !== 'packaged'}
+  <div class="wood-env-ribbon" class:wood-env-ribbon--local={appEnv === 'local'} aria-hidden="true">
+    {appEnv === 'dev' ? 'DEBUG' : 'LOCAL'}
+  </div>
+{/if}
+
+<style>
+  .wood-env-ribbon {
+    position: absolute;
+    top: 22px;
+    right: -34px;
+    z-index: 2147483647;
+    pointer-events: none;
+    transform: rotate(45deg);
+    width: 140px;
+    text-align: center;
+    padding: 3px 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    color: #fff;
+    background: #b71c1c;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+    user-select: none;
+  }
+
+  .wood-env-ribbon--local {
+    background: #1b7f3a;
+  }
+</style>