@tanstack/solid-router 1.121.0-alpha.27 → 1.121.0-alpha.28

package/src/link.tsx

@@ -15,7 +15,7 @@ import { useRouter } from './useRouter'
 
 import { useIntersectionObserver } from './utils'
 
-import { useMatches } from './Matches'
+import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   Constrain,
@@ -62,7 +62,6 @@ export function useLinkProps<
       'startTransition',
       'resetScroll',
       'viewTransition',
-      'children',
       'target',
       'disabled',
       'style',
@@ -113,6 +112,7 @@ export function useLinkProps<
     'state',
     'mask',
     'reloadDocument',
+    'unsafeRelative',
   ])
 
   // If this link simply reloads the current route,
@@ -133,10 +133,11 @@ export function useLinkProps<
     select: (s) => s.location.searchStr,
   })
 
-  // when `from` is not supplied, use the leaf route of the current matches as the `from` location
+  // when `from` is not supplied, use the route of the current match as the `from` location
   // so relative routing works as expected
-  const from = useMatches({
-    select: (matches) => options.from ?? matches[matches.length - 1]?.fullPath,
+  const from = useMatch({
+    strict: false,
+    select: (match) => options.from ?? match.fullPath,
   })
 
   const _options = () => ({
@@ -250,7 +251,6 @@ export function useLinkProps<
         },
       },
       Solid.splitProps(local, [
-        'children',
         'target',
         'disabled',
         'style',
@@ -286,7 +286,7 @@ export function useLinkProps<
 
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
-      return router.navigate({
+      router.navigate({
         ..._options(),
         replace: local.replace,
         resetScroll: local.resetScroll,
@@ -294,7 +294,7 @@ export function useLinkProps<
         startTransition: local.startTransition,
         viewTransition: local.viewTransition,
         ignoreBlocker: local.ignoreBlocker,
-      } as any)
+      })
     }
   }
 
@@ -545,29 +545,37 @@ export interface LinkComponentRoute<
 export function createLink<const TComp>(
   Comp: Constrain<TComp, any, (props: CreateLinkProps) => Solid.JSX.Element>,
 ): LinkComponent<TComp> {
-  return (props) => <Link {...(props as any)} _asChild={Comp} />
+  return (props) => <Link {...props} _asChild={Comp} />
 }
 
-export const Link: LinkComponent<'a'> = (props: any) => {
-  const [local, rest] = Solid.splitProps(props, ['_asChild'])
+export const Link: LinkComponent<'a'> = (props) => {
+  const [local, rest] = Solid.splitProps(
+    props as typeof props & { _asChild: any },
+    ['_asChild', 'children'],
+  )
 
   const [_, linkProps] = Solid.splitProps(
     useLinkProps(rest as unknown as any),
-    ['type', 'children'],
+    ['type'],
   )
 
-  const children = () =>
-    typeof rest.children === 'function'
-      ? rest.children({
-          get isActive() {
-            return (linkProps as any)['data-status'] === 'active'
-          },
-        })
-      : rest.children
+  const children = Solid.createMemo(() => {
+    const ch = local.children
+    if (typeof ch === 'function') {
+      return ch({
+        get isActive() {
+          return (linkProps as any)['data-status'] === 'active'
+        },
+        isTransitioning: false,
+      })
+    }
+
+    return ch satisfies Solid.JSX.Element
+  })
 
   return (
     <Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
-      {children}
+      {children()}
     </Dynamic>
   )
 }

package/src/not-found.tsx

@@ -24,7 +24,7 @@ export function CatchNotFound(props: {
           throw error
         }
       }}
-      errorComponent={({ error }: { error: Error }) => {
+      errorComponent={({ error }) => {
         if (isNotFound(error)) {
           return props.fallback?.(error)
         } else {

package/src/route.tsx

@@ -54,6 +54,14 @@ declare module '@tanstack/router-core' {
     pendingComponent?: RouteComponent
   }
 
+  export interface RootRouteOptionsExtensions {
+    shellComponent?: ({
+      children,
+    }: {
+      children: Solid.JSX.Element
+    }) => Solid.JSX.Element
+  }
+
   export interface RouteExtensions<
     in out TId extends string,
     in out TFullPath extends string,
@@ -480,17 +488,20 @@ export function createRouteMask<
 
 export type SolidNode = Solid.JSX.Element
 
-export type SyncRouteComponent<TProps> = (props: TProps) => Solid.JSX.Element
+export interface DefaultRouteTypes<TProps> {
+  component: (props: TProps) => any
+}
+export interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}
 
-export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+export type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {
   preload?: () => Promise<void>
 }
 
-export type RouteComponent<TProps = any> = AsyncRouteComponent<TProps>
+export type RouteComponent = AsyncRouteComponent<{}>
 
-export type ErrorRouteComponent = RouteComponent<ErrorComponentProps>
+export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>
 
-export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>
+export type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']
 
 export class NotFoundRoute<
   TParentRoute extends AnyRootRoute,

package/src/scroll-restoration.tsx

@@ -14,16 +14,23 @@ export function ScrollRestoration() {
   const resolvedKey =
     userKey !== defaultGetScrollRestorationKey(router.latestLocation)
       ? userKey
-      : null
+      : undefined
 
   if (!router.isScrollRestoring || !router.isServer) {
     return null
   }
 
+  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+    storageKey,
+    shouldScrollRestoration: true,
+  }
+  if (resolvedKey) {
+    restoreScrollOptions.key = resolvedKey
+  }
+
   return (
     <ScriptOnce
-      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
-      log={false}
+      children={`(${restoreScroll.toString()})(${JSON.stringify(restoreScrollOptions)})`}
     />
   )
 }

package/src/ssr/RouterClient.tsx

@@ -0,0 +1,43 @@
+import { hydrate } from '@tanstack/router-core/ssr/client'
+import { Await } from '../awaited'
+import { HeadContent } from '../HeadContent'
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { JSXElement } from 'solid-js'
+
+let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
+
+const Dummy = (props: { children?: JSXElement }) => <>{props.children}</>
+
+export function RouterClient(props: { router: AnyRouter }) {
+  if (!hydrationPromise) {
+    if (!props.router.state.matches.length) {
+      hydrationPromise = hydrate(props.router)
+    } else {
+      hydrationPromise = Promise.resolve()
+    }
+  }
+  return (
+    <Await
+      promise={hydrationPromise}
+      children={() => (
+        <Dummy>
+          <Dummy>
+            <RouterProvider
+              router={props.router}
+              InnerWrap={(props) => (
+                <Dummy>
+                  <Dummy>
+                    <HeadContent />
+                    {props.children}
+                  </Dummy>
+                  <Dummy />
+                </Dummy>
+              )}
+            />
+          </Dummy>
+        </Dummy>
+      )}
+    />
+  )
+}

package/src/ssr/RouterServer.tsx

@@ -0,0 +1,60 @@
+import {
+  Hydration,
+  HydrationScript,
+  NoHydration,
+  ssr,
+  useAssets,
+} from 'solid-js/web'
+import { MetaProvider } from '@solidjs/meta'
+import { Asset } from '../Asset'
+import { useTags } from '../HeadContent'
+import { RouterProvider } from '../RouterProvider'
+import { Scripts } from '../Scripts'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export function ServerHeadContent() {
+  const tags = useTags()
+  useAssets(() => {
+    return (
+      <MetaProvider>
+        {tags().map((tag) => (
+          <Asset {...tag} />
+        ))}
+      </MetaProvider>
+    )
+  })
+  return null
+}
+
+const docType = ssr('<!DOCTYPE html>')
+
+export function RouterServer<TRouter extends AnyRouter>(props: {
+  router: TRouter
+}) {
+  return (
+    <NoHydration>
+      {docType as any}
+      <html>
+        <head>
+          <HydrationScript />
+        </head>
+        <body>
+          <Hydration>
+            <RouterProvider
+              router={props.router}
+              InnerWrap={(props) => (
+                <NoHydration>
+                  <MetaProvider>
+                    <ServerHeadContent />
+                    <Hydration>{props.children}</Hydration>
+                    <Scripts />
+                  </MetaProvider>
+                </NoHydration>
+              )}
+            />
+          </Hydration>
+        </body>
+      </html>
+    </NoHydration>
+  )
+}

package/src/ssr/client.ts

@@ -0,0 +1 @@
+export { RouterClient } from './RouterClient'

package/src/ssr/defaultRenderHandler.tsx

@@ -0,0 +1,12 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { RouterServer } from './RouterServer'
+import { renderRouterToString } from './renderRouterToString'
+
+export const defaultRenderHandler = defineHandlerCallback(
+  ({ router, responseHeaders }) =>
+    renderRouterToString({
+      router,
+      responseHeaders,
+      children: () => <RouterServer router={router} />,
+    }),
+)

package/src/ssr/defaultStreamHandler.tsx

@@ -0,0 +1,13 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { RouterServer } from './RouterServer'
+import { renderRouterToStream } from './renderRouterToStream'
+
+export const defaultStreamHandler = defineHandlerCallback(
+  ({ request, router, responseHeaders }) =>
+    renderRouterToStream({
+      request,
+      router,
+      responseHeaders,
+      children: () => <RouterServer router={router} />,
+    }),
+)

package/src/ssr/renderRouterToStream.tsx

@@ -0,0 +1,36 @@
+import * as Solid from 'solid-js/web'
+import { isbot } from 'isbot'
+import { transformReadableStreamWithRouter } from '@tanstack/router-core/ssr/server'
+import type { JSXElement } from 'solid-js'
+import type { ReadableStream } from 'node:stream/web'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export const renderRouterToStream = async ({
+  request,
+  router,
+  responseHeaders,
+  children,
+}: {
+  request: Request
+  router: AnyRouter
+  responseHeaders: Headers
+  children: () => JSXElement
+}) => {
+  const { writable, readable } = new TransformStream()
+
+  const stream = Solid.renderToStream(children)
+
+  if (isbot(request.headers.get('User-Agent'))) {
+    await stream
+  }
+  stream.pipeTo(writable)
+
+  const responseStream = transformReadableStreamWithRouter(
+    router,
+    readable as unknown as ReadableStream,
+  )
+  return new Response(responseStream as any, {
+    status: router.state.statusCode,
+    headers: responseHeaders,
+  })
+}

package/src/ssr/renderRouterToString.tsx

@@ -0,0 +1,31 @@
+import * as Solid from 'solid-js/web'
+import type { JSXElement } from 'solid-js'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export const renderRouterToString = async ({
+  router,
+  responseHeaders,
+  children,
+}: {
+  router: AnyRouter
+  responseHeaders: Headers
+  children: () => JSXElement
+}) => {
+  try {
+    let html = Solid.renderToString(children)
+    const injectedHtml = await Promise.all(router.serverSsr!.injectedHtml).then(
+      (htmls) => htmls.join(''),
+    )
+    html = html.replace(`</body>`, `${injectedHtml}</body>`)
+    return new Response(html, {
+      status: router.state.statusCode,
+      headers: responseHeaders,
+    })
+  } catch (error) {
+    console.error('Render to string error:', error)
+    return new Response('Internal Server Error', {
+      status: 500,
+      headers: responseHeaders,
+    })
+  }
+}

package/src/ssr/server.ts

@@ -0,0 +1,6 @@
+export { RouterServer } from './RouterServer'
+export { defaultRenderHandler } from './defaultRenderHandler'
+export { defaultStreamHandler } from './defaultStreamHandler'
+export { renderRouterToStream } from './renderRouterToStream'
+export { renderRouterToString } from './renderRouterToString'
+export * from '@tanstack/router-core/ssr/server'

package/src/useBlocker.tsx

@@ -112,20 +112,25 @@ function _resolveBlockerOpts(
     }
   }
 
-  const shouldBlock = Boolean(opts.condition ?? true)
-  const fn = opts.blockerFn
+  const shouldBlock = Solid.createMemo(() => Boolean(opts.condition ?? true))
 
   const _customBlockerFn = async () => {
-    if (shouldBlock && fn !== undefined) {
-      return await fn()
+    if (shouldBlock() && opts.blockerFn !== undefined) {
+      return await opts.blockerFn()
     }
-    return shouldBlock
+    return shouldBlock()
   }
 
   return {
-    shouldBlockFn: _customBlockerFn,
-    enableBeforeUnload: shouldBlock,
-    withResolver: fn === undefined,
+    get shouldBlockFn() {
+      return _customBlockerFn
+    },
+    get enableBeforeUnload() {
+      return shouldBlock()
+    },
+    get withResolver() {
+      return opts.blockerFn === undefined
+    },
   }
 }
 
@@ -155,15 +160,16 @@ export function useBlocker(
   opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
   condition?: boolean | any,
 ): Solid.Accessor<BlockerResolver> | void {
-  const {
-    shouldBlockFn,
-    enableBeforeUnload = true,
-    disabled = false,
-    withResolver = false,
-  } = _resolveBlockerOpts(opts, condition)
+  const props = Solid.mergeProps(
+    {
+      enableBeforeUnload: true,
+      disabled: false,
+      withResolver: false,
+    },
+    _resolveBlockerOpts(opts, condition),
+  )
 
   const router = useRouter()
-  const { history } = router
 
   const [resolver, setResolver] = Solid.createSignal<BlockerResolver>({
     status: 'idle',
@@ -199,12 +205,12 @@ export function useBlocker(
       const current = getLocation(blockerFnArgs.currentLocation)
       const next = getLocation(blockerFnArgs.nextLocation)
 
-      const shouldBlock = await shouldBlockFn({
+      const shouldBlock = await props.shouldBlockFn({
         action: blockerFnArgs.action,
         current,
         next,
       })
-      if (!withResolver) {
+      if (!props.withResolver) {
         return shouldBlock
       }
 
@@ -236,9 +242,14 @@ export function useBlocker(
       return canNavigateAsync
     }
 
-    return disabled
+    const disposeBlock = props.disabled
       ? undefined
-      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })
+      : router.history.block({
+          blockerFn: blockerFnComposed,
+          enableBeforeUnload: props.enableBeforeUnload,
+        })
+
+    Solid.onCleanup(() => disposeBlock?.())
   })
 
   return resolver
@@ -248,23 +259,26 @@ const _resolvePromptBlockerArgs = (
   props: PromptProps | LegacyPromptProps,
 ): UseBlockerOpts => {
   if ('shouldBlockFn' in props) {
-    return { ...props }
+    return props
   }
 
-  const shouldBlock = Boolean(props.condition ?? true)
-  const fn = props.blockerFn
+  const shouldBlock = Solid.createMemo(() => Boolean(props.condition ?? true))
 
   const _customBlockerFn = async () => {
-    if (shouldBlock && fn !== undefined) {
-      return await fn()
+    if (shouldBlock() && props.blockerFn !== undefined) {
+      return await props.blockerFn()
     }
     return shouldBlock
   }
 
   return {
     shouldBlockFn: _customBlockerFn,
-    enableBeforeUnload: shouldBlock,
-    withResolver: fn === undefined,
+    get enableBeforeUnload() {
+      return shouldBlock()
+    },
+    get withResolver() {
+      return props.blockerFn === undefined
+    },
   }
 }
 
@@ -279,15 +293,17 @@ export function Block<
 export function Block(opts: LegacyPromptProps): SolidNode
 
 export function Block(opts: PromptProps | LegacyPromptProps): SolidNode {
-  const { children, ...rest } = opts
+  const [propsWithChildren, rest] = Solid.splitProps(opts, ['children'])
   const args = _resolvePromptBlockerArgs(rest)
 
   const resolver = useBlocker(args)
-  return children
-    ? typeof children === 'function'
-      ? children(resolver as any)
-      : children
-    : null
+  const children = Solid.createMemo(() => {
+    const child = propsWithChildren.children
+    if (resolver && typeof child === 'function') return child(resolver())
+    return child
+  })
+
+  return <>{children()}</>
 }
 
 type LegacyPromptProps = {

package/src/useNavigate.tsx

@@ -1,5 +1,6 @@
 import * as Solid from 'solid-js'
 import { useRouter } from './useRouter'
+import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   FromPathOption,
@@ -14,10 +15,21 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate } = useRouter()
+  const { navigate, state } = useRouter()
+
+  const matchIndex = useMatch({
+    strict: false,
+    select: (match) => match.index,
+  })
 
   return ((options: NavigateOptions) => {
-    return navigate({ from: _defaultOpts?.from as any, ...options })
+    return navigate({
+      ...options,
+      from:
+        options.from ??
+        _defaultOpts?.from ??
+        state.matches[matchIndex()]!.fullPath,
+    })
   }) as UseNavigateResult<TDefaultFrom>
 }