@tanstack/react-router-devtools 0.0.1-alpha.1

package/src/index.tsx

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

package/src/styledComponents.ts

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,52 @@
+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 => {
+      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

@@ -0,0 +1,36 @@
+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
+    }
+  })
+
+  // 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)
+      }
+    }
+  }, [isMatch, query, setIsMatch])
+
+  return isMatch
+}

package/src/utils.ts

@@ -0,0 +1,151 @@
+import React from 'react'
+import { 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: RouteMatch, theme: 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 query.state.isFetching
+//     ? 'fetching'
+//     : !query.getObserversCount()
+//     ? 'inactive'
+//     : query.isStale()
+//     ? 'stale'
+//     : 'fresh'
+// }
+
+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
+      }),
+    )
+}