@tanstack/react-router 0.0.1-beta.245 → 0.0.1-beta.246

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.245",
+  "version": "0.0.1-beta.246",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.245"
+    "@tanstack/history": "0.0.1-beta.246"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/path.ts

@@ -161,13 +161,17 @@ export function matchPathname(
   return pathParams ?? {}
 }
 
+export function removeBasepath(basepath: string, pathname: string) {
+  return basepath != '/' ? pathname.substring(basepath.length) : pathname
+}
+
 export function matchByPath(
   basepath: string,
   from: string,
   matchLocation: Pick<MatchLocation, 'to' | 'caseSensitive' | 'fuzzy'>,
 ): Record<string, string> | undefined {
   // Remove the base path from the pathname
-  from = basepath != '/' ? from.substring(basepath.length) : from
+  from = removeBasepath(basepath, from)
   // Default to to $ (wildcard)
   const to = `${matchLocation.to ?? '$'}`
   // Parse the from and to
@@ -245,7 +249,8 @@ export function matchByPath(
       }
 
       if (!isLastBaseSegment && isLastRouteSegment) {
-        return !!matchLocation.fuzzy
+        params['**'] = joinPaths(baseSegments.slice(i + 1).map((d) => d.value))
+        return !!matchLocation.fuzzy && routeSegment?.value !== '/'
       }
     }
 

package/src/route.ts

@@ -224,9 +224,6 @@ export type UpdatableRouteOptions<
   onEnter?: (match: AnyRouteMatch) => void
   onTransition?: (match: AnyRouteMatch) => void
   onLeave?: (match: AnyRouteMatch) => void
-  // Set this to true or false to specifically set whether or not this route should be preloaded. If unset, will
-  // default to router.options.reloadOnWindowFocus
-  reloadOnWindowFocus?: boolean
 }
 
 export type ParseParamsOption<TPath extends string, TParams> = ParseParamsFn<
@@ -459,7 +456,6 @@ export class Route<
   ) {
     this.options = (options as any) || {}
     this.isRoot = !options?.getParentRoute as any
-    Route.__onInit(this)
     ;(this as any).$$typeof = Symbol.for('react.memo')
   }
 
@@ -585,11 +581,6 @@ export class Route<
     return this
   }
 
-  static __onInit = (route: any) => {
-    // This is a dummy static method that should get
-    // replaced by a framework specific implementation if necessary
-  }
-
   useMatch = <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }): TSelected => {
@@ -859,3 +850,62 @@ export type ComponentPropsFromRoute<TRoute> =
         >
       ? RouteProps<TFullSearchSchema, TAllParams, TAllContext, TLoaderData>
       : {}
+
+export class NotFoundRoute<
+  TParentRoute extends AnyRootRoute,
+  TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
+  TFullSearchSchema extends
+    RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
+    TParentRoute,
+    TSearchSchema
+  >,
+  TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
+  TAllContext extends Expand<
+    Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+  > = Expand<
+    Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+  >,
+  TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+  TLoaderData extends any = unknown,
+  TChildren extends RouteConstraints['TChildren'] = unknown,
+  TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
+> extends Route<
+  TParentRoute,
+  '/404',
+  '/404',
+  '404',
+  '404',
+  TSearchSchema,
+  TFullSearchSchema,
+  {},
+  {},
+  TRouteContext,
+  TAllContext,
+  TRouterContext,
+  TLoaderData,
+  TChildren,
+  TRouteTree
+> {
+  constructor(
+    options: Omit<
+      RouteOptions<
+        TParentRoute,
+        string,
+        string,
+        TSearchSchema,
+        TFullSearchSchema,
+        {},
+        {},
+        TRouteContext,
+        TAllContext,
+        TLoaderData
+      >,
+      'caseSensitive' | 'parseParams' | 'stringifyParams' | 'path' | 'id'
+    >,
+  ) {
+    super({
+      ...(options as any),
+      id: '404',
+    })
+  }
+}

package/src/router.ts

@@ -56,8 +56,10 @@ import {
   joinPaths,
   matchPathname,
   parsePathname,
+  removeBasepath,
   resolvePath,
   trimPath,
+  trimPathLeft,
   trimPathRight,
 } from './path'
 import invariant from 'tiny-invariant'
@@ -130,6 +132,7 @@ export interface RouterOptions<
   routeMasks?: RouteMask<TRouteTree>[]
   unmaskOnReload?: boolean
   Wrap?: (props: { children: any }) => JSX.Element
+  notFoundRoute?: AnyRoute
 }
 
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
@@ -316,11 +319,14 @@ export class Router<
     this.routesById = {} as RoutesById<TRouteTree>
     this.routesByPath = {} as RoutesByPath<TRouteTree>
 
