@tanstack/solid-router 1.20.3-alpha.1

package/src/useMatch.tsx

@@ -0,0 +1,96 @@
+import * as Solid from 'solid-js'
+import invariant from 'tiny-invariant'
+import { useRouterState } from './useRouterState'
+import { dummyMatchContext, matchContext } from './matchContext'
+import type {
+  AnyRouter,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RegisteredRouter,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+} from '@tanstack/router-core'
+
+export interface UseMatchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (
+    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
+  ) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseMatchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchBaseOptions<TRouter, TFrom, true, true, TSelected>,
+) => Solid.Accessor<UseMatchResult<TRouter, TFrom, true, TSelected>>
+
+export type UseMatchOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseMatchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseMatchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? TStrict extends true
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
+  : TSelected
+
+export function useMatch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseMatchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Solid.Accessor<
+  ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  const nearestMatchId = Solid.useContext(
+    opts.from ? dummyMatchContext : matchContext,
+  )
+
+  const matchSelection = useRouterState({
+    select: (state: any) => {
+      const match = state.matches.find((d: any) =>
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
+      )
+
+      invariant(
+        !((opts.shouldThrow ?? true) && !match),
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+
+      if (match === undefined) {
+        return undefined
+      }
+
+      return opts.select ? opts.select(match) : match
+    },
+  } as any)
+
+  return matchSelection as any
+}

package/src/useNavigate.tsx

@@ -0,0 +1,40 @@
+import * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  FromPathOption,
+  NavigateOptions,
+  RegisteredRouter,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+
+export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(_defaultOpts?: {
+  from?: FromPathOption<TRouter, TDefaultFrom>
+}): UseNavigateResult<TDefaultFrom> {
+  const { navigate } = useRouter()
+
+  return ((options: NavigateOptions) => {
+    return navigate({ from: _defaultOpts?.from, ...options })
+  }) as UseNavigateResult<TDefaultFrom>
+}
+
+export function Navigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const { navigate } = useRouter()
+
+  Solid.onMount(() => {
+    navigate({
+      ...props,
+    })
+  })
+
+  return null
+}

package/src/useParams.tsx

@@ -0,0 +1,71 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseParams,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseParamsResult,
+} from '@tanstack/router-core'
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (params: ResolveUseParams<TRouter, TFrom, TStrict>) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Accessor<UseParamsResult<TRouter, TFrom, true, TSelected>>
+
+export function useParams<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Accessor<
+  ThrowOrOptional<UseParamsResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.params) : match.params
+    },
+  } as any) as any
+}

package/src/useRouteContext.ts

@@ -0,0 +1,31 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  UseRouteContextBaseOptions,
+  UseRouteContextOptions,
+  UseRouteContextResult,
+} from '@tanstack/router-core'
+
+export type UseRouteContextRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouteContextBaseOptions<TRouter, TFrom, true, TSelected>,
+) => Accessor<UseRouteContextResult<TRouter, TFrom, true, TSelected>>
+
+export function useRouteContext<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): Accessor<UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>> {
+  return useMatch({
+    ...(opts as any),
+    select: (match) =>
+      opts.select ? opts.select(match.context) : match.context,
+  }) as any
+}

package/src/useRouter.tsx

@@ -0,0 +1,15 @@
+import * as Solid from 'solid-js'
+import warning from 'tiny-warning'
+import { getRouterContext } from './routerContext'
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
+
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean
+}): TRouter {
+  const value = Solid.useContext(getRouterContext() as any)
+  warning(
+    !((opts?.warn ?? true) && !value),
+    'useRouter must be used inside a <RouterProvider> component!',
+  )
+  return value as any
+}

package/src/useRouterState.tsx

@@ -0,0 +1,36 @@
+import { useStore } from '@tanstack/solid-store'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+import type { Accessor } from 'solid-js'
+
+export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
+  router?: TRouter
+  select?: (state: RouterState<TRouter['routeTree']>) => TSelected
+}
+
+export type UseRouterStateResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected
+
+export function useRouterState<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouterStateOptions<TRouter, TSelected>,
+): Accessor<UseRouterStateResult<TRouter, TSelected>> {
+  const contextRouter = useRouter<TRouter>({
+    warn: opts?.router === undefined,
+  })
+  const router = opts?.router || contextRouter
+
+  return useStore(router.__store, (state) => {
+    if (opts?.select) return opts.select(state)
+
+    return state
+  }) as Accessor<UseRouterStateResult<TRouter, TSelected>>
+}

package/src/useSearch.tsx

@@ -0,0 +1,71 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseSearch,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseSearchResult,
+} from '@tanstack/router-core'
+
+export interface UseSearchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (state: ResolveUseSearch<TRouter, TFrom, TStrict>) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseSearchOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseSearchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Accessor<UseSearchResult<TRouter, TFrom, true, TSelected>>
+
+export function useSearch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseSearchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Accessor<
+  ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.search) : match.search
+    },
+  }) as any
+}

package/src/utils.ts

@@ -0,0 +1,79 @@
+import * as Solid from 'solid-js'
+
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? Solid.createRenderEffect : Solid.createEffect
+
+export const usePrevious = (fn: () => boolean) => {
+  return Solid.createMemo(
+    (
+      prev: { current: boolean | null; previous: boolean | null } = {
+        current: null,
+        previous: null,
+      },
+    ) => {
+      const current = fn()
+
+      if (prev.current !== current) {
+        prev.previous = prev.current
+        prev.current = current
+      }
+
+      return prev
+    },
+  )
+}
+
+/**
+ * React hook to wrap `IntersectionObserver`.
+ *
+ * This hook will create an `IntersectionObserver` and observe the ref passed to it.
+ *
+ * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.
+ *
+ * @param ref - The ref to observe
+ * @param intersectionObserverOptions - The options to pass to the IntersectionObserver
+ * @param options - The options to pass to the hook
+ * @param callback - The callback to call when the intersection changes
+ * @returns The IntersectionObserver instance
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ * const ref = React.useRef<HTMLDivElement>(null)
+ * useIntersectionObserver(
+ *  ref,
+ *  (entry) => { doSomething(entry) },
+ *  { rootMargin: '10px' },
+ *  { disabled: false }
+ * )
+ * return <div ref={ref} />
+ * ```
+ */
+export function useIntersectionObserver<T extends Element>(
+  ref: Solid.Accessor<T | null>,
+  callback: (entry: IntersectionObserverEntry | undefined) => void,
+  intersectionObserverOptions: IntersectionObserverInit = {},
+  options: { disabled?: boolean } = {},
+): Solid.Accessor<IntersectionObserver | null> {
+  const isIntersectionObserverAvailable =
+    typeof IntersectionObserver === 'function'
+  let observerRef: IntersectionObserver | null = null
+
+  Solid.createEffect(() => {
+    const r = ref()
+    if (!r || !isIntersectionObserverAvailable || options.disabled) {
+      return
+    }
+
+    observerRef = new IntersectionObserver(([entry]) => {
+      callback(entry)
+    }, intersectionObserverOptions)
+
+    observerRef.observe(r)
+
+    Solid.onCleanup(() => {
+      observerRef?.disconnect()
+    })
+  })
+
+  return () => observerRef
+}