@tanstack/router-core 0.0.1-beta.19 → 0.0.1-beta.190

package/src/scroll-restoration.ts

@@ -0,0 +1,179 @@
+import { AnyRouter, ParsedLocation } from './router'
+
+const windowKey = 'window'
+const delimiter = '___'
+
+let weakScrolledElementsByRestoreKey: Record<string, WeakSet<any>> = {}
+
+type CacheValue = Record<string, { scrollX: number; scrollY: number }>
+
+type Cache = {
+  current: CacheValue
+  set: (key: string, value: any) => void
+}
+
+let cache: Cache
+
+let pathDidChange = false
+
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
+
+export type ScrollRestorationOptions = {
+  getKey?: (location: ParsedLocation) => string
+}
+
+const defaultGetKey = (location: ParsedLocation) => location.state.key!
+
+export function watchScrollPositions(
+  router: AnyRouter,
+  opts?: ScrollRestorationOptions,
+) {
+  const getKey = opts?.getKey || defaultGetKey
+
+  if (sessionsStorage) {
+    if (!cache) {
+      cache = (() => {
+        const storageKey = 'tsr-scroll-restoration-v1'
+
+        const current: CacheValue = JSON.parse(
+          window.sessionStorage.getItem(storageKey) || '{}',
+        )
+
+        return {
+          current,
+          set: (key: string, value: any) => {
+            current[key] = value
+            window.sessionStorage.setItem(storageKey, JSON.stringify(cache))
+          },
+        }
+      })()
+    }
+  }
+
+  const { history } = window
+  if (history.scrollRestoration) {
+    history.scrollRestoration = 'manual'
+  }
+
+  const onScroll = (event: Event) => {
+    const restoreKey = getKey(router.state.resolvedLocation)
+
+    if (!weakScrolledElementsByRestoreKey[restoreKey]) {
+      weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet()
+    }
+
+    const set = weakScrolledElementsByRestoreKey[restoreKey]!
+
+    if (set.has(event.target)) return
+    set.add(event.target)
+
+    const cacheKey = [
+      restoreKey,
+      event.target === document || event.target === window
+        ? windowKey
+        : getCssSelector(event.target),
+    ].join(delimiter)
+
+    if (!cache.current[cacheKey]) {
+      cache.set(cacheKey, {
+        scrollX: NaN,
+        scrollY: NaN,
+      })
+    }
+  }
+
+  const getCssSelector = (el: any): string => {
+    let path = [],
+      parent
+    while ((parent = el.parentNode)) {
+      path.unshift(
+        `${el.tagName}:nth-child(${
+          ([].indexOf as any).call(parent.children, el) + 1
+        })`,
+      )
+      el = parent
+    }
+    return `${path.join(' > ')}`.toLowerCase()
+  }
+
+  const onPathWillChange = (from: ParsedLocation) => {
+    const restoreKey = getKey(from)
+    for (const cacheKey in cache.current) {
+      const entry = cache.current[cacheKey]!
+      const [key, elementSelector] = cacheKey.split(delimiter)
+      if (restoreKey === key) {
+        if (elementSelector === windowKey) {
+          entry.scrollX = window.scrollX || 0
+          entry.scrollY = window.scrollY || 0
+        } else if (elementSelector) {
+          const element = document.querySelector(elementSelector)
+          entry.scrollX = element?.scrollLeft || 0
+          entry.scrollY = element?.scrollTop || 0
+        }
+
+        cache.set(cacheKey, entry)
+      }
+    }
+  }
+
+  const onPathChange = () => {
+    pathDidChange = true
+  }
+
+  if (typeof document !== 'undefined') {
+    document.addEventListener('scroll', onScroll, true)
+  }
+
+  const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', (event) => {
+    if (event.pathChanged) onPathWillChange(event.from)
+  })
+
+  const unsubOnLoad = router.subscribe('onLoad', (event) => {
+    if (event.pathChanged) onPathChange()
+  })
+
+  return () => {
+    document.removeEventListener('scroll', onScroll)
+    unsubOnBeforeLoad()
+    unsubOnLoad()
+  }
+}
+
+export function restoreScrollPositions(
+  router: AnyRouter,
+  opts?: ScrollRestorationOptions,
+) {
+  if (pathDidChange) {
+    if (!router.resetNextScroll) {
+      return
+    }
+
+    const getKey = opts?.getKey || defaultGetKey
+
+    pathDidChange = false
+
+    const restoreKey = getKey(router.state.location)
+    let windowRestored = false
+
+    for (const cacheKey in cache.current) {
+      const entry = cache.current[cacheKey]!
+      const [key, elementSelector] = cacheKey.split(delimiter)
+      if (key === restoreKey) {
+        if (elementSelector === windowKey) {
+          windowRestored = true
+          window.scrollTo(entry.scrollX, entry.scrollY)
+        } else if (elementSelector) {
+          const element = document.querySelector(elementSelector)
+          if (element) {
+            element.scrollLeft = entry.scrollX
+            element.scrollTop = entry.scrollY
+          }
+        }
+      }
+    }
+
+    if (!windowRestored) {
+      window.scrollTo(0, 0)
+    }
+  }
+}

