From 45f2ea0625b9bd88749e2b27356a0445e3ae8fa3 Mon Sep 17 00:00:00 2001
From: Edmo Lima <soedmolima@gmail.com>
Date: Fri, 3 Oct 2025 09:06:02 +0200
Subject: [PATCH 1/2] fix(solid-router): make useLoaderDeps return Accessor for
 reactivity

- Update useLoaderDeps return type to Accessor for consistency with Solid.js patterns
- Add import for Accessor type from solid-js
- Reorganize imports following project conventions (types first, then implementations)
- Add comprehensive tests for useLoaderDeps Accessor behavior
- Update type tests to reflect new Accessor return type
---
 packages/solid-router/src/useLoaderDeps.tsx   |  9 ++--
 packages/solid-router/tests/route.test.tsx    | 47 ++++++++++++++++++-
 .../solid-router/tests/routeApi.test-d.tsx    | 12 +++--
 3 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/packages/solid-router/src/useLoaderDeps.tsx b/packages/solid-router/src/useLoaderDeps.tsx
index 91e5acb308c..9fac6a68924 100644
--- a/packages/solid-router/src/useLoaderDeps.tsx
+++ b/packages/solid-router/src/useLoaderDeps.tsx
@@ -1,4 +1,3 @@
-import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -6,6 +5,8 @@ import type {
   StrictOrFrom,
   UseLoaderDepsResult,
 } from '@tanstack/router-core'
+import type { Accessor } from 'solid-js'
+import { useMatch } from './useMatch'
 
 export interface UseLoaderDepsBaseOptions<
   TRouter extends AnyRouter,
@@ -27,7 +28,7 @@ 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,
@@ -35,12 +36,12 @@ export function useLoaderDeps<
   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>>
 }
diff --git a/packages/solid-router/tests/route.test.tsx b/packages/solid-router/tests/route.test.tsx
index 7eb99372ef8..12d86430c92 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 <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({
diff --git a/packages/solid-router/tests/routeApi.test-d.tsx b/packages/solid-router/tests/routeApi.test-d.tsx
index a06c99708f7..b079e261a7c 100644
--- a/packages/solid-router/tests/routeApi.test-d.tsx
+++ b/packages/solid-router/tests/routeApi.test-d.tsx
@@ -1,7 +1,7 @@
+import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
+import type { Accessor } from 'solid-js'
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
-import type { Accessor } from 'solid-js'
-import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
 import type { LinkComponentRoute } from '../src/link'
 
 const rootRoute = createRootRoute()
@@ -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<

From 300a845bd188d438cb13a076b539a6329b7f72fa Mon Sep 17 00:00:00 2001
From: Edmo Lima <soedmolima@gmail.com>
Date: Sun, 5 Oct 2025 08:20:57 +0200
Subject: [PATCH 2/2] fix(solid-router): correct import order in useLoaderDeps
 and tests

---
 packages/solid-router/src/useLoaderDeps.tsx     | 4 ++--
 packages/solid-router/tests/routeApi.test-d.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/solid-router/src/useLoaderDeps.tsx b/packages/solid-router/src/useLoaderDeps.tsx
index 9fac6a68924..19b88a1c926 100644
--- a/packages/solid-router/src/useLoaderDeps.tsx
+++ b/packages/solid-router/src/useLoaderDeps.tsx
@@ -1,3 +1,5 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -5,8 +7,6 @@ import type {
   StrictOrFrom,
   UseLoaderDepsResult,
 } from '@tanstack/router-core'
-import type { Accessor } from 'solid-js'
-import { useMatch } from './useMatch'
 
 export interface UseLoaderDepsBaseOptions<
   TRouter extends AnyRouter,
diff --git a/packages/solid-router/tests/routeApi.test-d.tsx b/packages/solid-router/tests/routeApi.test-d.tsx
index b079e261a7c..2a1095ccd45 100644
--- a/packages/solid-router/tests/routeApi.test-d.tsx
+++ b/packages/solid-router/tests/routeApi.test-d.tsx
@@ -1,7 +1,7 @@
-import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
-import type { Accessor } from 'solid-js'
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
+import type { Accessor } from 'solid-js'
+import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
 import type { LinkComponentRoute } from '../src/link'
 
 const rootRoute = createRootRoute()