@tanstack/router-devtools 1.7.1 → 1.8.1

package/build/cjs/index.js

@@ -1,19 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-var devtools = require('./devtools.js');
-
-
-
-exports.TanStackRouterDevtools = devtools.TanStackRouterDevtools;
-exports.TanStackRouterDevtoolsPanel = devtools.TanStackRouterDevtoolsPanel;
-//# sourceMappingURL=index.js.map

package/build/cjs/styledComponents.js

@@ -1,76 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-var utils = require('./utils.js');
-
-const Panel = utils.styled('div', (_props, theme) => ({
-  fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: `sans-serif`,
-  display: 'flex',
-  backgroundColor: theme.background,
-  color: theme.foreground
-}), {
-  '(max-width: 700px)': {
-    flexDirection: 'column'
-  },
-  '(max-width: 600px)': {
-    fontSize: '.9em'
-    // flexDirection: 'column',
-  }
-});
-const ActivePanel = utils.styled('div', () => ({
-  flex: '1 1 500px',
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'auto',
-  height: '100%'
-}), {
-  '(max-width: 700px)': (_props, theme) => ({
-    borderTop: `2px solid ${theme.gray}`
-  })
-});
-const Button = utils.styled('button', (props, theme) => ({
-  appearance: 'none',
-  fontSize: '.9em',
-  fontWeight: 'bold',
-  background: theme.gray,
-  border: '0',
-  borderRadius: '.3em',
-  color: 'white',
-  padding: '.5em',
-  opacity: props.disabled ? '.5' : undefined,
-  cursor: 'pointer'
-}));
-
-// export const QueryKeys = styled('span', {
-//   display: 'inline-block',
-//   fontSize: '0.9em',
-// })
-
-// export const QueryKey = styled('span', {
-//   display: 'inline-flex',
-//   alignItems: 'center',
-//   padding: '.2em .4em',
-//   fontWeight: 'bold',
-//   textShadow: '0 0 10px black',
-//   borderRadius: '.2em',
-// })
-
-const Code = utils.styled('code', {
-  fontSize: '.9em'
-});
-
-exports.ActivePanel = ActivePanel;
-exports.Button = Button;
-exports.Code = Code;
-exports.Panel = Panel;
-//# sourceMappingURL=styledComponents.js.map

package/build/cjs/theme.js

@@ -1,45 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-
-const defaultTheme = {
-  background: '#222222',
-  backgroundAlt: '#292929',
-  foreground: 'white',
-  gray: '#444',
-  grayAlt: '#444',
-  inputBackgroundColor: '#fff',
-  inputTextColor: '#000',
-  success: '#80cb00',
-  danger: '#ff0085',
-  active: '#0099ff',
-  warning: '#ffb200'
-};
-const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
-function ThemeProvider({
-  theme,
-  ...rest
-}) {
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers.extends({
-    value: theme
-  }, rest));
-}
-function useTheme() {
-  return React.useContext(ThemeContext);
-}
-
-exports.ThemeProvider = ThemeProvider;
-exports.defaultTheme = defaultTheme;
-exports.useTheme = useTheme;
-//# sourceMappingURL=theme.js.map

package/build/cjs/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["import React from 'react'\n\nexport const defaultTheme = {\n  background: '#222222',\n  backgroundAlt: '#292929',\n  foreground: 'white',\n  gray: '#444',\n  grayAlt: '#444',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#80cb00',\n  danger: '#ff0085',\n  active: '#0099ff',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","createElement","Provider","_extends","value","useTheme","useContext"],"mappings":";;;;;;;;;;;;;;;AAEO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,OAAO,EAAE,MAAM;AACfC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACd,YAAY,CAAC,CAAA;AAE/C,SAASe,aAAaA,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAOJ,KAAA,CAAAK,aAAA,CAACN,YAAY,CAACO,QAAQ,EAAAC,iCAAA,CAAA;AAACC,IAAAA,KAAK,EAAEL,KAAAA;GAAWC,EAAAA,IAAI,CAAG,CAAC,CAAA;AAC1D,CAAA;AAEO,SAASK,QAAQA,GAAG;AACzB,EAAA,OAAOT,KAAK,CAACU,UAAU,CAACX,YAAY,CAAC,CAAA;AACvC;;;;;;"}

