@tanstack/router-devtools-core 1.20.3-alpha.1

package/src/utils.tsx

@@ -0,0 +1,185 @@
+import { Dynamic } from 'solid-js/web'
+import { createEffect, createRenderEffect, createSignal } from 'solid-js'
+import { useTheme } from './theme'
+import useMediaQuery from './useMediaQuery'
+import type { AnyRoute, AnyRouteMatch } from '@tanstack/router-core'
+
+import type { Theme } from './theme'
+import type { JSX } from 'solid-js'
+
+export const isServer = typeof window === 'undefined'
+
+type StyledComponent<T> = T extends 'button'
+  ? JSX.ButtonHTMLAttributes<HTMLButtonElement>
+  : T extends 'input'
+    ? JSX.InputHTMLAttributes<HTMLInputElement>
+    : T extends 'select'
+      ? JSX.SelectHTMLAttributes<HTMLSelectElement>
+      : T extends keyof HTMLElementTagNameMap
+        ? JSX.HTMLAttributes<HTMLElementTagNameMap[T]>
+        : never
+
+export function getStatusColor(match: AnyRouteMatch) {
+  const colorMap = {
+    pending: 'yellow',
+    success: 'green',
+    error: 'red',
+    notFound: 'purple',
+    redirected: 'gray',
+  } as const
+
+  return match.isFetching && match.status === 'success'
+    ? match.isFetching === 'beforeLoad'
+      ? 'purple'
+      : 'blue'
+    : colorMap[match.status]
+}
+
+export function getRouteStatusColor(
+  matches: Array<AnyRouteMatch>,
+  route: AnyRoute,
+) {
+  const found = matches.find((d) => d.routeId === route.id)
+  if (!found) return 'gray'
+  return getStatusColor(found)
+}
+
+type Styles =
+  | JSX.CSSProperties
+  | ((props: Record<string, any>, theme: Theme) => JSX.CSSProperties)
+
+export function styled<T extends keyof HTMLElementTagNameMap>(
+  type: T,
+  newStyles: Styles,
+  queries: Record<string, Styles> = {},
+) {
+  return ({
+    ref,
+    style,
+    ...rest
+  }: StyledComponent<T> & {
+    ref?: HTMLElementTagNameMap[T] | undefined
+  }) => {
+    const theme = useTheme()
+
+    const mediaStyles = Object.entries(queries).reduce(
+      (current, [key, value]) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        return useMediaQuery(key)
+          ? {
+              ...current,
+              ...(typeof value === 'function' ? value(rest, theme) : value),
+            }
+          : current
+      },
+      {},
+    )
+
+    const baseStyles =
+      typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles
+
+    // Handle style being either a string or an object
+    const combinedStyles =
+      typeof style === 'string'
+        ? { ...baseStyles, ...mediaStyles, cssText: style }
+        : { ...baseStyles, ...style, ...mediaStyles }
+
+    return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <Dynamic component={type} {...rest} style={combinedStyles} ref={ref} />
+    )
+  }
+}
+
+export function useIsMounted() {
+  const [isMounted, setIsMounted] = createSignal(false)
+
+  const effect = isServer ? createEffect : createRenderEffect
+
+  effect(() => {
+    setIsMounted(true)
+  })
+
+  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
+  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.
+ */
+export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
+  const isMounted = useIsMounted()
+  const [state, setState] = createSignal(initialState)
+
+  const safeSetState = (value: T) => {
+    scheduleMicrotask(() => {
+      if (isMounted()) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        setState(value)
+      }
+    })
+  }
+
+  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: Array<T>,
+  accessors: Array<(item: T) => any> = [(d) => d],
+): Array<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)
+}