@tanstack/solid-router 1.20.3-alpha.1

package/src/Matches.tsx

@@ -0,0 +1,243 @@
+import * as Solid from 'solid-js'
+import warning from 'tiny-warning'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { Transitioner } from './Transitioner'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import { SafeFragment } from './SafeFragment'
+import type {
+  AnyRouter,
+  DeepPartial,
+  MakeOptionalPathParams,
+  MakeOptionalSearchParams,
+  MakeRouteMatchUnion,
+  MaskOptions,
+  MatchRouteOptions,
+  NoInfer,
+  RegisteredRouter,
+  ResolveRelativePath,
+  ResolveRoute,
+  RouteByPath,
+  RouterState,
+  ToSubOptionsProps,
+} from '@tanstack/router-core'
+
+declare module '@tanstack/router-core' {
+  export interface RouteMatchExtensions {
+    meta?: Array<Solid.JSX.IntrinsicElements['meta'] | undefined>
+    links?: Array<Solid.JSX.IntrinsicElements['link'] | undefined>
+    scripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+    headScripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+  }
+}
+
+export function Matches() {
+  const router = useRouter()
+
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  // Do not render a root Suspense during SSR or hydrating from SSR
+  const ResolvedSuspense =
+    router.isServer || (typeof document !== 'undefined' && router.clientSsr)
+      ? SafeFragment
+      : Solid.Suspense
+
+  const inner = (
+    <ResolvedSuspense fallback={pendingElement}>
+      <Transitioner />
+      <MatchesInner />
+    </ResolvedSuspense>
+  )
+
+  return router.options.InnerWrap ? (
+    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
+  ) : (
+    inner
+  )
+}
+
+function MatchesInner() {
+  const matchId = useRouterState({
+    select: (s) => {
+      return s.matches[0]?.id
+    },
+  })
+
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt,
+  })
+
+  return (
+    <matchContext.Provider value={matchId}>
+      <CatchBoundary
+        getResetKey={() => resetKey()}
+        errorComponent={ErrorComponent}
+        onCatch={(error) => {
+          warning(
+            false,
+            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+          )
+          warning(false, error.message || error.toString())
+        }}
+      >
+        {matchId() ? <Match matchId={matchId()!} /> : null}
+      </CatchBoundary>
+    </matchContext.Provider>
+  )
+}
+
+export type UseMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = ToSubOptionsProps<TRouter, TFrom, TTo> &
+  DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &
+  DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &
+  MaskOptions<TRouter, TMaskFrom, TMaskTo> &
+  MatchRouteOptions
+
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
+  const router = useRouter()
+
+  const status = useRouterState({
+    select: (s) => s.status,
+  })
+
+  return <
+    const TFrom extends string = string,
+    const TTo extends string | undefined = undefined,
+    const TMaskFrom extends string = TFrom,
+    const TMaskTo extends string = '',
+  >(
+    opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ): Solid.Accessor<
+    false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+  > => {
+    const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
+
+    const matchRoute = Solid.createMemo(() => {
+      status()
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch,
+      })
+    })
+
+    return matchRoute
+  }
+}
+
+export type MakeMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+  children?:
+    | ((
+        params?: RouteByPath<
+          TRouter['routeTree'],
+          ResolveRelativePath<TFrom, NoInfer<TTo>>
+        >['types']['allParams'],
+      ) => Solid.JSX.Element)
+    | Solid.JSX.Element
+}
+
+export function MatchRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
+  const status = useRouterState({
+    select: (s) => s.status,
+  })
+
+  return (
+    <Solid.Show when={status()} keyed>
+      {(_) => {
+        const matchRoute = useMatchRoute()
+        const params = matchRoute(props as any)() as boolean
+
+        if (typeof props.children === 'function') {
+          return (props.children as any)(params)
+        }
+
+        return params ? props.children : null
+      }}
+    </Solid.Show>
+  )
+}
+
+export interface UseMatchesBaseOptions<TRouter extends AnyRouter, TSelected> {
+  select?: (matches: Array<MakeRouteMatchUnion<TRouter>>) => TSelected
+}
+
+export type UseMatchesResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected
+
+export function useMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  return useRouterState({
+    select: (state: RouterState<TRouter['routeTree']>) => {
+      const matches = state.matches
+      return opts?.select
+        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+        : matches
+    },
+  } as any) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
+}
+
+export function useParentMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  const contextMatchId = Solid.useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        0,
+        matches.findIndex((d) => d.id === contextMatchId()),
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}
+
+export function useChildMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  const contextMatchId = Solid.useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === contextMatchId()) + 1,
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}

