@tanstack/react-router-devtools 0.0.1-beta.2 → 0.0.1-beta.30

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, 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, 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

@@ -41,31 +41,26 @@
     _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);
   }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
-
     for (i = 0; i < sourceKeys.length; i++) {
       key = sourceKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
       target[key] = source[key];
     }
-
     return target;
   }
 
@@ -75,6 +70,7 @@
     }
   }
 
+  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
   /**
    * @name toDate
    * @category Common Helpers
@@ -110,7 +106,7 @@
     requiredArgs(1, arguments);
     var argStr = Object.prototype.toString.call(argument); // Clone the date
 
-    if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
+    if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
       // Prevent the date to lose the milliseconds when passed to new Date() in IE10
       return new Date(argument.getTime());
     } else if (typeof argument === 'number' || argStr === '[object Number]') {
@@ -261,7 +257,7 @@
     }
   };
 
-  var formatDistance = function (token, count, options) {
+  var formatDistance = function formatDistance(token, count, options) {
     var result;
     var tokenValue = formatDistanceLocale[token];
 
@@ -339,7 +335,7 @@
     other: 'P'
   };
 
-  var formatRelative = function (token, _date, _baseDate, _options) {
+  var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
     return formatRelativeLocale[token];
   };
 
@@ -458,7 +454,7 @@
     }
   };
 
-  var ordinalNumber = function (dirtyNumber, _options) {
+  var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
     var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
     // if they are different for different grammatical genders,
     // use `options.unit`.
@@ -493,7 +489,7 @@
     quarter: buildLocalizeFn({
       values: quarterValues,
       defaultWidth: 'wide',
-      argumentCallback: function (quarter) {
+      argumentCallback: function argumentCallback(quarter) {
         return quarter - 1;
       }
     }),
@@ -638,7 +634,7 @@
     ordinalNumber: buildMatchPatternFn({
       matchPattern: matchOrdinalNumberPattern,
       parsePattern: parseOrdinalNumberPattern,
-      valueCallback: function (value) {
+      valueCallback: function valueCallback(value) {
         return parseInt(value, 10);
       }
     }),
@@ -653,7 +649,7 @@
       defaultMatchWidth: 'wide',
       parsePatterns: parseQuarterPatterns,
       defaultParseWidth: 'any',
-      valueCallback: function (index) {
+      valueCallback: function valueCallback(index) {
         return index + 1;
       }
     }),
@@ -906,22 +902,18 @@
   const getItem = key => {
     try {
       const itemValue = localStorage.getItem(key);
-
       if (typeof itemValue === 'string') {
         return JSON.parse(itemValue);
       }
-
       return undefined;
     } catch (_unused) {
       return undefined;
     }
   };
-
   function useLocalStorage(key, defaultValue) {
     const [value, setValue] = React__default["default"].useState();
     React__default["default"].useEffect(() => {
       const initialValue = getItem(key);
-
       if (typeof initialValue === 'undefined' || initialValue === null) {
         setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       } else {
@@ -931,15 +923,12 @@
     const setter = React__default["default"].useCallback(updater => {
       setValue(old => {
         let newVal = updater;
-
         if (typeof updater == 'function') {
           newVal = updater(old);
         }
-
         try {
           localStorage.setItem(key, JSON.stringify(newVal));
         } catch (_unused2) {}
-
         return newVal;
       });
     }, [key]);
@@ -963,10 +952,9 @@
   const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
   function ThemeProvider(_ref) {
     let {
-      theme
-    } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+        theme
+      } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
       value: theme
     }, rest));
@@ -981,34 +969,34 @@
       if (typeof window !== 'undefined') {
         return window.matchMedia && window.matchMedia(query).matches;
       }
-
       return;
-    }); // Watch for changes
+    });
 
+    // Watch for changes
     React__default["default"].useEffect(() => {
       if (typeof window !== 'undefined') {
         if (!window.matchMedia) {
           return;
-        } // Create a matcher
-
+        }
 
-        const matcher = window.matchMedia(query); // Create our handler
+        // Create a matcher
+        const matcher = window.matchMedia(query);
 
+        // Create our handler
         const onChange = _ref => {
           let {
             matches
           } = _ref;
           return setIsMatch(matches);
-        }; // Listen for changes
-
+        };
 
+        // Listen for changes
         matcher.addListener(onChange);
         return () => {
           // Stop listening for changes
           matcher.removeListener(onChange);
         };
       }
-
       return;
     }, [isMatch, query, setIsMatch]);
     return isMatch;
@@ -1017,8 +1005,10 @@
   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;
-  } // export function getQueryStatusLabel(query: Query) {
+    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'
   //     : !query.getObserversCount()
@@ -1032,13 +1022,11 @@
     if (queries === void 0) {
       queries = {};
     }
-
     return /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
       let {
-        style
-      } = _ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+          style
+        } = _ref,
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
       const theme = useTheme();
       const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
         let [key, value] = _ref2;
@@ -1062,22 +1050,22 @@
     }, []);
     return isMounted;
   }
+
   /**
    * Displays a string regardless the type of the data
    * @param {unknown} value Value to be stringified
    */
