@tanstack/react-router-devtools 0.0.1-beta.83 → 1.114.0

package/src/index.tsx

@@ -1 +0,0 @@
-export * from './devtools'

package/src/styledComponents.ts

@@ -1,106 +0,0 @@
-import { styled } from './utils'
-
-export const Panel = 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',
-    },
-  },
-)
-
-export const ActivePanel = styled(
-  'div',
-  () => ({
-    flex: '1 1 500px',
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    height: '100%',
-  }),
-  {
-    '(max-width: 700px)': (_props, theme) => ({
-      borderTop: `2px solid ${theme.gray}`,
-    }),
-  },
-)
-
-export const Button = 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',
-// })
-
-export const Code = styled('code', {
-  fontSize: '.9em',
-})
-
-export const Input = styled('input', (_props, theme) => ({
-  backgroundColor: theme.inputBackgroundColor,
-  border: 0,
-  borderRadius: '.2em',
-  color: theme.inputTextColor,
-  fontSize: '.9em',
-  lineHeight: `1.3`,
-  padding: '.3em .4em',
-}))
-
-export const Select = styled(
-  'select',
-  (_props, theme) => ({
-    display: `inline-block`,
-    fontSize: `.9em`,
-    fontFamily: `sans-serif`,
-    fontWeight: 'normal',
-    lineHeight: `1.3`,
-    padding: `.3em 1.5em .3em .5em`,
-    height: 'auto',
-    border: 0,
-    borderRadius: `.2em`,
-    appearance: `none`,
-    WebkitAppearance: 'none',
-    backgroundColor: theme.inputBackgroundColor,
-    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
-    backgroundRepeat: `no-repeat`,
-    backgroundPosition: `right .55em center`,
-    backgroundSize: `.65em auto, 100%`,
-    color: theme.inputTextColor,
-  }),
-  {
-    '(max-width: 500px)': {
-      display: 'none',
-    },
-  },
-)

package/src/theme.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-export const defaultTheme = {
-  background: '#0b1521',
-  backgroundAlt: '#132337',
-  foreground: 'white',
-  gray: '#3f4e60',
-  grayAlt: '#222e3e',
-  inputBackgroundColor: '#fff',
-  inputTextColor: '#000',
-  success: '#00ab52',
-  danger: '#ff0085',
-  active: '#006bff',
-  warning: '#ffb200',
-} as const
-
-export type Theme = typeof defaultTheme
-interface ProviderProps {
-  theme: Theme
-  children?: React.ReactNode
-}
-
-const ThemeContext = React.createContext(defaultTheme)
-
-export function ThemeProvider({ theme, ...rest }: ProviderProps) {
-  return <ThemeContext.Provider value={theme} {...rest} />
-}
-
-export function useTheme() {
-  return React.useContext(ThemeContext)
-}

package/src/useLocalStorage.ts

@@ -1,52 +0,0 @@
-import React from 'react'
-
-const getItem = (key: string): unknown => {
-  try {
-    const itemValue = localStorage.getItem(key)
-    if (typeof itemValue === 'string') {
-      return JSON.parse(itemValue)
-    }
-    return undefined
-  } catch {
-    return undefined
-  }
-}
-
-export default function useLocalStorage<T>(
-  key: string,
-  defaultValue: T | undefined,
-): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {
-  const [value, setValue] = React.useState<T>()
-
-  React.useEffect(() => {
-    const initialValue = getItem(key) as T | undefined
-
-    if (typeof initialValue === 'undefined' || initialValue === null) {
-      setValue(
-        typeof defaultValue === 'function' ? defaultValue() : defaultValue,
-      )
-    } else {
-      setValue(initialValue)
-    }
-  }, [defaultValue, key])
-
-  const setter = React.useCallback(
-    (updater: any) => {
-      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]
-}

package/src/useMediaQuery.ts

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export default function useMediaQuery(query: string): boolean | undefined {
-  // 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 }: { matches: boolean }) =>
-        setIsMatch(matches)
-
-      // Listen for changes
-      matcher.addListener(onChange)
-
-      return () => {
-        // Stop listening for changes
-        matcher.removeListener(onChange)
-      }
-    }
-
-    return
-  }, [isMatch, query, setIsMatch])
-
-  return isMatch
-}

package/src/utils.ts

@@ -1,169 +0,0 @@
-import React from 'react'
-import { AnyRouteMatch, RouteMatch } from '@tanstack/react-router'
-
-import { Theme, useTheme } from './theme'
-import useMediaQuery from './useMediaQuery'
-
-export const isServer = typeof window === 'undefined'
-
-type StyledComponent<T> = T extends 'button'
-  ? React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement>,
-      HTMLButtonElement
-    >
-  : T extends 'input'
-  ? React.DetailedHTMLProps<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      HTMLInputElement
-    >
-  : T extends 'select'
-  ? React.DetailedHTMLProps<
-      React.SelectHTMLAttributes<HTMLSelectElement>,
-      HTMLSelectElement
-    >
-  : T extends keyof HTMLElementTagNameMap
-  ? React.HTMLAttributes<HTMLElementTagNameMap[T]>
-  : never
-
-export function getStatusColor(match: AnyRouteMatch, theme: Theme) {
-  return match.state.status === 'pending'
-    ? theme.active
-    : match.state.status === 'error'
-    ? theme.danger
-    : match.state.status === 'success'
-    ? theme.success
-    : theme.gray
-}
-
-type Styles =
-  | React.CSSProperties
-  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)
-
-export function styled<T extends keyof HTMLElementTagNameMap>(
-  type: T,
-  newStyles: Styles,
-  queries: Record<string, Styles> = {},
-) {
-  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(
-    ({ style, ...rest }, ref) => {
-      const theme = useTheme()
-
-      const mediaStyles = Object.entries(queries).reduce(
-        (current, [key, value]) => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useMediaQuery(key)
-            ? {
-                ...current,
-                ...(typeof value === 'function' ? value(rest, theme) : value),
-              }
-            : current
-        },
-        {},
-      )
-
-      return React.createElement(type, {
-        ...rest,
-        style: {
-          ...(typeof newStyles === 'function'
-            ? newStyles(rest, theme)
-            : newStyles),
-          ...style,
-          ...mediaStyles,
-        },
-        ref,
-      })
-    },
-  )
-}
-
-export 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
- */
-export const displayValue = (value: unknown) => {
-  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.
- */
-export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
-  const isMounted = useIsMounted()
-  const [state, setState] = React.useState(initialState)
-
-  const safeSetState = React.useCallback(
-    (value: T) => {
-      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: () => void) {
-  Promise.resolve()
-    .then(callback)
-    .catch((error) =>
-      setTimeout(() => {
-        throw error
-      }),
-    )
-}
-
-export function multiSortBy<T>(
-  arr: T[],
-  accessors: ((item: T) => any)[] = [(d) => d],
-): T[] {
-  return arr
-    .map((d, i) => [d, i] as const)
-    .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)
-}