@tanstack/router-core 1.132.0-alpha.2 → 1.132.0-alpha.4

package/src/scroll-restoration.ts

@@ -28,7 +28,7 @@ function getSafeSessionStorage() {
       return window.sessionStorage
     }
   } catch {
-    return undefined
+    // silent
   }
   return undefined
 }
@@ -47,10 +47,10 @@ const throttle = (fn: (...args: Array<any>) => void, wait: number) => {
   }
 }
 
-function createScrollRestorationCache(): ScrollRestorationCache | undefined {
+function createScrollRestorationCache(): ScrollRestorationCache | null {
   const safeSessionStorage = getSafeSessionStorage()
   if (!safeSessionStorage) {
-    return undefined
+    return null
   }
 
   const persistedState = safeSessionStorage.getItem(storageKey)
@@ -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,19 +120,19 @@ export function restoreScroll({
 
   try {
     byKey = JSON.parse(sessionStorage.getItem(storageKey) || '{}')
-  } catch (error: any) {
+  } catch (error) {
     console.error(error)
     return
   }
 
-  const resolvedKey = key || window.history.state?.key
+  const resolvedKey = key || window.history.state?.__TSR_key
   const elementEntries = byKey[resolvedKey]
 
   //
   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,37 +177,31 @@ 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
 }
 
 export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
-  if (scrollRestorationCache === undefined) {
+  if (!scrollRestorationCache && !router.isServer) {
     return
   }
   const shouldScrollRestoration =
@@ -217,7 +211,11 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
     router.isScrollRestoring = true
   }
 
-  if (typeof document === 'undefined' || router.isScrollRestorationSetup) {
+  if (
+    router.isServer ||
+    router.isScrollRestorationSetup ||
+    !scrollRestorationCache
+  ) {
     return
   }
 
@@ -294,11 +292,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
@@ -331,6 +328,14 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
       router.resetNextScroll = true
       return
     }
+    if (typeof router.options.scrollRestoration === 'function') {
+      const shouldRestore = router.options.scrollRestoration({
+        location: router.latestLocation,
+      })
+      if (!shouldRestore) {
+        return
+      }
+    }
 
     restoreScroll({
       storageKey,
@@ -344,7 +349,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,8 +16,15 @@ 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(
@@ -50,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!',
   )
 

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/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`.
@@ -442,3 +432,14 @@ export function isPromise<T>(
       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
+}

package/dist/cjs/ssr/seroval-plugins.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"seroval-plugins.cjs","sources":["../../../src/ssr/seroval-plugins.ts"],"sourcesContent":["import { createPlugin } from 'seroval'\nimport type { SerovalNode } from 'seroval'\n\ninterface ErrorNode {\n  message: SerovalNode\n}\n\n/**\n * this plugin serializes only the `message` part of an Error\n * this helps with serializing e.g. a ZodError which has functions attached that cannot be serialized\n */\nexport const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<\n  Error,\n  ErrorNode\n>({\n  tag: 'tanstack-start:seroval-plugins/Error',\n  test(value) {\n    return value instanceof Error\n  },\n  parse: {\n    sync(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n    async async(value, ctx) {\n      return {\n        message: await ctx.parse(value.message),\n      }\n    },\n    stream(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n  },\n  serialize(node, ctx) {\n    return 'new Error(' + ctx.serialize(node.message) + ')'\n  },\n  deserialize(node, ctx) {\n    return new Error(ctx.deserialize(node.message) as string)\n  },\n})\n"],"names":["createPlugin"],"mappings":";;;AAWO,MAAM,qBAAqCA,wBAAAA,aAGhD;AAAA,EACA,KAAK;AAAA,EACL,KAAK,OAAO;AACV,WAAO,iBAAiB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,IACL,KAAK,OAAO,KAAK;AACf,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,IACA,MAAM,MAAM,OAAO,KAAK;AACtB,aAAO;AAAA,QACL,SAAS,MAAM,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAE1C;AAAA,IACA,OAAO,OAAO,KAAK;AACjB,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,EAAA;AAAA,EAEF,UAAU,MAAM,KAAK;AACnB,WAAO,eAAe,IAAI,UAAU,KAAK,OAAO,IAAI;AAAA,EACtD;AAAA,EACA,YAAY,MAAM,KAAK;AACrB,WAAO,IAAI,MAAM,IAAI,YAAY,KAAK,OAAO,CAAW;AAAA,EAC1D;AACF,CAAC;;"}

package/dist/esm/ssr/seroval-plugins.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"seroval-plugins.js","sources":["../../../src/ssr/seroval-plugins.ts"],"sourcesContent":["import { createPlugin } from 'seroval'\nimport type { SerovalNode } from 'seroval'\n\ninterface ErrorNode {\n  message: SerovalNode\n}\n\n/**\n * this plugin serializes only the `message` part of an Error\n * this helps with serializing e.g. a ZodError which has functions attached that cannot be serialized\n */\nexport const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<\n  Error,\n  ErrorNode\n>({\n  tag: 'tanstack-start:seroval-plugins/Error',\n  test(value) {\n    return value instanceof Error\n  },\n  parse: {\n    sync(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n    async async(value, ctx) {\n      return {\n        message: await ctx.parse(value.message),\n      }\n    },\n    stream(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n  },\n  serialize(node, ctx) {\n    return 'new Error(' + ctx.serialize(node.message) + ')'\n  },\n  deserialize(node, ctx) {\n    return new Error(ctx.deserialize(node.message) as string)\n  },\n})\n"],"names":[],"mappings":";AAWO,MAAM,qBAAqC,6BAGhD;AAAA,EACA,KAAK;AAAA,EACL,KAAK,OAAO;AACV,WAAO,iBAAiB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,IACL,KAAK,OAAO,KAAK;AACf,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,IACA,MAAM,MAAM,OAAO,KAAK;AACtB,aAAO;AAAA,QACL,SAAS,MAAM,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAE1C;AAAA,IACA,OAAO,OAAO,KAAK;AACjB,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,EAAA;AAAA,EAEF,UAAU,MAAM,KAAK;AACnB,WAAO,eAAe,IAAI,UAAU,KAAK,OAAO,IAAI;AAAA,EACtD;AAAA,EACA,YAAY,MAAM,KAAK;AACrB,WAAO,IAAI,MAAM,IAAI,YAAY,KAAK,OAAO,CAAW;AAAA,EAC1D;AACF,CAAC;"}