@snapstrat/switchboard 1.0.0 → 1.0.1

package/dist/router/BrowserRouter.svelte

@@ -37,7 +37,11 @@ and displays the appropriate component based on the current route.
   setRouterContext(router);
 
   const currentAppRoute = $derived(router.currentRoute?.route);
+  const allRoutes = $derived(router.getAllRoutes());
   const layouts = $derived(getAllLayouts(currentAppRoute?.layout));
+  const lastLayout = $derived(
+    layouts.length > 0 ? layouts[layouts.length - 1] : undefined
+  );
 </script>
 
 <Route404>
@@ -49,16 +53,22 @@ and displays the appropriate component based on the current route.
 
 {#snippet layoutRender(remaining: LayoutData[])}
   {#if remaining.length === 0}
-    {@render currentAppRoute?.component?.()}
+    <!-- We need to render all of these to ensure transitions and lifecycle hooks work correctly -->
+    {#each allRoutes.filter(it => it.layout === lastLayout) as route (route)}
+      {@render route?.component?.()}
+    {/each}
   {:else}
-    {@const next = remaining[0]}
 
     {#snippet renderer()}
       {@render layoutRender(remaining.slice(1))}
     {/snippet}
 
-    {@render next.renderer(renderer)}
+    {#each remaining as next (next)}
+      {#if next === remaining[0]}
+        {@render next.renderer(renderer)}
+      {/if}
+    {/each}
   {/if}
 {/snippet}
 
-{@render layoutRender(layouts)}
+{@render layoutRender(layouts)}

package/dist/router/Layout.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
 
 	import {
-		type ApplicationRoute, getAllCanonicalLayouts,
+		type ApplicationRoute, getAllCanonicalLayouts, getAllLayouts,
 		getLayout,
 		getRouter,
 		type LayoutData,
@@ -74,6 +74,4 @@
 	})
 </script>
 
-
-
 {@render routes()}

package/dist/router/Route.svelte

@@ -20,7 +20,7 @@ The children of this component make the content that will be displayed when the
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
 	import {
-		type ApplicationRoute, getLayout, getRouteContainer, getRouter, type LayoutData, RoutePath
+		type ApplicationRoute, getAllLayouts, getLayout, getRouteContainer, getRouter, type LayoutData, RoutePath
 	} from '..';
 
   let {
@@ -31,7 +31,7 @@ The children of this component make the content that will be displayed when the
 
 	let router = getRouter();
 
-	let route : ApplicationRoute | undefined;
+	let route : ApplicationRoute | undefined = $state.raw();
 
   onMount(() => {
 		const layout = getLayout();
@@ -44,16 +44,24 @@ The children of this component make the content that will be displayed when the
 
 		route = {
 			path: RoutePath.fromString(combinedPath),
-			component: children,
+			component: conditionalRender,
 			layout: container.isRouter() ? undefined : container as LayoutData
 		};
 		container.registerRoute(route);
   });
 
-	onDestroy(() => {
+	onDestroy(async () => {
 		if (route) {
 			const container = getLayout() ?? router;
 			container.unregisterRoute(route);
 		}
 	})
+
+	const currentAppRoute = $derived(router.currentRoute?.route);
 </script>
+
+{#snippet conditionalRender()}
+	{#if currentAppRoute === route}
+		{@render children?.()}
+	{/if}
+{/snippet}

package/dist/router/Route404.svelte

@@ -11,13 +11,21 @@
 
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-	import { type ApplicationRoute, getLayout, getRouteContainer, getRouter, type LayoutData, RoutePath } from '..';
+	import {
+		type ApplicationRoute,
+		getAllLayouts,
+		getLayout,
+		getRouteContainer,
+		getRouter,
+		type LayoutData,
+		RoutePath
+	} from '..';
 
   let { children, container }: Route404Props = $props();
 
   let router = getRouter();
 
-  let route : ApplicationRoute | undefined;
+  let route : ApplicationRoute | undefined = $state.raw();
 
   onMount(() => {
 		const layout = getLayout();
@@ -28,7 +36,7 @@
 
     route = {
       path: RoutePath.fromString(layoutPath, true),
-      component: children,
+      component: conditionalRender,
 			layout: container.isRouter() ? undefined : container as LayoutData
 		};
     container.registerRoute404(route);
@@ -40,4 +48,12 @@
       container.unregisterRoute(route);
     }
   })
-</script>
+
+	const currentAppRoute = $derived(router.currentRoute?.route);
+</script>
+
+{#snippet conditionalRender()}
+	{#if currentAppRoute === route}
+		{@render children?.()}
+	{/if}
+{/snippet}

package/dist/router/impl/webRouter.svelte.js

@@ -5,8 +5,8 @@ import { tick } from 'svelte';
  * A router used for an entire application on the web.
  */
 class WebRouter {
-    _routes = [];
-    _routes404 = [];
+    _routes = $state.raw([]);
+    _routes404 = $state.raw([]);
     // routes are stored in reverse order for easier matching
     // the most recently added routes are matched first
     get routes() {
@@ -88,10 +88,10 @@ class WebRouter {
         return selectedRoute;
     }
     registerRoute(route) {
-        this._routes.push(route);
+        this._routes = [...this._routes, route];
     }
     registerRoute404(route) {
-        this._routes404.push(route);
+        this._routes404 = [...this._routes404, route];
         // switch to the new route if it's a 404 route and the current route is undefined
         if (this.currentRoute?.route == undefined) {
             this.switchTo(window.location.pathname, parseWindowSearchParams(), false);
@@ -158,7 +158,7 @@ class WebRouter {
         this._routes.splice(toRemove, 1);
     }
     getAllRoutes() {
-        return [...this.routes];
+        return [...this.routes, ...this.routes404];
     }
     isRouter() { return true; }
 }

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@snapstrat/switchboard",
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "license": "MIT",
+  "homepage": "https://github.com/snapstrat/switchboard",
   "repository": {
     "url": "https://github.com/snapstrat/switchboard"
   },