fix(router): rework improper lifecycle in context

Author: dvcol

src/lib/components/RouterContext.svelte

@@ -2,8 +2,9 @@
   import type { RouterContextProps } from '~/models/component.model.js';
   import type { IRouter } from '~/models/router.model.js';
 
+  import { onDestroy, onMount } from 'svelte';
+
   import { getRouter, setRouter } from '~/router/context.svelte.js';
-  import { Router } from '~/router/router.svelte.js';
   import { Logger, LoggerKey } from '~/utils/logger.utils.js';
 
   const { children, router, options }: RouterContextProps = $props();
@@ -17,21 +18,21 @@
     });
   }
 
-  const createInnerRouter = (_router: IRouter = new Router(options)) => {
-    setRouter(_router);
+  const resolveRouter = () => {
+    if (outerRouter) return outerRouter;
+    const _router = setRouter(router, options);
     Logger.debug(`[${LoggerKey} Context]`, 'Router Context set:', _router);
     return _router;
   };
 
-  const innerRouter: IRouter | undefined = outerRouter ? undefined : createInnerRouter(router);
-  const resolvedRouter: IRouter = (outerRouter ?? innerRouter)!;
-
-  $effect.pre(() => {
-    if (!innerRouter || innerRouter.ready) return;
-    innerRouter.init();
+  const resolvedRouter: IRouter = resolveRouter();
 
-    return () => innerRouter?.destroy();
+  onMount(() => {
+    if (resolvedRouter?.ready) return;
+    resolvedRouter?.init();
   });
+
+  onDestroy(() => resolvedRouter?.destroy());
 </script>
 
 {#if resolvedRouter}

src/lib/router/context.svelte.ts

@@ -1,18 +1,20 @@
 import type { RouteName } from '~/models/route.model.js';
-import type { IRouter } from '~/models/router.model.js';
+import type { IRouter, RouterOptions } from '~/models/router.model.js';
 import type { IView } from '~/models/view.model.js';
 
 import { getContext, setContext } from 'svelte';
 
+import { Router } from '~/router/router.svelte.js';
+
 export const RouterContextSymbol = Symbol('SvelteSimpleRouterContext');
 export const RouterViewSymbol = Symbol('SvelteSimpleRouterView');
 
 export function getRouter<Name extends RouteName = any>(): IRouter<Name> | undefined {
   return getContext<IRouter<Name>>(RouterContextSymbol);
 }
 
-export function setRouter<Name extends RouteName = any>(router: IRouter<Name>): IRouter<Name> {
-  return setContext(RouterContextSymbol, router);
+export function setRouter<Name extends RouteName = any>(router?: IRouter<Name>, options?: RouterOptions<Name>): IRouter<Name> {
+  return setContext(RouterContextSymbol, router ?? new Router(options));
 }
 
 export function getView<Name extends RouteName = any>(): IView<Name> {

test/components/components.test.ts

@@ -55,6 +55,23 @@ describe('routerView', () => {
 
   describe('routing', () => {
     const common = (component: typeof RouteView | typeof RouterContext | typeof RouterViewNested) => {
+      it('should initialize external router on mount and destroy on unmounted', async () => {
+        expect.assertions(4);
+        const localRouter = new Router({ routes });
+        const spyInit = vi.spyOn(localRouter, 'init');
+        const spyDestroy = vi.spyOn(localRouter, 'destroy');
+
+        const result = render(component, { router: localRouter });
+
+        expect(spyInit).toHaveBeenCalledTimes(1);
+        expect(spyDestroy).not.toHaveBeenCalled();
+
+        result.unmount();
+
+        expect(spyDestroy).toHaveBeenCalledTimes(1);
+        expect(spyInit).toHaveBeenCalledTimes(1);
+      });
+
       it('should render no component', () => {
         expect.assertions(4);
         render(component, { router });