@tanstack/react-router 0.0.1-alpha.0

package/src/index.tsx

@@ -0,0 +1,568 @@
+import * as React from 'react'
+
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+
+import {
+  AnyRoute,
+  RootRouteId,
+  rootRouteId,
+  Route,
+  Router,
+} from '@tanstack/router-core'
+import {
+  warning,
+  RouterOptions,
+  RouteMatch,
+  MatchRouteOptions,
+  RouteConfig,
+  AnyRouteConfig,
+  AnyAllRouteInfo,
+  DefaultAllRouteInfo,
+  functionalUpdate,
+  createRouter,
+  AnyRouteInfo,
+  AllRouteInfo,
+  RouteInfo,
+  ValidFromPath,
+  LinkOptions,
+  RouteInfoByPath,
+  ResolveRelativePath,
+  NoInfer,
+  ToOptions,
+} from '@tanstack/router-core'
+
+export * from '@tanstack/router-core'
+
+declare module '@tanstack/router-core' {
+  interface FrameworkGenerics {
+    Element: React.ReactNode
+    AsyncElement: (opts: {
+      params: Record<string, string>
+    }) => Promise<React.ReactNode>
+    SyncOrAsyncElement: React.ReactNode | FrameworkGenerics['AsyncElement']
+  }
+
+  interface Router<
+    TRouteConfig extends AnyRouteConfig = RouteConfig,
+    TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  > extends Pick<
+      Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][RootRouteId]>,
+      'linkProps' | 'Link' | 'MatchRoute'
+    > {
+    useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+      routeId: TId,
+    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+    useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+      routeId: TId,
+    ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+    // linkProps: <TTo extends string = '.'>(
+    //   props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
+    //     React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    // ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
+    // Link: <TTo extends string = '.'>(
+    //   props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
+    //     React.AnchorHTMLAttributes<HTMLAnchorElement> &
+    //     Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    //       // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    //       children?:
+    //         | React.ReactNode
+    //         | ((state: { isActive: boolean }) => React.ReactNode)
+    //     },
+    // ) => JSX.Element
+    // MatchRoute: <TTo extends string = '.'>(
+    //   props: ToOptions<TAllRouteInfo, '/', TTo> &
+    //     MatchRouteOptions & {
+    //       // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    //       children?:
+    //         | React.ReactNode
+    //         | ((
+    //             params: RouteInfoByPath<
+    //               TAllRouteInfo,
+    //               ResolveRelativePath<'/', NoInfer<TTo>>
+    //             >['allParams'],
+    //           ) => React.ReactNode)
+    //     },
+    // ) => JSX.Element
+  }
+
+  interface Route<
+    TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
+    TRouteInfo extends AnyRouteInfo = RouteInfo,
+  > {
+    linkProps: <TTo extends string = '.'>(
+      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
+    Link: <TTo extends string = '.'>(
+      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
+        React.AnchorHTMLAttributes<HTMLAnchorElement> &
+        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+          children?:
+            | React.ReactNode
+            | ((state: { isActive: boolean }) => React.ReactNode)
+        },
+    ) => JSX.Element
+    MatchRoute: <TTo extends string = '.'>(
+      props: ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
+        MatchRouteOptions & {
+          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+          children?:
+            | React.ReactNode
+            | ((
+                params: RouteInfoByPath<
+                  TAllRouteInfo,
+                  ResolveRelativePath<TRouteInfo['fullPath'], NoInfer<TTo>>
+                >['allParams'],
+              ) => React.ReactNode)
+        },
+    ) => JSX.Element
+  }
+}
+
+type LinkPropsOptions<
+  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+  TTo extends string = '.',
+> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
+  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  activeProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  inactiveProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+}
+
+export type PromptProps = {
+  message: string
+  when?: boolean | any
+  children?: React.ReactNode
+}
+
+//
+
+const matchesContext = React.createContext<RouteMatch[]>(null!)
+const routerContext = React.createContext<{ router: Router<any, any> }>(null!)
+
+// Detect if we're in the DOM
+const isDOM = Boolean(
+  typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement,
+)
+
+const useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect
+
+export type MatchesProviderProps = {
+  value: RouteMatch[]
+  children: React.ReactNode
+}
+
+export function MatchesProvider(props: MatchesProviderProps) {
+  return <matchesContext.Provider {...props} />
+}
+
+const useRouterSubscription = (router: Router<any, any>) => {
+  useSyncExternalStore(
+    (cb) => router.subscribe(() => cb()),
+    () => router.state,
+  )
+}
+
+export function createReactRouter<
+  TRouteConfig extends AnyRouteConfig = RouteConfig,
+>(opts: RouterOptions<TRouteConfig>): Router<TRouteConfig> {
+  const coreRouter = createRouter<TRouteConfig>({
+    ...opts,
+    createRouter: (router) => {
+      const routerExt: Pick<Router<any, any>, 'useRoute' | 'useMatch'> = {
+        useRoute: (routeId) => {
+          const route = router.getRoute(routeId)
+          useRouterSubscription(router)
+          if (!route) {
+            throw new Error(
+              `Could not find a route for route "${
+                routeId as string
+              }"! Did you forget to add it to your route config?`,
+            )
+          }
+          return route
+        },
+        useMatch: (routeId) => {
+          if (routeId === rootRouteId) {
+            throw new Error(
+              `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
+            )
+          }
+          const runtimeMatch = useMatch()
+          const match = router.state.matches.find((d) => d.routeId === routeId)
+
+          if (!match) {
+            throw new Error(
+              `Could not find a match for route "${
+                routeId as string
+              }" being rendered in this component!`,
+            )
+          }
+
+          if (runtimeMatch.routeId !== match?.routeId) {
+            throw new Error(
+              `useMatch('${
+                match?.routeId as string
+              }') is being called in a component that is meant to render the '${
+                runtimeMatch.routeId
+              }' route. Did you mean to 'useRoute(${
+                match?.routeId as string
+              })' instead?`,
+            )
+          }
+
+          useRouterSubscription(router)
+
+          if (!match) {
+            throw new Error('Match not found!')
+          }
+
+          return match
+        },
+      }
+
+      Object.assign(router, routerExt)
+    },
+    createRoute: ({ router, route }) => {
+      const routeExt: Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> = {
+        linkProps: (options) => {
+          const {
+            // custom props
+            type,
+            children,
+            target,
+            activeProps = () => ({ className: 'active' }),
+            inactiveProps = () => ({}),
+            activeOptions,
+            disabled,
+            // fromCurrent,
+            hash,
+            search,
+            params,
+            to,
+            preload,
+            preloadDelay,
+            preloadMaxAge,
+            replace,
+            // element props
+            style,
+            className,
+            onClick,
+            onFocus,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            ...rest
+          } = options
+
+          const linkInfo = route.buildLink(options)
+
+          if (linkInfo.type === 'external') {
+            const { href } = linkInfo
+            return { href }
+          }
+
+          const {
+            handleClick,
+            handleFocus,
+            handleEnter,
+            handleLeave,
+            isActive,
+            next,
+          } = linkInfo
+
+          const composeHandlers =
+            (handlers: (undefined | ((e: any) => void))[]) =>
+            (e: React.SyntheticEvent) => {
+              e.persist()
+              handlers.forEach((handler) => {
+                if (handler) handler(e)
+              })
+            }
+
+          // Get the active props
+          const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+            isActive ? functionalUpdate(activeProps) ?? {} : {}
+
+          // Get the inactive props
+          const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+            isActive ? {} : functionalUpdate(inactiveProps) ?? {}
+
+          return {
+            ...resolvedActiveProps,
+            ...resolvedInactiveProps,
+            ...rest,
+            href: disabled ? undefined : next.href,
+            onClick: composeHandlers([handleClick, onClick]),
+            onFocus: composeHandlers([handleFocus, onFocus]),
+            onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
+            onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
+            target,
+            style: {
+              ...style,
+              ...resolvedActiveProps.style,
+              ...resolvedInactiveProps.style,
+            },
+            className:
+              [
+                className,
+                resolvedActiveProps.className,
+                resolvedInactiveProps.className,
+              ]
+                .filter(Boolean)
+                .join(' ') || undefined,
+            ...(disabled
+              ? {
+                  role: 'link',
+                  'aria-disabled': true,
+                }
+              : undefined),
+            ['data-status']: isActive ? 'active' : undefined,
+          }
+        },
+        Link: React.forwardRef((props: any, ref) => {
+          const linkProps = route.linkProps(props)
+
+          useRouterSubscription(router)
+
+          return (
+            <a
+              {...{
+                ref: ref as any,
+                ...linkProps,
+                children:
+                  typeof props.children === 'function'
+                    ? props.children({
+                        isActive:
+                          (linkProps as any)['data-status'] === 'active',
+                      })
+                    : props.children,
+              }}
+            />
+          )
+        }) as any,
+        MatchRoute: (opts) => {
+          const { pending, caseSensitive, children, ...rest } = opts
+
+          const params = route.matchRoute(rest as any, {
+            pending,
+            caseSensitive,
+          })
+
+          // useRouterSubscription(router)
+
+          if (!params) {
+            return null
+          }
+
+          return typeof opts.children === 'function'
+            ? opts.children(params as any)
+            : (opts.children as any)
+        },
+      }
+
+      Object.assign(route, routeExt)
+    },
+  })
+
+  return coreRouter as any
+}
+
+export type RouterProps<
+  TRouteConfig extends AnyRouteConfig = RouteConfig,
+  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
+> = RouterOptions<TRouteConfig> & {
+  router: Router<TRouteConfig, TAllRouteInfo>
+  // Children will default to `<Outlet />` if not provided
+  children?: React.ReactNode
+}
+
+export function RouterProvider<
+  TRouteConfig extends AnyRouteConfig = RouteConfig,
+  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
+>({ children, router, ...rest }: RouterProps<TRouteConfig, TAllRouteInfo>) {
+  router.update(rest)
+
+  useSyncExternalStore(
+    (cb) => router.subscribe(() => cb()),
+    () => router.state,
+  )
+
+  useLayoutEffect(() => {
+    router.mount()
+  }, [])
+
+  return (
+    <routerContext.Provider value={{ router }}>
+      <MatchesProvider value={router.state.matches}>
+        {children ?? <Outlet />}
+      </MatchesProvider>
+    </routerContext.Provider>
+  )
+}
+
+export function useRouter(): Router {
+  const value = React.useContext(routerContext)
+  warning(!value, 'useRouter must be used inside a <Router> component!')
+
+  useRouterSubscription(value.router)
+
+  return value.router as Router
+}
+
+export function useMatches(): RouteMatch[] {
+  return React.useContext(matchesContext)
+}
+
+export function useParentMatches(): RouteMatch[] {
+  const router = useRouter()
+  const match = useMatch()
+  const matches = router.state.matches
+  return matches.slice(
+    0,
+    matches.findIndex((d) => d.matchId === match.matchId) - 1,
+  )
+}
+
+export function useMatch<T>(): RouteMatch {
+  return useMatches()?.[0] as RouteMatch
+}
+
+export function Outlet() {
+  const router = useRouter()
+  const [, ...matches] = useMatches()
+
+  const childMatch = matches[0]
+
+  if (!childMatch) return null
+
+  const element = (((): React.ReactNode => {
+    if (!childMatch) {
+      return null
+    }
+
+    const errorElement =
+      childMatch.__.errorElement ?? router.options.defaultErrorElement
+
+    if (childMatch.status === 'error') {
+      if (errorElement) {
+        return errorElement as any
+      }
+
+      if (
+        childMatch.options.useErrorBoundary ||
+        router.options.useErrorBoundary
+      ) {
+        throw childMatch.error
+      }
+
+      return <DefaultCatchBoundary error={childMatch.error} />
+    }
+
+    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
+      if (childMatch.isPending) {
+        const pendingElement =
+          childMatch.__.pendingElement ?? router.options.defaultPendingElement
+
+        if (childMatch.options.pendingMs || pendingElement) {
+          return (pendingElement as any) ?? null
+        }
+      }
+
+      return null
+    }
+
+    return (childMatch.__.element as any) ?? router.options.defaultElement
+  })() as JSX.Element) ?? <Outlet />
+
+  const catchElement =
+    childMatch?.options.catchElement ?? router.options.defaultCatchElement
+
+  return (
+    <MatchesProvider value={matches} key={childMatch.matchId}>
+      <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
+    </MatchesProvider>
+  )
+}
+
+class CatchBoundary extends React.Component<{
+  children: any
+  catchElement: any
+}> {
+  state = {
+    error: false,
+  }
+  componentDidCatch(error: any, info: any) {
+    console.error(error)
+
+    this.setState({
+      error,
+      info,
+    })
+  }
+  reset = () => {
+    this.setState({
+      error: false,
+      info: false,
+    })
+  }
+  render() {
+    const catchElement = this.props.catchElement ?? DefaultCatchBoundary
+
+    if (this.state.error) {
+      return typeof catchElement === 'function'
+        ? catchElement(this.state)
+        : catchElement
+    }
+
+    return this.props.children
+  }
+}
+
+export function DefaultCatchBoundary({ error }: { error: any }) {
+  return (
+    <div style={{ padding: '.5rem', maxWidth: '100%' }}>
+      <strong style={{ fontSize: '1.2rem' }}>Something went wrong!</strong>
+      <div style={{ height: '.5rem' }} />
+      <div>
+        <pre>
+          {error.message ? (
+            <code
+              style={{
+                fontSize: '.7em',
+                border: '1px solid red',
+                borderRadius: '.25rem',
+                padding: '.5rem',
+                color: 'red',
+              }}
+            >
+              {error.message}
+            </code>
+          ) : null}
+        </pre>
+      </div>
+      <div style={{ height: '1rem' }} />
+      <div
+        style={{
+          fontSize: '.8em',
+          borderLeft: '3px solid rgba(127, 127, 127, 1)',
+          paddingLeft: '.5rem',
+          opacity: 0.5,
+        }}
+      >
+        If you are the owner of this website, it's highly recommended that you
+        configure your own custom Catch/Error boundaries for the router. You can
+        optionally configure a boundary for each route.
+      </div>
+    </div>
+  )
+}