package/src/searchParams.ts

@@ -1,8 +1,11 @@
 import { decode, encode } from './qss'
-import { AnySearchSchema } from './routeConfig'
+import { AnySearchSchema } from './route'
 
 export const defaultParseSearch = parseSearchWith(JSON.parse)
-export const defaultStringifySearch = stringifySearchWith(JSON.stringify)
+export const defaultStringifySearch = stringifySearchWith(
+  JSON.stringify,
+  JSON.parse,
+)
 
 export function parseSearchWith(parser: (str: string) => any) {
   return (searchStr: string): AnySearchSchema => {
@@ -28,7 +31,30 @@ export function parseSearchWith(parser: (str: string) => any) {
   }
 }
 
-export function stringifySearchWith(stringify: (search: any) => string) {
+export function stringifySearchWith(
+  stringify: (search: any) => string,
+  parser?: (str: string) => any,
+) {
+  function stringifyValue(val: any) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val)
+      } catch (err) {
+        // silent
+      }
+    } else if (typeof val === 'string' && typeof parser === 'function') {
+      try {
+        // Check if it's a valid parseable string.
+        // If it is, then stringify it again.
+        parser(val)
+        return stringify(val)
+      } catch (err) {
+        // silent
+      }
+    }
+    return val
+  }
+
   return (search: Record<string, any>) => {
     search = { ...search }
 
@@ -37,12 +63,8 @@ export function stringifySearchWith(stringify: (search: any) => string) {
         const val = search[key]
         if (typeof val === 'undefined' || val === undefined) {
           delete search[key]
-        } else if (val && typeof val === 'object' && val !== null) {
-          try {
-            search[key] = stringify(val)
-          } catch (err) {
-            // silent
-          }
+        } else {
+          search[key] = stringifyValue(val)
         }
       })
     }

package/src/utils.ts

@@ -7,13 +7,14 @@ export type PickAsRequired<T, K extends keyof T> = Omit<T, K> &
 export type PickAsPartial<T, K extends keyof T> = Omit<T, K> &
   Partial<Pick<T, K>>
 export type PickUnsafe<T, K> = K extends keyof T ? Pick<T, K> : never
-export type PickExtra<T, K> = Expand<{
+export type PickExtra<T, K> = {
   [TKey in keyof K as string extends TKey
     ? never
     : TKey extends keyof T
     ? never
     : TKey]: K[TKey]
-}>
+}
+
 export type PickRequired<T> = {
   [K in keyof T as undefined extends T[K] ? never : K]: T[K]
 }
@@ -24,11 +25,27 @@ export type Expand<T> = T extends object
     : never
   : T
 
-// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-//   k: infer I,
-// ) => any
-//   ? I
-//   : never
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => any
+  ? I
+  : never
+
+// type Compute<T> = { [K in keyof T]: T[K] } | never
+
+// type AllKeys<T> = T extends any ? keyof T : never
+
+// export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+//   {
+//     [K in Keys]: T[Keys]
+//   } & {
+//     [K in AllKeys<T>]?: T extends any
+//       ? K extends keyof T
+//         ? T[K]
+//         : never
+//       : never
+//   }
+// >
 
 export type Values<O> = O[ValueKeys<O>]
 export type ValueKeys<O> = Extract<keyof O, PropertyKey>
@@ -40,9 +57,9 @@ export type DeepAwaited<T> = T extends Promise<infer A>
   : T
 
 export type PathParamMask<TRoutePath extends string> =
-  TRoutePath extends `${infer L}/:${infer C}/${infer R}`
+  TRoutePath extends `${infer L}/$${infer C}/${infer R}`
     ? PathParamMask<`${L}/${string}/${R}`>
-    : TRoutePath extends `${infer L}/:${infer C}`
+    : TRoutePath extends `${infer L}/$${infer C}`
     ? PathParamMask<`${L}/${string}`>
     : TRoutePath
 
@@ -52,6 +69,10 @@ export type Updater<TPrevious, TResult = TPrevious> =
   | TResult
   | ((prev?: TPrevious) => TResult)
 
+export type NonNullableUpdater<TPrevious, TResult = TPrevious> =
+  | TResult
+  | ((prev: TPrevious) => TResult)
+
 export type PickExtract<T, U> = {
   [K in keyof T as T[K] extends U ? K : never]: T[K]
 }
@@ -60,42 +81,71 @@ export type PickExclude<T, U> = {
   [K in keyof T as T[K] extends U ? never : K]: T[K]
 }
 
