@noego/wood 0.4.6 → 0.4.7

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>