@tanstack/solid-router 2.0.0-alpha.9 → 2.0.0-beta.11

package/src/Match.tsx

@@ -1,9 +1,8 @@
 import * as Solid from 'solid-js'
-import invariant from 'tiny-invariant'
-import warning from 'tiny-warning'
 import {
   createControlledPromise,
   getLocationChangeInfo,
+  invariant,
   isNotFound,
   isRedirect,
   rootRouteId,
@@ -12,7 +11,7 @@ import { isServer } from '@tanstack/router-core/isServer'
 import { Dynamic } from '@solidjs/web'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouter } from './useRouter'
-import { CatchNotFound } from './not-found'
+import { CatchNotFound, getNotFound } from './not-found'
 import { nearestMatchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
@@ -140,31 +139,43 @@ export const Match = (props: { matchId: string }) => {
                   errorComponent={routeErrorComponent() || ErrorComponent}
                   onCatch={(error: Error) => {
                     // Forward not found errors (we don't want to show the error component for these)
-                    if (isNotFound(error)) throw error
-                    warning(
-                      false,
-                      `Error in route match: ${currentMatchState().routeId}`,
-                    )
+                    const notFoundError = getNotFound(error)
+                    if (notFoundError) {
+                      notFoundError.routeId ??= currentMatchState()
+                        .routeId as any
+                      throw notFoundError
+                    }
+                    if (process.env.NODE_ENV !== 'production') {
+                      console.warn(
+                        `Warning: Error in route match: ${currentMatchState().routeId}`,
+                      )
+                    }
                     routeOnCatch()?.(error)
                   }}
                 >
                   <Dynamic
                     component={ResolvedNotFoundBoundary()}
                     fallback={(error: any) => {
+                      const notFoundError = getNotFound(error) ?? error
+
+                      notFoundError.routeId ??= currentMatchState()
+                        .routeId as any
+
                       // If the current not found handler doesn't exist or it has a
                       // route ID which doesn't match the current route, rethrow the error
                       if (
                         !routeNotFoundComponent() ||
-                        (error.routeId &&
-                          error.routeId !== currentMatchState().routeId) ||
-                        (!error.routeId && !route().isRoot)
+                        (notFoundError.routeId &&
+                          notFoundError.routeId !==
+                            currentMatchState().routeId) ||
+                        (!notFoundError.routeId && !route().isRoot)
                       )
-                        throw error
+                        throw notFoundError
 
                       return (
                         <Dynamic
                           component={routeNotFoundComponent()}
-                          {...error}
+                          {...notFoundError}
                         />
                       )
                     }}
@@ -192,7 +203,10 @@ export const Match = (props: { matchId: string }) => {
             {currentMatchState().parentRouteId === rootRouteId ? (
               <>
                 <OnRendered />
-                <ScrollRestoration />
+                {router.options.scrollRestoration &&
+                (isServer ?? router.isServer) ? (
+                  <ScrollRestoration />
+                ) : null}
               </>
             ) : null}
           </Dynamic>
@@ -392,7 +406,14 @@ export const MatchInner = (): any => {
             <Solid.Match when={currentMatch().status === 'notFound'}>
               {(_) => {
                 const matchError = Solid.untrack(() => currentMatch().error)
-                invariant(isNotFound(matchError), 'Expected a notFound error')
+                if (!isNotFound(matchError)) {
+                  if (process.env.NODE_ENV !== 'production') {
+                    throw new Error(
+                      'Invariant failed: Expected a notFound error',
+                    )
+                  }
+                  invariant()
+                }
 
                 // Use Show with keyed to ensure re-render when routeId changes
                 return (
@@ -409,7 +430,14 @@ export const MatchInner = (): any => {
             <Solid.Match when={currentMatch().status === 'redirected'}>
               {(_) => {
                 const matchError = Solid.untrack(() => currentMatch().error)
-                invariant(isRedirect(matchError), 'Expected a redirect error')
+                if (!isRedirect(matchError)) {
+                  if (process.env.NODE_ENV !== 'production') {
+                    throw new Error(
+                      'Invariant failed: Expected a redirect error',
+                    )
+                  }
+                  invariant()
+                }
 
                 return null
               }}

package/src/Matches.tsx

@@ -1,5 +1,4 @@
 import * as Solid from 'solid-js'
-import warning from 'tiny-warning'
 import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
@@ -117,11 +116,10 @@ function MatchesInner() {
         onCatch={
           process.env.NODE_ENV !== 'production'
             ? (error) => {
-                warning(
-                  false,
-                  `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+                console.warn(
+                  `Warning: 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())
+                console.warn(`Warning: ${error.message || error.toString()}`)
               }
             : undefined
         }

package/src/ScrollRestoration.tsx

@@ -1,7 +1,5 @@
 import {
-  defaultGetScrollRestorationKey,
-  getCssSelector,
-  scrollRestorationCache,
+  getElementScrollRestorationEntry,
   setupScrollRestoration,
 } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
@@ -47,23 +45,5 @@ export function useElementScrollRestoration(
 ): 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]
+  return getElementScrollRestorationEntry(useRouter(), options)
 }

package/src/fileRoute.ts

@@ -1,4 +1,3 @@
-import warning from 'tiny-warning'
 import { createRoute } from './route'
 
 import { useMatch } from './useMatch'
@@ -140,10 +139,11 @@ export class FileRoute<
     THandlers
   > => {
     if (process.env.NODE_ENV !== 'production') {
-      warning(
-        this.silent,
-        'FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
-      )
+      if (!this.silent) {
+        console.warn(
+          'Warning: FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
+        )
+      }
     }
     const route = createRoute(options as any)
     ;(route as any).isRoot = false
@@ -177,9 +177,8 @@ export function FileRouteLoader<
   >,
 ) => TLoaderFn {
   if (process.env.NODE_ENV !== 'production') {
-    warning(
-      false,
-      `FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
+    console.warn(
+      `Warning: FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
     )
   }
   return (loaderFn) => loaderFn as any

package/src/headContentUtils.tsx

@@ -1,13 +1,20 @@
 import * as Solid from 'solid-js'
-import { escapeHtml } from '@tanstack/router-core'
+import {
+  escapeHtml,
+  getAssetCrossOrigin,
+  resolveManifestAssetLink,
+} from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import type { RouterManagedTag } from '@tanstack/router-core'
+import type {
+  AssetCrossOriginConfig,
+  RouterManagedTag,
+} from '@tanstack/router-core'
 
 /**
  * Build the list of head/link/meta/script tags to render for active matches.
  * Used internally by `HeadContent`.
  */
-export const useTags = () => {
+export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
   const getTagKey = (tag: RouterManagedTag) => JSON.stringify(tag)
@@ -117,7 +124,13 @@ export const useTags = () => {
         (asset) =>
           ({
             tag: 'link',
-            attrs: { ...asset.attrs, nonce },
+            attrs: {
+              ...asset.attrs,
+              crossOrigin:
+                getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
+                asset.attrs?.crossOrigin,
+              nonce,
+            },
           }) satisfies RouterManagedTag,
       )
 
@@ -134,11 +147,15 @@ export const useTags = () => {
         router.ssr?.manifest?.routes[route.id]?.preloads
           ?.filter(Boolean)
           .forEach((preload) => {
+            const preloadLink = resolveManifestAssetLink(preload)
             preloadLinks.push({
               tag: 'link',
               attrs: {
                 rel: 'modulepreload',
-                href: preload,
+                href: preloadLink.href,
+                crossOrigin:
+                  getAssetCrossOrigin(assetCrossOrigin, 'modulepreload') ??
+                  preloadLink.crossOrigin,
                 nonce,
               },
             })

package/src/not-found.tsx

@@ -4,9 +4,25 @@ import { CatchBoundary } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import type { NotFoundError } from '@tanstack/router-core'
 
+// Solid wraps non-Error throws in an Error and stores the original thrown value
+// on `cause`, so component-thrown `notFound()` needs one extra unwrapping step.
+export function getNotFound(
+  error: unknown,
+): (NotFoundError & { isNotFound: true }) | undefined {
+  if (isNotFound(error)) {
+    return error as NotFoundError & { isNotFound: true }
+  }
+
+  if (isNotFound((error as any)?.cause)) {
+    return (error as any).cause as NotFoundError & { isNotFound: true }
+  }
+
+  return undefined
+}
+
 export function CatchNotFound(props: {
   fallback?: (error: NotFoundError) => Solid.JSX.Element
-  onCatch?: (error: Error) => void
+  onCatch?: (error: NotFoundError) => void
   children: Solid.JSX.Element
 }) {
   const router = useRouter()
@@ -18,15 +34,19 @@ export function CatchNotFound(props: {
     <CatchBoundary
       getResetKey={() => `not-found-${pathname()}-${status()}`}
       onCatch={(error) => {
-        if (isNotFound(error)) {
-          props.onCatch?.(error)
+        const notFoundError = getNotFound(error)
+
+        if (notFoundError) {
+          props.onCatch?.(notFoundError)
         } else {
           throw error
         }
       }}
       errorComponent={({ error }) => {
-        if (isNotFound(error)) {
-          return props.fallback?.(error)
+        const notFoundError = getNotFound(error)
+
+        if (notFoundError) {
+          return props.fallback?.(notFoundError)
         } else {
           throw error
         }

package/src/renderRouteNotFound.tsx

@@ -1,4 +1,3 @@
-import warning from 'tiny-warning'
 import { DefaultGlobalNotFound } from './not-found'
 import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
 
@@ -20,11 +19,12 @@ export function renderRouteNotFound(
       return <router.options.defaultNotFoundComponent {...data} />
     }
 
-    if (process.env.NODE_ENV === 'development') {
-      warning(
-        route.options.notFoundComponent,
-        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
-      )
+    if (process.env.NODE_ENV !== 'production') {
+      if (!route.options.notFoundComponent) {
+        console.warn(
+          `Warning: A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
+        )
+      }
     }
 
     return <DefaultGlobalNotFound />

package/src/router.ts

@@ -1,5 +1,4 @@
 import { RouterCore } from '@tanstack/router-core'
-import { createFileRoute, createLazyFileRoute } from './fileRoute'
 import { getStoreFactory } from './routerStores'
 import type { RouterHistory } from '@tanstack/history'
 import type {
@@ -103,11 +102,3 @@ export class Router<
     super(options, getStoreFactory)
   }
 }
-
-if (typeof globalThis !== 'undefined') {
-  ;(globalThis as any).createFileRoute = createFileRoute
-  ;(globalThis as any).createLazyFileRoute = createLazyFileRoute
-} else if (typeof window !== 'undefined') {
-  ;(window as any).createFileRoute = createFileRoute
-  ;(window as any).createLazyFileRoute = createLazyFileRoute
-}

package/src/scroll-restoration.tsx

@@ -1,45 +1,14 @@
-import {
-  defaultGetScrollRestorationKey,
-  escapeHtml,
-  restoreScroll,
-  storageKey,
-} from '@tanstack/router-core'
-import { isServer } from '@tanstack/router-core/isServer'
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script'
 import { useRouter } from './useRouter'
 import { ScriptOnce } from './ScriptOnce'
 
 export function ScrollRestoration() {
   const router = useRouter()
-  if (!router.isScrollRestoring || !(isServer ?? router.isServer)) {
-    return null
-  }
-  if (typeof router.options.scrollRestoration === 'function') {
-    const shouldRestore = router.options.scrollRestoration({
-      location: router.latestLocation,
-    })
-    if (!shouldRestore) {
-      return null
-    }
-  }
-  const getKey =
-    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
-  const userKey = getKey(router.latestLocation)
-  const resolvedKey =
-    userKey !== defaultGetScrollRestorationKey(router.latestLocation)
-      ? userKey
-      : undefined
+  const script = getScrollRestorationScriptForRouter(router)
 
-  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
-    storageKey,
-    shouldScrollRestoration: true,
-  }
-  if (resolvedKey) {
-    restoreScrollOptions.key = resolvedKey
+  if (!script) {
+    return null
   }
 
-  return (
-    <ScriptOnce
-      children={`(${restoreScroll.toString()})(${escapeHtml(JSON.stringify(restoreScrollOptions))})`}
-    />
-  )
+  return <ScriptOnce children={script} />
 }

package/src/useBlocker.tsx

@@ -13,12 +13,12 @@ import type {
   RegisteredRouter,
 } from '@tanstack/router-core'
 
-interface ShouldBlockFnLocation<
+type ShouldBlockFnLocation<
   out TRouteId,
   out TFullPath,
   out TAllParams,
   out TFullSearchSchema,
-> {
+> = {
   routeId: TRouteId
   fullPath: TFullPath
   pathname: string

package/src/useMatch.tsx

@@ -1,6 +1,5 @@
 import * as Solid from 'solid-js'
-import invariant from 'tiny-invariant'
-import { replaceEqualDeep } from '@tanstack/router-core'
+import { invariant, replaceEqualDeep } from '@tanstack/router-core'
 import { nearestMatchContext } from './matchContext'
 import { useRouter } from './useRouter'
 import type {
@@ -100,10 +99,14 @@ export function useMatch<
         : (nearestMatch?.hasPending() ?? false)
       const isTransitioning = router.stores.isTransitioning.state
 
-      invariant(
-        !(!hasPendingMatch && !isTransitioning && (opts.shouldThrow ?? true)),
-        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-      )
+      if (!hasPendingMatch && !isTransitioning && (opts.shouldThrow ?? true)) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error(
+            `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+          )
+        }
+        invariant()
+      }
       return undefined
     }
 

package/src/useRouter.tsx

@@ -1,5 +1,4 @@
 import * as Solid from 'solid-js'
-import warning from 'tiny-warning'
 import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 
@@ -7,9 +6,12 @@ export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
   warn?: boolean
 }): TRouter {
   const value = Solid.useContext(routerContext as any)
-  warning(
-    !((opts?.warn ?? true) && !value),
-    'useRouter must be used inside a <RouterProvider> component!',
-  )
+  if (process.env.NODE_ENV !== 'production') {
+    if ((opts?.warn ?? true) && !value) {
+      console.warn(
+        'Warning: useRouter must be used inside a <RouterProvider> component!',
+      )
+    }
+  }
   return value as any
 }