package/src/qss.ts

@@ -0,0 +1,53 @@
+// @ts-nocheck
+
+// We're inlining qss here for compression's sake, but we've included it as a hard dependency for the MIT license it requires.
+
+export function encode(obj, pfx?: string) {
+  var k,
+    i,
+    tmp,
+    str = ''
+
+  for (k in obj) {
+    if ((tmp = obj[k]) !== void 0) {
+      if (Array.isArray(tmp)) {
+        for (i = 0; i < tmp.length; i++) {
+          str && (str += '&')
+          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i])
+        }
+      } else {
+        str && (str += '&')
+        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp)
+      }
+    }
+  }
+
+  return (pfx || '') + str
+}
+
+function toValue(mix) {
+  if (!mix) return ''
+  var str = decodeURIComponent(mix)
+  if (str === 'false') return false
+  if (str === 'true') return true
+  return +str * 0 === 0 ? +str : str
+}
+
+export function decode(str) {
+  var tmp,
+    k,
+    out = {},
+    arr = str.split('&')
+
+  while ((tmp = arr.shift())) {
+    tmp = tmp.split('=')
+    k = tmp.shift()
+    if (out[k] !== void 0) {
+      out[k] = [].concat(out[k], toValue(tmp.shift()))
+    } else {
+      out[k] = toValue(tmp.shift())
+    }
+  }
+
+  return out
+}