fix: types

TanStack · Oct 22, 2022 · 93e8baf · 93e8baf
1 parent df3a208
commit 93e8baf
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 55 deletions.
diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -48,30 +48,32 @@ const router = createReactRouter({
 function App() {
   return (
     // Build our routes and render our router
-    <RouterProvider router={router}>
-      <div>
-        <router.Link
-          to="/"
-          activeProps={{
-            className: 'font-bold',
-          }}
-          activeOptions={{ exact: true }}
-        >
-          Home
-        </router.Link>{' '}
-        <router.Link
-          to="/posts"
-          activeProps={{
-            className: 'font-bold',
-          }}
-        >
-          Posts
-        </router.Link>
-      </div>
-      <hr />
-      <Outlet /> {/* Start rendering router matches */}
-      <TanStackRouterDevtools position="bottom-right" />
-    </RouterProvider>
+    <>
+      <RouterProvider router={router}>
+        <div>
+          <router.Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            Home
+          </router.Link>{' '}
+          <router.Link
+            to="/posts"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Posts
+          </router.Link>
+        </div>
+        <hr />
+        <Outlet /> {/* Start rendering router matches */}
+      </RouterProvider>
+      <TanStackRouterDevtools router={router} position="bottom-right" />
+    </>
   )
 }
 

diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx
@@ -50,7 +50,6 @@ const routeConfig = createRouteConfig().addChildren((createRoute) => [
           const invoice = await postInvoice(partialInvoice)
           // // Redirect to the new invoice
           router.navigate({
-            // from: '/',
             to: '/dashboard/invoices/:invoiceId',
             params: {
               invoiceId: invoice.id,
@@ -280,9 +279,9 @@ function App() {
           ].join('.')}
         >
           <Root />
-          <TanStackRouterDevtools position="bottom-right" />
         </RouterProvider>
       </AuthProvider>
+      <TanStackRouterDevtools router={router} position="bottom-right" />
     </>
   )
 }
@@ -561,13 +560,13 @@ function InvoiceView() {
     search,
     Link,
     navigate,
+    params,
   } = router.useMatch('/dashboard/invoices/:invoiceId')
 
   const [notes, setNotes] = React.useState(search.notes ?? ``)
 
   React.useEffect(() => {
     navigate({
-      // to: '.',
       search: (old) => ({ ...old, notes: notes ? notes : undefined }),
       replace: true,
     })

diff --git a/packages/react-router-devtools/src/devtools.tsx b/packages/react-router-devtools/src/devtools.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Router, useRouter, last } from '@tanstack/react-router'
+import { Router, last } from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
 
 import useLocalStorage from './useLocalStorage'
@@ -52,7 +52,7 @@ interface DevtoolsOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter?: () => unknown
+  router: Router<any, any>
 }
 
 interface DevtoolsPanelOptions {
@@ -79,7 +79,7 @@ interface DevtoolsPanelOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter: () => unknown
+  router: Router<any, any>
 }
 
 const isServer = typeof window === 'undefined'
@@ -91,7 +91,7 @@ export function TanStackRouterDevtools({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'footer',
-  useRouter: useRouterImpl = useRouter,
+  router,
 }: DevtoolsOptions): React.ReactElement | null {
   const rootRef = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement>(null)
@@ -230,7 +230,7 @@ export function TanStackRouterDevtools({
         <TanStackRouterDevtoolsPanel
           ref={panelRef as any}
           {...otherPanelProps}
-          useRouter={useRouterImpl}
+          router={router}
           style={{
             position: 'fixed',
             bottom: '0',
@@ -360,11 +360,9 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     isOpen = true,
     setIsOpen,
     handleDragStart,
-    useRouter,
+    router,
     ...panelProps
   } = props
-
-  const router = useRouter() as Router
   const routerExplorerValue = React.useMemo(() => {
     const {
       listeners,
@@ -848,7 +846,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               <Button
                 type="button"
                 onClick={() => {
-                  router.invalidateRoute(activeMatch as any)
+                  activeMatch.invalidate()
                   router.notify()
                 }}
                 style={{
@@ -860,7 +858,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               </Button>{' '}
               <Button
                 type="button"
-                onClick={() => router.reload()}
+                onClick={() => activeMatch.load()}
                 style={{
                   background: theme.gray,
                 }}

diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx
@@ -415,7 +415,7 @@ export function RouterProvider<
   )
 }
 
-export function useRouter(): Router {
+function useRouter(): Router {
   const value = React.useContext(routerContext)
   warning(!value, 'useRouter must be used inside a <Router> component!')
 
@@ -424,21 +424,21 @@ export function useRouter(): Router {
   return value.router as Router
 }
 
-export function useMatches(): RouteMatch[] {
+function useMatches(): RouteMatch[] {
   return React.useContext(matchesContext)
 }
 
-export function useParentMatches(): RouteMatch[] {
-  const router = useRouter()
-  const match = useMatch()
-  const matches = router.state.matches
-  return matches.slice(
-    0,
-    matches.findIndex((d) => d.matchId === match.matchId) - 1,
-  )
-}
-
-export function useMatch<T>(): RouteMatch {
+// function useParentMatches(): RouteMatch[] {
+//   const router = useRouter()
+//   const match = useMatch()
+//   const matches = router.state.matches
+//   return matches.slice(
+//     0,
+//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
+//   )
+// }
+
+function useMatch<T>(): RouteMatch {
   return useMatches()?.[0] as RouteMatch
 }
 

diff --git a/packages/router-core/src/index.ts b/packages/router-core/src/index.ts
@@ -1410,8 +1410,6 @@ export function createRouter<
       router.startedLoadingAt = id
 
       if (next) {
-        // If the location.href has changed
-
         // Ingest the new location
         router.location = next
       }
@@ -1708,7 +1706,7 @@ export function createRouter<
         ...(router.state.pending?.matches ?? []),
       ].forEach((match) => {
         if (unloadedMatchIds.includes(match.matchId)) {
-          match.isInvalid = true
+          match.invalidate()
         }
       })
     },
@@ -1757,7 +1755,7 @@ export function createRouter<
       return router.commitLocation(next, location.replace)
     },
 
-    navigate: async ({ from, to = '.', search, hash, replace }) => {
+    navigate: async ({ from, to = '.', search, hash, replace, params }) => {
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
 
@@ -1783,6 +1781,8 @@ export function createRouter<
         to: toString,
         search,
         hash,
+        replace,
+        params,
       })
     },
 
@@ -2319,7 +2319,9 @@ type SearchParamOptions<
       search: SearchReducer<TFromSchema, TToSchema>
     }
 
-type SearchReducer<TFrom, TTo> = TTo | ((current: TFrom) => TTo)
+type SearchReducer<TFrom, TTo> =
+  | { [TKey in keyof TTo]: TTo[TKey] }
+  | ((current: TFrom) => TTo)
 
 type PathParamOptions<
   TAllRouteInfo extends AnyAllRouteInfo,
@@ -2395,6 +2397,7 @@ export interface RouteMatch<
   }
   cancel: () => void
   load: () => Promise<void>
+  invalidate: () => void
 }
 
 export function createRouteMatch<
@@ -2514,6 +2517,9 @@ export function createRouteMatch<
       routeMatch.__.abortController?.abort()
       routeMatch.__.cancelPending()
     },
+    invalidate: () => {
+      routeMatch.isInvalid = true
+    },
     load: async () => {
       const id = '' + Date.now() + Math.random()
       routeMatch.__.latestId = id