@tanstack/react-router 1.20.1 → 1.20.3-alpha.1

package/src/RouterProvider.tsx

@@ -1,90 +1,39 @@
 import * as React from 'react'
 import { Matches } from './Matches'
-import { NavigateOptions, ToOptions } from './link'
-import { ParsedLocation } from './location'
-import { AnyRoute } from './route'
-import { RoutePaths } from './routeInfo'
-import { RegisteredRouter, Router, RouterOptions, RouterState } from './router'
-import { pick, useLayoutEffect } from './utils'
-
-import { RouteMatch } from './Matches'
-import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import { getRouterContext } from './routerContext'
-
-const useTransition =
-  React.useTransition ||
-  (() => [
-    false,
-    (cb) => {
-      cb()
-    },
-  ])
-
-export interface CommitLocationOptions {
-  replace?: boolean
-  resetScroll?: boolean
-  startTransition?: boolean
-}
-
-export interface MatchLocation {
-  to?: string | number | null
-  fuzzy?: boolean
-  caseSensitive?: boolean
-  from?: string
-}
-
-export type NavigateFn = <
-  TTo extends string,
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
->(
-  opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-) => Promise<void>
-
-export type BuildLocationFn<TRouteTree extends AnyRoute> = <
-  TTo extends string,
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
->(
-  opts: ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
-    leaveParams?: boolean
-  },
-) => ParsedLocation
-
-export type InjectedHtmlEntry = string | (() => Promise<string> | string)
-
-export function RouterProvider<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+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, ...rest }: RouterProps<TRouteTree, TDehydrated>) {
-  // Allow the router to update options on the router instance
-  router.update({
-    ...router.options,
-    ...rest,
-    context: {
-      ...router.options.context,
-      ...rest?.context,
-    },
-  } as any)
-
-  const matches = router.options.InnerWrap ? (
-    <router.options.InnerWrap>
-      <Matches />
-    </router.options.InnerWrap>
-  ) : (
-    <Matches />
-  )
+>({
+  router,
+  children,
+  ...rest
+}: RouterProps<TRouter, TDehydrated> & {
+  children: React.ReactNode
+}) {
+  if (Object.keys(rest).length > 0) {
+    // 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}>
-      {matches}
-      <Transitioner />
+    <routerContext.Provider value={router as AnyRouter}>
+      {children}
     </routerContext.Provider>
   )
 
@@ -95,141 +44,38 @@ export function RouterProvider<
   return provider
 }
 
-function Transitioner() {
-  const router = useRouter()
-  const mountLoadForRouter = React.useRef({ router, mounted: false })
-  const routerState = useRouterState({
-    select: (s) =>
-      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
-  })
-
-  const [isTransitioning, startReactTransition] = useTransition()
-
-  router.startReactTransition = startReactTransition
-
-  React.useEffect(() => {
-    if (isTransitioning) {
-      router.__store.setState((s) => ({
-        ...s,
-        isTransitioning,
-      }))
-    }
-  }, [isTransitioning])
-
-  const tryLoad = () => {
-    const apply = (cb: () => void) => {
-      if (!routerState.isTransitioning) {
-        startReactTransition(() => cb())
-      } else {
-        cb()
-      }
-    }
-
-    apply(() => {
-      try {
-        router.load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
-  }
-
-  useLayoutEffect(() => {
-    const unsub = router.history.subscribe(() => {
-      router.latestLocation = router.parseLocation(router.latestLocation)
-      if (router.state.location !== router.latestLocation) {
-        tryLoad()
-      }
-    })
-
-    const nextLocation = router.buildLocation({
-      to: router.latestLocation.pathname,
-      search: true,
-      params: true,
-      hash: true,
-      state: true,
-    })
-
-    if (routerState.location.href !== nextLocation.href) {
-      router.commitLocation({ ...nextLocation, replace: true })
-    }
-
-    return () => {
-      unsub()
-    }
-  }, [router.history])
-
-  useLayoutEffect(() => {
-    if (
-      (React.useTransition as any)
-        ? routerState.isTransitioning && !isTransitioning
-        : true &&
-          !routerState.isLoading &&
-          routerState.resolvedLocation !== routerState.location
-    ) {
-      router.emit({
-        type: 'onResolved',
-        fromLocation: routerState.resolvedLocation,
-        toLocation: routerState.location,
-        pathChanged:
-          routerState.location!.href !== routerState.resolvedLocation?.href,
-      })
-
-      if ((document as any).querySelector) {
-        if (routerState.location.hash !== '') {
-          const el = document.getElementById(
-            routerState.location.hash,
-          ) as HTMLElement | null
-          if (el) {
-            el.scrollIntoView()
-          }
-        }
-      }
-
-      router.__store.setState((s) => ({
-        ...s,
-        isTransitioning: false,
-        resolvedLocation: s.location,
-      }))
-    }
-  }, [
-    routerState.isTransitioning,
-    isTransitioning,
-    routerState.isLoading,
-    routerState.resolvedLocation,
-    routerState.location,
-  ])
-
-  useLayoutEffect(() => {
-    if (
-      window.__TSR_DEHYDRATED__ ||
-      (mountLoadForRouter.current.router === router &&
-        mountLoadForRouter.current.mounted)
-    ) {
-      return
-    }
-    mountLoadForRouter.current = { router, mounted: true }
-    tryLoad()
-  }, [router])
-
-  return null
-}
-
-export function getRouteMatch<TRouteTree extends AnyRoute>(
-  state: RouterState<TRouteTree>,
-  id: string,
-): undefined | RouteMatch<TRouteTree> {
-  return [
-    ...state.cachedMatches,
-    ...(state.pendingMatches ?? []),
-    ...state.matches,
-  ].find((d) => d.id === id)
+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<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouter extends AnyRouter = RegisteredRouter,
   TDehydrated extends Record<string, any> = Record<string, any>,
-> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & {
-  router: Router<TRouteTree>
-  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    NonNullable<TRouter['options']['defaultStructuralSharing']>,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: TRouter
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      NonNullable<TRouter['options']['defaultStructuralSharing']>,
+      TRouter['history'],
+      TDehydrated
+    >['context']
+  >
 }

package/src/SafeFragment.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function SafeFragment(props: any) {
+  return <>{props.children}</>
+}

package/src/ScriptOnce.tsx

@@ -0,0 +1,32 @@
+import jsesc from 'jsesc'
+
+export function ScriptOnce({
+  children,
+  log,
+}: {
+  children: string
+  log?: boolean
+  sync?: boolean
+}) {
+  if (typeof document !== 'undefined') {
+    return null
+  }
+
+  return (
+    <script
+      className="tsr-once"
+      dangerouslySetInnerHTML={{
+        __html: [
+          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
+    },
+    structuralSharing: true as any,
+  })
+
+  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,
+          suppressHydrationWarning: true,
+        },
+        children,
+      })),
+    }),
+    structuralSharing: true as any,
+  })
+
+  const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+      ))}
+    </>
+  )
+}

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,130 @@
+import * as React from 'react'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@tanstack/router-core'
+import { useLayoutEffect, usePrevious } from './utils'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+
+export function Transitioner() {
+  const router = useRouter()
+  const mountLoadForRouter = React.useRef({ router, mounted: false })
+  const isLoading = useRouterState({
+    select: ({ isLoading }) => isLoading,
+  })
+
+  const [isTransitioning, setIsTransitioning] = React.useState(false)
+  // Track pending state changes
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === 'pending'),
+    structuralSharing: true,
+  })
+
+  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 = (fn: () => void) => {
+      setIsTransitioning(true)
+      React.startTransition(() => {
+        fn()
+        setIsTransitioning(false)
+      })
+    }
+  }
+
+  // Subscribe to location changes
+  // and try to load the new location
+  React.useEffect(() => {
+    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 })
+    }
+
+    return () => {
+      unsub()
+    }
+  }, [router, router.history])
+
+  // Try to load the initial location
+  useLayoutEffect(() => {
+    if (
+      (typeof window !== 'undefined' && router.clientSsr) ||
+      (mountLoadForRouter.current.router === router &&
+        mountLoadForRouter.current.mounted)
+    ) {
+      return
+    }
+    mountLoadForRouter.current = { router, mounted: true }
+
+    const tryLoad = async () => {
+      try {
+        await router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    tryLoad()
+  }, [router])
+
+  useLayoutEffect(() => {
+    // The router was loading and now it's not
+    if (previousIsLoading && !isLoading) {
+      router.emit({
+        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [previousIsLoading, router, isLoading])
+
+  useLayoutEffect(() => {
+    // emit onBeforeRouteMount
+    if (previousIsPagePending && !isPagePending) {
+      router.emit({
+        type: 'onBeforeRouteMount',
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [isPagePending, previousIsPagePending, router])
+
+  useLayoutEffect(() => {
+    // The router was pending and now it's not
+    if (previousIsAnyPending && !isAnyPending) {
+      router.emit({
+        type: 'onResolved',
+        ...getLocationChangeInfo(router.state),
+      })
+
+      router.__store.setState((s) => ({
+        ...s,
+        status: 'idle',
+        resolvedLocation: s.location,
+      }))
+
+      handleHashScroll(router)
+    }
+  }, [isAnyPending, previousIsAnyPending, router])
+
+  return null
+}