@tanstack/router-core 0.0.1-alpha.1 → 0.0.1-alpha.10

package/src/searchParams.ts

@@ -0,0 +1,54 @@
+import { decode, encode } from './qss'
+import { AnySearchSchema } from './routeConfig'
+
+export const defaultParseSearch = parseSearchWith(JSON.parse)
+export const defaultStringifySearch = stringifySearchWith(JSON.stringify)
+
+export function parseSearchWith(parser: (str: string) => any) {
+  return (searchStr: string): AnySearchSchema => {
+    if (searchStr.substring(0, 1) === '?') {
+      searchStr = searchStr.substring(1)
+    }
+
+    let query: Record<string, unknown> = decode(searchStr)
+
+    // Try to parse any query params that might be json
+    for (let key in query) {
+      const value = query[key]
+      if (typeof value === 'string') {
+        try {
+          query[key] = parser(value)
+        } catch (err) {
+          //
+        }
+      }
+    }
+
+    return query
+  }
+}
+
+export function stringifySearchWith(stringify: (search: any) => string) {
+  return (search: Record<string, any>) => {
+    search = { ...search }
+
+    if (search) {
+      Object.keys(search).forEach((key) => {
+        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
+          }
+        }
+      })
+    }
+
+    const searchStr = encode(search as Record<string, string>).toString()
+
+    return searchStr ? `?${searchStr}` : ''
+  }
+}

package/src/utils.ts

@@ -0,0 +1,157 @@
+export type NoInfer<T> = [T][T extends any ? 0 : never]
+export type IsAny<T, Y, N> = 1 extends 0 & T ? Y : N
+export type IsAnyBoolean<T> = 1 extends 0 & T ? true : false
+export type IsKnown<T, Y, N> = unknown extends T ? N : Y
+export type PickAsRequired<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<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<{
+  [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]
+}
+
+export type Expand<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: O[K] }
+    : never
+  : T
+
+// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+//   k: infer I,
+// ) => any
+//   ? I
+//   : never
+
+export type Values<O> = O[ValueKeys<O>]
+export type ValueKeys<O> = Extract<keyof O, PropertyKey>
+
+export type DeepAwaited<T> = T extends Promise<infer A>
+  ? DeepAwaited<A>
+  : T extends Record<infer A, Promise<infer B>>
+  ? { [K in A]: DeepAwaited<B> }
+  : T
+
+export type PathParamMask<TRoutePath extends string> =
+  TRoutePath extends `${infer L}/:${infer C}/${infer R}`
+    ? PathParamMask<`${L}/${string}/${R}`>
+    : TRoutePath extends `${infer L}/:${infer C}`
+    ? PathParamMask<`${L}/${string}`>
+    : TRoutePath
+
+export type Timeout = ReturnType<typeof setTimeout>
+
+export type Updater<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]
+}
+
+export type PickExclude<T, U> = {
+  [K in keyof T as T[K] extends U ? never : K]: T[K]
+}
+
+/**
+ * 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.
+ */
+export function replaceEqualDeep(prev: any, next: any) {
+  if (prev === next) {
+    return prev
+  }
+
+  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 copy: any = array ? [] : {}
+
+    let equalItems = 0
+
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i]
+      copy[key] = replaceEqualDeep(prev[key], next[key])
+      if (copy[key] === prev[key]) {
+        equalItems++
+      }
+    }
+
+    return aSize === bSize && equalItems === aSize ? 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 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 {}
+  }
+
+  return true
+}
+
+function isFunction(d: any): d is Function {
+  return typeof d === 'function'
+}
+
+export function functionalUpdate<TResult>(
+  updater: Updater<TResult>,
+  previous: TResult,
+) {
+  if (isFunction(updater)) {
+    return updater(previous as TResult)
+  }
+
+  return updater
+}

package/src/createRoutes.test.ts