+export function last<T>(arr: T[]) {
+  return arr[arr.length - 1]
+}
+
+function isFunction(d: any): d is Function {
+  return typeof d === 'function'
+}
+
+export function functionalUpdate<TResult>(
+  updater: Updater<TResult> | NonNullableUpdater<TResult>,
+  previous: TResult,
+): TResult {
+  if (isFunction(updater)) {
+    return updater(previous as TResult)
+  }
+
+  return updater
+}
+
+export function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K> {
+  return keys.reduce((obj: any, key: K) => {
+    obj[key] = parent[key]
+    return obj
+  }, {} as any)
+}
+
 /**
  * This function returns `a` if `b` is deeply equal.
  * If not, it will replace any deeply equal children of `b` with those of `a`.
- * This can be used for structural sharing between JSON values for example.
+ * This can be used for structural sharing between immutable JSON values for example.
+ * Do not use this with signals
  */
-export function replaceEqualDeep(prev: any, next: any) {
-  if (prev === next) {
+export function replaceEqualDeep<T>(prev: any, _next: T): T {
+  if (prev === _next) {
     return prev
   }
 
+  const next = _next as any
+
   const array = Array.isArray(prev) && Array.isArray(next)
 
   if (array || (isPlainObject(prev) && isPlainObject(next))) {
-    const aSize = array ? prev.length : Object.keys(prev).length
-    const bItems = array ? next : Object.keys(next)
-    const bSize = bItems.length
+    const prevSize = array ? prev.length : Object.keys(prev).length
+    const nextItems = array ? next : Object.keys(next)
+    const nextSize = nextItems.length
     const copy: any = array ? [] : {}
 
     let equalItems = 0
 
-    for (let i = 0; i < bSize; i++) {
-      const key = array ? i : bItems[i]
+    for (let i = 0; i < nextSize; i++) {
+      const key = array ? i : nextItems[i]
       copy[key] = replaceEqualDeep(prev[key], next[key])
       if (copy[key] === prev[key]) {
         equalItems++
       }
     }
 
-    return aSize === bSize && equalItems === aSize ? prev : copy
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy
   }
 
   return next
 }
 
 // Copied from: https://github.com/jonschlinkert/is-plain-object
-function isPlainObject(o: any) {
+export function isPlainObject(o: any) {
   if (!hasObjectPrototype(o)) {
     return false
   }
@@ -125,40 +175,25 @@ function hasObjectPrototype(o: any) {
   return Object.prototype.toString.call(o) === '[object Object]'
 }
 
-export function last<T>(arr: T[]) {
-  return arr[arr.length - 1]
-}
-
-export function warning(cond: any, message: string): cond is true {
-  if (cond) {
-    if (typeof console !== 'undefined') console.warn(message)
-
-    try {
-      throw new Error(message)
-    } catch {}
+export function partialDeepEqual(a: any, b: any): boolean {
+  if (a === b) {
+    return true
   }
 
-  return true
-}
-
-function isFunction(d: any): d is Function {
-  return typeof d === 'function'
-}
+  if (typeof a !== typeof b) {
+    return false
+  }
 
-export function functionalUpdate<TResult>(
-  updater: Updater<TResult>,
-  previous: TResult,
-) {
-  if (isFunction(updater)) {
-    return updater(previous as TResult)
+  if (isPlainObject(a) && isPlainObject(b)) {
+    return !Object.keys(b).some((key) => !partialDeepEqual(a[key], b[key]))
   }
 
-  return updater
-}
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return (
+      a.length === b.length &&
+      a.every((item, index) => partialDeepEqual(item, b[index]))
+    )
+  }
 
-export function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K> {
-  return keys.reduce((obj: any, key: K) => {
-    obj[key] = parent[key]
-    return obj
-  }, {} as any)
+  return false
 }

package/build/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -1,33 +0,0 @@
-/**
- * router-core
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-exports["extends"] = _extends;
-//# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/node_modules/@babel/runtime/helpers/esm/extends.js

@@ -1,33 +0,0 @@
-/**
- * router-core
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-exports["default"] = _extends;
-//# sourceMappingURL=extends.js.map

package/build/cjs/node_modules/@babel/runtime/helpers/esm/extends.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extends.js","sources":["../../../../../../../../../node_modules/@babel/runtime/helpers/esm/extends.js"],"sourcesContent":["export default function _extends() {\n  _extends = Object.assign ? Object.assign.bind() : function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n  return _extends.apply(this, arguments);\n}"],"names":[],"mappings":";;;;;;;;;;;;;;AAAe,SAAS,QAAQ,GAAG;AACnC,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,MAAM,EAAE;AACtE,IAAI,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC/C,MAAM,IAAI,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAChC;AACA,MAAM,KAAK,IAAI,GAAG,IAAI,MAAM,EAAE;AAC9B,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;AAC/D,UAAU,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AACpC,SAAS;AACT,OAAO;AACP,KAAK;AACL;AACA,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG,CAAC;AACJ,EAAE,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AACzC;;;;"}