@tanstack/router-core 0.0.1-beta.45 → 0.0.1-beta.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.45",
+  "version": "0.0.1-beta.49",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@solidjs/reactivity": "^0.0.6",
-    "history": "^5.2.0",
+    "@solidjs/reactivity": "^0.0.7",
+    "immer": "^9.0.15",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {

package/src/actions.ts

@@ -0,0 +1,157 @@
+// createRouterAction is a constrained identify function that takes options: key, action, onSuccess, onError, onSettled, etc
+
+import invariant from 'tiny-invariant'
+import { batch, createStore, Store } from './store'
+
+export interface ActionOptions<
+  TKey extends string = string,
+  TPayload = unknown,
+  TResponse = unknown,
+  TError = Error,
+> {
+  key?: TKey
+  action: (payload: TPayload) => TResponse | Promise<TResponse>
+  onLatestSuccess?: ActionCallback<TPayload, TResponse, TError>
+  onEachSuccess?: ActionCallback<TPayload, TResponse, TError>
+  onLatestError?: ActionCallback<TPayload, TResponse, TError>
+  onEachError?: ActionCallback<TPayload, TResponse, TError>
+  onLatestSettled?: ActionCallback<TPayload, TResponse, TError>
+  onEachSettled?: ActionCallback<TPayload, TResponse, TError>
+  maxSubmissions?: number
+  debug?: boolean
+}
+
+type ActionCallback<TPayload, TResponse, TError> = (
+  submission: ActionSubmission<TPayload, TResponse, TError>,
+) => void | Promise<void>
+
+export interface Action<
+  TKey extends string = string,
+  TPayload = unknown,
+  TResponse = unknown,
+  TError = Error,
+> {
+  options: ActionOptions<TKey, TPayload, TResponse, TError>
+  submit: (payload?: TPayload) => Promise<TResponse>
+  reset: () => void
+  store: Store<ActionStore<TPayload, TResponse, TError>>
+}
+
+export interface ActionStore<
+  TPayload = unknown,
+  TResponse = unknown,
+  TError = Error,
+> {
+  submissions: ActionSubmission<TPayload, TResponse, TError>[]
+}
+
+export type ActionFn<TActionPayload = unknown, TActionResponse = unknown> = (
+  submission: TActionPayload,
+) => TActionResponse | Promise<TActionResponse>
+
+export interface ActionSubmission<
+  TPayload = unknown,
+  TResponse = unknown,
+  TError = Error,
+> {
+  submittedAt: number
+  status: 'idle' | 'pending' | 'success' | 'error'
+  payload: TPayload
+  response?: TResponse
+  error?: TError
+  isInvalid?: boolean
+  invalidate: () => void
+  getIsLatest: () => boolean
+}
+
+export function createAction<TKey extends string, TPayload, TResponse, TError>(
+  options: ActionOptions<TKey, TPayload, TResponse, TError>,
+): Action<TKey, TPayload, TResponse, TError> {
+  const store = createStore<ActionStore<TPayload, TResponse, TError>>(
+    {
+      submissions: [],
+    },
+    options.debug,
+  )
+
+  return {
+    options,
+    store,
+    reset: () => {
+      store.setState((s) => {
+        s.submissions = []
+      })
+    },
+    submit: async (payload) => {
+      const submission: ActionSubmission<TPayload, TResponse, TError> = {
+        submittedAt: Date.now(),
+        status: 'pending',
+        payload: payload as TPayload,
+        invalidate: () => {
+          setSubmission((s) => {
+            s.isInvalid = true
+          })
+        },
+        getIsLatest: () =>
+          store.state.submissions[store.state.submissions.length - 1]
+            ?.submittedAt === submission.submittedAt,
+      }
+
+      const setSubmission = (
+        updater: (
+          submission: ActionSubmission<TPayload, TResponse, TError>,
+        ) => void,
+      ) => {
+        store.setState((s) => {
+          const a = s.submissions.find(
+            (d) => d.submittedAt === submission.submittedAt,
+          )
+
+          invariant(a, 'Could not find submission in store')
+
+          updater(a)
+        })
+      }
+
+      store.setState((s) => {
+        s.submissions.push(submission)
+        s.submissions.reverse()
+        s.submissions = s.submissions.slice(0, options.maxSubmissions ?? 10)
+        s.submissions.reverse()
+      })
+
+      const after = async () => {
+        options.onEachSettled?.(submission)
+        if (submission.getIsLatest())
+          await options.onLatestSettled?.(submission)
+      }
+
+      try {
+        const res = await options.action?.(submission.payload)
+        setSubmission((s) => {
+          s.response = res
+        })
+        await options.onEachSuccess?.(submission)
+        if (submission.getIsLatest())
+          await options.onLatestSuccess?.(submission)
+        await after()
+        setSubmission((s) => {
+          s.status = 'success'
+        })
+        return res
+      } catch (err: any) {
+        console.error(err)
+        setSubmission((s) => {
+          s.error = err
+        })
+        await options.onEachError?.(submission)
+        if (submission.getIsLatest()) await options.onLatestError?.(submission)
+        await after()
+        setSubmission((s) => {
+          s.status = 'error'
+        })
+        throw err
+      }
+    },
+  }
+}

package/src/history.ts

@@ -0,0 +1,199 @@
+// While the public API was clearly inspired by the "history" npm package,
+// This implementation attempts to be more lightweight by
+// making assumptions about the way TanStack Router works
+
+export interface RouterHistory {
+  location: RouterLocation
+  listen: (cb: () => void) => () => void
+  push: (path: string, state: any) => void
+  replace: (path: string, state: any) => void
+  go: (index: number) => void
+  back: () => void
+  forward: () => void
+}
+
+export interface ParsedPath {
+  href: string
+  pathname: string
+  search: string
+  hash: string
+}
+
+export interface RouterLocation extends ParsedPath {
+  state: any
+}
+
+const popStateEvent = 'popstate'
+
+function createHistory(opts: {
+  getLocation: () => RouterLocation
+  listener: (onUpdate: () => void) => () => void
+  pushState: (path: string, state: any) => void
+  replaceState: (path: string, state: any) => void
+  go: (n: number) => void
+  back: () => void
+  forward: () => void
+}): RouterHistory {
+  let currentLocation = opts.getLocation()
+  let unsub = () => {}
+  let listeners = new Set<() => void>()
+
+  const onUpdate = () => {
+    currentLocation = opts.getLocation()
+
+    listeners.forEach((listener) => listener())
+  }
+
+  return {
+    get location() {
+      return currentLocation
+    },
+    listen: (cb: () => void) => {
+      if (listeners.size === 0) {
+        unsub = opts.listener(onUpdate)
+      }
+      listeners.add(cb)
+
+      return () => {
+        listeners.delete(cb)
+        if (listeners.size === 0) {
+          unsub()
+        }
+      }
+    },
+    push: (path: string, state: any) => {
+      opts.pushState(path, state)
+      onUpdate()
+    },
+    replace: (path: string, state: any) => {
+      opts.replaceState(path, state)
+      onUpdate()
+    },
+    go: (index) => {
+      opts.go(index)
+      onUpdate()
+    },
+    back: () => {
+      opts.back()
+      onUpdate()
+    },
+    forward: () => {
+      opts.forward()
+      onUpdate()
+    },
+  }
+}
+
+export function createBrowserHistory(opts?: {
+  getHref?: () => string
+  createHref?: (path: string) => string
+}): RouterHistory {
+  const getHref =
+    opts?.getHref ??
+    (() =>
+      `${window.location.pathname}${window.location.hash}${window.location.search}`)
+  const createHref = opts?.createHref ?? ((path) => path)
+  const getLocation = () => parseLocation(getHref(), history.state)
+
+  return createHistory({
+    getLocation,
+    listener: (onUpdate) => {
+      window.addEventListener(popStateEvent, onUpdate)
+      return () => {
+        window.removeEventListener(popStateEvent, onUpdate)
+      }
+    },
+    pushState: (path, state) => {
+      window.history.pushState(
+        { ...state, key: createRandomKey() },
+        '',
+        createHref(path),
+      )
+    },
+    replaceState: (path, state) => {
+      window.history.replaceState(
+        { ...state, key: createRandomKey() },
+        '',
+        createHref(path),
+      )
+    },
+    back: () => window.history.back(),
+    forward: () => window.history.forward(),
+    go: (n) => window.history.go(n),
+  })
+}
+
+export function createHashHistory(): RouterHistory {
+  return createBrowserHistory({
+    getHref: () => window.location.hash.substring(1),
+    createHref: (path) => `#${path}`,
+  })
+}
+
+export function createMemoryHistory(
+  opts: {
+    initialEntries: string[]
+    initialIndex?: number
+  } = {
+    initialEntries: ['/'],
+  },
+): RouterHistory {
+  const entries = opts.initialEntries
+  let index = opts.initialIndex ?? entries.length - 1
+  let currentState = {}
+
+  const getLocation = () => parseLocation(entries[index]!, currentState)
+
+  return createHistory({
+    getLocation,
+    listener: (onUpdate) => {
+      window.addEventListener(popStateEvent, onUpdate)
+      // We might need to handle the hashchange event in the future
+      // window.addEventListener(hashChangeEvent, onUpdate)
+      return () => {
+        window.removeEventListener(popStateEvent, onUpdate)
+      }
+    },
+    pushState: (path, state) => {
+      currentState = {
+        ...state,
+        key: createRandomKey(),
+      }
+      entries.push(path)
+      index++
+    },
+    replaceState: (path, state) => {
+      currentState = {
+        ...state,
+        key: createRandomKey(),
+      }
+      entries[index] = path
+    },
+    back: () => {
+      index--
+    },
+    forward: () => {
+      index = Math.min(index + 1, entries.length - 1)
+    },
+    go: (n) => window.history.go(n),
+  })
+}
+
+function parseLocation(href: string, state: any): RouterLocation {
+  let hashIndex = href.indexOf('#')
+  let searchIndex = href.indexOf('?')
+  const pathEnd = Math.min(hashIndex, searchIndex)
+
+  return {
+    href,
+    pathname: pathEnd > -1 ? href.substring(0, pathEnd) : href,
+    hash: hashIndex > -1 ? href.substring(hashIndex, searchIndex) : '',
+    search: searchIndex > -1 ? href.substring(searchIndex) : '',
+    state,
+  }
+}
+
+// Thanks co-pilot!
+function createRandomKey() {
+  return (Math.random() + 1).toString(36).substring(7)
+}

package/src/index.ts

@@ -1,10 +1,5 @@
-export {
-  createHashHistory,
-  createBrowserHistory,
-  createMemoryHistory,
-} from 'history'
-
 export { default as invariant } from 'tiny-invariant'
+export * from './history'
 
 export * from './frameworks'
 export * from './link'
@@ -17,4 +12,6 @@ export * from './routeMatch'
 export * from './router'
 export * from './searchParams'
 export * from './utils'
-export * from './sharedClone'
+export * from './interop'
+export * from './actions'
+export * from './store'

package/src/interop.ts

@@ -0,0 +1,169 @@
+// /**
+//  * This function converts a store to an immutable value, which is
+//  * more complex than you think. On first read, (when prev is undefined)
+//  * every value must be recursively touched so tracking is "deep".
+//  * Every object/array structure must also be cloned to
+//  * have a new reference, otherwise it will get mutated by subsequent
+//  * store updates.
+//  *
+//  * In the case that prev is supplied, we have to do deep comparisons
+//  * between prev and next objects/array references and if they are deeply
+//  * equal, we can return the prev version for referential equality.
+//  */
+// export function storeToImmutable<T>(prev: any, next: T): T {
+//   const cache = new Map()
+
+//   // Visit all nodes
+//   // clone all next structures
+//   // from bottom up, if prev === next, return prev
+
+//   function recurse(prev: any, next: any) {
+//     if (cache.has(next)) {
+//       return cache.get(next)
+//     }
+
+//     const prevIsArray = Array.isArray(prev)
+//     const nextIsArray = Array.isArray(next)
+//     const prevIsObj = isPlainObject(prev)
+//     const nextIsObj = isPlainObject(next)
+//     const nextIsComplex = nextIsArray || nextIsObj
+
+//     const isArray = prevIsArray && nextIsArray
+//     const isObj = prevIsObj && nextIsObj
+
+//     const isSameStructure = isArray || isObj
+
+//     if (nextIsComplex) {
+//       const prevSize = isArray
+//         ? prev.length
+//         : isObj
+//         ? Object.keys(prev).length
+//         : -1
+//       const nextKeys = isArray ? next : Object.keys(next)
+//       const nextSize = nextKeys.length
+
+//       let changed = false
+//       const copy: any = nextIsArray ? [] : {}
+
+//       for (let i = 0; i < nextSize; i++) {
+//         const key = isArray ? i : nextKeys[i]
+//         const prevValue = isSameStructure ? prev[key] : undefined
+//         const nextValue = next[key]
+
+//         // Recurse the new value
+//         try {
+//           console.count(key)
+//           copy[key] = recurse(prevValue, nextValue)
+//         } catch {}
+
+//         // If the new value has changed reference,
+//         // mark the obj/array as changed
+//         if (!changed && copy[key] !== prevValue) {
+//           changed = true
+//         }
+//       }
+
+//       // No items have changed!
+//       // If something has changed, return a clone of the next obj/array
+//       if (changed || prevSize !== nextSize) {
+//         cache.set(next, copy)
+//         return copy
+//       }
+
+//       // If they are exactly the same, return the prev obj/array
+//       cache.set(next, prev)
+//       return prev
+//     }
+
+//     cache.set(next, next)
+//     return next
+//   }
+
+//   return recurse(prev, next)
+// }
+
+/**
+ * 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 immutable JSON values for example.
+ * Do not use this with signals
+ */
+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 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 < nextSize; i++) {
+      const key = array ? i : nextItems[i]
+      copy[key] = replaceEqualDeep(prev[key], next[key])
+      if (copy[key] === prev[key]) {
+        equalItems++
+      }
+    }
+
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy
+  }
+
+  return next
+}
+
+// Copied from: https://github.com/jonschlinkert/is-plain-object
+function isPlainObject(o: any) {
+  if (!hasObjectPrototype(o)) {
+    return false
+  }
+
+  // If has modified constructor
+  const ctor = o.constructor
+  if (typeof ctor === 'undefined') {
+    return true
+  }
+
+  // If has modified prototype
+  const prot = ctor.prototype
+  if (!hasObjectPrototype(prot)) {
+    return false
+  }
+
+  // If constructor does not have an Object-specific method
+  if (!prot.hasOwnProperty('isPrototypeOf')) {
+    return false
+  }
+
+  // Most likely a plain Object
+  return true
+}
+
+function hasObjectPrototype(o: any) {
+  return Object.prototype.toString.call(o) === '[object Object]'
+}
+
+export function trackDeep<T>(obj: T): T {
+  const seen = new Set()
+
+  JSON.stringify(obj, (_, value) => {
+    if (typeof value === 'function') {
+      return undefined
+    }
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) return
+      seen.add(value)
+    }
+
+    return value
+  })
+
+  return obj
+}

package/src/link.ts

@@ -3,7 +3,7 @@ import {
   DefaultAllRouteInfo,
   RouteInfoByPath,
 } from './routeInfo'
-import { Location, LocationState } from './router'
+import { ParsedLocation, LocationState } from './router'
 import {
   Expand,
   NoInfer,
@@ -19,7 +19,7 @@ export type LinkInfo =
     }
   | {
       type: 'internal'
-      next: Location
+      next: ParsedLocation
       handleFocus: (e: any) => void
       handleClick: (e: any) => void
       handleEnter: (e: any) => void