+    const notFoundRoute = this.options.notFoundRoute
+    if (notFoundRoute) {
+      notFoundRoute.init({ originalIndex: 99999999999 })
+      ;(this.routesById as any)[notFoundRoute.id] = notFoundRoute
+    }
+
     const recurseRoutes = (childRoutes: AnyRoute[]) => {
       childRoutes.forEach((childRoute, i) => {
-        // if (typeof childRoute === 'function') {
-        //   childRoute = (childRoute as any)()
-        // }
         childRoute.init({ originalIndex: i })
 
         const existingRoute = (this.routesById as any)[childRoute.id]
@@ -351,29 +357,42 @@ export class Router<
 
     recurseRoutes([this.routeTree])
 
-    this.flatRoutes = (Object.values(this.routesByPath) as AnyRoute[])
-      .map((d, i) => {
-        const trimmed = trimPath(d.fullPath)
-        const parsed = parsePathname(trimmed)
+    const scoredRoutes: {
+      child: AnyRoute
+      trimmed: string
+      parsed: ReturnType<typeof parsePathname>
+      index: number
+      score: number[]
+    }[] = []
+
+    ;(Object.values(this.routesById) as AnyRoute[]).forEach((d, i) => {
+      if (d.isRoot || !d.path) {
+        return
+      }
 
-        while (parsed.length > 1 && parsed[0]?.value === '/') {
-          parsed.shift()
-        }
+      const trimmed = trimPathLeft(d.fullPath)
+      const parsed = parsePathname(trimmed)
 
-        const score = parsed.map((d) => {
-          if (d.type === 'param') {
-            return 0.5
-          }
+      while (parsed.length > 1 && parsed[0]?.value === '/') {
+        parsed.shift()
+      }
 
-          if (d.type === 'wildcard') {
-            return 0.25
-          }
+      const score = parsed.map((d) => {
+        if (d.type === 'param') {
+          return 0.5
+        }
 
-          return 1
-        })
+        if (d.type === 'wildcard') {
+          return 0.25
+        }
 
-        return { child: d, trimmed, parsed, index: i, score }
+        return 1
       })
+
+      scoredRoutes.push({ child: d, trimmed, parsed, index: i, score })
+    })
+
+    this.flatRoutes = scoredRoutes
       .sort((a, b) => {
         let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0
 
@@ -498,7 +517,7 @@ export class Router<
     locationSearch: AnySearchSchema,
     opts?: { throwOnError?: boolean; debug?: boolean },
   ): RouteMatch<TRouteTree>[] => {
-    let routeParams: AnyPathParams = {}
+    let routeParams: Record<string, string> = {}
 
     let foundRoute = this.flatRoutes.find((route) => {
       const matchedParams = matchPathname(
@@ -508,7 +527,7 @@ export class Router<
           to: route.fullPath,
           caseSensitive:
             route.options.caseSensitive ?? this.options.caseSensitive,
-          fuzzy: false,
+          fuzzy: true,
         },
       )
 
@@ -524,7 +543,20 @@ export class Router<
       foundRoute || (this.routesById as any)['__root__']
 
     let matchedRoutes: AnyRoute[] = [routeCursor]
-    // let includingLayouts = true
+
+    // Check to see if the route needs a 404 entry
+    if (
+      // If we found a route, and it's not an index route and we have left over path
+      (foundRoute
+        ? foundRoute.path !== '/' && routeParams['**']
+        : // Or if we didn't find a route and we have left over path
+          trimPathRight(pathname)) &&
+      // And we have a 404 route configured
+      this.options.notFoundRoute
+    ) {
+      matchedRoutes.push(this.options.notFoundRoute)
+    }
+
     while (routeCursor?.parentRoute) {
       routeCursor = routeCursor.parentRoute
       if (routeCursor) matchedRoutes.unshift(routeCursor)
@@ -1380,13 +1412,13 @@ export class Router<
       throwOnError: true,
     })
 
-    await this.loadMatches({
+    matches = await this.loadMatches({
       matches,
       preload: true,
       checkLatest: () => undefined,
     })
 
-    return [last(matches)!, matches] as const
+    return matches
   }
 
   buildLink: BuildLinkFn<TRouteTree> = (dest) => {

package/src/useBlocker.tsx

@@ -10,15 +10,7 @@ export function useBlocker(
 
   React.useEffect(() => {
     if (!condition) return
-
-    let unblock = history.block((retry, cancel) => {
-      if (window.confirm(message)) {
-        unblock()
-        retry()
-      }
-    })
-
-    return unblock
+    return history.block(message)
   })
 }