package/src/RouterProvider.tsx

@@ -0,0 +1,79 @@
+import { Matches } from './Matches'
+import { getRouterContext } from './routerContext'
+import type * as Solid from 'solid-js'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterOptions,
+} from '@tanstack/router-core'
+
+export function RouterContextProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({
+  router,
+  children,
+  ...rest
+}: RouterProps<TRouter, TDehydrated> & {
+  children: () => Solid.JSX.Element
+}) {
+  // Allow the router to update options on the router instance
+  router.update({
+    ...router.options,
+    ...rest,
+    context: {
+      ...router.options.context,
+      ...rest.context,
+    },
+  } as any)
+
+  const routerContext = getRouterContext()
+
+  const provider = (
+    <routerContext.Provider value={router as AnyRouter}>
+      {children()}
+    </routerContext.Provider>
+  )
+
+  if (router.options.Wrap) {
+    return <router.options.Wrap>{provider}</router.options.Wrap>
+  }
+
+  return provider
+}
+
+export function RouterProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {
+  return (
+    <RouterContextProvider router={router} {...rest}>
+      {() => <Matches />}
+    </RouterContextProvider>
+  )
+}
+
+export type RouterProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    false,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: TRouter
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      false,
+      TRouter['history'],
+      TDehydrated
+    >['context']
+  >
+}

package/src/SafeFragment.tsx

@@ -0,0 +1,3 @@
+export function SafeFragment(props: any) {
+  return <>{props.children}</>
+}

package/src/ScriptOnce.tsx

@@ -0,0 +1,30 @@
+import jsesc from 'jsesc'
+
+export function ScriptOnce({
+  children,
+  log,
+}: {
+  children: string
+  log?: boolean
+  sync?: boolean
+}) {
+  if (typeof document !== 'undefined') {
+    return null
+  }
+
+  return (
+    <script
+      class="tsr-once"
+      innerHTML={[
+        children,
+        (log ?? true) && process.env.NODE_ENV === 'development'
+          ? `console.info(\`Injected From Server:
+${jsesc(children.toString(), { quotes: 'backtick' })}\`)`
+          : '',
+        'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()',
+      ]
+        .filter(Boolean)
+        .join('\n')}
+    />
+  )
+}

package/src/Scripts.tsx

@@ -0,0 +1,65 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const Scripts = () => {
+  const router = useRouter()
+
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts: Array<RouterManagedTag> = []
+      const manifest = router.ssr?.manifest
+
+      if (!manifest) {
+        return []
+      }
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          manifest.routes[route.id]?.assets
+            ?.filter((d) => d.tag === 'script')
+            .forEach((asset) => {
+              assetScripts.push({
+                tag: 'script',
+                attrs: asset.attrs,
+                children: asset.children,
+              } as any)
+            }),
+        )
+
+      return assetScripts
+    },
+  })
+
+  const scripts = useRouterState({
+    select: (state) => ({
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+    }),
+  })
+
+  const allScripts = [
+    ...scripts().scripts,
+    ...assetScripts(),
+  ] as Array<RouterManagedTag>
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} />
+      ))}
+    </>
+  )
+}

package/src/ScrollRestoration.tsx

