@noego/wood 0.2.0 → 0.3.0

package/src/components/NavigationShell.svelte

@@ -9,14 +9,20 @@
     key: string;
     windowName: string;
     pageName: string;
+    layoutPaths: string[];
+    layoutControllers: Array<string | undefined>;
+    layoutPreserve?: boolean[];
     view: any;
     layouts: any[];
     [k: string]: unknown;
   };
 
   type CreateViewControllerFn = (entry: ViewManifestEntry) => Promise<unknown>;
-  type CreateLayoutControllersFn = (entry: ViewManifestEntry) => Promise<Array<unknown>>;
+  type CreateLayoutControllersFn = (entry: ViewManifestEntry, startIndex?: number) => Promise<Array<unknown>>;
   type GetViewManifestEntryFn = (viewKey: string) => ViewManifestEntry | null;
+  type NavigationOptions = {
+    preserveLayouts?: boolean;
+  };
   type WoodBridgeLike = {
     __window?: {
       open?: (windowId: string, options?: Record<string, unknown>) => Promise<unknown>;
@@ -45,12 +51,29 @@
     getViewManifestEntryFn: GetViewManifestEntryFn;
   } = $props();
 
-  let activeEntry = $state(initialEntry);
-  let activeController = $state(initialController);
-  let activeLayoutControllers: Array<unknown> = $state(initialLayoutControllers);
+  function getInitialEntry(): ViewManifestEntry {
+    return initialEntry;
+  }
+
+  function getInitialController(): unknown {
+    return initialController;
+  }
+
+  function getInitialLayoutControllers(): Array<unknown> {
+    return initialLayoutControllers;
+  }
+
+  let activeEntry = $state(getInitialEntry());
+  let activeController = $state(getInitialController());
+  let activeLayoutControllers: Array<unknown> = $state(getInitialLayoutControllers());
   let activeParams: Record<string, unknown> = $state({});
   let activeQuery: Record<string, unknown> = $state({});
-  let activeMountKey = $state(createNavigationMountKey(initialEntry.key, {}));
+  let activePageKey = $state(createNavigationMountKey(getInitialEntry().key, {}));
+  let activeLayoutKeys: string[] = $state(
+    getInitialEntry().layoutPaths.map((_, index) =>
+      createLayoutMountKey(getInitialEntry(), index, activePageKey),
+    ),
+  );
 
   let activePage = $derived({
     key: activeEntry.key,
@@ -88,7 +111,7 @@
   async function navigateWithinCurrentWindow(
     viewKey: string,
     params?: Record<string, unknown>,
-    options?: { replace?: boolean },
+    options?: { replace?: boolean; preserveLayouts?: boolean },
   ): Promise<void> {
     const normalizedViewKey = viewKey.replace(',', '.');
     const entry = getViewManifestEntryFn(normalizedViewKey);
@@ -102,13 +125,83 @@
     }
 
     const p = (params ?? {}) as Record<string, string>;
+    const navigationOptions: NavigationOptions = {
+      ...(options?.preserveLayouts === undefined
+        ? {}
+        : { preserveLayouts: options.preserveLayouts }),
+    };
     if (options?.replace) {
-      navigation.replace(normalizedViewKey, p);
+      navigation.replace(normalizedViewKey, p, {}, navigationOptions);
     } else {
-      navigation.go(normalizedViewKey, p);
+      navigation.go(normalizedViewKey, p, {}, navigationOptions);
     }
   }
 
+  function createLayoutMountKey(
+    entry: ViewManifestEntry,
+    index: number,
+    pageKey: string,
+  ): string {
+    const layoutPath = entry.layoutPaths[index] ?? '';
+    const controllerPath = entry.layoutControllers[index] ?? '';
+    return `${pageKey}:layout:${index}:${layoutPath}:${controllerPath}`;
+  }
+
+  function createLayoutMountKeys(
+    entry: ViewManifestEntry,
+    pageKey: string,
+    preservedKeys: string[] = [],
+  ): string[] {
+    return entry.layoutPaths.map((_, index) =>
+      preservedKeys[index] ?? createLayoutMountKey(entry, index, pageKey),
+    );
+  }
+
+  function layoutIdentityMatches(
+    left: ViewManifestEntry,
+    right: ViewManifestEntry,
+    index: number,
+  ): boolean {
+    return (
+      left.layoutPaths[index] === right.layoutPaths[index] &&
+      left.layoutControllers[index] === right.layoutControllers[index]
+    );
+  }
+
+  function shouldPreserveLayout(
+    from: ViewManifestEntry,
+    to: ViewManifestEntry,
+    index: number,
+    options: NavigationOptions,
+  ): boolean {
+    if (options.preserveLayouts === false) {
+      return false;
+    }
+    if (options.preserveLayouts === true) {
+      return true;
+    }
+    return from.layoutPreserve?.[index] === true && to.layoutPreserve?.[index] === true;
+  }
+
+  function computePreservedLayoutDepth(
+    from: ViewManifestEntry,
+    to: ViewManifestEntry,
+    options: NavigationOptions,
+  ): number {
+    const maxDepth = Math.min(from.layoutPaths.length, to.layoutPaths.length);
+    let depth = 0;
+    for (let index = 0; index < maxDepth; index += 1) {
+      if (!layoutIdentityMatches(from, to, index)) {
+        break;
+      }
+      if (!shouldPreserveLayout(from, to, index, options)) {
+        break;
+      }
+      depth += 1;
+    }
+    return depth;
+  }
+
   async function disposeActiveControllers(): Promise<void> {
     await disposeControllerLifecycle(activeController);
     for (const layoutController of activeLayoutControllers) {
@@ -116,10 +209,31 @@
     }
   }
 
+  async function disposeChangedControllers(fromLayoutIndex: number): Promise<void> {
+    await disposeControllerLifecycle(activeController);
+    for (let index = fromLayoutIndex; index < activeLayoutControllers.length; index += 1) {
+      await disposeControllerLifecycle(activeLayoutControllers[index]);
+    }
+  }
+
+  function mergeLayoutControllers(
+    preservedDepth: number,
+    createdControllers: Array<unknown>,
+    nextLayoutCount: number,
+  ): Array<unknown> {
+    const merged: Array<unknown> = [];
+    for (let index = 0; index < nextLayoutCount; index += 1) {
+      merged[index] = index < preservedDepth
+        ? activeLayoutControllers[index]
+        : createdControllers[index];
+    }
+    return merged;
+  }
+
   setContext('wood:navigate', (
     viewKey: string,
     params?: Record<string, unknown>,
-    options?: { replace?: boolean },
+    options?: { replace?: boolean; preserveLayouts?: boolean },
   ) => {
     void navigateWithinCurrentWindow(viewKey, params, options).catch((error) => {
       const message = error instanceof Error ? error.message : String(error);
@@ -148,7 +262,8 @@
       if (navEntry) {
         activeParams = { ...navEntry.params };
         activeQuery = { ...navEntry.query };
-        activeMountKey = createNavigationMountKey(navEntry.page, navEntry.params);
+        activePageKey = createNavigationMountKey(navEntry.page, navEntry.params);
+        activeLayoutKeys = createLayoutMountKeys(activeEntry, activePageKey);
       }
       return;
     }
@@ -159,26 +274,38 @@
     const entry = getViewManifestEntryFn(newKey);
     if (!entry) return;
 
-    const nextMountKey = createNavigationMountKey(newKey, navEntry.params);
+    const nextPageKey = createNavigationMountKey(newKey, navEntry.params);
 
-    if (nextMountKey === activeMountKey) {
+    if (nextPageKey === activePageKey) {
       activeParams = { ...navEntry.params };
       activeQuery = { ...navEntry.query };
       return;
     }
 
-    await disposeActiveControllers();
+    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),
+      createLayoutControllersFn(entry, preservedDepth),
     ]);
 
     activeEntry = entry;
     activeController = controller;
-    activeLayoutControllers = layoutControllers;
+    activeLayoutControllers = mergeLayoutControllers(
+      preservedDepth,
+      layoutControllers,
+      entry.layoutPaths.length,
+    );
     activeParams = { ...navEntry.params };
     activeQuery = { ...navEntry.query };
-    activeMountKey = nextMountKey;
+    activePageKey = nextPageKey;
+    activeLayoutKeys = createLayoutMountKeys(entry, nextPageKey, preservedLayoutKeys);
   });
 
   const bridge = getWoodBridge();
@@ -207,14 +334,14 @@
   });
 </script>
 
