@furystack/shades 11.1.0 → 12.0.0

package/src/components/lazy-load.spec.tsx

@@ -1,10 +1,11 @@
 import { Injector } from '@furystack/inject'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { LazyLoad } from './lazy-load.js'
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from '../initialize.js'
 import { createComponent } from '../shade-component.js'
+import { flushUpdates } from '../shade.js'
 
 describe('Lazy Load', () => {
   beforeEach(() => {
@@ -15,93 +16,99 @@ describe('Lazy Load', () => {
   })
 
   it('Shuld display the loader and completed state', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <LazyLoad
-          loader={<div>Loading...</div>}
-          component={async () => {
-            await sleepAsync(100)
-            return <div>Loaded</div>
-          }}
-        />
-      ),
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <LazyLoad
+            loader={<div>Loading...</div>}
+            component={async () => {
+              await sleepAsync(100)
+              return <div>Loaded</div>
+            }}
+          />
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+      await sleepAsync(150)
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loaded</div></lazy-load></div>')
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
-    await sleepAsync(150)
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loaded</div></lazy-load></div>')
   })
 
   it('Shuld display the failed state with a retryer', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    const load = vi.fn(async () => {
-      throw Error(':(')
-    })
+      const load = vi.fn(async () => {
+        throw Error(':(')
+      })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <LazyLoad
-          loader={<div>Loading...</div>}
-          component={load}
-          error={(e, retry) => (
-            <button id="retry" onclick={retry}>
-              {(e as Error).message}
-            </button>
-          )}
-        />
-      ),
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <LazyLoad
+            loader={<div>Loading...</div>}
+            component={load}
+            error={(e, retry) => (
+              <button id="retry" onclick={retry}>
+                {(e as Error).message}
+              </button>
+            )}
+          />
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+      await sleepAsync(1)
+      expect(load).toBeCalledTimes(1)
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
+      document.getElementById('retry')?.click()
+      expect(load).toBeCalledTimes(2)
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
-    await sleepAsync(1)
-    expect(load).toBeCalledTimes(1)
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
-    document.getElementById('retry')?.click()
-    expect(load).toBeCalledTimes(2)
   })
 
   it('Shuld display the failed state with a retryer', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    let counter = 0
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      let counter = 0
 
-    const load = vi.fn(async () => {
-      if (!counter) {
-        counter += 1
-        throw Error(':(')
-      }
-      return <div>success</div>
-    })
+      const load = vi.fn(async () => {
+        if (!counter) {
+          counter += 1
+          throw Error(':(')
+        }
+        return <div>success</div>
+      })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <LazyLoad
-          loader={<div>Loading...</div>}
-          component={load}
-          error={(e, retry) => (
-            <button id="retry" onclick={retry}>
-              {(e as Error).message}
-            </button>
-          )}
-        />
-      ),
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <LazyLoad
+            loader={<div>Loading...</div>}
+            component={load}
+            error={(e, retry) => (
+              <button id="retry" onclick={retry}>
+                {(e as Error).message}
+              </button>
+            )}
+          />
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+      await sleepAsync(1)
+      expect(load).toBeCalledTimes(1)
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
+      document.getElementById('retry')?.click()
+      expect(load).toBeCalledTimes(2)
+      await sleepAsync(1)
+      expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>success</div></lazy-load></div>')
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
-    await sleepAsync(1)
-    expect(load).toBeCalledTimes(1)
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
-    document.getElementById('retry')?.click()
-    expect(load).toBeCalledTimes(2)
-    await sleepAsync(1)
-    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>success</div></lazy-load></div>')
   })
 })

package/src/components/lazy-load.tsx

@@ -6,44 +6,66 @@ export interface LazyLoadProps {
   component: () => Promise<JSX.Element>
 }
 