-
   const displayValue = value => {
     const name = Object.getOwnPropertyNames(Object(value));
     const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
     return JSON.stringify(newValue, name);
   };
+
   /**
    * This hook is a safe useState version which schedules state updates in microtasks
    * to prevent updating a component state while React is rendering different components
    * or when the component is not mounted anymore.
    */
-
   function useSafeState(initialState) {
     const isMounted = useIsMounted();
     const [state, setState] = React__default["default"].useState(initialState);
@@ -1090,45 +1078,37 @@
     }, [isMounted]);
     return [state, safeSetState];
   }
+
   /**
    * Schedules a microtask.
    * This can be useful to schedule state updates after rendering.
    */
-
   function scheduleMicrotask(callback) {
     Promise.resolve().then(callback).catch(error => setTimeout(() => {
       throw error;
     }));
   }
-
   function multiSortBy(arr, accessors) {
     if (accessors === void 0) {
       accessors = [d => d];
     }
-
     return arr.map((d, i) => [d, i]).sort((_ref3, _ref4) => {
       let [a, ai] = _ref3;
       let [b, bi] = _ref4;
-
       for (const accessor of accessors) {
         const ao = accessor(a);
         const bo = accessor(b);
-
         if (typeof ao === 'undefined') {
           if (typeof bo === 'undefined') {
             continue;
           }
-
           return 1;
         }
-
         if (ao === bo) {
           continue;
         }
-
         return ao > bo ? 1 : -1;
       }
-
       return ai - bi;
     }).map(_ref5 => {
       let [d] = _ref5;
@@ -1147,10 +1127,11 @@
       flexDirection: 'column'
     },
     '(max-width: 600px)': {
-      fontSize: '.9em' // flexDirection: 'column',
-
+      fontSize: '.9em'
+      // flexDirection: 'column',
     }
   });
+
   const ActivePanel = styled('div', () => ({
     flex: '1 1 500px',
     display: 'flex',
@@ -1173,10 +1154,13 @@
     padding: '.5em',
     opacity: props.disabled ? '.5' : undefined,
     cursor: 'pointer'
-  })); // export const QueryKeys = styled('span', {
+  }));
+
+  // export const QueryKeys = styled('span', {
   //   display: 'inline-block',
   //   fontSize: '0.9em',
   // })
+
   // export const QueryKey = styled('span', {
   //   display: 'inline-flex',
   //   alignItems: 'center',
@@ -1271,7 +1255,6 @@
       }, style)
     }, "\u25B6");
   };
-
   /**
    * Chunk elements in the array by size
    *
@@ -1285,12 +1268,10 @@
     if (size < 1) return [];
     let i = 0;
     const result = [];
-
     while (i < array.length) {
       result.push(array.slice(i, i + size));
       i = i + size;
     }
-
     return result;
   }
   const DefaultRenderer = _ref2 => {
@@ -1308,11 +1289,9 @@
     } = _ref2;
     const [expandedPages, setExpandedPages] = React__namespace.useState([]);
     const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
-
     const refreshValueSnapshot = () => {
       setValueSnapshot(value());
     };
-
     return /*#__PURE__*/React__namespace.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
       onClick: () => toggleExpanded()
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
@@ -1337,25 +1316,21 @@
       defaultExpanded: {}
     })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, displayValue(value))));
   };
-
   function isIterable(x) {
     return Symbol.iterator in x;
   }
-
   function Explorer(_ref3) {
     let {
-      value,
-      defaultExpanded,
-      renderer = DefaultRenderer,
-      pageSize = 100
-    } = _ref3,
-        rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-
+        value,
+        defaultExpanded,
+        renderer = DefaultRenderer,
+        pageSize = 100
+      } = _ref3,
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
     const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
     let type = typeof value;
     let subEntries = [];
-
     const makeProperty = sub => {
       const subDefaultExpanded = defaultExpanded === true ? {
         [sub.label]: true
@@ -1364,7 +1339,6 @@
         defaultExpanded: subDefaultExpanded
       });
     };
-
     if (Array.isArray(value)) {
       type = 'array';
       subEntries = value.map((d, i) => makeProperty({
@@ -1387,7 +1361,6 @@
         });
       });
     }
-
     const subEntryPages = chunkArray(subEntries, pageSize);
     return renderer(_extends({
       handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
@@ -1406,21 +1379,19 @@
   }
 
   const _excluded = ["style"],
-        _excluded2 = ["style", "onClick"],
-        _excluded3 = ["style", "onClick"],
-        _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
+    _excluded2 = ["style", "onClick"],
+    _excluded3 = ["style", "onClick"],
+    _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
   const isServer = typeof window === 'undefined';
-
   function Logo(props) {
     var _props$style;
-
     return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
       style: _extends({}, (_props$style = props.style) != null ? _props$style : {}, {
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        fontSize: '0.7rem',
-        fontWeight: '900',
+        fontSize: '0.8rem',
+        fontWeight: 'bolder',
         lineHeight: '1'
       })
     }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1428,14 +1399,19 @@
         letterSpacing: '-0.05rem'
       }
     }, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500",
       style: {
+        backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
+        // @ts-ignore
+        '--tw-gradient-from': '#84cc16',
+        '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+        '--tw-gradient-to': '#10b981',
+        WebkitBackgroundClip: 'text',
+        color: 'transparent',
         letterSpacing: '0.1rem',
         marginRight: '-0.2rem'
       }
     }, "ROUTER"));
   }