@@ -0,0 +1,69 @@
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import type {
+  ParsedLocation,
+  ScrollRestorationEntry,
+  ScrollRestorationOptions,
+} from '@tanstack/router-core'
+
+function useScrollRestoration() {
+  const router = useRouter()
+  setupScrollRestoration(router, true)
+}
+
+/**
+ * @deprecated use createRouter's `scrollRestoration` option instead
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {
+  useScrollRestoration()
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      "The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.",
+    )
+  }
+
+  return null
+}
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Window | Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Window | Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+): ScrollRestorationEntry | undefined {
+  useScrollRestoration()
+
+  const router = useRouter()
+  const getKey = options.getKey || defaultGetScrollRestorationKey
+
+  let elementSelector = ''
+
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
+  } else {
+    const element = options.getElement?.()
+    if (!element) {
+      return
+    }
+    elementSelector =
+      element instanceof Window ? 'window' : getCssSelector(element)
+  }
+
+  const restoreKey = getKey(router.latestLocation)
+  const byKey = scrollRestorationCache.state[restoreKey]
+  return byKey?.[elementSelector]
+}

package/src/Transitioner.tsx

@@ -0,0 +1,140 @@
+import * as Solid from 'solid-js'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import { usePrevious } from './utils'
+
+export function Transitioner() {
+  const router = useRouter()
+  let mountLoadForRouter = { router, mounted: false }
+  const isLoading = useRouterState({
+    select: ({ isLoading }) => isLoading,
+  })
+
+  const [isTransitioning, setIsTransitioning] = Solid.createSignal(false)
+  // Track pending state changes
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === 'pending'),
+  })
+
+  const previousIsLoading = usePrevious(isLoading)
+
+  const isAnyPending = () =>
+    isLoading() || isTransitioning() || hasPendingMatches()
+  const previousIsAnyPending = usePrevious(isAnyPending)
+
+  const isPagePending = () => isLoading() || hasPendingMatches()
+  const previousIsPagePending = usePrevious(isPagePending)
+
+  if (!router.isServer) {
+    router.startTransition = async (fn: () => void | Promise<void>) => {
+      setIsTransitioning(true)
+      await fn()
+      setIsTransitioning(false)
+    }
+  }
+
+  // Subscribe to location changes
+  // and try to load the new location
+  Solid.onMount(() => {
+    const unsub = router.history.subscribe(router.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
+    })
+
+    if (
+      trimPathRight(router.latestLocation.href) !==
+      trimPathRight(nextLocation.href)
+    ) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    Solid.onCleanup(() => {
+      unsub()
+    })
+  })
+
+  // Try to load the initial location
+  Solid.createRenderEffect(() => {
+    Solid.untrack(() => {
+      if (
+        (typeof window !== 'undefined' && router.clientSsr) ||
+        (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
+      ) {
+        return
+      }
+      mountLoadForRouter = { router, mounted: true }
+      const tryLoad = async () => {
+        try {
+          await router.load()
+        } catch (err) {
+          console.error(err)
+        }
+      }
+      tryLoad()
+    })
+  })
+
+  Solid.createRenderEffect(
+    Solid.on(
+      [previousIsLoading, isLoading],
+      ([previousIsLoading, isLoading]) => {
+        if (previousIsLoading.previous && !isLoading) {
+          router.emit({
+            type: 'onLoad',
+            ...getLocationChangeInfo(router.state),
+          })
+        }
+      },
+    ),
+  )
+  Solid.createRenderEffect(
+    Solid.on(
+      [isPagePending, previousIsPagePending],
+      ([isPagePending, previousIsPagePending]) => {
+        // emit onBeforeRouteMount
+        if (previousIsPagePending.previous && !isPagePending) {
+          router.emit({
+            type: 'onBeforeRouteMount',
+            ...getLocationChangeInfo(router.state),
+          })
+        }
+      },
+    ),
+  )
+
+  Solid.createRenderEffect(
+    Solid.on(
+      [isAnyPending, previousIsAnyPending],
+      ([isAnyPending, previousIsAnyPending]) => {
+        // The router was pending and now it's not
+        if (previousIsAnyPending.previous && !isAnyPending) {
+          router.emit({
+            type: 'onResolved',
+            ...getLocationChangeInfo(router.state),
+          })
+
+          router.__store.setState((s) => ({
+            ...s,
+            status: 'idle',
+            resolvedLocation: s.location,
+          }))
+
+          handleHashScroll(router)
+        }
+      },
+    ),
+  )
+
+  return null
+}

package/src/awaited.tsx

@@ -0,0 +1,40 @@
+import * as Solid from 'solid-js'
+
+import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
+import type { DeferredPromise } from '@tanstack/router-core'
+import type { SolidNode } from './route'
+
+export type AwaitOptions<T> = {
+  promise: Promise<T>
+}
+
+export function useAwaited<T>({
+  promise: _promise,
+}: AwaitOptions<T>): [T, DeferredPromise<T>] {
+  const promise = defer(_promise)
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {
+    throw promise
+  }
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {
+    throw promise[TSR_DEFERRED_PROMISE].error
+  }
+
+  return [promise[TSR_DEFERRED_PROMISE].data, promise]
+}
+
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    fallback?: SolidNode
+    children: (result: T) => SolidNode
+  },
+) {
+  const [resource] = Solid.createResource(() => props.promise)
+
+  return (
+    <Solid.Show fallback={props.fallback} when={resource()}>
+      {(data) => props.children(data())}
+    </Solid.Show>
+  )
+}