@tanstack/router-core 0.0.1-beta.35 → 0.0.1-beta.39

package/package.json

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

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './routeMatch'
 export * from './router'
 export * from './searchParams'
 export * from './utils'
+export * from './sharedClone'

package/src/link.ts

@@ -1,4 +1,3 @@
-import { AnyPathParams } from './routeConfig'
 import {
   AnyAllRouteInfo,
   DefaultAllRouteInfo,
@@ -112,11 +111,20 @@ export type RelativeToPathAutoComplete<
     ]
     ? `${TTo}${Join<RestPath>}`
     : never
-  : './' | '../' | AllPaths
+  :
+      | (TFrom extends `/`
+          ? never
+          : SplitPaths extends [...Split<TFrom, false>, ...infer RestPath]
+          ? Join<RestPath> extends { length: 0 }
+            ? never
+            : './'
+          : never)
+      | (TFrom extends `/` ? never : '../')
+      | AllPaths
 
-export type NavigateOptionsAbsolute<
+export type NavigateOptions<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TFrom extends TAllRouteInfo['routePaths'] = '/',
   TTo extends string = '.',
 > = ToOptions<TAllRouteInfo, TFrom, TTo> & {
   // Whether to replace the current history stack instead of pushing a new one
@@ -125,7 +133,7 @@ export type NavigateOptionsAbsolute<
 
 export type ToOptions<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TFrom extends TAllRouteInfo['routePaths'] = '/',
   TTo extends string = '.',
   TResolvedTo = ResolveRelativePath<TFrom, NoInfer<TTo>>,
 > = {
@@ -142,7 +150,7 @@ export type ToOptions<
   SearchParamOptions<TAllRouteInfo, TFrom, TResolvedTo> &
   PathParamOptions<TAllRouteInfo, TFrom, TResolvedTo>
 
-type SearchParamOptions<
+export type SearchParamOptions<
   TAllRouteInfo extends AnyAllRouteInfo,
   TFrom,
   TTo,
@@ -183,7 +191,7 @@ type SearchReducer<TFrom, TTo> =
   | { [TKey in keyof TTo]: TTo[TKey] }
   | ((current: TFrom) => TTo)
 
-type PathParamOptions<
+export type PathParamOptions<
   TAllRouteInfo extends AnyAllRouteInfo,
   TFrom,
   TTo,
@@ -219,7 +227,7 @@ type ParamsReducer<TFrom, TTo> = TTo | ((current: TFrom) => TTo)
 
 export type ToPathOption<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TFrom extends TAllRouteInfo['routePaths'] = '/',
   TTo extends string = '.',
 > =
   | TTo
@@ -231,7 +239,7 @@ export type ToPathOption<
 
 export type ToIdOption<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TFrom extends TAllRouteInfo['routePaths'] = '/',
   TTo extends string = '.',
 > =
   | TTo
@@ -241,16 +249,16 @@ export type ToIdOption<
       NoInfer<TTo> & string
     >
 
-interface ActiveOptions {
+export interface ActiveOptions {
   exact?: boolean
   includeHash?: boolean
 }
 
 export type LinkOptions<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TFrom extends TAllRouteInfo['routePaths'] = '/',
   TTo extends string = '.',
-> = NavigateOptionsAbsolute<TAllRouteInfo, TFrom, TTo> & {
+> = NavigateOptions<TAllRouteInfo, TFrom, TTo> & {
   // The standard anchor tag target attribute
   target?: HTMLAnchorElement['target']
   // Defaults to `{ exact: false, includeHash: false }`

package/src/route.ts

@@ -22,6 +22,7 @@ import {
   Router,
 } from './router'
 import { NoInfer } from './utils'
+import { createStore } from '@solidjs/reactivity'
 
 export interface AnyRoute extends Route<any, any, any> {}
 
@@ -38,31 +39,8 @@ export interface Route<
   parentRoute?: AnyRoute
   childRoutes?: AnyRoute[]
   options: RouteOptions
+  originalIndex: number
   router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo, TRouterContext>
-  buildLink: <TTo extends string = '.'>(
-    options: Omit<
-      LinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
-      'from'
-    >,
-  ) => LinkInfo
-  matchRoute: <
-    TTo extends string = '.',
-    TResolved extends string = ResolveRelativePath<TRouteInfo['id'], TTo>,
-  >(
-    matchLocation: CheckRelativePath<
-      TAllRouteInfo,
-      TRouteInfo['fullPath'],
-      NoInfer<TTo>
-    > &
-      Omit<ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>, 'from'>,
-    opts?: MatchRouteOptions,
-  ) => RouteInfoByPath<TAllRouteInfo, TResolved>['allParams']
-  navigate: <TTo extends string = '.'>(
-    options: Omit<
-      LinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
-      'from'
-    >,
-  ) => Promise<void>
   action: unknown extends TRouteInfo['actionResponse']
     ?
         | Action<TRouteInfo['actionPayload'], TRouteInfo['actionResponse']>
@@ -83,6 +61,30 @@ export interface Route<
         TRouteInfo['allParams'],
         TRouteInfo['routeLoaderData']
       >
+  // buildLink: <TTo extends string = '.'>(
+  //   options: Omit<
+  //     LinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
+  //     'from'
+  //   >,
+  // ) => LinkInfo
+  // matchRoute: <
+  //   TTo extends string = '.',
+  //   TResolved extends string = ResolveRelativePath<TRouteInfo['id'], TTo>,
+  // >(
+  //   matchLocation: CheckRelativePath<
+  //     TAllRouteInfo,
+  //     TRouteInfo['fullPath'],
+  //     NoInfer<TTo>
+  //   > &
+  //     Omit<ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>, 'from'>,
+  //   opts?: MatchRouteOptions,
+  // ) => RouteInfoByPath<TAllRouteInfo, TResolved>['allParams']
+  // navigate: <TTo extends string = '.'>(
+  //   options: Omit<
+  //     LinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
+  //     'from'
+  //   >,
+  // ) => Promise<void>
 }
 
 export function createRoute<
@@ -92,141 +94,159 @@ export function createRoute<
 >(
   routeConfig: RouteConfig,
   options: TRouteInfo['options'],
+  originalIndex: number,
   parent: undefined | Route<TAllRouteInfo, any>,
   router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo, TRouterContext>,
 ): Route<TAllRouteInfo, TRouteInfo, TRouterContext> {
   const { id, routeId, path: routePath, fullPath } = routeConfig
 
-  const action =
-    router.state.actions[id] ||
-    (() => {
-      router.state.actions[id] = {
-        submissions: [],
-        submit: async <T, U>(
-          submission: T,
-          actionOpts?: { invalidate?: boolean; multi?: boolean },
-        ) => {
-          if (!route) {
-            return
-          }
-
-          const invalidate = actionOpts?.invalidate ?? true
-
-          if (!actionOpts?.multi) {
-            action.submissions = action.submissions.filter((d) => d.isMulti)
-          }
-
-          const actionState: ActionState<T, U> = {
-            submittedAt: Date.now(),
-            status: 'pending',
-            submission,
-            isMulti: !!actionOpts?.multi,
-          }
-
-          action.current = actionState
-          action.latest = actionState
-          action.submissions.push(actionState)
-
-          router.notify()
-
-          try {
-            const res = await route.options.action?.(submission)
-            actionState.data = res as U
-
-            if (invalidate) {
-              router.invalidateRoute({ to: '.', fromCurrent: true })
-              await router.reload()
-            }
-            actionState.status = 'success'
-            return res
-          } catch (err) {
-            console.log('tanner')
-            console.error(err)
-            actionState.error = err
-            actionState.status = 'error'
-          } finally {
-            router.notify()
-          }
-        },
-      }
-      return router.state.actions[id]!
-    })()
-
-  const loader =
-    router.state.loaders[id] ||
-    (() => {
-      router.state.loaders[id] = {
-        pending: [],
-        fetch: (async (loaderContext: LoaderContext<any, any>) => {
-          if (!route) {
-            return
-          }
-
-          const loaderState: LoaderState<any, any> = {
-            loadedAt: Date.now(),
-            loaderContext,
-          }
-
-          loader.current = loaderState
-          loader.latest = loaderState
-          loader.pending.push(loaderState)
-
-          // router.state = {
-          //   ...router.state,
-          //   currentAction: loaderState,
-          //   latestAction: loaderState,
-          // }
-
-          router.notify()
-
-          try {
-            return await route.options.loader?.(loaderContext)
-          } finally {
-            loader.pending = loader.pending.filter((d) => d !== loaderState)
-            // router.removeActionQueue.push({ loader, loaderState })
-            router.notify()
-          }
-        }) as any,
-      }
-      return router.state.loaders[id]!
-    })()
-
   let route: Route<TAllRouteInfo, TRouteInfo, TRouterContext> = {
     routeInfo: undefined!,
     routeId: id,
     routeRouteId: routeId,
+    originalIndex,
     routePath,
     fullPath,
     options,
     router,
     childRoutes: undefined!,
     parentRoute: parent,
-    action,
-    loader: loader as any,
-
-    buildLink: (options) => {
-      return router.buildLink({
-        ...options,
-        from: fullPath,
-      } as any) as any
-    },
+    get action() {
+      let action =
+        router.store.actions[id] ||
+        (() => {
+          router.setStore((s) => {
+            s.actions[id] = {
+              submissions: [],
+              submit: async <T, U>(
+                submission: T,
+                actionOpts?: { invalidate?: boolean; multi?: boolean },
+              ) => {
+                if (!route) {
+                  return
+                }
+
+                const invalidate = actionOpts?.invalidate ?? true
+
+                const [actionStore, setActionStore] = createStore<
+                  ActionState<T, U>
+                >({
+                  submittedAt: Date.now(),
+                  status: 'pending',
+                  submission,
+                  isMulti: !!actionOpts?.multi,
+                })
+
+                router.setStore((s) => {
+                  if (!actionOpts?.multi) {
+                    s.actions[id]!.submissions = action.submissions.filter(
+                      (d) => d.isMulti,
+                    )
+                  }
+
+                  s.actions[id]!.current = actionStore
+                  s.actions[id]!.latest = actionStore
+                  s.actions[id]!.submissions.push(actionStore)
+                })
+
+                try {
+                  const res = await route.options.action?.(submission)
+
+                  setActionStore((s) => {
+                    s.data = res as U
+                  })
+
+                  if (invalidate) {
+                    router.invalidateRoute({ to: '.', fromCurrent: true })
+                    await router.reload()
+                  }
+
+                  setActionStore((s) => {
+                    s.status = 'success'
+                  })
+
+                  return res
+                } catch (err) {
+                  console.error(err)
+                  setActionStore((s) => {
+                    s.error = err
+                    s.status = 'error'
+                  })
+                }
+              },
+            }
+          })
 
-    navigate: (options) => {
-      return router.navigate({
-        ...options,
-        from: fullPath,
-      } as any) as any
+          return router.store.actions[id]!
+        })()
+
+      return action
     },
+    get loader() {
+      let loader =
+        router.store.loaders[id] ||
+        (() => {
+          router.setStore((s) => {
+            s.loaders[id] = {
+              pending: [],
+              fetch: (async (loaderContext: LoaderContext<any, any>) => {
+                if (!route) {
+                  return
+                }
+
+                const loaderState: LoaderState<any, any> = {
+                  loadedAt: Date.now(),
+                  loaderContext,
+                }
+
+                router.setStore((s) => {
+                  s.loaders[id]!.current = loaderState
+                  s.loaders[id]!.latest = loaderState
+                  s.loaders[id]!.pending.push(loaderState)
+                })
+
+                try {
+                  return await route.options.loader?.(loaderContext)
+                } finally {
+                  router.setStore((s) => {
+                    s.loaders[id]!.pending = s.loaders[id]!.pending.filter(
+                      (d) => d !== loaderState,
+                    )
+                  })
+                }
+              }) as any,
+            }
+          })
 
-    matchRoute: (matchLocation, opts) => {
-      return router.matchRoute(
-        {
-          ...matchLocation,
-          from: fullPath,
-        } as any,
-        opts,
-      ) as any
+          return router.store.loaders[id]!
+        })()
+
+      return loader as any
     },
+
+    // buildLink: (options) => {
+    //   return router.buildLink({
+    //     ...options,
+    //     from: fullPath,
+    //   } as any) as any
+    // },
+
+    // navigate: (options) => {
+    //   return router.navigate({
+    //     ...options,
+    //     from: fullPath,
+    //   } as any) as any
+    // },
+
+    // matchRoute: (matchLocation, opts) => {
+    //   return router.matchRoute(
+    //     {
+    //       ...matchLocation,
+    //       from: fullPath,
+    //     } as any,
+    //     opts,
+    //   ) as any
+    // },
   }
 
   router.options.createRoute?.({ router, route })

package/src/routeConfig.ts

@@ -123,12 +123,17 @@ export type RouteOptions<
   // An asynchronous function made available to the route for performing asynchronous or mutative actions that
   // might invalidate the route's data.
   action?: ActionFn<TActionPayload, TActionResponse>
-  // This async function is called before a route is loaded. If an error is thrown, the navigation is cancelled.
-  // If you want to redirect instead, throw a call to the `router.navigate()` function
+  // This async function is called before a route is loaded.
+  // If an error is thrown here, the route's loader will not be called.
+  // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onLoadError` function.
+  // If thrown during a preload event, the error will be logged to the console.
   beforeLoad?: (opts: {
     router: Router<any, any, unknown>
     match: RouteMatch
   }) => Promise<void> | void
+  // This function will be called if the route's loader throws an error **during an attempted navigation**.
+  // If you want to redirect due to an error, call `router.navigate()` from within this function.
+  onLoadError?: (err: any) => void
   // This function is called
   // when moving from an inactive state to an active one. Likewise, when moving from
   // an active to an inactive state, the return function (if provided) is called.