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

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,215 @@
+import { createPlugin } from 'seroval'
+import { GLOBAL_TSR } from '../constants'
+import type { Plugin, SerovalNode } from 'seroval'
+import type { Register, SSROption } from '../../router'
+import type { LooseReturnType } from '../../utils'
+import type { AnyRoute, ResolveAllSSR } from '../../route'
+
+export type Serializable =
+  | number
+  | string
+  | boolean
+  | null
+  | undefined
+  | bigint
+  | Date
+
+export function createSerializationAdapter<
+  TInput = unknown,
+  TOutput = unknown /* 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: CreateSerializationAdapterOptions<TInput, TOutput>,
+): SerializationAdapter<TInput, TOutput> {
+  return opts as unknown as SerializationAdapter<TInput, TOutput>
+}
+
+export interface CreateSerializationAdapterOptions<TInput, TOutput> {
+  key: string
+  test: (value: unknown) => value is TInput
+  toSerializable: (value: TInput) => ValidateSerializable<TOutput, Serializable>
+  fromSerializable: (value: TOutput) => TInput
+}
+
+export type ValidateSerializable<T, TSerializable> = T extends TSerializable
+  ? T
+  : T extends (...args: Array<any>) => any
+    ? 'Function is not serializable'
+    : T extends Promise<any>
+      ? ValidateSerializablePromise<T, TSerializable>
+      : T extends ReadableStream<any>
+        ? ValidateReadableStream<T, TSerializable>
+        : T extends Set<any>
+          ? ValidateSerializableSet<T, TSerializable>
+          : T extends Map<any, any>
+            ? ValidateSerializableMap<T, TSerializable>
+            : {
+                [K in keyof T]: ValidateSerializable<T[K], TSerializable>
+              }
+
+export type ValidateSerializablePromise<T, TSerializable> =
+  T extends Promise<infer TAwaited>
+    ? Promise<ValidateSerializable<TAwaited, TSerializable>>
+    : never
+
+export type ValidateReadableStream<T, TSerializable> =
+  T extends ReadableStream<infer TStreamed>
+    ? ReadableStream<ValidateSerializable<TStreamed, TSerializable>>
+    : never
+
+export type ValidateSerializableSet<T, TSerializable> =
+  T extends Set<infer TItem>
+    ? Set<ValidateSerializable<TItem, TSerializable>>
+    : never
+
+export type ValidateSerializableMap<T, TSerializable> =
+  T extends Map<infer TKey, infer TValue>
+    ? Map<
+        ValidateSerializable<TKey, TSerializable>,
+        ValidateSerializable<TValue, TSerializable>
+      >
+    : never
+
+export type RegisteredReadableStream =
+  unknown extends SerializerExtensions['ReadableStream']
+    ? never
+    : SerializerExtensions['ReadableStream']
+
+export interface DefaultSerializerExtensions {
+  ReadableStream: unknown
+}
+
+export interface SerializerExtensions extends DefaultSerializerExtensions {}
+
+export interface SerializationAdapter<TInput, TOutput> {
+  '~types': SerializationAdapterTypes<TInput, TOutput>
+  key: string
+  test: (value: unknown) => value is TInput
+  toSerializable: (value: TInput) => TOutput
+  fromSerializable: (value: TOutput) => TInput
+  makePlugin: (options: { didRun: boolean }) => Plugin<TInput, SerovalNode>
+}
+
+export interface SerializationAdapterTypes<TInput, TOutput> {
+  input: TInput
+  output: TOutput
+}
+
+export type AnySerializationAdapter = SerializationAdapter<any, any>
+
+export function makeSsrSerovalPlugin<TInput, TOutput>(
+  serializationAdapter: SerializationAdapter<TInput, TOutput>,
+  options: { didRun: boolean },
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + serializationAdapter.key,
+    test: serializationAdapter.test,
+    parse: {
+      stream(value, ctx) {
+        return ctx.parse(serializationAdapter.toSerializable(value))
+      },
+    },
+    serialize(node, ctx) {
+      options.didRun = true
+      return (
+        GLOBAL_TSR +
+        '.t.get("' +
+        serializationAdapter.key +
+        '")(' +
+        ctx.serialize(node) +
+        ')'
+      )
+    },
+    // we never deserialize on the server during SSR
+    deserialize: undefined as never,
+  })
+}
+
+export function makeSerovalPlugin<TInput, TOutput>(
+  serializationAdapter: SerializationAdapter<TInput, TOutput>,
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + serializationAdapter.key,
+    test: serializationAdapter.test,
+    parse: {
+      sync(value, ctx) {
+        return ctx.parse(serializationAdapter.toSerializable(value))
+      },
+      async async(value, ctx) {
+        return await ctx.parse(serializationAdapter.toSerializable(value))
+      },
+      stream(value, ctx) {
+        return ctx.parse(serializationAdapter.toSerializable(value))
+      },
+    },
+    // we don't generate JS code outside of SSR (for now)
+    serialize: undefined as never,
+    deserialize(node, ctx) {
+      return serializationAdapter.fromSerializable(
+        ctx.deserialize(node) as TOutput,
+      )
+    },
+  })
+}
+
+export type ValidateSerializableInput<
+  TRegister extends Register,
+  T,
+> = ValidateSerializable<T, RegisteredSerializableInput<TRegister>>
+
+export type RegisteredSerializableInput<TRegister extends Register> =
+  | (unknown extends RegisteredSerializationAdapters<TRegister>
+      ? never
+      : RegisteredSerializationAdapters<TRegister> extends ReadonlyArray<AnySerializationAdapter>
+        ? RegisteredSerializationAdapters<TRegister>[number]['~types']['input']
+        : never)
+  | Serializable
+
+export type RegisteredSerializationAdapters<TRegister extends Register> =
+  TRegister['config']['~types']['serializationAdapters']
+
+export type ValidateSerializableInputResult<
+  TRegister extends Register,
+  T,
+> = ValidateSerializableResult<T, RegisteredSerializableInput<TRegister>>
+
+export type ValidateSerializableResult<T, TSerializable> =
+  T extends TSerializable
+    ? T
+    : unknown extends SerializerExtensions['ReadableStream']
+      ? { [K in keyof T]: ValidateSerializableResult<T[K], TSerializable> }
+      : T extends SerializerExtensions['ReadableStream']
+        ? ReadableStream
+        : { [K in keyof T]: ValidateSerializableResult<T[K], TSerializable> }
+
+export type RegisteredSSROption<TRegister extends Register> =
+  unknown extends TRegister['config']['~types']['defaultSsr']
+    ? SSROption
+    : TRegister['config']['~types']['defaultSsr']
+
+export type ValidateSerializableLifecycleResult<
+  TRegister extends Register,
+  TParentRoute extends AnyRoute,
+  TSSR,
+  TFn,
+> = false extends TRegister['ssr']
+  ? any
+  : ValidateSerializableLifecycleResultSSR<
+        TRegister,
+        TParentRoute,
+        TSSR,
+        TFn
+      > extends infer TInput
+    ? TInput
+    : never
+
+export type ValidateSerializableLifecycleResultSSR<
+  TRegister extends Register,
+  TParentRoute extends AnyRoute,
+  TSSR,
+  TFn,
+> =
+  ResolveAllSSR<TParentRoute, TSSR> extends false
+    ? any
+    : RegisteredSSROption<TRegister> extends false
+      ? any
+      : ValidateSerializableInput<TRegister, LooseReturnType<TFn>>

package/src/ssr/server.ts

@@ -8,3 +8,9 @@ export {
   transformReadableStreamWithRouter,
 } from './transformStreamWithRouter'
 export { attachRouterServerSsrUtils } from './ssr-server'
+
+declare module '../router' {
+  export interface Register {
+    ssr: true
+  }
+}