-
   function TanStackRouterDevtools(_ref) {
     let {
       initialIsOpen,
@@ -1453,10 +1429,8 @@
     const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
     const [isResizing, setIsResizing] = useSafeState(false);
     const isMounted = useIsMounted();
-
     const _handleDragStart = (panelElement, startEvent) => {
       var _panelElement$getBoun;
-
       if (startEvent.button !== 0) return; // Only allow left click for drag
 
       setIsResizing(true);
@@ -1464,50 +1438,43 @@
         originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
         pageY: startEvent.pageY
       };
-
       const run = moveEvent => {
         const delta = dragInfo.pageY - moveEvent.pageY;
         const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
         setDevtoolsHeight(newHeight);
-
         if (newHeight < 70) {
           setIsOpen(false);
         } else {
           setIsOpen(true);
         }
       };
-
       const unsub = () => {
         setIsResizing(false);
         document.removeEventListener('mousemove', run);
         document.removeEventListener('mouseUp', unsub);
       };
-
       document.addEventListener('mousemove', run);
       document.addEventListener('mouseup', unsub);
     };
-
     React__default["default"].useEffect(() => {
       setIsResolvedOpen(isOpen != null ? isOpen : false);
-    }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-    // Prevents focusing in a closed panel.
+    }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+    // Toggle panel visibility before/after transition (depending on direction).
+    // Prevents focusing in a closed panel.
     React__default["default"].useEffect(() => {
       const ref = panelRef.current;
-
       if (ref) {
         const handlePanelTransitionStart = () => {
           if (ref && isResolvedOpen) {
             ref.style.visibility = 'visible';
           }
         };
-
         const handlePanelTransitionEnd = () => {
           if (ref && !isResolvedOpen) {
             ref.style.visibility = 'hidden';
           }
         };
-
         ref.addEventListener('transitionstart', handlePanelTransitionStart);
         ref.addEventListener('transitionend', handlePanelTransitionEnd);
         return () => {
@@ -1515,62 +1482,49 @@
           ref.removeEventListener('transitionend', handlePanelTransitionEnd);
         };
       }
-
       return;
     }, [isResolvedOpen]);
     React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
       if (isResolvedOpen) {
         var _rootRef$current, _rootRef$current$pare;
-
         const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
         const run = () => {
           var _panelRef$current, _rootRef$current2;
-
           const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
           if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
             rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
           }
         };
-
         run();
-
         if (typeof window !== 'undefined') {
           window.addEventListener('resize', run);
           return () => {
             var _rootRef$current3;
-
             window.removeEventListener('resize', run);
-
             if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
               rootRef.current.parentElement.style.paddingBottom = previousValue;
             }
           };
         }
       }
-
       return;
     }, [isResolvedOpen]);
-
     const {
-      style: panelStyle = {}
-    } = panelProps,
-          otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
-
+        style: panelStyle = {}
+      } = panelProps,
+      otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
     const {
-      style: closeButtonStyle = {},
-      onClick: onCloseClick
-    } = closeButtonProps,
-          otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
-
+        style: closeButtonStyle = {},
+        onClick: onCloseClick
+      } = closeButtonProps,
+      otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
     const {
-      style: toggleButtonStyle = {},
-      onClick: onToggleClick
-    } = toggleButtonProps,
-          otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
-
+        style: toggleButtonStyle = {},
+        onClick: onToggleClick
+      } = toggleButtonProps,
+      otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3);
 
+    // Do not render on the server
     if (!isMounted()) return null;
     return /*#__PURE__*/React__default["default"].createElement(Container, {
       ref: rootRef,
@@ -1671,19 +1625,20 @@
   }
   const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
     var _Object$values$find$m, _Object$values, _Object$values$find, _router$state$matches, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
-
     const {
-      isOpen = true,
-      handleDragStart,
-      router
-    } = props,
-          panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
-
+        isOpen = true,
+        handleDragStart,
+        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(() => {
-        router.cleanMatchCache(); // router.notify()
-
+        router.cleanMatchCache();
+        // router.notify()
         rerender();
       }, 250);
       return () => {
@@ -1702,9 +1657,7 @@
     }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
-    }, /*#__PURE__*/React__default["default"].createElement("script", {
-      src: "https://cdn.tailwindcss.com"
-    }), /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
       ref: ref,
       className: "TanStackRouterDevtoolsPanel"
     }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
@@ -1734,8 +1687,12 @@
         flexDirection: 'column'
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex justify-start gap-2 p-2 items-center",
       style: {
+        display: 'flex',
+        justifyContent: 'start',
+        gap: '1rem',
+        padding: '1rem',
+        alignItems: 'center',
         background: defaultTheme.backgroundAlt
       }
     }, /*#__PURE__*/React__default["default"].createElement(Logo, {
@@ -1943,10 +1900,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'