diff --git a/packages/solid-router/src/Matches.tsx b/packages/solid-router/src/Matches.tsx index cf83c6b506..f9fa1d34f7 100644 --- a/packages/solid-router/src/Matches.tsx +++ b/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 ? ( - - ) : 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 = ( - - {!router.isServer && } - - - ) + const OptionalWrapper = router.options.InnerWrap || SafeFragment - return router.options.InnerWrap ? ( - {inner} - ) : ( - inner + return ( + + + ) : null + } + > + {!router.isServer && } + + + ) } @@ -74,8 +74,10 @@ function MatchesInner() { select: (s) => s.loadedAt, }) - const matchComponent = () => - matchId() ? : null + const matchComponent = () => { + const id = matchId() + return id ? : null + } return ( diff --git a/packages/solid-router/src/RouterProvider.tsx b/packages/solid-router/src/RouterProvider.tsx index 1f579a0a4f..7fee86bcf7 100644 --- a/packages/solid-router/src/RouterProvider.tsx +++ b/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 = ( - - {children()} - - ) - - if (router.options.Wrap) { - return {provider} - } + const OptionalWrapper = router.options.Wrap || SafeFragment - return provider + return ( + + + {children()} + + + ) } export function RouterProvider< diff --git a/packages/solid-router/tests/Matches.test.tsx b/packages/solid-router/tests/Matches.test.tsx index b7242fed00..6f0f865a1b 100644 --- a/packages/solid-router/tests/Matches.test.tsx +++ b/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
{contextValue}
+ }, + }) + + const routeTree = rootRoute.addChildren([]) + const router = createRouter({ + routeTree, + }) + + const ctx = createContext() + + const app = render(() => ( + { + return ( + + {props.children} + + ) + }} + /> + )) + + 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 ( +
+ link to home +
+ ) + }, + }) + + const homeRoute = createRoute({ + getParentRoute: () => rootRoute, + path: '/home', + loader: () => sleep(300), + component: () =>
Home page
, + }) + + const routeTree = rootRoute.addChildren([homeRoute, indexRoute]) + const router = createRouter({ + routeTree, + history: createMemoryHistory({ + initialEntries: ['/'], + }), + }) + + const ctx = createContext() + + const app = render(() => ( + { + const contextValue = useContext(ctx) + expect(contextValue, 'Context is not provided').not.toBeUndefined() + + return
{contextValue}
+ }} + InnerWrap={(props) => { + return ( + + {props.children} + + ) + }} + /> + )) + + 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() +}) diff --git a/packages/solid-router/tests/RouterProvider.test.tsx b/packages/solid-router/tests/RouterProvider.test.tsx new file mode 100644 index 0000000000..2bc3395515 --- /dev/null +++ b/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() + + const rootRoute = createRootRoute({ + component: () => { + const contextValue = useContext(ctx) + expect(contextValue, 'Context is not provided').not.toBeUndefined() + + return
{contextValue}
+ }, + }) + + const routeTree = rootRoute.addChildren([]) + const router = createRouter({ + routeTree, + }) + + const app = render(() => ( + { + return {props.children} + }} + /> + )) + + const indexElem = await app.findByText('findMe') + expect(indexElem).toBeInTheDocument() + }) +})