@tanstack/solid-router 1.108.0

package/src/RouterProvider.tsx

@@ -0,0 +1,130 @@
+import { Matches } from './Matches'
+import { getRouterContext } from './routerContext'
+import type * as Solid from 'solid-js'
+import type { NavigateOptions, ToOptions } from './link'
+import type {
+  ParsedLocation,
+  ViewTransitionOptions,
+} from '@tanstack/router-core'
+import type { RoutePaths } from './routeInfo'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  Router,
+  RouterOptions,
+} from './router'
+
+export interface CommitLocationOptions {
+  replace?: boolean
+  resetScroll?: boolean
+  hashScrollIntoView?: boolean | ScrollIntoViewOptions
+  viewTransition?: boolean | ViewTransitionOptions
+  /**
+   * @deprecated All navigations use Solid transitions under the hood now
+   **/
+  startTransition?: boolean
+  ignoreBlocker?: boolean
+}
+
+export interface MatchLocation {
+  to?: string | number | null
+  fuzzy?: boolean
+  caseSensitive?: boolean
+  from?: string
+}
+
+export type NavigateFn = <
+  TRouter extends RegisteredRouter,
+  TTo extends string | undefined,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
+  TMaskTo extends string = '',
+>(
+  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+) => Promise<void> | void
+
+export type BuildLocationFn = <
+  TRouter extends RegisteredRouter,
+  TTo extends string | undefined,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
+  TMaskTo extends string = '',
+>(
+  opts: ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+    leaveParams?: boolean
+    _includeValidateSearch?: boolean
+  },
+) => ParsedLocation
+
+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']>,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: Router<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    TRouter['history']
+  >
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      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,65 @@
+import { useRouter } from './useRouter'
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from './scroll-restoration'
+import type { ScrollRestorationOptions } from './scroll-restoration'
+import type { ParsedLocation } 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?: () => Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+) {
+  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 = getCssSelector(element)
+  }
+
+  const restoreKey = getKey(router.latestLocation)
+  const byKey = scrollRestorationCache.state[restoreKey]
+  return byKey?.[elementSelector]
+}

package/src/Transitioner.tsx

@@ -0,0 +1,152 @@
+import * as Solid from 'solid-js'
+import { getLocationChangeInfo, 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.startSolidTransition = (fn: () => void) => {
+      setIsTransitioning(true)
+      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,
+          }))
+
+          if (
+            typeof document !== 'undefined' &&
+            (document as any).querySelector
+          ) {
+            const hashScrollIntoViewOptions =
+              router.state.location.state.__hashScrollIntoViewOptions ?? true
+
+            if (
+              hashScrollIntoViewOptions &&
+              router.state.location.hash !== ''
+            ) {
+              const el = document.getElementById(router.state.location.hash)
+              if (el) {
+                el.scrollIntoView(hashScrollIntoViewOptions)
+              }
+            }
+          }
+        }
+      },
+    ),
+  )
+
+  return null
+}

package/src/awaited.tsx

@@ -0,0 +1,49 @@
+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 inner = <AwaitInner {...props} />
+  if (props.fallback) {
+    return <Solid.Suspense fallback={props.fallback}>{inner}</Solid.Suspense>
+  }
+  return inner
+}
+
+function AwaitInner<T>(
+  props: AwaitOptions<T> & {
+    fallback?: SolidNode
+    children: (result: T) => SolidNode
+  },
+): Solid.JSX.Element {
+  const [data] = useAwaited(props)
+
+  return props.children(data)
+}