-export interface LazyLoadState {
-  component?: JSX.Element
-  error?: unknown
-}
-
 export const LazyLoad = Shade<LazyLoadProps>({
   shadowDomName: 'lazy-load',
-  constructed: async ({ props, useState, element }) => {
-    const [_component, setComponent] = useState<JSX.Element | undefined>('component', undefined)
-    const [_errorState, setErrorState] = useState<unknown>('error', undefined)
-    try {
-      const loaded = await props.component()
-      if (element.isConnected) {
-        setComponent(loaded)
-      }
-    } catch (error) {
-      if (props.error) {
-        if (element.isConnected) {
-          setErrorState(error)
-        }
-      } else {
-        throw error
-      }
-    }
-  },
-  render: ({ props, useState }) => {
+  render: ({ props, useState, useDisposable }) => {
     const [error, setError] = useState<unknown>('error', undefined)
     const [component, setComponent] = useState<JSX.Element | undefined>('component', undefined)
 
+    const tracker = useDisposable('loadTracker', () => {
+      const state: {
+        factory: (() => Promise<JSX.Element>) | null
+        active: boolean
+        [Symbol.dispose](): void
+      } = {
+        factory: null,
+        active: true,
+        [Symbol.dispose]() {
+          state.active = false
+        },
+      }
+      return state
+    })
+
+    const isNewFactory = tracker.factory !== props.component
+
+    if (isNewFactory) {
+      tracker.factory = props.component
+      const factory = props.component
+
+      factory()
+        .then((loaded) => {
+          if (tracker.active && tracker.factory === factory) {
+            setError(undefined)
+            setComponent(loaded)
+          }
+        })
+        .catch((err: unknown) => {
+          if (tracker.active && tracker.factory === factory) {
+            setComponent(undefined)
+            if (props.error) {
+              setError(err)
+            }
+          }
+        })
+
+      return props.loader
+    }
+
     if (error && props.error) {
       return props.error(error, async () => {
+        const factory = props.component
         try {
           setError(undefined)
           setComponent(undefined)
-          const loaded = await props.component()
-          setComponent(loaded)
+          const loaded = await factory()
+          if (tracker.active && tracker.factory === factory) {
+            setComponent(loaded)
+          }
         } catch (e) {
-          setError(e)
+          if (tracker.active && tracker.factory === factory) {
+            setError(e)
+          }
         }
       })
     }

package/src/components/link-to-route.spec.tsx

@@ -1,7 +1,9 @@
 import { Injector } from '@furystack/inject'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { initializeShadeRoot } from '../initialize.js'
 import { createComponent } from '../shade-component.js'
+import { flushUpdates } from '../shade.js'
 import { LinkToRoute } from './link-to-route.js'
 import type { Route } from './router.js'
 
@@ -14,28 +16,30 @@ describe('LinkToRoute', () => {
   })
 
   it('Shuld display the loader and completed state', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <LinkToRoute
-          route={
-            {
-              url: '/subroute/:id',
-            } as Route<{ id: number }>
-          }
-          params={{ id: 123 }}
-          id="route"
-        >
-          Link
-        </LinkToRoute>
-      ),
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <LinkToRoute
+            route={
+              {
+                url: '/subroute/:id',
+              } as Route<{ id: number }>
+            }
+            params={{ id: 123 }}
+            id="route"
+          >
+            Link
+          </LinkToRoute>
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><a is="link-to-route" id="route" href="/subroute/123">Link</a></div>',
+      )
     })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><a is="link-to-route" id="route" href="/subroute/123">Link</a></div>',
-    )
   })
 })

package/src/components/link-to-route.tsx

@@ -4,21 +4,23 @@ import { createComponent } from '../shade-component.js'
 import { Shade } from '../shade.js'
 import type { Route } from './router.js'
 
+/** @deprecated Use `NestedRouteLinkProps` from `nested-route-link` instead */
 export type LinkToRouteProps<T extends object> = {
   route: Route<T>
   params: T
 } & Omit<JSX.IntrinsicElements['a'], 'href'>
 
