@tanstack/solid-router 1.108.0

package/src/useRouteContext.ts

@@ -0,0 +1,62 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type { AllContext, RouteById } from './routeInfo'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { StrictOrFrom } from './utils'
+import type { Expand } from '@tanstack/router-core'
+
+export interface UseRouteContextBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> {
+  select?: (search: ResolveRouteContext<TRouter, TFrom, TStrict>) => TSelected
+}
+
+export type UseRouteContextOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseRouteContextBaseOptions<TRouter, TFrom, TStrict, TSelected>
+
+export type ResolveRouteContext<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+> = TStrict extends false
+  ? AllContext<TRouter['routeTree']>
+  : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['allContext']>
+
+export type UseRouteContextResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? ResolveRouteContext<TRouter, TFrom, TStrict>
+  : TSelected
+
+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 './router'
+
+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,32 @@
+import { useStore } from '@tanstack/solid-store'
+import { useRouter } from './useRouter'
+import type { AnyRouter, RegisteredRouter, RouterState } from './router'
+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,84 @@
+import { useMatch } from './useMatch'
+import type { ThrowConstraint } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type { FullSearchSchema, RouteById } from './routeInfo'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { StrictOrFrom } from './utils'
+import type { Expand, ThrowOrOptional } from '@tanstack/router-core'
+
+export interface UseSearchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (state: ResolveSearch<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 UseSearchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? ResolveSearch<TRouter, TFrom, TStrict>
+  : TSelected
+
+export type ResolveSearch<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+> = TStrict extends false
+  ? FullSearchSchema<TRouter['routeTree']>
+  : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['fullSearchSchema']>
+
+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,96 @@
+import * as Solid from 'solid-js'
+import type { RouteIds } from './routeInfo'
+import type { AnyRouter } from './router'
+import type { ConstrainLiteral } from '@tanstack/router-core'
+
+export type StrictOrFrom<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean = true,
+> = TStrict extends false
+  ? {
+      from?: never
+      strict: TStrict
+    }
+  : {
+      from: ConstrainLiteral<TFrom, RouteIds<TRouter['routeTree']>>
+      strict?: TStrict
+    }
+
+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
+}