-{#key activeMountKey}
-  <WoodRecursiveRender
-    layouts={activeEntry.layouts}
-    layoutControllers={activeLayoutControllers}
-    view={activeEntry.view}
-    controller={activeController}
-    params={activeParams}
-    query={activeQuery}
-    page={activePage}
-  />
-{/key}
+<WoodRecursiveRender
+  layouts={activeEntry.layouts}
+  layoutControllers={activeLayoutControllers}
+  layoutKeys={activeLayoutKeys}
+  view={activeEntry.view}
+  controller={activeController}
+  pageKey={activePageKey}
+  params={activeParams}
+  query={activeQuery}
+  page={activePage}
+/>

package/src/components/WoodRecursiveRender.svelte

@@ -1,28 +1,35 @@
 <script lang="ts">
   import type { PageController } from '../client/controller_contract';
+  import WoodRecursiveRender from './WoodRecursiveRender.svelte';
 
   let {
     layouts = [],
     layoutControllers = [],
+    layoutKeys = [],
     view = null,
     controller = undefined,
+    pageKey = '',
     params = {},
     query = {},
     page = {},
   } = $props<{
     layouts?: any[];
     layoutControllers?: Array<PageController<any, any, any> | undefined>;
+    layoutKeys?: string[];
     view?: any;
     controller?: PageController<any, any, any>;
+    pageKey?: string;
     params?: Record<string, unknown>;
     query?: Record<string, unknown>;
     page?: Record<string, unknown>;
   }>();
 
-  let topLayout = $derived(layouts[0]);
+  let TopLayout = $derived(layouts[0]);
   let childLayouts = $derived(layouts.slice(1));
   let topLayoutController = $derived(layoutControllers[0]);
   let childLayoutControllers = $derived(layoutControllers.slice(1));
+  let topLayoutKey = $derived(layoutKeys[0] ?? '');
+  let childLayoutKeys = $derived(layoutKeys.slice(1));
   let ViewComponent = $derived(view);
 
   let topData = $derived(topLayoutController?.data);
@@ -36,30 +43,56 @@
 
 {#if childLayouts.length > 0}
   {#snippet nestedChild()}
-    <svelte:self
+    <WoodRecursiveRender
       layouts={childLayouts}
       layoutControllers={childLayoutControllers}
+      layoutKeys={childLayoutKeys}
       {view}
       {controller}
+      {pageKey}
       {params}
       {query}
       {page}
     />
   {/snippet}
-  <svelte:component
-    this={topLayout}
-    data={topData}
-    input={topInput}
-    events={topEvents}
-    {params}
-    {query}
-    {page}
-    children={nestedChild}
-  />
-{:else if topLayout}
+  {#key topLayoutKey}
+    <TopLayout
+      data={topData}
+      input={topInput}
+      events={topEvents}
+      {params}
+      {query}
+      {page}
+      children={nestedChild}
+    />
+  {/key}
+{:else if TopLayout}
   {#snippet viewChild()}
-    <svelte:component
-      this={ViewComponent}
+    {#key pageKey}
+      <ViewComponent
+        data={viewData}
+        input={viewInput}
+        events={viewEvents}
+        {params}
+        {query}
+        {page}
+      />
+    {/key}
+  {/snippet}
+  {#key topLayoutKey}
+    <TopLayout
+      data={topData}
+      input={topInput}
+      events={topEvents}
+      {params}
+      {query}
+      {page}
+      children={viewChild}
+    />
+  {/key}
+{:else}
+  {#key pageKey}
+    <ViewComponent
       data={viewData}
       input={viewInput}
       events={viewEvents}
@@ -67,25 +100,5 @@
       {query}
       {page}
     />
-  {/snippet}
-  <svelte:component
-    this={topLayout}
-    data={topData}
-    input={topInput}
-    events={topEvents}
-    {params}
-    {query}
-    {page}
-    children={viewChild}
-  />
-{:else}
-  <svelte:component
-    this={ViewComponent}
-    data={viewData}
-    input={viewInput}
-    events={viewEvents}
-    {params}
-    {query}
-    {page}
-  />
+  {/key}
 {/if}