@furystack/shades 13.2.2 → 14.0.0

package/src/components/router.spec.tsx

@@ -1,217 +0,0 @@
-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 { LocationService } from '../services/location-service.js'
-import { createComponent } from '../shade-component.js'
-import { flushUpdates } from '../shade.js'
-import { RouteLink } from './route-link.js'
-import { Router, type Route } from './router.js'
-
-describe('Router', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '<div id="root"></div>'
-  })
-  afterEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  it('should skip intermediate route when navigating rapidly (latest wins)', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      history.pushState(null, '', '/route-a')
-
-      const callOrder: string[] = []
-
-      const onVisitA = vi.fn(async () => {
-        callOrder.push('visit-a')
-      })
-      const onLeaveA = vi.fn(async () => {
-        callOrder.push('leave-a')
-      })
-      const onVisitB = vi.fn(async () => {
-        await sleepAsync(200)
-        callOrder.push('visit-b')
-      })
-      const onLeaveB = vi.fn(async () => {
-        callOrder.push('leave-b')
-      })
-      const onVisitC = vi.fn(async () => {
-        callOrder.push('visit-c')
-      })
-
-      const routeA: Route = {
-        url: '/route-a',
-        component: () => <div id="content">route-a</div>,
-        onVisit: onVisitA,
-        onLeave: onLeaveA,
-      }
-      const routeB: Route = {
-        url: '/route-b',
-        component: () => <div id="content">route-b</div>,
-        onVisit: onVisitB,
-        onLeave: onLeaveB,
-      }
-      const routeC: Route = {
-        url: '/route-c',
-        component: () => <div id="content">route-c</div>,
-        onVisit: onVisitC,
-      }
-
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <div>
-            <RouteLink id="go-a" href="/route-a">
-              a
-            </RouteLink>
-            <RouteLink id="go-b" href="/route-b">
-              b
-            </RouteLink>
-            <RouteLink id="go-c" href="/route-c">
-              c
-            </RouteLink>
-            <Router routes={[routeA, routeB, routeC]} />
-          </div>
-        ),
-      })
-
-      const getContent = () => document.getElementById('content')?.innerHTML
-      const clickOn = (name: string) => document.getElementById(name)?.click()
-
-      // --- Initial load at /route-a ---
-      await flushUpdates()
-      expect(getContent()).toBe('route-a')
-      expect(onVisitA).toHaveBeenCalledTimes(1)
-
-      // --- Rapid navigation: click B then immediately C ---
-      callOrder.length = 0
-      clickOn('go-b')
-      clickOn('go-c')
-
-      // Wait long enough for both transitions to settle (onVisitB has 200ms delay)
-      await sleepAsync(500)
-
-      // The final destination should be route-c
-      expect(getContent()).toBe('route-c')
-      expect(onVisitC).toHaveBeenCalledTimes(1)
-
-      // route-b's onVisit should have been abandoned
-      expect(callOrder).not.toContain('visit-b')
-    })
-  })
-
-  it('Shuld display the loader and completed state', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      history.pushState(null, '', '/')
-
-      const onVisit = vi.fn()
-      const onLeave = vi.fn()
-      const onLastLeave = vi.fn()
-
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      const onRouteChange = vi.fn()
-
-      injector.getInstance(LocationService).onLocationPathChanged.subscribe(onRouteChange)
-
-      const route1: Route = {
-        url: '/route-a',
-        component: () => <div id="content">route-a</div>,
-        onVisit,
-        onLeave,
-      }
-
-      const route2: Route<{ id: string }> = {
-        url: '/route-b{/:id}',
-        component: ({ match }) => <div id="content">route-b{match.params.id}</div>,
-      }
-
-      const route3: Route = {
-        url: '/route-c',
-        component: () => <div id="content">route-c</div>,
-        onLeave: onLastLeave,
-      }
-
-      const route4 = { url: '/', component: () => <div id="content">home</div> }
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <div>
-            <RouteLink id="home" href="/">
-              home
-            </RouteLink>
-            <RouteLink id="a" href="/route-a">
-              a
-            </RouteLink>
-            <RouteLink id="b" href="/route-b">
-              b
-            </RouteLink>
-            <RouteLink id="b-with-id" href="/route-b/123">
-              b-with-id
-            </RouteLink>
-            <RouteLink id="c" href="/route-c">
-              c
-            </RouteLink>
-            <RouteLink id="x" href="/route-x">
-              x
-            </RouteLink>
-            <Router routes={[route1, route2, route3, route4]} notFound={<div id="content">not found</div>} />
-          </div>
-        ),
-      })
-
-      const getContent = () => document.getElementById('content')?.innerHTML
-      const getLocation = () => location.pathname
-
-      const clickOn = (name: string) => document.getElementById(name)?.click()
-
-      await flushUpdates()
-
-      expect(getLocation()).toBe('/')
-      expect(getContent()).toBe('home')
-
-      expect(onVisit).not.toBeCalled()
-
-      clickOn('a')
-      await flushUpdates()
-      expect(getContent()).toBe('route-a')
-      expect(getLocation()).toBe('/route-a')
-      expect(onRouteChange).toBeCalledTimes(1)
-      expect(onVisit).toBeCalledTimes(1)
-
-      clickOn('a')
-      await flushUpdates()
-      expect(onVisit).toBeCalledTimes(1)
-      expect(onLeave).not.toBeCalled()
-
-      clickOn('b')
-      await flushUpdates()
-      expect(onLeave).toBeCalledTimes(1)
-
-      expect(getContent()).toBe('route-b')
-      expect(getLocation()).toBe('/route-b')
-
-      clickOn('b-with-id')
-      await flushUpdates()
-      expect(getContent()).toBe('route-b123')
-      expect(getLocation()).toBe('/route-b/123')
-
-      clickOn('c')
-      await flushUpdates()
-      expect(getContent()).toBe('route-c')
-      expect(getLocation()).toBe('/route-c')
-
-      expect(onLastLeave).not.toBeCalled()
-      clickOn('x')
-      await flushUpdates()
-      expect(getContent()).toBe('not found')
-      expect(getLocation()).toBe('/route-x')
-      expect(onLastLeave).toBeCalledTimes(1)
-    })
-  })
-})