package/build/cjs/useLocalStorage.js

@@ -1,54 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const getItem = key => {
-  try {
-    const itemValue = localStorage.getItem(key);
-    if (typeof itemValue === 'string') {
-      return JSON.parse(itemValue);
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};
-function useLocalStorage(key, defaultValue) {
-  const [value, setValue] = React.useState();
-  React.useEffect(() => {
-    const initialValue = getItem(key);
-    if (typeof initialValue === 'undefined' || initialValue === null) {
-      setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
-    } else {
-      setValue(initialValue);
-    }
-  }, [defaultValue, key]);
-  const setter = React.useCallback(updater => {
-    setValue(old => {
-      let newVal = updater;
-      if (typeof updater == 'function') {
-        newVal = updater(old);
-      }
-      try {
-        localStorage.setItem(key, JSON.stringify(newVal));
-      } catch {}
-      return newVal;
-    });
-  }, [key]);
-  return [value, setter];
-}
-
-exports.default = useLocalStorage;
-//# sourceMappingURL=useLocalStorage.js.map

package/build/cjs/useLocalStorage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLocalStorage.js","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import React from 'react'\n\nconst getItem = (key: string): unknown => {\n  try {\n    const itemValue = localStorage.getItem(key)\n    if (typeof itemValue === 'string') {\n      return JSON.parse(itemValue)\n    }\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nexport default function useLocalStorage<T>(\n  key: string,\n  defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n  const [value, setValue] = React.useState<T>()\n\n  React.useEffect(() => {\n    const initialValue = getItem(key) as T | undefined\n\n    if (typeof initialValue === 'undefined' || initialValue === null) {\n      setValue(\n        typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n      )\n    } else {\n      setValue(initialValue)\n    }\n  }, [defaultValue, key])\n\n  const setter = React.useCallback(\n    (updater: any) => {\n      setValue((old) => {\n        let newVal = updater\n\n        if (typeof updater == 'function') {\n          newVal = updater(old)\n        }\n        try {\n          localStorage.setItem(key, JSON.stringify(newVal))\n        } catch {}\n\n        return newVal\n      })\n    },\n    [key],\n  )\n\n  return [value, setter]\n}\n"],"names":["getItem","key","itemValue","localStorage","JSON","parse","undefined","useLocalStorage","defaultValue","value","setValue","React","useState","useEffect","initialValue","setter","useCallback","updater","old","newVal","setItem","stringify"],"mappings":";;;;;;;;;;;;;;;;AAEA,MAAMA,OAAO,GAAIC,GAAW,IAAc;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAO,CAACC,GAAG,CAAC,CAAA;AAC3C,IAAA,IAAI,OAAOC,SAAS,KAAK,QAAQ,EAAE;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAK,CAACH,SAAS,CAAC,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAC,CAAC,MAAM;AACN,IAAA,OAAOA,SAAS,CAAA;AAClB,GAAA;AACF,CAAC,CAAA;AAEc,SAASC,eAAeA,CACrCN,GAAW,EACXO,YAA2B,EACiC;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,EAAK,CAAA;EAE7CD,KAAK,CAACE,SAAS,CAAC,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAG,CAAkB,CAAA;IAElD,IAAI,OAAOa,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,IAAI,EAAE;MAChEJ,QAAQ,CACN,OAAOF,YAAY,KAAK,UAAU,GAAGA,YAAY,EAAE,GAAGA,YACxD,CAAC,CAAA;AACH,KAAC,MAAM;MACLE,QAAQ,CAACI,YAAY,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACN,YAAY,EAAEP,GAAG,CAAC,CAAC,CAAA;AAEvB,EAAA,MAAMc,MAAM,GAAGJ,KAAK,CAACK,WAAW,CAC7BC,OAAY,IAAK;IAChBP,QAAQ,CAAEQ,GAAG,IAAK;MAChB,IAAIC,MAAM,GAAGF,OAAO,CAAA;AAEpB,MAAA,IAAI,OAAOA,OAAO,IAAI,UAAU,EAAE;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAG,CAAC,CAAA;AACvB,OAAA;MACA,IAAI;QACFf,YAAY,CAACiB,OAAO,CAACnB,GAAG,EAAEG,IAAI,CAACiB,SAAS,CAACF,MAAM,CAAC,CAAC,CAAA;OAClD,CAAC,MAAM,EAAC;AAET,MAAA,OAAOA,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAAClB,GAAG,CACN,CAAC,CAAA;AAED,EAAA,OAAO,CAACQ,KAAK,EAAEM,MAAM,CAAC,CAAA;AACxB;;;;"}

package/build/cjs/useMediaQuery.js

@@ -1,54 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function useMediaQuery(query) {
-  // Keep track of the preference in state, start with the current match
-  const [isMatch, setIsMatch] = React.useState(() => {
-    if (typeof window !== 'undefined') {
-      return window.matchMedia && window.matchMedia(query).matches;
-    }
-    return;
-  });
-
-  // Watch for changes
-  React.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (!window.matchMedia) {
-        return;
-      }
-
-      // Create a matcher
-      const matcher = window.matchMedia(query);
-
-      // Create our handler
-      const onChange = ({
-        matches
-      }) => setIsMatch(matches);
-
-      // Listen for changes
-      matcher.addListener(onChange);
-      return () => {
-        // Stop listening for changes
-        matcher.removeListener(onChange);
-      };
-    }
-    return;
-  }, [isMatch, query, setIsMatch]);
-  return isMatch;
-}
-
-exports.default = useMediaQuery;
-//# sourceMappingURL=useMediaQuery.js.map

package/build/cjs/utils.js

@@ -1,131 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-var React = require('react');
-var theme = require('./theme.js');
-var useMediaQuery = require('./useMediaQuery.js');
-
-const isServer = typeof window === 'undefined';
-function getStatusColor(match, theme) {
-  return match.status === 'pending' || match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
-}
-function getRouteStatusColor(matches, route, theme) {
-  const found = matches.find(d => d.routeId === route.id);
-  if (!found) return theme.gray;
-  return getStatusColor(found, theme);
-}
-function styled(type, newStyles, queries = {}) {
-  return /*#__PURE__*/React.forwardRef(({
-    style,
-    ...rest
-  }, ref) => {
-    const theme$1 = theme.useTheme();
-    const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery.default(key) ? {
-        ...current,
-        ...(typeof value === 'function' ? value(rest, theme$1) : value)
-      } : current;
-    }, {});
-    return /*#__PURE__*/React.createElement(type, {
-      ...rest,
-      style: {
-        ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
-        ...style,
-        ...mediaStyles
-      },
-      ref
-    });
-  });
-}
-function useIsMounted() {
-  const mountedRef = React.useRef(false);
-  const isMounted = React.useCallback(() => mountedRef.current, []);
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  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;
-  try {
-    return JSON.stringify(newValue, name);
-  } catch (e) {
-    return `unable to stringify`;
-  }
-};
-
-/**
- * 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.useState(initialState);
-  const safeSetState = React.useCallback(value => {
-    scheduleMicrotask(() => {
-      if (isMounted()) {
-        setState(value);
-      }
-    });
-  }, [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 = [d => d]) {
-  return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
-    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(([d]) => d);
-}
-
-exports.displayValue = displayValue;
-exports.getRouteStatusColor = getRouteStatusColor;
-exports.getStatusColor = getStatusColor;
-exports.isServer = isServer;
-exports.multiSortBy = multiSortBy;
-exports.styled = styled;
-exports.useIsMounted = useIsMounted;
-exports.useSafeState = useSafeState;
-//# sourceMappingURL=utils.js.map