fix(solid-router): make useLoaderDeps return Accessor for reactivity (#5348)

Author: edmolima

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,20 +28,20 @@ export type UseLoaderDepsRoute<out TId> = <
   TSelected = unknown,
 >(
   opts?: UseLoaderDepsBaseOptions<TRouter, TId, TSelected>,
-) => UseLoaderDepsResult<TRouter, TId, TSelected>
+) => Accessor<UseLoaderDepsResult<TRouter, TId, TSelected>>
 
 export function useLoaderDeps<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string | undefined = undefined,
   TSelected = unknown,
 >(
   opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected>,
-): UseLoaderDepsResult<TRouter, TFrom, TSelected> {
+): Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>> {
   const { select, ...rest } = opts
   return useMatch({
     ...rest,
     select: (s) => {
       return select ? select(s.loaderDeps) : s.loaderDeps
     },
-  }) as UseLoaderDepsResult<TRouter, TFrom, TSelected>
+  }) as Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>>
 }

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 <div>Index</div>
+      },
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree, history })
+    render(() => <RouterProvider router={router} />)
+    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 <div>Index with API</div>
+      },
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree, history })
+    render(() => <RouterProvider router={router} />)
+    const indexElem = await screen.findByText('Index with API')
+    expect(indexElem).toBeInTheDocument()
+  })
+})
+
 describe('route.head', () => {
   test('meta', async () => {
     const rootRoute = createRootRoute({

packages/solid-router/tests/routeApi.test-d.tsx

@@ -88,9 +88,11 @@ describe('getRouteApi', () => {
     >()
   })
   test('useLoaderDeps', () => {
-    expectTypeOf(invoiceRouteApi.useLoaderDeps<DefaultRouter>()).toEqualTypeOf<{
-      dep: number
-    }>()
+    expectTypeOf(invoiceRouteApi.useLoaderDeps<DefaultRouter>()).toEqualTypeOf<
+      Accessor<{
+        dep: number
+      }>
+    >()
   })
   test('useMatch', () => {
     expectTypeOf(invoiceRouteApi.useMatch<DefaultRouter>()).toEqualTypeOf<