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

Refactored a bit router options.Wrap and options.InnerWrap usage in
RouterProvider and Match components.
Now they will be able to provide context for their children components.

Added few tests for scenarios that were failing before.

Fixes #3744

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* New Features
* Consistent wrapper handling across routing so routed content and
pending states share the same wrapper/context without adding extra DOM
nodes.
* Exposed createMemoryHistory for memory-based routing in apps and
tests.

* Refactor
* Simplified suspense and wrapper handling for clearer, safer rendering
behavior.

* Tests
* Added tests verifying context propagation through wrappers and into
pending (fallback) states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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 app = render(() => (
+    <RouterProvider
+      router={router}
+      InnerWrap={(props) => {
+        return (
+          <ctx.Provider value={'context-for-children'}>
+            {props.children}
+          </ctx.Provider>
+        )
+      }}
+    />
+  ))
+
+  const indexElem = await app.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 app = 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 app.findByRole('link', {
+    name: 'link to home',
+  })
+  expect(linkToHome).toBeInTheDocument()
+
+  fireEvent.click(linkToHome)
+
+  const indexElem = await app.findByText('context-for-default-pending')
+  expect(indexElem).toBeInTheDocument()
+})

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

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { render } 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 ctx = createContext<string>()
+
+    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 app = render(() => (
+      <RouterProvider
+        router={router}
+        Wrap={(props) => {
+          return <ctx.Provider value={'findMe'}>{props.children}</ctx.Provider>
+        }}
+      />
+    ))
+
+    const indexElem = await app.findByText('findMe')
+    expect(indexElem).toBeInTheDocument()
+  })
+})