diff --git a/packages/solid-router/src/useLoaderDeps.tsx b/packages/solid-router/src/useLoaderDeps.tsx index 91e5acb308..19b88a1c92 100644 --- a/packages/solid-router/src/useLoaderDeps.tsx +++ b/packages/solid-router/src/useLoaderDeps.tsx @@ -1,4 +1,5 @@ import { useMatch } from './useMatch' +import type { Accessor } from 'solid-js' import type { AnyRouter, RegisteredRouter, @@ -27,7 +28,7 @@ export type UseLoaderDepsRoute = < TSelected = unknown, >( opts?: UseLoaderDepsBaseOptions, -) => UseLoaderDepsResult +) => Accessor> export function useLoaderDeps< TRouter extends AnyRouter = RegisteredRouter, @@ -35,12 +36,12 @@ export function useLoaderDeps< TSelected = unknown, >( opts: UseLoaderDepsOptions, -): UseLoaderDepsResult { +): Accessor> { const { select, ...rest } = opts return useMatch({ ...rest, select: (s) => { return select ? select(s.loaderDeps) : s.loaderDeps }, - }) as UseLoaderDepsResult + }) as Accessor> } diff --git a/packages/solid-router/tests/route.test.tsx b/packages/solid-router/tests/route.test.tsx index 7eb99372ef..12d86430c9 100644 --- a/packages/solid-router/tests/route.test.tsx +++ b/packages/solid-router/tests/route.test.tsx @@ -1,5 +1,5 @@ -import { afterEach, beforeEach, describe, expect, it, test, vi } from 'vitest' import { cleanup, render, screen } from '@solidjs/testing-library' +import { afterEach, beforeEach, describe, expect, it, test, vi } from 'vitest' import { RouterProvider, @@ -204,6 +204,51 @@ describe('onEnter event', () => { }) }) +describe('useLoaderDeps', () => { + test('returns an Accessor', async () => { + const rootRoute = createRootRoute() + const indexRoute = createRoute({ + getParentRoute: () => rootRoute, + path: '/', + loaderDeps: ({ search }) => ({ testDep: 'value' }), + component: () => { + const deps = indexRoute.useLoaderDeps() + // deps should be an Accessor, so we need to call it to get the value + expect(typeof deps).toBe('function') + expect(deps()).toEqual({ testDep: 'value' }) + return
Index
+ }, + }) + const routeTree = rootRoute.addChildren([indexRoute]) + const router = createRouter({ routeTree, history }) + render(() => ) + const indexElem = await screen.findByText('Index') + expect(indexElem).toBeInTheDocument() + }) + + test('returns an Accessor via Route API', async () => { + const rootRoute = createRootRoute() + const indexRoute = createRoute({ + getParentRoute: () => rootRoute, + path: '/', + loaderDeps: ({ search }) => ({ testDep: 'api-value' }), + component: () => { + const api = getRouteApi('/') + const deps = api.useLoaderDeps() + // deps should be an Accessor, so we need to call it to get the value + expect(typeof deps).toBe('function') + expect(deps()).toEqual({ testDep: 'api-value' }) + return
Index with API
+ }, + }) + const routeTree = rootRoute.addChildren([indexRoute]) + const router = createRouter({ routeTree, history }) + render(() => ) + const indexElem = await screen.findByText('Index with API') + expect(indexElem).toBeInTheDocument() + }) +}) + describe('route.head', () => { test('meta', async () => { const rootRoute = createRootRoute({ diff --git a/packages/solid-router/tests/routeApi.test-d.tsx b/packages/solid-router/tests/routeApi.test-d.tsx index a06c99708f..2a1095ccd4 100644 --- a/packages/solid-router/tests/routeApi.test-d.tsx +++ b/packages/solid-router/tests/routeApi.test-d.tsx @@ -88,9 +88,11 @@ describe('getRouteApi', () => { >() }) test('useLoaderDeps', () => { - expectTypeOf(invoiceRouteApi.useLoaderDeps()).toEqualTypeOf<{ - dep: number - }>() + expectTypeOf(invoiceRouteApi.useLoaderDeps()).toEqualTypeOf< + Accessor<{ + dep: number + }> + >() }) test('useMatch', () => { expectTypeOf(invoiceRouteApi.useMatch()).toEqualTypeOf<