fix(solid-router): RouteProvider Wrap and Match InnerWrap support propagating context to their children

Author: Woyken

packages/solid-router/src/Matches.tsx

@@ -38,27 +38,27 @@ declare module '@tanstack/router-core' {
 export function Matches() {
   const router = useRouter()
 
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
-
   // Do not render a root Suspense during SSR or hydrating from SSR
   const ResolvedSuspense =
     router.isServer || (typeof document !== 'undefined' && router.ssr)
       ? SafeFragment
       : Solid.Suspense
 
-  const inner = (
-    <ResolvedSuspense fallback={pendingElement}>
-      {!router.isServer && <Transitioner />}
-      <MatchesInner />
-    </ResolvedSuspense>
-  )
+  const OptionalWrapper = router.options.InnerWrap || SafeFragment
 
-  return router.options.InnerWrap ? (
-    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
-  ) : (
-    inner
+  return (
+    <OptionalWrapper>
+      <ResolvedSuspense
+        fallback={
+          router.options.defaultPendingComponent ? (
+            <router.options.defaultPendingComponent />
+          ) : null
+        }
+      >
+        {!router.isServer && <Transitioner />}
+        <MatchesInner />
+      </ResolvedSuspense>
+    </OptionalWrapper>
   )
 }
 
@@ -74,8 +74,10 @@ function MatchesInner() {
     select: (s) => s.loadedAt,
   })
 
-  const matchComponent = () =>
-    matchId() ? <Match matchId={matchId()!} /> : null
+  const matchComponent = () => {
+    const id = matchId()
+    return id ? <Match matchId={id} /> : null
+  }
 
   return (
     <matchContext.Provider value={matchId}>

packages/solid-router/src/RouterProvider.tsx

@@ -1,5 +1,6 @@
 import { Matches } from './Matches'
 import { getRouterContext } from './routerContext'
+import { SafeFragment } from './SafeFragment'
 import type * as Solid from 'solid-js'
 import type {
   AnyRouter,
@@ -29,17 +30,15 @@ export function RouterContextProvider<
 
   const routerContext = getRouterContext()
 
-  const provider = (
-    <routerContext.Provider value={router as AnyRouter}>
-      {children()}
-    </routerContext.Provider>
-  )
-
-  if (router.options.Wrap) {
-    return <router.options.Wrap>{provider}</router.options.Wrap>
-  }
+  const OptionalWrapper = router.options.Wrap || SafeFragment
 
-  return provider
+  return (
+    <OptionalWrapper>
+      <routerContext.Provider value={router as AnyRouter}>
+        {children()}
+      </routerContext.Provider>
+    </OptionalWrapper>
+  )
 }
 
 export function RouterProvider<

packages/solid-router/tests/Matches.test.tsx

@@ -1,15 +1,18 @@
 import { expect, test } from 'vitest'
 import { fireEvent, render, screen } from '@solidjs/testing-library'
+import { createContext, useContext } from 'solid-js'
 import {
   Link,
   Outlet,
   RouterProvider,
+  createMemoryHistory,
   createRootRoute,
   createRoute,
   createRouter,
   isMatch,
   useMatches,
 } from '../src'
+import { sleep } from './utils'
 
 const rootRoute = createRootRoute()
 
@@ -122,3 +125,99 @@ test('when filtering useMatches by loaderData', async () => {
 
   expect(await screen.findByText('Incorrect Matches -')).toBeInTheDocument()
 })
+
+test('Matches provides InnerWrap context to route components', async () => {
+  const rootRoute = createRootRoute({
+    component: () => {
+      const contextValue = useContext(ctx)
+      expect(contextValue, 'Context is not provided').not.toBeUndefined()
+
+      return <div>{contextValue}</div>
+    },
+  })
+
+  const routeTree = rootRoute.addChildren([])
+  const router = createRouter({
+    routeTree,
+  })
+
+  const ctx = createContext<string>()
+
+  const screen = render(() => (
+    <RouterProvider
+      router={router}
+      InnerWrap={(props) => {
+        return (
+          <ctx.Provider value={'context-for-children'}>
+            {props.children}
+          </ctx.Provider>
+        )
+      }}
+    />
+  ))
+
+  const indexElem = await screen.findByText('context-for-children')
+  expect(indexElem).toBeInTheDocument()
+})
+
+test('Matches provides InnerWrap context to defaultPendingComponent', async () => {
+  const rootRoute = createRootRoute({})
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => {
+      return (
+        <div>
+          <Link to="/home">link to home</Link>
+        </div>
+      )
+    },
+  })
+
+  const homeRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/home',
+    loader: () => sleep(300),
+    component: () => <div>Home page</div>,
+  })
+
+  const routeTree = rootRoute.addChildren([homeRoute, indexRoute])
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: ['/'],
+    }),
+  })
+
+  const ctx = createContext<string>()
+
+  const screen = render(() => (
+    <RouterProvider
+      router={router}
+      defaultPendingMs={200}
+      defaultPendingComponent={() => {
+        const contextValue = useContext(ctx)
+        expect(contextValue, 'Context is not provided').not.toBeUndefined()
+
+        return <div>{contextValue}</div>
+      }}
+      InnerWrap={(props) => {
+        return (
+          <ctx.Provider value={'context-for-default-pending'}>
+            {props.children}
+          </ctx.Provider>
+        )
+      }}
+    />
+  ))
+
+  const linkToHome = await screen.findByRole('link', {
+    name: 'link to home',
+  })
+  expect(linkToHome).toBeInTheDocument()
+
+  fireEvent.click(linkToHome)
+
+  const indexElem = await screen.findByText('context-for-default-pending')
+  expect(indexElem).toBeInTheDocument()
+})

packages/solid-router/tests/RouterProvider.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@solidjs/testing-library'
+import { createContext, useContext } from 'solid-js'
+import {
+  createRootRoute,
+  createRouter,
+} from '../src'
+import { RouterProvider } from '../src/RouterProvider'
+
+describe('RouterProvider', () => {
+  it('should provide context through RouterProvider Wrap', async () => {
+    const rootRoute = createRootRoute({
+      component: () => {
+        const contextValue = useContext(ctx)
+        expect(contextValue, "Context is not provided").not.toBeUndefined()
+
+        return <div>{contextValue}</div>
+      },
+    })
+
+    const routeTree = rootRoute.addChildren([])
+    const router = createRouter({
+      routeTree,
+    })
+
+    const ctx = createContext<string>()
+
+    render(() => <RouterProvider router={router} Wrap={props => {
+      return <ctx.Provider value={"findMe"}>{props.children}</ctx.Provider>
+    }} />)
+
+    const indexElem = await screen.findByText('findMe')
+    expect(indexElem).toBeInTheDocument()
+  })
+})