@@ -1,328 +0,0 @@
-import { Route } from '@tanstack/router-core'
-import { z } from 'zod'
-import {
-  createRouter,
-  AllRouteInfo,
-  createRouteConfig,
-  RelativeToPathAutoComplete,
-} from '.'
-
-// Write a test
-describe('everything', () => {
-  it('should work', () => {
-    // Build our routes. We could do this in our component, too.
-    const routeConfig = createRouteConfig().addChildren((createRoute) => [
-      createRoute({
-        path: '/',
-        validateSearch: (search) =>
-          z
-            .object({
-              version: z.number(),
-            })
-            .parse(search),
-      }),
-      createRoute({
-        path: '/test',
-        validateSearch: (search) =>
-          z
-            .object({
-              version: z.number(),
-              isGood: z.boolean(),
-            })
-            .parse(search),
-      }),
-      createRoute({
-        path: 'dashboard',
-        loader: async () => {
-          console.log('Fetching all invoices...')
-          return {
-            invoices: 'await fetchInvoices()',
-          }
-        },
-      }).addChildren((createRoute) => [
-        createRoute({ path: '/' }),
-        createRoute({
-          path: 'invoices',
-        }).addChildren((createRoute) => [
-          createRoute({
-            path: '/',
-            action: async (partialInvoice: { amount: number }) => {
-              const invoice: { id: number; amount: number } = null!
-              // // Redirect to the new invoice
-              // ctx.router.navigate({
-              //   to: invoice.id,
-              //   // Use the current match for relative paths
-              //   from: ctx.match.pathname,
-              // })
-              return invoice
-            },
-          }),
-          createRoute({
-            path: ':invoiceId',
-            parseParams: ({ invoiceId }) => ({ invoiceId: Number(invoiceId) }),
-            stringifyParams: ({ invoiceId }) => ({
-              invoiceId: String(invoiceId),
-            }),
-            loader: async ({ params: { invoiceId } }) => {
-              console.log('Fetching invoice...')
-              return {
-                invoice: 'await fetchInvoiceById(invoiceId!)',
-              }
-            },
-          }),
-        ]),
-        createRoute({
-          path: 'users',
-          loader: async () => {
-            return {
-              users: 'await fetchUsers()',
-            }
-          },
-          validateSearch: (search) =>
-            z
-              .object({
-                usersView: z
-                  .object({
-                    sortBy: z.enum(['name', 'id', 'email']).optional(),
-                    filterBy: z.string().optional(),
-                  })
-                  .optional(),
-              })
-              .parse(search),
-          preSearchFilters: [
-            // Keep the usersView search param around
-            // while in this route (or it's children!)
-            (search) => ({
-              ...search,
-              usersView: {
-                ...search.usersView,
-              },
-            }),
-          ],
-        }).addChildren((createRoute) => [
-          createRoute({
-            path: ':userId',
-            loader: async ({ params: { userId }, search }) => {
-              return {
-                user: 'await fetchUserById(userId!)',
-              }
-            },
-            action: async (partialUser: { amount: number }) => {
-              const invoice: { id: number; amount: number } = null!
-              // // Redirect to the new invoice
-              // ctx.router.navigate({
-              //   to: invoice.id,
-              //   // Use the current match for relative paths
-              //   from: ctx.match.pathname,
-              // })
-              return invoice
-            },
-          }),
-        ]),
-      ]),
-      // Obviously, you can put routes in other files, too
-      // reallyExpensiveRoute,
-      createRoute({
-        path: 'authenticated/', // Trailing slash doesn't mean anything
-      }).addChildren((createRoute) => [
-        createRoute({
-          path: '/',
-        }),
-      ]),
-    ])
-
-    type MyRoutesInfo = AllRouteInfo<typeof routeConfig>
-    //   ^?
-    type RouteInfo = MyRoutesInfo['routeInfo']
-    type RoutesById = MyRoutesInfo['routeInfoById']
-    type RoutesTest = Route<
-      MyRoutesInfo,
-      MyRoutesInfo['routeInfoByFullPath']['/']
-    >
-    //   ^?
-    type RoutePaths = MyRoutesInfo['routeInfoByFullPath']
-    //   ^?
-    type InvoiceRouteInfo = RoutesById['/dashboard/invoices/']
-    //   ^?
-    type InvoiceLoaderData = InvoiceRouteInfo['loaderData']
-    //   ^?//
-    type InvoiceAction = InvoiceRouteInfo['actionPayload']
-    //   ^?
-
-    const router = createRouter({
-      routeConfig,
-    })
-
-    const loaderData = router.getRoute('/dashboard/users/:userId')
-    //    ^?
-    const route = router.getRoute('/dashboard/users/:userId')
-    //    ^?
-    const action = route.action
-    //    ^?
-    const result = action.submit({ amount: 10000 })
-    //    ^?
-
-    router.buildLink({
-      to: '/dashboard/users/:userId',
-      params: {
-        userId: '2',
-      },
-      search: (prev) => ({
-        usersView: {
-          sortBy: 'email',
-        },
-      }),
-    })
-
-    // @ts-expect-error
-    router.buildLink({
-      from: '/',
-      to: '/test',
-    })
-
-    router.buildLink({
-      from: '/',
-      to: '/test',
-      search: () => {
-        return {
-          version: 2,
-          isGood: true,
-        }
-      },
-    })
-
-    router.buildLink({
-      from: '/test',
-      to: '/',
-    })
-
-    route.buildLink({
-      to: '',
-    })
-
-    router.getRoute('/dashboard').buildLink({
-      to: '/dashboard/invoices',
-      params: {
-        // @ts-expect-error
-        invoiceId: 2,
-      },
-    })
-
-    router.getRoute('/dashboard').buildLink({
-      to: '/dashboard/invoices/:invoiceId',
-      params: {
-        // @ts-expect-error
-        invoiceId: '2',
-      },
-    })
-
-    router.getRoute('/').buildLink({
-      to: '/dashboard/invoices/:invoiceId',
-      params: {
-        invoiceId: 2,
-      },
-    })
-
-    router.getRoute('/').buildLink({
-      to: '/',
-      search: {
-        version: 2,
-      },
-    })
-
-    router.getRoute('/').buildLink({
-      to: '/dashboard/users/:userId',
-      params: (current) => ({
-        userId:
-          // @ts-expect-error
-          current?.invoiceId,
-      }),
-      search: (old) => ({
-        usersView: {
-          sortBy: 'email' as const,
-          filterBy: String(old.version),
-        },
-      }),
-    })
-
-    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-      to: '/dashboard/users/:userId',
-      params: (current) => ({
-        userId: `${current?.invoiceId}`,
-      }),
-      search: (prev) => {
-        return {
-          usersView: {
-            sortBy: 'name' as const,
-            filterBy: 'tanner',
-          },
-        }
-      },
-    })
-
-    router.getRoute('/dashboard/users/:userId').buildLink({
-      to: '/',
-      search: (prev) => {
-        return {
-          version: 2,
-        }
-      },
-    })
-
-    router.buildLink({
-      from: '/',
-      to: '/dashboard/users/:userId',
-      params: {
-        userId: '2',
-      },
-      search: (prev) => ({
-        usersView: {
-          sortBy: 'id',
-          filterBy: `${prev.version}`,
-        },
-      }),
-    })
-
-    router.getRoute('/').navigate({
-      // to: '.',
-      // TODO: What the heck? Why is any required here?
-      search: (prev: any) => ({
-        version: prev.version,
-      }),
-    })
-
-    router.buildLink({
-      from: '/dashboard/invoices',
-      to: '/dashboard',
-    })
-
-    router.getRoute('/').buildLink({
-      to: '/dashboard/invoices/:invoiceId',
-      params: {
-        invoiceId: 2,
-      },
-    })
-
-    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-      to: '.',
-      params: (d) => ({
-        invoiceId: d.invoiceId,
-      }),
-    })
-
-    type test = RelativeToPathAutoComplete<
-      //   ^?
-      MyRoutesInfo['fullPath'],
-      '/dashboard/invoices',
-      '..'
-    >
-
-    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-      to: '../test',
-      search: {
-        version: 2,
-        isGood: true,
-      },
-    })
-  })
-})