+/** @deprecated Use `NestedRouteLink` from `nested-route-link` instead */
 export const LinkToRoute: <T extends object>(props: LinkToRouteProps<T>, children?: ChildrenList) => JSX.Element =
   Shade({
     shadowDomName: 'link-to-route',
     elementBase: HTMLAnchorElement,
     elementBaseName: 'a',
-    render: ({ props, element, children }) => {
+    render: ({ props, useHostProps, children }) => {
       const { route, params } = props
 
       const url = compileRoute(route.url, params)
-      element.setAttribute('href', url)
+      useHostProps({ href: url })
       return <>{children}</>
     },
   })

package/src/components/nested-route-link.spec.tsx

@@ -0,0 +1,303 @@
+import { Injector } from '@furystack/inject'
+import { usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest'
+import { initializeShadeRoot } from '../initialize.js'
+import { LocationService } from '../services/location-service.js'
+import { createComponent } from '../shade-component.js'
+import { flushUpdates } from '../shade.js'
+import type { TypedNestedRouteLinkProps } from './nested-route-link.js'
+import { NestedRouteLink, createNestedRouteLink } from './nested-route-link.js'
+import type { ConcatPaths, ExtractRouteParams, ExtractRoutePaths, UrlTree } from './nested-route-types.js'
+import type { NestedRoute } from './nested-router.js'
+
+// Minimal route type for type-level tests. Using Pick avoids the
+// `children?: Record<string, NestedRoute<any>>` from NestedRoute<unknown>
+// which would widen literal keys in intersections.
+type TestRoute = Pick<NestedRoute<unknown>, 'component'>
+
+describe('NestedRouteLink', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('Should render a link with the correct href', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <NestedRouteLink id="link" href="/buttons">
+            Buttons
+          </NestedRouteLink>
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><a is="nested-route-link" id="link" href="/buttons">Buttons</a></div>',
+      )
+    })
+  })
+
+  it('Should trigger SPA navigation on click', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onRouteChange = vi.fn()
+
+      injector.getInstance(LocationService).onLocationPathChanged.subscribe(onRouteChange)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <NestedRouteLink id="link" href="/buttons">
+            Buttons
+          </NestedRouteLink>
+        ),
+      })
+      await flushUpdates()
+
+      expect(onRouteChange).not.toBeCalled()
+      document.getElementById('link')?.click()
+      expect(onRouteChange).toBeCalledTimes(1)
+    })
+  })
+
+  it('Should compile route params in the href', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <NestedRouteLink id="link" href="/users/:id" params={{ id: '42' }}>
+            User 42
+          </NestedRouteLink>
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><a is="nested-route-link" id="link" href="/users/42">User 42</a></div>',
+      )
+    })
+  })
+
+  it('Should compile route params with multiple segments', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <NestedRouteLink id="link" href="/users/:userId/posts/:postId" params={{ userId: '1', postId: '99' }}>
+            Post
+          </NestedRouteLink>
+        ),
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><a is="nested-route-link" id="link" href="/users/1/posts/99">Post</a></div>',
+      )
+    })
+  })
+})
+
+describe('Type utilities', () => {
+  describe('ConcatPaths', () => {
+    it('Should strip root "/" when concatenating', () => {
+      expectTypeOf<ConcatPaths<'/', '/buttons'>>().toEqualTypeOf<'/buttons'>()
+    })
+
+    it('Should concatenate non-root parent paths', () => {
+      expectTypeOf<ConcatPaths<'/layout-tests', '/appbar-only'>>().toEqualTypeOf<'/layout-tests/appbar-only'>()
+    })
+
+    it('Should handle deeply nested paths', () => {
+      expectTypeOf<ConcatPaths<'/a/b', '/c'>>().toEqualTypeOf<'/a/b/c'>()
+    })
+  })
+
+  describe('ExtractRouteParams', () => {
+    it('Should return Record<string, never> for paths without params', () => {
+      expectTypeOf<ExtractRouteParams<'/buttons'>>().toEqualTypeOf<Record<string, never>>()
+    })
+
+    it('Should extract a single param', () => {
+      expectTypeOf<ExtractRouteParams<'/users/:id'>>().toEqualTypeOf<{ id: string }>()
+    })
+
+    it('Should extract multiple params', () => {
+      expectTypeOf<ExtractRouteParams<'/users/:userId/posts/:postId'>>().toEqualTypeOf<{
+        userId: string
+        postId: string
+      }>()
+    })
+
+    it('Should handle params at the beginning of the path', () => {
+      expectTypeOf<ExtractRouteParams<'/:id'>>().toEqualTypeOf<{ id: string }>()
+    })
+  })
+
+  describe('ExtractRoutePaths', () => {
+    it('Should extract top-level paths', () => {
+      type Routes = {
+        '/a': TestRoute
+        '/b': TestRoute
+      }
+      expectTypeOf<ExtractRoutePaths<Routes>>().toEqualTypeOf<'/a' | '/b'>()
+    })
+
+    it('Should extract nested child paths with root parent', () => {
+      type Routes = {
+        '/': TestRoute & {
+          children: {
+            '/buttons': TestRoute
+            '/inputs': TestRoute
+          }
+        }
+      }
+      expectTypeOf<ExtractRoutePaths<Routes>>().toEqualTypeOf<'/' | '/buttons' | '/inputs'>()
+    })
+
+    it('Should extract nested child paths with non-root parent', () => {
+      type Routes = {
+        '/layout-tests': TestRoute & {
+          children: {
+            '/appbar-only': TestRoute
+            '/auto-hide': TestRoute
+          }
+        }
+      }
+      expectTypeOf<ExtractRoutePaths<Routes>>().toEqualTypeOf<
+        '/layout-tests' | '/layout-tests/appbar-only' | '/layout-tests/auto-hide'
+      >()
+    })
+
+    it('Should handle mixed flat and nested routes', () => {
+      type Routes = {
+        '/standalone': TestRoute
+        '/parent': TestRoute & {
+          children: {
+            '/child': TestRoute
+          }
+        }
+      }
+      expectTypeOf<ExtractRoutePaths<Routes>>().toEqualTypeOf<'/standalone' | '/parent' | '/parent/child'>()
+    })
+  })
+
+  describe('UrlTree', () => {
+    it('Should accept a flat object of valid paths', () => {
+      type Paths = '/a' | '/b'
+      const urls = {
+        a: '/a',
+        b: '/b',
+      } satisfies UrlTree<Paths>
+      expectTypeOf(urls).toExtend<UrlTree<Paths>>()
+    })
+
+    it('Should accept nested objects of valid paths', () => {
+      type Paths = '/' | '/buttons' | '/layout-tests' | '/layout-tests/appbar-only'
+      const urls = {
+        home: '/',
+        buttons: '/buttons',
+        layoutTests: {
+          index: '/layout-tests',
+          appBarOnly: '/layout-tests/appbar-only',
+        },
+      } satisfies UrlTree<Paths>
+      expectTypeOf(urls).toExtend<UrlTree<Paths>>()
+    })
+  })
+
+  describe('TypedNestedRouteLinkProps', () => {
+    it('Should make params optional for paths without parameters', () => {
+      type Props = TypedNestedRouteLinkProps<'/buttons'>
+      expectTypeOf<Props['href']>().toEqualTypeOf<'/buttons'>()
+      expectTypeOf<Props>().toExtend<{ params?: Record<string, string> }>()
+    })
+
+    it('Should require params for parameterized paths', () => {
+      type Props = TypedNestedRouteLinkProps<'/users/:id'>
+      expectTypeOf<Props['href']>().toEqualTypeOf<'/users/:id'>()
+      expectTypeOf<Props>().toExtend<{ params: { id: string } }>()
+    })
+
+    it('Should require all params for multi-param paths', () => {
+      type Props = TypedNestedRouteLinkProps<'/users/:userId/posts/:postId'>
+      expectTypeOf<Props>().toExtend<{ params: { userId: string; postId: string } }>()
+    })
+  })
+
+  describe('NestedRouteLink param inference', () => {
+    it('Should infer params as optional when href has no parameters', () => {
+      expectTypeOf(NestedRouteLink).parameter(0).toHaveProperty('params')
+      expectTypeOf(NestedRouteLink<'/buttons'>)
+        .parameter(0)
+        .toExtend<{ params?: Record<string, string> }>()
+    })
+
+    it('Should infer params as required when href has a parameter', () => {
+      expectTypeOf(NestedRouteLink<'/users/:id'>)
+        .parameter(0)
+        .toExtend<{ params: { id: string } }>()
+    })
+
+    it('Should infer multiple params from href', () => {
+      expectTypeOf(NestedRouteLink<'/users/:userId/posts/:postId'>)
+        .parameter(0)
+        .toExtend<{ params: { userId: string; postId: string } }>()
+    })
+  })
+
+  describe('createNestedRouteLink', () => {
+    it('Should constrain href to valid route paths', () => {
+      type Routes = {
+        '/': TestRoute & {
+          children: {
+            '/buttons': TestRoute
+          }
+        }
+      }
+
+      const AppLink = createNestedRouteLink<Routes>()
+      expectTypeOf(AppLink).parameter(0).toHaveProperty('href')
+    })
+
+    it('Should require params for parameterized routes in the tree', () => {
+      type Routes = {
+        '/': TestRoute & {
+          children: {
+            '/users/:userId': TestRoute
+          }
+        }
+      }
+
+      const AppLink = createNestedRouteLink<Routes>()
+      expectTypeOf(AppLink<'/users/:userId'>)
+        .parameter(0)
+        .toExtend<{ params: { userId: string } }>()
+    })
+
+    it('Should require combined params from parent and child route segments', () => {
+      type Routes = {
+        '/users/:userId': TestRoute & {
+          children: {
+            '/posts/:postId': TestRoute
+          }
+        }
+      }
+
+      const AppLink = createNestedRouteLink<Routes>()
+      expectTypeOf(AppLink<'/users/:userId/posts/:postId'>)
+        .parameter(0)
+        .toExtend<{ params: { userId: string; postId: string } }>()
+    })
+  })
+})