@furystack/shades 11.1.0 → 12.0.0

package/esm/components/nested-router.spec.js

@@ -0,0 +1,659 @@
+import { Injector } from '@furystack/inject';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { initializeShadeRoot } from '../initialize.js';
+import { createComponent } from '../shade-component.js';
+import { buildMatchChain, findDivergenceIndex, NestedRouter, renderMatchChain, } from './nested-router.js';
+import { RouteLink } from './route-link.js';
+describe('buildMatchChain', () => {
+    it('should match a simple leaf route', () => {
+        const route = { component: () => createComponent("div", null) };
+        const chain = buildMatchChain({ '/about': route }, '/about');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].route).toBe(route);
+    });
+    it('should return null when no route matches', () => {
+        const route = { component: () => createComponent("div", null) };
+        const chain = buildMatchChain({ '/about': route }, '/missing');
+        expect(chain).toBeNull();
+    });
+    it('should match a parent with a child route', () => {
+        const child = { component: () => createComponent("div", null, "child") };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/sub': child },
+        };
+        const chain = buildMatchChain({ '/parent': parent }, '/parent/sub');
+        expect(chain).toHaveLength(2);
+        expect(chain[0].route).toBe(parent);
+        expect(chain[1].route).toBe(child);
+    });
+    it('should match parent alone when no child matches', () => {
+        const child = { component: () => createComponent("div", null, "child") };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/sub': child },
+        };
+        const chain = buildMatchChain({ '/parent': parent }, '/parent');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].route).toBe(parent);
+    });
+    it('should extract route parameters from the URL', () => {
+        const route = { component: () => createComponent("div", null) };
+        const chain = buildMatchChain({ '/users/:id': route }, '/users/42');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].match.params).toEqual({ id: '42' });
+    });
+    it('should match deep nesting (3 levels)', () => {
+        const grandchild = { component: () => createComponent("div", null, "grandchild") };
+        const child = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/gc': grandchild },
+        };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/child': child },
+        };
+        const chain = buildMatchChain({ '/root': parent }, '/root/child/gc');
+        expect(chain).toHaveLength(3);
+        expect(chain[0].route).toBe(parent);
+        expect(chain[1].route).toBe(child);
+        expect(chain[2].route).toBe(grandchild);
+    });
+    it('should return the first matching route in definition order', () => {
+        const specific = { component: () => createComponent("div", null, "specific") };
+        const catchAll = { component: () => createComponent("div", null, "catch-all") };
+        const chain = buildMatchChain({ '/:slug': specific, '/': catchAll }, '/hello');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].route).toBe(specific);
+        expect(chain[0].match.params).toEqual({ slug: 'hello' });
+    });
+    it('should match root "/" parent with children against child URLs (path-to-regexp v8 workaround)', () => {
+        const child = { component: () => createComponent("div", null, "buttons") };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null,
+                "layout",
+                outlet),
+            children: { '/buttons': child },
+        };
+        const chain = buildMatchChain({ '/': parent }, '/buttons');
+        expect(chain).toHaveLength(2);
+        expect(chain[0].route).toBe(parent);
+        expect(chain[1].route).toBe(child);
+    });
+    it('should match root "/" parent alone when URL is exactly "/"', () => {
+        const child = { component: () => createComponent("div", null, "buttons") };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null,
+                "layout",
+                outlet),
+            children: { '/buttons': child },
+        };
+        const chain = buildMatchChain({ '/': parent }, '/');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].route).toBe(parent);
+    });
+    it('should prefer a more specific route over the root "/" parent', () => {
+        const specificChild = { component: () => createComponent("div", null, "specific") };
+        const rootChild = { component: () => createComponent("div", null, "root-child") };
+        const rootParent = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/other': rootChild },
+        };
+        const chain = buildMatchChain({ '/specific': specificChild, '/': rootParent }, '/specific');
+        expect(chain).toHaveLength(1);
+        expect(chain[0].route).toBe(specificChild);
+    });
+    it('should extract parameters from both parent and child', () => {
+        const child = { component: () => createComponent("div", null) };
+        const parent = {
+            component: ({ outlet }) => createComponent("div", null, outlet),
+            children: { '/posts/:postId': child },
+        };
+        const chain = buildMatchChain({ '/users/:userId': parent }, '/users/5/posts/10');
+        expect(chain).toHaveLength(2);
+        expect(chain[0].match.params).toEqual({ userId: '5' });
+        expect(chain[1].match.params).toEqual({ postId: '10' });
+    });
+});
+describe('findDivergenceIndex', () => {
+    const makeEntry = (id, params = {}) => ({
+        route: { component: () => createComponent("div", null, id) },
+        match: { path: '/', params },
+    });
+    it('should return 0 for completely different chains', () => {
+        const oldChain = [makeEntry(1)];
+        const newChain = [makeEntry(2)];
+        expect(findDivergenceIndex(oldChain, newChain)).toBe(0);
+    });
+    it('should return minLength when one chain is a prefix of the other', () => {
+        const entry = makeEntry(1);
+        const oldChain = [entry];
+        const newChain = [entry, makeEntry(2)];
+        expect(findDivergenceIndex(oldChain, newChain)).toBe(1);
+    });
+    it('should return the length when chains are identical', () => {
+        const entry1 = makeEntry(1);
+        const entry2 = makeEntry(2);
+        const chain = [entry1, entry2];
+        expect(findDivergenceIndex(chain, chain)).toBe(2);
+    });
+    it('should detect divergence from changed params', () => {
+        const route = { component: () => createComponent("div", null) };
+        const oldChain = [{ route, match: { path: '/', params: { id: '1' } } }];
+        const newChain = [{ route, match: { path: '/', params: { id: '2' } } }];
+        expect(findDivergenceIndex(oldChain, newChain)).toBe(0);
+    });
+});
+describe('renderMatchChain', () => {
+    it('should render a single leaf route with outlet undefined', () => {
+        const componentFn = vi.fn(({ outlet }) => (createComponent("div", null,
+            "leaf",
+            outlet ? 'has-outlet' : 'no-outlet')));
+        const chain = [
+            {
+                route: { component: componentFn },
+                match: { path: '/leaf', params: {} },
+            },
+        ];
+        const result = renderMatchChain(chain, '/leaf');
+        expect(componentFn).toHaveBeenCalledTimes(1);
+        expect(componentFn).toHaveBeenCalledWith({
+            currentUrl: '/leaf',
+            match: { path: '/leaf', params: {} },
+            outlet: undefined,
+        });
+        expect(result.chainElements).toHaveLength(1);
+        expect(result.jsx).toBe(result.chainElements[0]);
+    });
+    it('should render inside-out: innermost first, then pass as outlet to parent', () => {
+        const callOrder = [];
+        const childComponent = vi.fn(({ outlet }) => {
+            callOrder.push('child');
+            return createComponent("span", null,
+                "child",
+                outlet);
+        });
+        const parentComponent = vi.fn(({ outlet }) => {
+            callOrder.push('parent');
+            return createComponent("div", null,
+                "parent",
+                outlet);
+        });
+        const chain = [
+            {
+                route: { component: parentComponent },
+                match: { path: '/parent', params: {} },
+            },
+            {
+                route: { component: childComponent },
+                match: { path: '/child', params: {} },
+            },
+        ];
+        const result = renderMatchChain(chain, '/parent/child');
+        expect(callOrder).toEqual(['child', 'parent']);
+        expect(childComponent).toHaveBeenCalledWith(expect.objectContaining({ outlet: undefined }));
+        expect(parentComponent).toHaveBeenCalledWith(expect.objectContaining({ outlet: expect.anything() }));
+        expect(result.chainElements).toHaveLength(2);
+        expect(result.jsx).toBe(result.chainElements[0]);
+        expect(result.chainElements[0]).not.toBe(result.chainElements[1]);
+    });
+    it('should pass currentUrl to every component in the chain', () => {
+        const urls = [];
+        const makeComponent = () => vi.fn(({ currentUrl }) => {
+            urls.push(currentUrl);
+            return createComponent("div", null);
+        });
+        const grandchild = makeComponent();
+        const child = makeComponent();
+        const parent = makeComponent();
+        const chain = [
+            { route: { component: parent }, match: { path: '/a', params: {} } },
+            { route: { component: child }, match: { path: '/b', params: {} } },
+            { route: { component: grandchild }, match: { path: '/c', params: {} } },
+        ];
+        renderMatchChain(chain, '/a/b/c');
+        expect(urls).toEqual(['/a/b/c', '/a/b/c', '/a/b/c']);
+    });
+    it('should return per-entry chainElements where each entry is the component output at that level', () => {
+        const grandchildEl = createComponent("div", null, "grandchild");
+        const childComponent = vi.fn(({ outlet }) => createComponent("section", null,
+            "child",
+            outlet));
+        const parentComponent = vi.fn(({ outlet }) => createComponent("main", null,
+            "parent",
+            outlet));
+        const chain = [
+            { route: { component: parentComponent }, match: { path: '/a', params: {} } },
+            { route: { component: childComponent }, match: { path: '/b', params: {} } },
+            { route: { component: () => grandchildEl }, match: { path: '/c', params: {} } },
+        ];
+        const result = renderMatchChain(chain, '/a/b/c');
+        expect(result.chainElements).toHaveLength(3);
+        // chainElements[2] is the leaf (grandchild output)
+        expect(result.chainElements[2]).toBe(grandchildEl);
+        // chainElements[1] is the child wrapping the grandchild
+        expect(result.chainElements[1]).not.toBe(grandchildEl);
+        // chainElements[0] is the outermost parent (same as jsx)
+        expect(result.chainElements[0]).toBe(result.jsx);
+        // Each level wraps the next, so they must all be different
+        expect(result.chainElements[0]).not.toBe(result.chainElements[1]);
+        expect(result.chainElements[1]).not.toBe(result.chainElements[2]);
+    });
+});
+describe('NestedRouter lifecycle hooks', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should correctly fire onVisit/onLeave across nested child switches and notFound transitions', async () => {
+        history.pushState(null, '', '/parent/child-a');
+        const callOrder = [];
+        const onVisitParent = vi.fn(async () => {
+            callOrder.push('visit-parent');
+        });
+        const onLeaveParent = vi.fn(async () => {
+            callOrder.push('leave-parent');
+        });
+        const onVisitChildA = vi.fn(async () => {
+            callOrder.push('visit-child-a');
+        });
+        const onLeaveChildA = vi.fn(async () => {
+            callOrder.push('leave-child-a');
+        });
+        const onVisitChildB = vi.fn(async () => {
+            callOrder.push('visit-child-b');
+        });
+        const onLeaveChildB = vi.fn(async () => {
+            callOrder.push('leave-child-b');
+        });
+        const onVisitOther = vi.fn(async () => {
+            callOrder.push('visit-other');
+        });
+        const onLeaveOther = vi.fn(async () => {
+            callOrder.push('leave-other');
+        });
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(RouteLink, { id: "child-a", href: "/parent/child-a" }, "child-a"),
+                    createComponent(RouteLink, { id: "child-b", href: "/parent/child-b" }, "child-b"),
+                    createComponent(RouteLink, { id: "other", href: "/other" }, "other"),
+                    createComponent(RouteLink, { id: "nowhere", href: "/nowhere" }, "nowhere"),
+                    createComponent(NestedRouter, { routes: {
+                            '/parent': {
+                                component: ({ outlet }) => createComponent("div", { id: "wrapper" }, outlet ?? createComponent("div", { id: "content" }, "parent-index")),
+                                onVisit: onVisitParent,
+                                onLeave: onLeaveParent,
+                                children: {
+                                    '/child-a': {
+                                        component: () => createComponent("div", { id: "content" }, "child-a"),
+                                        onVisit: onVisitChildA,
+                                        onLeave: onLeaveChildA,
+                                    },
+                                    '/child-b': {
+                                        component: () => createComponent("div", { id: "content" }, "child-b"),
+                                        onVisit: onVisitChildB,
+                                        onLeave: onLeaveChildB,
+                                    },
+                                },
+                            },
+                            '/other': {
+                                component: () => createComponent("div", { id: "content" }, "other"),
+                                onVisit: onVisitOther,
+                                onLeave: onLeaveOther,
+                            },
+                        }, notFound: createComponent("div", { id: "content" }, "not found") }))),
+            });
+            const getContent = () => document.getElementById('content')?.innerHTML;
+            const clickOn = (name) => document.getElementById(name)?.click();
+            // --- Initial load at /parent/child-a ---
+            await sleepAsync(100);
+            expect(getContent()).toBe('child-a');
+            expect(onVisitParent).toBeCalledTimes(1);
+            expect(onVisitChildA).toBeCalledTimes(1);
+            expect(callOrder).toEqual(['visit-parent', 'visit-child-a']);
+            // --- Click same route: no lifecycle hooks should fire ---
+            callOrder.length = 0;
+            clickOn('child-a');
+            await sleepAsync(100);
+            expect(onVisitParent).toBeCalledTimes(1);
+            expect(onVisitChildA).toBeCalledTimes(1);
+            expect(callOrder).toEqual([]);
+            // --- Switch child: only child lifecycle fires, parent stays ---
+            callOrder.length = 0;
+            clickOn('child-b');
+            await sleepAsync(100);
+            expect(getContent()).toBe('child-b');
+            expect(onLeaveChildA).toBeCalledTimes(1);
+            expect(onVisitChildB).toBeCalledTimes(1);
+            expect(onLeaveParent).not.toBeCalled();
+            expect(onVisitParent).toBeCalledTimes(1);
+            expect(callOrder).toEqual(['leave-child-a', 'visit-child-b']);
+            // --- Navigate to a completely different branch ---
+            callOrder.length = 0;
+            clickOn('other');
+            await sleepAsync(100);
+            expect(getContent()).toBe('other');
+            expect(onLeaveChildB).toBeCalledTimes(1);
+            expect(onLeaveParent).toBeCalledTimes(1);
+            expect(onVisitOther).toBeCalledTimes(1);
+            // onLeave fires innermost-first, then onVisit for the new branch
+            expect(callOrder).toEqual(['leave-child-b', 'leave-parent', 'visit-other']);
+            // --- Navigate to non-matching URL: onLeave for all active ---
+            callOrder.length = 0;
+            clickOn('nowhere');
+            await sleepAsync(100);
+            expect(getContent()).toBe('not found');
+            expect(onLeaveOther).toBeCalledTimes(1);
+            expect(callOrder).toEqual(['leave-other']);
+        });
+    });
+});
+describe('NestedRouter lifecycle element scope', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should pass the child element (not the full tree) to onLeave/onVisit when switching between sibling children', async () => {
+        history.pushState(null, '', '/parent/child-a');
+        const visitElements = [];
+        const leaveElements = [];
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(RouteLink, { id: "child-a", href: "/parent/child-a" }, "child-a"),
+                    createComponent(RouteLink, { id: "child-b", href: "/parent/child-b" }, "child-b"),
+                    createComponent(NestedRouter, { routes: {
+                            '/parent': {
+                                component: ({ outlet }) => createComponent("div", { id: "wrapper" }, outlet ?? createComponent("span", null, "index")),
+                                onVisit: async ({ element }) => {
+                                    visitElements.push({ route: 'parent', element });
+                                },
+                                onLeave: async ({ element }) => {
+                                    leaveElements.push({ route: 'parent', element });
+                                },
+                                children: {
+                                    '/child-a': {
+                                        component: () => createComponent("div", { id: "child-a-content" }, "child-a"),
+                                        onVisit: async ({ element }) => {
+                                            visitElements.push({ route: 'child-a', element });
+                                        },
+                                        onLeave: async ({ element }) => {
+                                            leaveElements.push({ route: 'child-a', element });
+                                        },
+                                    },
+                                    '/child-b': {
+                                        component: () => createComponent("div", { id: "child-b-content" }, "child-b"),
+                                        onVisit: async ({ element }) => {
+                                            visitElements.push({ route: 'child-b', element });
+                                        },
+                                        onLeave: async ({ element }) => {
+                                            leaveElements.push({ route: 'child-b', element });
+                                        },
+                                    },
+                                },
+                            },
+                        } }))),
+            });
+            const clickOn = (name) => document.getElementById(name)?.click();
+            // --- Initial load at /parent/child-a ---
+            await sleepAsync(100);
+            expect(visitElements).toHaveLength(2);
+            // Parent's onVisit element should be the full tree (parent wrapping child)
+            expect(visitElements[0].route).toBe('parent');
+            expect(visitElements[0].element.getAttribute('id')).toBe('wrapper');
+            // Child-a's onVisit element should be just the child element, not the wrapper
+            expect(visitElements[1].route).toBe('child-a');
+            expect(visitElements[1].element.getAttribute('id')).toBe('child-a-content');
+            // --- Switch to child-b: parent stays, only child lifecycle fires ---
+            visitElements.length = 0;
+            leaveElements.length = 0;
+            clickOn('child-b');
+            await sleepAsync(100);
+            // onLeave should receive the child-a element, not the full wrapper
+            expect(leaveElements).toHaveLength(1);
+            expect(leaveElements[0].route).toBe('child-a');
+            expect(leaveElements[0].element.getAttribute('id')).toBe('child-a-content');
+            // onVisit should receive the child-b element, not the full wrapper
+            expect(visitElements).toHaveLength(1);
+            expect(visitElements[0].route).toBe('child-b');
+            expect(visitElements[0].element.getAttribute('id')).toBe('child-b-content');
+        });
+    });
+});
+describe('NestedRouter flat routes', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should render and navigate between flat (non-nested) Record routes', async () => {
+        history.pushState(null, '', '/');
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(RouteLink, { id: "home", href: "/" }, "home"),
+                    createComponent(RouteLink, { id: "about", href: "/about" }, "about"),
+                    createComponent(RouteLink, { id: "contact", href: "/contact" }, "contact"),
+                    createComponent(NestedRouter, { routes: {
+                            '/about': { component: () => createComponent("div", { id: "content" }, "about-page") },
+                            '/contact': { component: () => createComponent("div", { id: "content" }, "contact-page") },
+                            '/': { component: () => createComponent("div", { id: "content" }, "home-page") },
+                        }, notFound: createComponent("div", { id: "content" }, "not found") }))),
+            });
+            const getContent = () => document.getElementById('content')?.innerHTML;
+            const clickOn = (name) => document.getElementById(name)?.click();
+            await sleepAsync(100);
+            expect(getContent()).toBe('home-page');
+            clickOn('about');
+            await sleepAsync(100);
+            expect(getContent()).toBe('about-page');
+            clickOn('contact');
+            await sleepAsync(100);
+            expect(getContent()).toBe('contact-page');
+            clickOn('home');
+            await sleepAsync(100);
+            expect(getContent()).toBe('home-page');
+        });
+    });
+});
+describe('NestedRouter outlet composition', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should compose parent layout wrapping child content via outlet', async () => {
+        history.pushState(null, '', '/dashboard/settings');
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(NestedRouter, { routes: {
+                        '/dashboard': {
+                            component: ({ outlet }) => (createComponent("div", { id: "layout" },
+                                createComponent("header", { id: "header" }, "Dashboard Header"),
+                                createComponent("main", { id: "main" }, outlet ?? createComponent("div", { id: "child" }, "index")))),
+                            children: {
+                                '/settings': {
+                                    component: () => createComponent("div", { id: "child" }, "settings-content"),
+                                },
+                                '/profile': {
+                                    component: () => createComponent("div", { id: "child" }, "profile-content"),
+                                },
+                            },
+                        },
+                    } })),
+            });
+            await sleepAsync(100);
+            // Parent layout should be rendered with child inside
+            expect(document.getElementById('header')?.innerHTML).toBe('Dashboard Header');
+            expect(document.getElementById('child')?.innerHTML).toBe('settings-content');
+            // Child is inside #main which is inside #layout
+            const layout = document.getElementById('layout');
+            expect(layout).toBeTruthy();
+            expect(layout.querySelector('#main #child')).toBeTruthy();
+        });
+    });
+    it('should render parent with fallback when navigating to parent URL without a child match', async () => {
+        history.pushState(null, '', '/dashboard');
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(NestedRouter, { routes: {
+                        '/dashboard': {
+                            component: ({ outlet }) => (createComponent("div", { id: "layout" },
+                                createComponent("main", { id: "main" }, outlet ?? createComponent("div", { id: "child" }, "dashboard-index")))),
+                            children: {
+                                '/settings': {
+                                    component: () => createComponent("div", { id: "child" }, "settings"),
+                                },
+                            },
+                        },
+                    } })),
+            });
+            await sleepAsync(100);
+            // Parent matched alone, outlet is undefined, so the fallback renders
+            expect(document.getElementById('child')?.innerHTML).toBe('dashboard-index');
+        });
+    });
+});
+describe('NestedRouter route param changes', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should re-render and fire lifecycle hooks when route params change', async () => {
+        history.pushState(null, '', '/users/1');
+        const callOrder = [];
+        const onVisitUser = vi.fn(async () => {
+            callOrder.push('visit-user');
+        });
+        const onLeaveUser = vi.fn(async () => {
+            callOrder.push('leave-user');
+        });
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(RouteLink, { id: "user-1", href: "/users/1" }, "User 1"),
+                    createComponent(RouteLink, { id: "user-2", href: "/users/2" }, "User 2"),
+                    createComponent(RouteLink, { id: "user-3", href: "/users/3" }, "User 3"),
+                    createComponent(NestedRouter, { routes: {
+                            '/users/:id': {
+                                component: ({ match }) => createComponent("div", { id: "content" },
+                                    "user-",
+                                    match.params.id),
+                                onVisit: onVisitUser,
+                                onLeave: onLeaveUser,
+                            },
+                        } }))),
+            });
+            const getContent = () => document.getElementById('content')?.innerHTML;
+            const clickOn = (name) => document.getElementById(name)?.click();
+            // Initial load at /users/1
+            await sleepAsync(100);
+            expect(getContent()).toBe('user-1');
+            expect(onVisitUser).toHaveBeenCalledTimes(1);
+            expect(callOrder).toEqual(['visit-user']);
+            // Navigate to /users/2 — same route, different param → lifecycle should fire
+            callOrder.length = 0;
+            clickOn('user-2');
+            await sleepAsync(100);
+            expect(getContent()).toBe('user-2');
+            expect(onLeaveUser).toHaveBeenCalledTimes(1);
+            expect(onVisitUser).toHaveBeenCalledTimes(2);
+            expect(callOrder).toEqual(['leave-user', 'visit-user']);
+            // Navigate to /users/3
+            callOrder.length = 0;
+            clickOn('user-3');
+            await sleepAsync(100);
+            expect(getContent()).toBe('user-3');
+            expect(onLeaveUser).toHaveBeenCalledTimes(2);
+            expect(onVisitUser).toHaveBeenCalledTimes(3);
+            expect(callOrder).toEqual(['leave-user', 'visit-user']);
+            // Click same user — no lifecycle change
+            callOrder.length = 0;
+            clickOn('user-3');
+            await sleepAsync(100);
+            expect(getContent()).toBe('user-3');
+            expect(onLeaveUser).toHaveBeenCalledTimes(2);
+            expect(onVisitUser).toHaveBeenCalledTimes(3);
+            expect(callOrder).toEqual([]);
+        });
+    });
+    it('should re-render nested child when parent params change', async () => {
+        history.pushState(null, '', '/org/alpha/dashboard');
+        const onVisitOrg = vi.fn();
+        const onLeaveOrg = vi.fn();
+        const onVisitDash = vi.fn();
+        const onLeaveDash = vi.fn();
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(RouteLink, { id: "alpha-dash", href: "/org/alpha/dashboard" }, "Alpha Dashboard"),
+                    createComponent(RouteLink, { id: "beta-dash", href: "/org/beta/dashboard" }, "Beta Dashboard"),
+                    createComponent(NestedRouter, { routes: {
+                            '/org/:orgId': {
+                                component: ({ match, outlet }) => (createComponent("div", { id: "org" },
+                                    "org-",
+                                    match.params.orgId,
+                                    outlet)),
+                                onVisit: onVisitOrg,
+                                onLeave: onLeaveOrg,
+                                children: {
+                                    '/dashboard': {
+                                        component: () => createComponent("div", { id: "child" }, "dashboard"),
+                                        onVisit: onVisitDash,
+                                        onLeave: onLeaveDash,
+                                    },
+                                },
+                            },
+                        } }))),
+            });
+            const clickOn = (name) => document.getElementById(name)?.click();
+            await sleepAsync(100);
+            expect(document.getElementById('org')?.textContent).toContain('org-alpha');
+            expect(document.getElementById('child')?.innerHTML).toBe('dashboard');
+            expect(onVisitOrg).toHaveBeenCalledTimes(1);
+            expect(onVisitDash).toHaveBeenCalledTimes(1);
+            // Change parent param: org/alpha → org/beta, child stays /dashboard
+            // Both parent and child should get leave/visit since parent diverges
+            clickOn('beta-dash');
+            await sleepAsync(100);
+            expect(document.getElementById('org')?.textContent).toContain('org-beta');
+            expect(document.getElementById('child')?.innerHTML).toBe('dashboard');
+            expect(onLeaveOrg).toHaveBeenCalledTimes(1);
+            expect(onLeaveDash).toHaveBeenCalledTimes(1);
+            expect(onVisitOrg).toHaveBeenCalledTimes(2);
+            expect(onVisitDash).toHaveBeenCalledTimes(2);
+        });
+    });
+});
+//# sourceMappingURL=nested-router.spec.js.map