package/src/components/router.tsx

@@ -1,103 +0,0 @@
-import { ObservableAlreadyDisposedError } from '@furystack/utils'
-import type { MatchOptions, MatchResult } from 'path-to-regexp'
-import { match } from 'path-to-regexp'
-import type { RenderOptions } from '../models/render-options.js'
-import { LocationService } from '../services/location-service.js'
-import { createComponent } from '../shade-component.js'
-import { Shade } from '../shade.js'
-
-/**
- * @deprecated Use NestedRouter instead
- */
-export interface Route<TMatchResult = unknown> {
-  url: string
-  component: (options: {
-    currentUrl: string
-    match: MatchResult<TMatchResult extends object ? TMatchResult : object>
-  }) => JSX.Element
-  routingOptions?: MatchOptions
-  onVisit?: (options: RenderOptions<unknown> & { element: JSX.Element }) => Promise<void>
-  onLeave?: (options: RenderOptions<unknown> & { element: JSX.Element }) => Promise<void>
-}
-
-/**
- * @deprecated Use NestedRouterProps instead
- */
-export interface RouterProps {
-  style?: CSSStyleDeclaration
-  routes: Array<Route<any>>
-  notFound?: JSX.Element
-}
-
-/**
- * @deprecated Use NestedRouterState instead
- */
-export interface RouterState {
-  activeRoute?: Route<unknown> | null
-  activeRouteParams?: unknown
-  jsx: JSX.Element
-}
-
-/**
- * @deprecated Use NestedRouter instead
- */
-export const Router = Shade<RouterProps>({
-  customElementName: 'shade-router',
-  render: (options) => {
-    const { useState, useObservable, injector } = options
-    const [versionRef] = useState('navVersion', { current: 0 })
-    const [state, setState] = useState<RouterState>('routerState', {
-      jsx: <div />,
-    })
-
-    const updateUrl = async (currentUrl: string) => {
-      const [lastState] = useState<RouterState>('routerState', state)
-      const { activeRoute: lastRoute, activeRouteParams: lastRouteParams, jsx: lastJsx } = lastState
-      try {
-        for (const route of options.props.routes) {
-          const matchFn = match(route.url, route.routingOptions)
-          const matchResult = matchFn(currentUrl)
-          if (matchResult) {
-            if (route !== lastRoute || JSON.stringify(lastRouteParams) !== JSON.stringify(matchResult.params)) {
-              const version = ++versionRef.current
-              await lastRoute?.onLeave?.({ ...options, element: lastState.jsx })
-              if (version !== versionRef.current) return
-              const newJsx = route.component({ currentUrl, match: matchResult })
-              setState({ jsx: newJsx, activeRoute: route, activeRouteParams: matchResult.params })
-              await route.onVisit?.({ ...options, element: newJsx })
-              if (version !== versionRef.current) return
-            }
-            return
-          }
-        }
-
-        if (lastRoute !== null) {
-          const version = ++versionRef.current
-          await lastRoute?.onLeave?.({ ...options, element: lastJsx })
-          if (version !== versionRef.current) return
-          setState({
-            jsx: options.props.notFound || <div />,
-            activeRoute: null,
-            activeRouteParams: null,
-          })
-        }
-      } catch (e) {
-        if (!(e instanceof ObservableAlreadyDisposedError)) {
-          throw e
-        }
-      }
-    }
-
-    const [locationPath] = useObservable(
-      'locationPathChanged',
-      injector.getInstance(LocationService).onLocationPathChanged,
-      {
-        onChange: (newValue) => {
-          void updateUrl(newValue)
-        },
-      },
-    )
-    void updateUrl(locationPath)
-    return state.jsx
-  },
-})