@tanstack/router-core 1.132.0-alpha.1 → 1.132.0-alpha.3

package/src/scroll-restoration.ts

@@ -28,7 +28,7 @@ function getSafeSessionStorage() {
       return window.sessionStorage
     }
   } catch {
-    return undefined
+    // silent
   }
   return undefined
 }
@@ -85,14 +85,14 @@ export const defaultGetScrollRestorationKey = (location: ParsedLocation) => {
 
 export function getCssSelector(el: any): string {
   const path = []
-  let parent
+  let parent: HTMLElement
   while ((parent = el.parentNode)) {
-    path.unshift(
-      `${el.tagName}:nth-child(${([].indexOf as any).call(parent.children, el) + 1})`,
+    path.push(
+      `${el.tagName}:nth-child(${Array.prototype.indexOf.call(parent.children, el) + 1})`,
     )
     el = parent
   }
-  return `${path.join(' > ')}`.toLowerCase()
+  return `${path.reverse().join(' > ')}`.toLowerCase()
 }
 
 let ignoreScroll = false
@@ -120,7 +120,7 @@ export function restoreScroll({
 
   try {
     byKey = JSON.parse(sessionStorage.getItem(storageKey) || '{}')
-  } catch (error: any) {
+  } catch (error) {
     console.error(error)
     return
   }
@@ -132,7 +132,7 @@ export function restoreScroll({
   ignoreScroll = true
 
   //
-  ;(() => {
+  scroll: {
     // If we have a cached entry for this location state,
     // we always need to prefer that over the hash scroll.
     if (
@@ -157,18 +157,18 @@ export function restoreScroll({
         }
       }
 
-      return
+      break scroll
     }
 
     // If we don't have a cached entry for the hash,
     // Which means we've never seen this location before,
     // we need to check if there is a hash in the URL.
     // If there is, we need to scroll it's ID into view.
-    const hash = (location ?? window.location).hash.split('#')[1]
+    const hash = (location ?? window.location).hash.split('#', 2)[1]
 
     if (hash) {
       const hashScrollIntoViewOptions =
-        (window.history.state || {}).__hashScrollIntoViewOptions ?? true
+        window.history.state?.__hashScrollIntoViewOptions ?? true
 
       if (hashScrollIntoViewOptions) {
         const el = document.getElementById(hash)
@@ -177,30 +177,24 @@ export function restoreScroll({
         }
       }
 
-      return
+      break scroll
     }
 
     // If there is no cached entry for the hash and there is no hash in the URL,
     // we need to scroll to the top of the page for every scrollToTop element
-    ;[
-      'window',
-      ...(scrollToTopSelectors?.filter((d) => d !== 'window') ?? []),
-    ].forEach((selector) => {
-      const element =
-        selector === 'window'
-          ? window
-          : typeof selector === 'function'
+    const scrollOptions = { top: 0, left: 0, behavior }
+    window.scrollTo(scrollOptions)
+    if (scrollToTopSelectors) {
+      for (const selector of scrollToTopSelectors) {
+        if (selector === 'window') continue
+        const element =
+          typeof selector === 'function'
             ? selector()
             : document.querySelector(selector)
-      if (element) {
-        element.scrollTo({
-          top: 0,
-          left: 0,
-          behavior,
-        })
+        if (element) element.scrollTo(scrollOptions)
       }
-    })
-  })()
+    }
+  }
 
   //
   ignoreScroll = false
@@ -294,11 +288,10 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
     const restoreKey = getKey(router.state.location)
 
     scrollRestorationCache.set((state) => {
-      const keyEntry = (state[restoreKey] =
-        state[restoreKey] || ({} as ScrollRestorationByElement))
+      const keyEntry = (state[restoreKey] ||= {} as ScrollRestorationByElement)
 
-      const elementEntry = (keyEntry[elementSelector] =
-        keyEntry[elementSelector] || ({} as ScrollRestorationEntry))
+      const elementEntry = (keyEntry[elementSelector] ||=
+        {} as ScrollRestorationEntry)
 
       if (elementSelector === 'window') {
         elementEntry.scrollX = window.scrollX || 0
@@ -344,7 +337,7 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
     if (router.isScrollRestoring) {
       // Mark the location as having been seen
       scrollRestorationCache.set((state) => {
-        state[cacheKey] = state[cacheKey] || ({} as ScrollRestorationByElement)
+        state[cacheKey] ||= {} as ScrollRestorationByElement
 
         return state
       })

package/src/searchParams.ts

@@ -9,7 +9,7 @@ export const defaultStringifySearch = stringifySearchWith(
 
 export function parseSearchWith(parser: (str: string) => any) {
   return (searchStr: string): AnySchema => {
-    if (searchStr.substring(0, 1) === '?') {
+    if (searchStr[0] === '?') {
       searchStr = searchStr.substring(1)
     }
 
@@ -21,8 +21,8 @@ export function parseSearchWith(parser: (str: string) => any) {
       if (typeof value === 'string') {
         try {
           query[key] = parser(value)
-        } catch (err) {
-          //
+        } catch (_err) {
+          // silent
         }
       }
     }
@@ -35,20 +35,21 @@ export function stringifySearchWith(
   stringify: (search: any) => string,
   parser?: (str: string) => any,
 ) {
+  const hasParser = typeof parser === 'function'
   function stringifyValue(val: any) {
     if (typeof val === 'object' && val !== null) {
       try {
         return stringify(val)
-      } catch (err) {
+      } catch (_err) {
         // silent
       }
-    } else if (typeof val === 'string' && typeof parser === 'function') {
+    } else if (hasParser && typeof val === 'string') {
       try {
         // Check if it's a valid parseable string.
         // If it is, then stringify it again.
         parser(val)
         return stringify(val)
-      } catch (err) {
+      } catch (_err) {
         // silent
       }
     }
@@ -56,19 +57,7 @@ export function stringifySearchWith(
   }
 
   return (search: Record<string, any>) => {
-    search = { ...search }
-
-    Object.keys(search).forEach((key) => {
-      const val = search[key]
-      if (typeof val === 'undefined' || val === undefined) {
-        delete search[key]
-      } else {
-        search[key] = stringifyValue(val)
-      }
-    })
-
-    const searchStr = encode(search as Record<string, string>).toString()
-
+    const searchStr = encode(search, stringifyValue)
     return searchStr ? `?${searchStr}` : ''
   }
 }

package/src/ssr/constants.ts

@@ -0,0 +1 @@
+export const GLOBAL_TSR = '$_TSR'

package/src/ssr/{seroval-plugins.ts → serializer/ShallowErrorPlugin.ts}

@@ -1,7 +1,7 @@
 import { createPlugin } from 'seroval'
 import type { SerovalNode } from 'seroval'
 
-interface ErrorNode {
+export interface ErrorNode {
   message: SerovalNode
 }
 
@@ -13,7 +13,7 @@ export const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<
   Error,
   ErrorNode
 >({
-  tag: 'tanstack-start:seroval-plugins/Error',
+  tag: '$TSR/Error',
   test(value) {
     return value instanceof Error
   },

package/src/ssr/serializer/seroval-plugins.ts

@@ -0,0 +1,9 @@
+import { ReadableStreamPlugin } from 'seroval-plugins/web'
+import { ShallowErrorPlugin } from './ShallowErrorPlugin'
+import type { Plugin } from 'seroval'
+
+export const defaultSerovalPlugins = [
+  ShallowErrorPlugin as Plugin<Error, any>,
+  // ReadableStreamNode is not exported by seroval
+  ReadableStreamPlugin as Plugin<ReadableStream, any>,
+]

package/src/ssr/serializer/transformer.ts

@@ -0,0 +1,78 @@
+import { createPlugin } from 'seroval'
+import { GLOBAL_TSR } from '../constants'
+import type { SerovalNode } from 'seroval'
+
+export type Transformer<TInput, TTransformed> = {
+  key: string
+  test: (value: any) => value is TInput
+  toSerializable: (value: TInput) => TTransformed
+  fromSerializable: (value: TTransformed) => TInput
+}
+
+export type AnyTransformer = Transformer<any, any>
+
+export function createSerializationAdapter<
+  TKey extends string,
+  TInput,
+  TTransformed /* we need to check that this type is actually serializable taking into account all seroval native types and any custom plugin WE=router/start add!!! */,
+>(opts: {
+  key: TKey
+  test: (value: any) => value is TInput
+  toSerializable: (value: TInput) => TTransformed
+  fromSerializable: (value: TTransformed) => TInput
+}): Transformer<TInput, TTransformed> {
+  return opts
+}
+
+export function makeSsrSerovalPlugin<TInput, TTransformed>(
+  transformer: Transformer<TInput, TTransformed>,
+  options: { didRun: boolean },
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + transformer.key,
+    test: transformer.test,
+    parse: {
+      stream(value, ctx) {
+        return ctx.parse(transformer.toSerializable(value))
+      },
+    },
+    serialize(node, ctx) {
+      options.didRun = true
+      return (
+        GLOBAL_TSR +
+        '.t.get("' +
+        transformer.key +
+        '")(' +
+        ctx.serialize(node) +
+        ')'
+      )
+    },
+    // we never deserialize on the server during SSR
+    deserialize: undefined as never,
+  })
+}
+
+export function makeSerovalPlugin<TInput, TTransformed>(
+  transformer: Transformer<TInput, TTransformed>,
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + transformer.key,
+    test: transformer.test,
+    parse: {
+      sync(value, ctx) {
+        return ctx.parse(transformer.toSerializable(value))
+      },
+      async async(value, ctx) {
+        return await ctx.parse(transformer.toSerializable(value))
+      },
+      stream(value, ctx) {
+        return ctx.parse(transformer.toSerializable(value))
+      },
+    },
+    // we don't generate JS code outside of SSR (for now)
+    serialize: undefined as never,
+    deserialize(node, ctx) {
+      return transformer.fromSerializable(ctx.deserialize(node) as TTransformed)
+    },
+  })
+}

package/src/ssr/ssr-client.ts

@@ -5,7 +5,8 @@ import type { AnyRouteMatch, MakeRouteMatch } from '../Matches'
 import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
 import type { RouteContextOptions } from '../route'
-import type { GLOBAL_TSR } from './ssr-server'
+import type { AnyTransformer } from './serializer/transformer'
+import type { GLOBAL_TSR } from './constants'
 
 declare global {
   interface Window {
@@ -15,22 +16,28 @@ declare global {
 
 export interface TsrSsrGlobal {
   router?: DehydratedRouter
-  // clean scripts, shortened since this is sent for each streamed script
+  // clean scripts; shortened since this is sent for each streamed script
   c: () => void
+  // push script into buffer; shortened since this is sent for each streamed script as soon as the first custom transformer was invoked
+  p: (script: () => void) => void
+  buffer: Array<() => void>
+  // custom transformers, shortened since this is sent for each streamed value that needs a custom transformer
+  t?: Map<string, (value: any) => any>
+  // this flag indicates whether the transformers were initialized
+  initialized?: boolean
 }
 
 function hydrateMatch(
+  match: AnyRouteMatch,
   deyhydratedMatch: DehydratedMatch,
-): Partial<MakeRouteMatch> {
-  return {
-    id: deyhydratedMatch.i,
-    __beforeLoadContext: deyhydratedMatch.b,
-    loaderData: deyhydratedMatch.l,
-    status: deyhydratedMatch.s,
-    ssr: deyhydratedMatch.ssr,
-    updatedAt: deyhydratedMatch.u,
-    error: deyhydratedMatch.e,
-  }
+): void {
+  match.id = deyhydratedMatch.i
+  match.__beforeLoadContext = deyhydratedMatch.b
+  match.loaderData = deyhydratedMatch.l
+  match.status = deyhydratedMatch.s
+  match.ssr = deyhydratedMatch.ssr
+  match.updatedAt = deyhydratedMatch.u
+  match.error = deyhydratedMatch.e
 }
 export interface DehydratedMatch {
   i: MakeRouteMatch['id']
@@ -51,7 +58,26 @@ export interface DehydratedRouter {
 
 export async function hydrate(router: AnyRouter): Promise<any> {
   invariant(
-    window.$_TSR?.router,
+    window.$_TSR,
+    'Expected to find bootstrap data on window.$_TSR, but we did not. Please file an issue!',
+  )
+
+  const serializationAdapters = router.options.serializationAdapters as
+    | Array<AnyTransformer>
+    | undefined
+
+  if (serializationAdapters?.length) {
+    const fromSerializableMap = new Map()
+    serializationAdapters.forEach((adapter) => {
+      fromSerializableMap.set(adapter.key, adapter.fromSerializable)
+    })
+    window.$_TSR.t = fromSerializableMap
+    window.$_TSR.buffer.forEach((script) => script())
+  }
+  window.$_TSR.initialized = true
+
+  invariant(
+    window.$_TSR.router,
     'Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',
   )
 
@@ -80,17 +106,19 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       route.options.pendingMinMs ?? router.options.defaultPendingMinMs
     if (pendingMinMs) {
       const minPendingPromise = createControlledPromise<void>()
-      match.minPendingPromise = minPendingPromise
+      match._nonReactive.minPendingPromise = minPendingPromise
       match._forcePending = true
 
       setTimeout(() => {
         minPendingPromise.resolve()
         // We've handled the minPendingPromise, so we can delete it
-        router.updateMatch(match.id, (prev) => ({
-          ...prev,
-          minPendingPromise: undefined,
-          _forcePending: undefined,
-        }))
+        router.updateMatch(match.id, (prev) => {
+          prev._nonReactive.minPendingPromise = undefined
+          return {
+            ...prev,
+            _forcePending: undefined,
+          }
+        })
       }, pendingMinMs)
     }
   }
@@ -103,17 +131,14 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       (d) => d.i === match.id,
     )
     if (!dehydratedMatch) {
-      Object.assign(match, { dehydrated: false, ssr: false })
+      match._nonReactive.dehydrated = false
+      match.ssr = false
       return
     }
 
-    Object.assign(match, hydrateMatch(dehydratedMatch))
+    hydrateMatch(match, dehydratedMatch)
 
-    if (match.ssr === false) {
-      match._dehydrated = false
-    } else {
-      match._dehydrated = true
-    }
+    match._nonReactive.dehydrated = match.ssr !== false
 
     if (match.ssr === 'data-only' || match.ssr === false) {
       if (firstNonSsrMatchIndex === undefined) {
@@ -141,24 +166,27 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       const route = router.looseRoutesById[match.routeId]!
 
       const parentMatch = router.state.matches[match.index - 1]
-      const parentContext = parentMatch?.context ?? router.options.context ?? {}
+      const parentContext = parentMatch?.context ?? router.options.context
 
       // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
       // so run it again and merge route context
-      const contextFnContext: RouteContextOptions<any, any, any, any> = {
-        deps: match.loaderDeps,
-        params: match.params,
-        context: parentContext,
-        location: router.state.location,
-        navigate: (opts: any) =>
-          router.navigate({ ...opts, _fromLocation: router.state.location }),
-        buildLocation: router.buildLocation,
-        cause: match.cause,
-        abortController: match.abortController,
-        preload: false,
-        matches,
+      if (route.options.context) {
+        const contextFnContext: RouteContextOptions<any, any, any, any> = {
+          deps: match.loaderDeps,
+          params: match.params,
+          context: parentContext ?? {},
+          location: router.state.location,
+          navigate: (opts: any) =>
+            router.navigate({ ...opts, _fromLocation: router.state.location }),
+          buildLocation: router.buildLocation,
+          cause: match.cause,
+          abortController: match.abortController,
+          preload: false,
+          matches,
+        }
+        match.__routeContext =
+          route.options.context(contextFnContext) ?? undefined
       }
-      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
 
       match.context = {
         ...parentContext,
@@ -186,11 +214,11 @@ export async function hydrate(router: AnyRouter): Promise<any> {
 
   const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId
   const hasSsrFalseMatches = matches.some((m) => m.ssr === false)
-  // all matches have data from the server   and we are not in SPA mode so we don't need to kick of router.load()
+  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()
   if (!hasSsrFalseMatches && !isSpaMode) {
     matches.forEach((match) => {
-      // remove the _dehydrate flag since we won't run router.load() which would remove it
-      match._dehydrated = undefined
+      // remove the dehydrated flag since we won't run router.load() which would remove it
+      match._nonReactive.dehydrated = undefined
     })
     return routeChunkPromise
   }
@@ -213,7 +241,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     setMatchForcePending(match)
 
     match._displayPending = true
-    match.displayPendingPromise = loadPromise
+    match._nonReactive.displayPendingPromise = loadPromise
 
     loadPromise.then(() => {
       batch(() => {

package/src/ssr/ssr-server.ts

@@ -1,14 +1,16 @@
 import { crossSerializeStream, getCrossReferenceHeader } from 'seroval'
-import { ReadableStreamPlugin } from 'seroval-plugins/web'
 import invariant from 'tiny-invariant'
 import { createControlledPromise } from '../utils'
 import minifiedTsrBootStrapScript from './tsrScript?script-string'
-import { ShallowErrorPlugin } from './seroval-plugins'
+import { GLOBAL_TSR } from './constants'
+import { defaultSerovalPlugins } from './serializer/seroval-plugins'
+import { makeSsrSerovalPlugin } from './serializer/transformer'
 import type { AnyRouter } from '../router'
 import type { DehydratedMatch } from './ssr-client'
 import type { DehydratedRouter } from './client'
 import type { AnyRouteMatch } from '../Matches'
 import type { Manifest } from '../manifest'
+import type { AnyTransformer } from './serializer/transformer'
 
 declare module '../router' {
   interface ServerSsr {
@@ -22,7 +24,6 @@ declare module '../router' {
   }
 }
 
-export const GLOBAL_TSR = '$_TSR'
 const SCOPE_ID = 'tsr'
 
 export function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {
@@ -54,8 +55,6 @@ export function attachRouterServerSsrUtils(
   router.ssr = {
     manifest,
   }
-  const serializationRefs = new Map<unknown, number>()
-
   let initialScriptSent = false
   const getInitialScript = () => {
     if (initialScriptSent) {
@@ -82,7 +81,7 @@ export function attachRouterServerSsrUtils(
     injectScript: (getScript) => {
       return router.serverSsr!.injectHtml(async () => {
         const script = await getScript()
-        return `<script class='$tsr'>${getInitialScript()}${script};if (typeof $_TSR !== 'undefined') $_TSR.c()</script>`
+        return `<script class='$tsr'>${getInitialScript()}${script};$_TSR.c()</script>`
       })
     },
     dehydrate: async () => {
@@ -106,12 +105,21 @@ export function attachRouterServerSsrUtils(
       _dehydrated = true
 
       const p = createControlledPromise<string>()
+      const trackPlugins = { didRun: false }
+      const plugins =
+        (
+          router.options.serializationAdapters as
+            | Array<AnyTransformer>
+            | undefined
+        )?.map((t) => makeSsrSerovalPlugin(t, trackPlugins)) ?? []
       crossSerializeStream(dehydratedRouter, {
-        refs: serializationRefs,
-        // TODO make plugins configurable
-        plugins: [ReadableStreamPlugin, ShallowErrorPlugin],
+        refs: new Map(),
+        plugins: [...plugins, ...defaultSerovalPlugins],
         onSerialize: (data, initial) => {
-          const serialized = initial ? `${GLOBAL_TSR}["router"]=` + data : data
+          let serialized = initial ? GLOBAL_TSR + '.router=' + data : data
+          if (trackPlugins.didRun) {
+            serialized = GLOBAL_TSR + '.p(()=>' + serialized + ')'
+          }
           router.serverSsr!.injectScript(() => serialized)
         },
         scopeId: SCOPE_ID,

package/src/ssr/tsrScript.ts

@@ -1,7 +1,11 @@
 self.$_TSR = {
-  c: () => {
+  c() {
     document.querySelectorAll('.\\$tsr').forEach((o) => {
       o.remove()
     })
   },
+  p(script) {
+    !this.initialized ? this.buffer.push(script) : script()
+  },
+  buffer: [],
 }

package/src/typePrimitives.ts

@@ -36,7 +36,7 @@ export type ValidateParams<
 > = PathParamOptions<TRouter, TFrom, TTo>
 
 /**
- * @internal
+ * @private
  */
 export type InferFrom<
   TOptions,
@@ -48,7 +48,7 @@ export type InferFrom<
   : TDefaultFrom
 
 /**
- * @internal
+ * @private
  */
 export type InferTo<TOptions> = TOptions extends {
   to: infer TTo extends string
@@ -57,7 +57,7 @@ export type InferTo<TOptions> = TOptions extends {
   : undefined
 
 /**
- * @internal
+ * @private
  */
 export type InferMaskTo<TOptions> = TOptions extends {
   mask: { to: infer TTo extends string }
@@ -131,7 +131,7 @@ export type ValidateId<
 > = ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>
 
 /**
- * @internal
+ * @private
  */
 export type InferStrict<TOptions> = TOptions extends {
   strict: infer TStrict extends boolean
@@ -140,7 +140,7 @@ export type InferStrict<TOptions> = TOptions extends {
   : true
 
 /**
- * @internal
+ * @private
  */
 export type InferShouldThrow<TOptions> = TOptions extends {
   shouldThrow: infer TShouldThrow extends boolean
@@ -149,7 +149,7 @@ export type InferShouldThrow<TOptions> = TOptions extends {
   : true
 
 /**
- * @internal
+ * @private
  */
 export type InferSelected<TOptions> = TOptions extends {
   select: (...args: Array<any>) => infer TSelected

package/src/utils.ts

@@ -203,16 +203,6 @@ export function functionalUpdate<TPrevious, TResult = TPrevious>(
   return updater
 }
 
-export function pick<TValue, TKey extends keyof TValue>(
-  parent: TValue,
-  keys: Array<TKey>,
-): Pick<TValue, TKey> {
-  return keys.reduce((obj: any, key: TKey) => {
-    obj[key] = parent[key]
-    return obj
-  }, {} as any)
-}
-
 /**
  * This function returns `prev` if `_next` is deeply equal.
  * If not, it will replace any deeply equal children of `b` with those of `a`.
@@ -432,3 +422,24 @@ export function isModuleNotFoundError(error: any): boolean {
     error.message.startsWith('Importing a module script failed')
   )
 }
+
+export function isPromise<T>(
+  value: Promise<Awaited<T>> | T,
+): value is Promise<Awaited<T>> {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      typeof (value as Promise<T>).then === 'function',
+  )
+}
+
+export function findLast<T>(
+  array: ReadonlyArray<T>,
+  predicate: (item: T) => boolean,
+): T | undefined {
+  for (let i = array.length - 1; i >= 0; i--) {
+    const item = array[i]!
+    if (predicate(item)) return item
+  }
+  return undefined
+}