@tanstack/react-router-devtools 0.0.1-beta.10 → 0.0.1-beta.19

package/build/types/index.d.ts

@@ -11,7 +11,7 @@
 import React from 'react';
 import { Router } from '@tanstack/react-router';
 
-declare type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 interface DevtoolsOptions {
     /**
      * Set this true if you want the dev tools to default to being open
@@ -43,7 +43,7 @@ interface DevtoolsOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    router: Router<any, any>;
+    router?: Router<any, any>;
 }
 interface DevtoolsPanelOptions {
     /**
@@ -69,7 +69,7 @@ interface DevtoolsPanelOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    router: Router<any, any>;
+    router?: Router<any, any>;
 }
 declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
 declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;

package/build/umd/index.development.js

@@ -1017,7 +1017,7 @@
   const _excluded$2 = ["style"];
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.isPending ? theme.warning : match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+    return match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
   } // export function getQueryStatusLabel(query: Query) {
   //   return query.state.isFetching
   //     ? 'fetching'
@@ -1681,10 +1681,13 @@
     const {
       isOpen = true,
       handleDragStart,
-      router
+      router: userRouter
     } = props,
           panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
+    const routerContextValue = React__default["default"].useContext(reactRouter.routerContext);
+    const router = userRouter != null ? userRouter : routerContextValue == null ? void 0 : routerContextValue.router;
+    reactRouter.invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
     const rerender = React__default["default"].useReducer(() => ({}), {})[1];
     React__default["default"].useEffect(() => {
       let interval = setInterval(() => {
@@ -1951,10 +1954,6 @@
       style: {
         opacity: '.5'
       }
-    }, "Pending"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-      style: {
-        opacity: '.5'
-      }
     }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'