@tanstack/react-router 0.0.1-alpha.2 → 0.0.1-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.4",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://react-router.tanstack.com/",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-alpha.2",
+    "@tanstack/router-core": "0.0.1-alpha.4",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -6,7 +6,6 @@ import {
   AnyRoute,
   RootRouteId,
   rootRouteId,
-  Route,
   Router,
 } from '@tanstack/router-core'
 import {
@@ -29,6 +28,7 @@ import {
   ResolveRelativePath,
   NoInfer,
   ToOptions,
+  invariant,
 } from '@tanstack/router-core'
 
 export * from '@tanstack/router-core'
@@ -55,34 +55,34 @@ declare module '@tanstack/router-core' {
     useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    // linkProps: <TTo extends string = '.'>(
-    //   props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-    //     React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    // ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
-    // Link: <TTo extends string = '.'>(
-    //   props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-    //     React.AnchorHTMLAttributes<HTMLAnchorElement> &
-    //     Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-    //       // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-    //       children?:
-    //         | React.ReactNode
-    //         | ((state: { isActive: boolean }) => React.ReactNode)
-    //     },
-    // ) => JSX.Element
-    // MatchRoute: <TTo extends string = '.'>(
-    //   props: ToOptions<TAllRouteInfo, '/', TTo> &
-    //     MatchRouteOptions & {
-    //       // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-    //       children?:
-    //         | React.ReactNode
-    //         | ((
-    //             params: RouteInfoByPath<
-    //               TAllRouteInfo,
-    //               ResolveRelativePath<'/', NoInfer<TTo>>
-    //             >['allParams'],
-    //           ) => React.ReactNode)
-    //     },
-    // ) => JSX.Element
+    linkProps: <TTo extends string = '.'>(
+      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
+    Link: <TTo extends string = '.'>(
+      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
+        React.AnchorHTMLAttributes<HTMLAnchorElement> &
+        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+          children?:
+            | React.ReactNode
+            | ((state: { isActive: boolean }) => React.ReactNode)
+        },
+    ) => JSX.Element
+    MatchRoute: <TTo extends string = '.'>(
+      props: ToOptions<TAllRouteInfo, '/', TTo> &
+        MatchRouteOptions & {
+          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+          children?:
+            | React.ReactNode
+            | ((
+                params: RouteInfoByPath<
+                  TAllRouteInfo,
+                  ResolveRelativePath<'/', NoInfer<TTo>>
+                >['allParams'],
+              ) => React.ReactNode)
+        },
+    ) => JSX.Element
   }
 
   interface Route<
@@ -174,6 +174,148 @@ const useRouterSubscription = (router: Router<any, any>) => {
 export function createReactRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
 >(opts: RouterOptions<TRouteConfig>): Router<TRouteConfig> {
+  const makeRouteExt = (
+    route: AnyRoute,
+    router: Router<any, any>,
+  ): Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> => {
+    return {
+      linkProps: (options) => {
+        const {
+          // custom props
+          type,
+          children,
+          target,
+          activeProps = () => ({ className: 'active' }),
+          inactiveProps = () => ({}),
+          activeOptions,
+          disabled,
+          // fromCurrent,
+          hash,
+          search,
+          params,
+          to,
+          preload,
+          preloadDelay,
+          preloadMaxAge,
+          replace,
+          // element props
+          style,
+          className,
+          onClick,
+          onFocus,
+          onMouseEnter,
+          onMouseLeave,
+          onTouchStart,
+          onTouchEnd,
+          ...rest
+        } = options
+
+        const linkInfo = route.buildLink(options)
+
+        if (linkInfo.type === 'external') {
+          const { href } = linkInfo
+          return { href }
+        }
+
+        const {
+          handleClick,
+          handleFocus,
+          handleEnter,
+          handleLeave,
+          isActive,
+          next,
+        } = linkInfo
+
+        const composeHandlers =
+          (handlers: (undefined | ((e: any) => void))[]) =>
+          (e: React.SyntheticEvent) => {
+            e.persist()
+            handlers.forEach((handler) => {
+              if (handler) handler(e)
+            })
+          }
+
+        // Get the active props
+        const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+          isActive ? functionalUpdate(activeProps) ?? {} : {}
+
+        // Get the inactive props
+        const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+          isActive ? {} : functionalUpdate(inactiveProps) ?? {}
+
+        return {
+          ...resolvedActiveProps,
+          ...resolvedInactiveProps,
+          ...rest,
+          href: disabled ? undefined : next.href,
+          onClick: composeHandlers([handleClick, onClick]),
+          onFocus: composeHandlers([handleFocus, onFocus]),
+          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
+          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
+          target,
+          style: {
+            ...style,
+            ...resolvedActiveProps.style,
+            ...resolvedInactiveProps.style,
+          },
+          className:
+            [
+              className,
+              resolvedActiveProps.className,
+              resolvedInactiveProps.className,
+            ]
+              .filter(Boolean)
+              .join(' ') || undefined,
+          ...(disabled
+            ? {
+                role: 'link',
+                'aria-disabled': true,
+              }
+            : undefined),
+          ['data-status']: isActive ? 'active' : undefined,
+        }
+      },
+      Link: React.forwardRef((props: any, ref) => {
+        const linkProps = route.linkProps(props)
+
+        useRouterSubscription(router)
+
+        return (
+          <a
+            {...{
+              ref: ref as any,
+              ...linkProps,
+              children:
+                typeof props.children === 'function'
+                  ? props.children({
+                      isActive: (linkProps as any)['data-status'] === 'active',
+                    })
+                  : props.children,
+            }}
+          />
+        )
+      }) as any,
+      MatchRoute: (opts) => {
+        const { pending, caseSensitive, children, ...rest } = opts
+
+        const params = route.matchRoute(rest as any, {
+          pending,
+          caseSensitive,
+        })
+
+        // useRouterSubscription(router)
+
+        if (!params) {
+          return null
+        }
+
+        return typeof opts.children === 'function'
+          ? opts.children(params as any)
+          : (opts.children as any)
+      },
+    }
+  }
+
   const coreRouter = createRouter<TRouteConfig>({
     ...opts,
     createRouter: (router) => {
@@ -181,194 +323,57 @@ export function createReactRouter<
         useRoute: (routeId) => {
           const route = router.getRoute(routeId)
           useRouterSubscription(router)
-          if (!route) {
-            throw new Error(
-              `Could not find a route for route "${
-                routeId as string
-              }"! Did you forget to add it to your route config?`,
-            )
-          }
+          invariant(
+            route,
+            `Could not find a route for route "${
+              routeId as string
+            }"! Did you forget to add it to your route config?`,
+          )
           return route
         },
         useMatch: (routeId) => {
-          if (routeId === rootRouteId) {
-            throw new Error(
-              `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
-            )
-          }
+          invariant(
+            routeId !== rootRouteId,
+            `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
+          )
+
           const runtimeMatch = useMatch()
           const match = router.state.matches.find((d) => d.routeId === routeId)
 
-          if (!match) {
-            throw new Error(
-              `Could not find a match for route "${
-                routeId as string
-              }" being rendered in this component!`,
-            )
-          }
+          invariant(
+            match,
+            `Could not find a match for route "${
+              routeId as string
+            }" being rendered in this component!`,
+          )
 
-          if (runtimeMatch.routeId !== match?.routeId) {
-            throw new Error(
-              `useMatch('${
-                match?.routeId as string
-              }') is being called in a component that is meant to render the '${
-                runtimeMatch.routeId
-              }' route. Did you mean to 'useRoute(${
-                match?.routeId as string
-              })' instead?`,
-            )
-          }
+          invariant(
+            runtimeMatch.routeId == match?.routeId,
+            `useMatch('${
+              match?.routeId as string
+            }') is being called in a component that is meant to render the '${
+              runtimeMatch.routeId
+            }' route. Did you mean to 'useRoute(${
+              match?.routeId as string
+            })' instead?`,
+          )
 
           useRouterSubscription(router)
 
           if (!match) {
-            throw new Error('Match not found!')
+            invariant('Match not found!')
           }
 
           return match
         },
       }
 
-      Object.assign(router, routerExt)
+      const routeExt = makeRouteExt(router.getRoute('/'), router)
+
+      Object.assign(router, routerExt, routeExt)
     },
     createRoute: ({ router, route }) => {
-      const routeExt: Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> = {
-        linkProps: (options) => {
-          const {
-            // custom props
-            type,
-            children,
-            target,
-            activeProps = () => ({ className: 'active' }),
-            inactiveProps = () => ({}),
-            activeOptions,
-            disabled,
-            // fromCurrent,
-            hash,
-            search,
-            params,
-            to,
-            preload,
-            preloadDelay,
-            preloadMaxAge,
-            replace,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave,
-            onTouchStart,
-            onTouchEnd,
-            ...rest
-          } = options
-
-          const linkInfo = route.buildLink(options)
-
-          if (linkInfo.type === 'external') {
-            const { href } = linkInfo
-            return { href }
-          }
-
-          const {
-            handleClick,
-            handleFocus,
-            handleEnter,
-            handleLeave,
-            isActive,
-            next,
-          } = linkInfo
-
-          const composeHandlers =
-            (handlers: (undefined | ((e: any) => void))[]) =>
-            (e: React.SyntheticEvent) => {
-              e.persist()
-              handlers.forEach((handler) => {
-                if (handler) handler(e)
-              })
-            }
-
-          // Get the active props
-          const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-            isActive ? functionalUpdate(activeProps) ?? {} : {}
-
-          // Get the inactive props
-          const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-            isActive ? {} : functionalUpdate(inactiveProps) ?? {}
-
-          return {
-            ...resolvedActiveProps,
-            ...resolvedInactiveProps,
-            ...rest,
-            href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
-            onFocus: composeHandlers([handleFocus, onFocus]),
-            onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-            onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-            target,
-            style: {
-              ...style,
-              ...resolvedActiveProps.style,
-              ...resolvedInactiveProps.style,
-            },
-            className:
-              [
-                className,
-                resolvedActiveProps.className,
-                resolvedInactiveProps.className,
-              ]
-                .filter(Boolean)
-                .join(' ') || undefined,
-            ...(disabled
-              ? {
-                  role: 'link',
-                  'aria-disabled': true,
-                }
-              : undefined),
-            ['data-status']: isActive ? 'active' : undefined,
-          }
-        },
-        Link: React.forwardRef((props: any, ref) => {
-          const linkProps = route.linkProps(props)
-
-          useRouterSubscription(router)
-
-          return (
-            <a
-              {...{
-                ref: ref as any,
-                ...linkProps,
-                children:
-                  typeof props.children === 'function'
-                    ? props.children({
-                        isActive:
-                          (linkProps as any)['data-status'] === 'active',
-                      })
-                    : props.children,
-              }}
-            />
-          )
-        }) as any,
-        MatchRoute: (opts) => {
-          const { pending, caseSensitive, children, ...rest } = opts
-
-          const params = route.matchRoute(rest as any, {
-            pending,
-            caseSensitive,
-          })
-
-          // useRouterSubscription(router)
-
-          if (!params) {
-            return null
-          }
-
-          return typeof opts.children === 'function'
-            ? opts.children(params as any)
-            : (opts.children as any)
-        },
-      }
+      const routeExt = makeRouteExt(route, router)
 
       Object.assign(route, routeExt)
     },