@tanstack/router-core 0.0.1-beta.26 → 0.0.1-beta.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.26",
+  "version": "0.0.1-beta.29",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -23,7 +23,7 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "module": "build/esm/index.js",
-  "main": "build/cjs/packages/router-core/src/index.js",
+  "main": "build/cjs/index.js",
   "browser": "build/umd/index.production.js",
   "types": "build/types/index.d.ts",
   "engines": {

package/src/route.ts

@@ -23,11 +23,12 @@ import {
 } from './router'
 import { NoInfer } from './utils'
 
-export interface AnyRoute extends Route<any, any> {}
+export interface AnyRoute extends Route<any, any, any> {}
 
 export interface Route<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
   TRouteInfo extends AnyRouteInfo = RouteInfo,
+  TRouterContext = unknown,
 > {
   routeInfo: TRouteInfo
   routeId: TRouteInfo['id']
@@ -37,7 +38,7 @@ export interface Route<
   parentRoute?: AnyRoute
   childRoutes?: AnyRoute[]
   options: RouteOptions
-  router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo>
+  router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo, TRouterContext>
   buildLink: <TTo extends string = '.'>(
     options: Omit<
       LinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
@@ -87,12 +88,13 @@ export interface Route<
 export function createRoute<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
   TRouteInfo extends AnyRouteInfo = RouteInfo,
+  TRouterContext = unknown,
 >(
   routeConfig: RouteConfig,
   options: TRouteInfo['options'],
   parent: undefined | Route<TAllRouteInfo, any>,
-  router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo>,
-): Route<TAllRouteInfo, TRouteInfo> {
+  router: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo, TRouterContext>,
+): Route<TAllRouteInfo, TRouteInfo, TRouterContext> {
   const { id, routeId, path: routePath, fullPath } = routeConfig
 
   const action =
@@ -138,6 +140,7 @@ export function createRoute<
             actionState.status = 'success'
             return res
           } catch (err) {
+            console.log('tanner')
             console.error(err)
             actionState.error = err
             actionState.status = 'error'
@@ -188,7 +191,7 @@ export function createRoute<
       return router.state.loaders[id]!
     })()
 
-  let route: Route<TAllRouteInfo, TRouteInfo> = {
+  let route: Route<TAllRouteInfo, TRouteInfo, TRouterContext> = {
     routeInfo: undefined!,
     routeId: id,
     routeRouteId: routeId,

package/src/routeConfig.ts

@@ -4,15 +4,8 @@ import { ParsePathParams } from './link'
 import { joinPaths, trimPath, trimPathRight } from './path'
 import { RouteInfo } from './routeInfo'
 import { RouteMatch } from './routeMatch'
-import { RouterContext } from './router'
-import {
-  DeepAwaited,
-  Expand,
-  IsAny,
-  NoInfer,
-  PickUnsafe,
-  Values,
-} from './utils'
+import { RegisteredRouter, Router } from './router'
+import { Expand, IsAny, NoInfer, PickUnsafe } from './utils'
 
 export const rootRouteId = '__root__' as const
 export type RootRouteId = typeof rootRouteId
@@ -132,7 +125,10 @@ export type RouteOptions<
   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
-  beforeLoad?: (opts: { context: RouterContext }) => Promise<void> | void
+  beforeLoad?: (opts: {
+    router: Router<any, any, unknown>
+    match: RouteMatch
+  }) => Promise<void> | 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.

package/src/routeMatch.ts

@@ -71,7 +71,7 @@ export function createRouteMatch<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
   TRouteInfo extends AnyRouteInfo = RouteInfo,
 >(
-  router: Router<any, any>,
+  router: Router<any, any, any>,
   route: Route<TAllRouteInfo, TRouteInfo>,
   opts: {
     parentMatch?: RouteMatch<any, any>

package/src/router.ts

@@ -53,6 +53,22 @@ import {
   Updater,
 } from './utils'
 
+export interface RegisterRouter {
+  // router: Router
+}
+
+export type RegisteredRouter = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo, infer TRouterContext>
+}
+  ? Router<TRouteConfig, TAllRouteInfo, TRouterContext>
+  : Router
+
+export type RegisteredAllRouteInfo = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo, infer TRouterContext>
+}
+  ? TAllRouteInfo
+  : AnyAllRouteInfo
+
 export interface LocationState {}
 
 export interface Location<
@@ -81,7 +97,10 @@ export type FilterRoutesFn = <TRoute extends Route<any, RouteInfo>>(
   routeConfigs: TRoute[],
 ) => TRoute[]
 
-export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
+export interface RouterOptions<
+  TRouteConfig extends AnyRouteConfig,
+  TRouterContext,
+> {
   history?: BrowserHistory | MemoryHistory | HashHistory
   stringifySearch?: SearchSerializer
   parseSearch?: SearchParser
@@ -99,8 +118,12 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   routeConfig?: TRouteConfig
   basepath?: string
   useServerData?: boolean
-  createRouter?: (router: Router<any, any>) => void
-  createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
+  createRouter?: (router: Router<any, any, any>) => void
+  createRoute?: (opts: {
+    route: AnyRoute
+    router: Router<any, any, any>
+  }) => void
+  context?: TRouterContext
   loadComponent?: (
     component: GetFrameworkGeneric<'Component'>,
   ) => Promise<GetFrameworkGeneric<'Component'>>
@@ -192,7 +215,7 @@ export interface PendingState {
   matches: RouteMatch[]
 }
 
-type Listener = (router: Router<any, any>) => void
+type Listener = (router: Router<any, any, any>) => void
 
 export type ListenerFn = () => void
 
@@ -231,11 +254,20 @@ type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
-interface DehydratedRouterState
-  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {
+export interface DehydratedRouterState
+  extends Pick<
+    RouterState,
+    'status' | 'location' | 'lastUpdated' | 'location'
+  > {
   matches: DehydratedRouteMatch[]
 }
 
+export interface DehydratedRouter<TRouterContext = unknown> {
+  location: Router['location']
+  state: DehydratedRouterState
+  context: TRouterContext
+}
+
 interface DehydratedRouteMatch
   extends Pick<
     RouteMatch<any, any>,
@@ -252,6 +284,7 @@ export interface RouterContext {}
 export interface Router<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
 > {
   types: {
     // Super secret internal stuff
@@ -262,13 +295,12 @@ export interface Router<
   // Public API
   history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
-    RouterOptions<TRouteConfig>,
-    'stringifySearch' | 'parseSearch'
+    RouterOptions<TRouteConfig, TRouterContext>,
+    'stringifySearch' | 'parseSearch' | 'context'
   >
   // Computed in this.update()
   basepath: string
   // Internal:
-  context: RouterContext
   listeners: Listener[]
   location: Location<TAllRouteInfo['fullSearchSchema']>
   navigateTimeout?: Timeout
@@ -276,7 +308,7 @@ export interface Router<
   state: RouterState<TAllRouteInfo['fullSearchSchema']>
   routeTree: Route<TAllRouteInfo, RouteInfo>
   routesById: RoutesById<TAllRouteInfo>
-  navigationPromise: Promise<void>
+  navigationPromise?: Promise<void>
   startedLoadingAt: number
   resolveNavigation: () => void
   subscribe: (listener: Listener) => () => void
@@ -284,9 +316,13 @@ export interface Router<
   notify: () => void
   mount: () => () => void
   onFocus: () => void
-  update: <TRouteConfig extends RouteConfig = RouteConfig>(
-    opts?: RouterOptions<TRouteConfig>,
-  ) => Router<TRouteConfig>
+  update: <
+    TRouteConfig extends RouteConfig = RouteConfig,
+    TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+    TRouterContext = unknown,
+  >(
+    opts?: RouterOptions<TRouteConfig, TRouterContext>,
+  ) => Router<TRouteConfig, TAllRouteInfo, TRouterContext>
 
   buildNext: (opts: BuildNextOptions) => Location
   cancelMatches: () => void
@@ -336,8 +372,8 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
-  dehydrateState: () => DehydratedRouterState
-  hydrateState: (state: DehydratedRouterState) => void
+  dehydrate: () => DehydratedRouter<TRouterContext>
+  hydrate: (dehydratedRouter: DehydratedRouter<TRouterContext>) => void
   __: {
     buildRouteTree: (
       routeConfig: RouteConfig,
@@ -378,9 +414,10 @@ function getInitialRouterState(): RouterState {
 export function createRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
 >(
-  userOptions?: RouterOptions<TRouteConfig>,
-): Router<TRouteConfig, TAllRouteInfo> {
+  userOptions?: RouterOptions<TRouteConfig, TRouterContext>,
+): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
   const history = userOptions?.history || createDefaultHistory()
 
   const originalOptions = {
@@ -388,12 +425,13 @@ export function createRouter<
     defaultLoaderMaxAge: 0,
     defaultPreloadMaxAge: 2000,
     defaultPreloadDelay: 50,
+    context: undefined!,
     ...userOptions,
     stringifySearch: userOptions?.stringifySearch ?? defaultStringifySearch,
     parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
   }
 
-  let router: Router<TRouteConfig, TAllRouteInfo> = {
+  let router: Router<TRouteConfig, TAllRouteInfo, TRouterContext> = {
     types: undefined!,
 
     // public api
@@ -401,13 +439,11 @@ export function createRouter<
     options: originalOptions,
     listeners: [],
     // Resolved after construction
-    context: {},
     basepath: '',
     routeTree: undefined!,
     routesById: {} as any,
     location: undefined!,
     //
-    navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
     matchCache: {},
     state: getInitialRouterState(),
@@ -451,30 +487,45 @@ export function createRouter<
       router.listeners.forEach((listener) => listener(router))
     },
 
-    dehydrateState: () => {
+    dehydrate: () => {
       return {
-        ...pick(router.state, ['status', 'location', 'lastUpdated']),
-        matches: router.state.matches.map((match) =>
-          pick(match, [
-            'matchId',
+        location: router.location,
+        state: {
+          ...pick(router.state, [
             'status',
-            'routeLoaderData',
-            'loaderData',
-            'isInvalid',
-            'invalidAt',
+            'location',
+            'lastUpdated',
+            'location',
           ]),
-        ),
+          matches: router.state.matches.map((match) =>
+            pick(match, [
+              'matchId',
+              'status',
+              'routeLoaderData',
+              'loaderData',
+              'isInvalid',
+              'invalidAt',
+            ]),
+          ),
+        },
+        context: router.options.context as TRouterContext,
       }
     },
 
-    hydrateState: (dehydratedState) => {
+    hydrate: (dehydratedState) => {
+      // Update the location
+      router.location = dehydratedState.location
+
+      // Update the context
+      router.options.context = dehydratedState.context
+
       // Match the routes
       const matches = router.matchRoutes(router.location.pathname, {
         strictParseParams: true,
       })
 
       matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.matches[index]
+        const dehydratedMatch = dehydratedState.state.matches[index]
         invariant(
           dehydratedMatch,
           'Oh no! Dehydrated route matches did not match the active state of the router 😬',
@@ -584,22 +635,6 @@ export function createRouter<
         strictParseParams: true,
       })
 
-      // Check if each match middleware to see if the route can be accessed
-      try {
-        await Promise.all(
-          matches.map((match) =>
-            match.options.beforeLoad?.({
-              context: router.context,
-            }),
-          ),
-        )
-      } catch (err: any) {
-        if (err?.then) {
-          await new Promise(() => {})
-        }
-        throw err
-      }
-
       if (typeof document !== 'undefined') {
         router.state = {
           ...router.state,
@@ -618,6 +653,23 @@ export function createRouter<
         }
       }
 
+      // Check if each match middleware to see if the route can be accessed
+      try {
+        await Promise.all(
+          matches.map((match) =>
+            match.options.beforeLoad?.({
+              router: router as any,
+              match,
+            }),
+          ),
+        )
+      } catch (err: any) {
+        if (err?.then) {
+          await new Promise(() => {})
+        }
+        throw err
+      }
+
       router.notify()
 
       // Load the matches
@@ -848,7 +900,7 @@ export function createRouter<
               parentMatch,
               matchId,
               params,
-              pathname: joinPaths([pathname, interpolatedPath]),
+              pathname: joinPaths([router.basepath, interpolatedPath]),
             })
 
           matches.push(match)
@@ -912,6 +964,16 @@ export function createRouter<
           }),
         })
 
+        // Refresh:
+        // '/dashboard'
+        // '/dashboard/invoices/'
+        // '/dashboard/invoices/123'
+
+        // New:
+        // '/dashboard/invoices/456'
+
+        // TODO: batch requests when possible
+
         const res = await fetch(next.href, {
           method: 'GET',
           // signal: routeMatch.__.abortController.signal,
@@ -1162,8 +1224,8 @@ export function createRouter<
       buildRouteTree: (rootRouteConfig: RouteConfig) => {
         const recurseRoutes = (
           routeConfigs: RouteConfig[],
-          parent?: Route<TAllRouteInfo, any>,
-        ): Route<TAllRouteInfo, any>[] => {
+          parent?: Route<TAllRouteInfo, any, any>,
+        ): Route<TAllRouteInfo, any, any>[] => {
           return routeConfigs.map((routeConfig) => {
             const routeOptions = routeConfig.options
             const route = createRoute(routeConfig, routeOptions, parent, router)
@@ -1354,6 +1416,7 @@ export function createRouter<
           router.resolveNavigation = () => {
             previousNavigationResolve()
             resolve()
+            delete router.navigationPromise
           }
         })
 

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;;;;"}