Skip to content

Commit f9ae72c

Browse files
brenelzbrenelz
authored
fix(solid-start): improve hydration (#5518)
1 parent 8568185 commit f9ae72c

File tree

26 files changed

+561
-453
lines changed

26 files changed

+561
-453
lines changed

‎e2e/solid-start/basic-tsr-config/src/app/routes/__root.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import * as Solid from 'solid-js'
2-
import { Outlet, createRootRoute } from '@tanstack/solid-router'
1+
import {
2+
HeadContent,
3+
Outlet,
4+
Scripts,
5+
createRootRoute,
6+
} from '@tanstack/solid-router'
37
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
8+
import { HydrationScript } from 'solid-js/web'
49

510
export const Route = createRootRoute({
611
head: () => ({
@@ -22,9 +27,16 @@ export const Route = createRootRoute({
2227

2328
function RootComponent() {
2429
return (
25-
<>
26-
<Outlet />
27-
<TanStackRouterDevtools position="bottom-right" />
28-
</>
30+
<html>
31+
<head>
32+
<HydrationScript />
33+
</head>
34+
<body>
35+
<HeadContent />
36+
<Outlet />
37+
<TanStackRouterDevtools position="bottom-right" />
38+
<Scripts />
39+
</body>
40+
</html>
2941
)
3042
}

‎e2e/solid-start/basic/src/client.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
// DO NOT DELETE THIS FILE!!!
22
// This file is a good smoke test to make sure the custom client entry is working
33
import { hydrate } from 'solid-js/web'
4-
import { StartClient } from '@tanstack/solid-start/client'
4+
import { StartClient, hydrateStart } from '@tanstack/solid-start/client'
55

66
console.log("[client-entry]: using custom client entry in 'src/client.tsx'")
77

8-
hydrate(() => <StartClient />, document.body)
8+
hydrateStart().then((router) => {
9+
hydrate(() => <StartClient router={router} />, document)
10+
})

‎e2e/solid-start/basic/src/routes/__root.tsx‎

Lines changed: 96 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
/// <reference types="vite/client" />
2-
import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
2+
import {
3+
HeadContent,
4+
Link,
5+
Outlet,
6+
Scripts,
7+
createRootRoute,
8+
} from '@tanstack/solid-router'
39

410
import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
11+
import { HydrationScript } from 'solid-js/web'
512
import { NotFound } from '~/components/NotFound'
613
import appCss from '~/styles/app.css?url'
714
import { seo } from '~/utils/seo'
@@ -60,86 +67,93 @@ export const Route = createRootRoute({
6067

6168
function RootComponent() {
6269
return (
63-
<>
64-
<div class="p-2 flex gap-2 text-lg">
65-
<Link
66-
to="/"
67-
activeProps={{
68-
class: 'font-bold',
69-
}}
70-
activeOptions={{ exact: true }}
71-
>
72-
Home
73-
</Link>{' '}
74-
<Link
75-
to="/posts"
76-
activeProps={{
77-
class: 'font-bold',
78-
}}
79-
>
80-
Posts
81-
</Link>{' '}
82-
<Link
83-
to="/users"
84-
activeProps={{
85-
class: 'font-bold',
86-
}}
87-
>
88-
Users
89-
</Link>{' '}
90-
<Link
91-
to="/layout-a"
92-
activeProps={{
93-
class: 'font-bold',
94-
}}
95-
>
96-
Layout
97-
</Link>{' '}
98-
<Link
99-
to="/scripts"
100-
activeProps={{
101-
class: 'font-bold',
102-
}}
103-
>
104-
Scripts
105-
</Link>{' '}
106-
<Link
107-
to="/inline-scripts"
108-
activeProps={{
109-
class: 'font-bold',
110-
}}
111-
>
112-
Inline Scripts
113-
</Link>{' '}
114-
<Link
115-
to="/deferred"
116-
activeProps={{
117-
class: 'font-bold',
118-
}}
119-
>
120-
Deferred
121-
</Link>{' '}
122-
<Link
123-
to="/redirect"
124-
activeProps={{
125-
class: 'font-bold',
126-
}}
127-
>
128-
redirect
129-
</Link>{' '}
130-
<Link
131-
// @ts-expect-error
132-
to="/this-route-does-not-exist"
133-
activeProps={{
134-
class: 'font-bold',
135-
}}
136-
>
137-
This Route Does Not Exist
138-
</Link>
139-
</div>
140-
<Outlet />
141-
<div class="inline-div">This is an inline styled div</div>
142-
<TanStackRouterDevtoolsInProd />
143-
</>
70+
<html>
71+
<head>
72+
<HydrationScript />
73+
</head>
74+
<body>
75+
<HeadContent />
76+
<div class="p-2 flex gap-2 text-lg">
77+
<Link
78+
to="/"
79+
activeProps={{
80+
class: 'font-bold',
81+
}}
82+
activeOptions={{ exact: true }}
83+
>
84+
Home
85+
</Link>{' '}
86+
<Link
87+
to="/posts"
88+
activeProps={{
89+
class: 'font-bold',
90+
}}
91+
>
92+
Posts
93+
</Link>{' '}
94+
<Link
95+
to="/users"
96+
activeProps={{
97+
class: 'font-bold',
98+
}}
99+
>
100+
Users
101+
</Link>{' '}
102+
<Link
103+
to="/layout-a"
104+
activeProps={{
105+
class: 'font-bold',
106+
}}
107+
>
108+
Layout
109+
</Link>{' '}
110+
<Link
111+
to="/scripts"
112+
activeProps={{
113+
class: 'font-bold',
114+
}}
115+
>
116+
Scripts
117+
</Link>{' '}
118+
<Link
119+
to="/inline-scripts"
120+
activeProps={{
121+
class: 'font-bold',
122+
}}
123+
>
124+
Inline Scripts
125+
</Link>{' '}
126+
<Link
127+
to="/deferred"
128+
activeProps={{
129+
class: 'font-bold',
130+
}}
131+
>
132+
Deferred
133+
</Link>{' '}
134+
<Link
135+
to="/redirect"
136+
activeProps={{
137+
class: 'font-bold',
138+
}}
139+
>
140+
redirect
141+
</Link>{' '}
142+
<Link
143+
// @ts-expect-error
144+
to="/this-route-does-not-exist"
145+
activeProps={{
146+
class: 'font-bold',
147+
}}
148+
>
149+
This Route Does Not Exist
150+
</Link>
151+
</div>
152+
<Outlet />
153+
<div class="inline-div">This is an inline styled div</div>
154+
<TanStackRouterDevtoolsInProd />
155+
<Scripts />
156+
</body>
157+
</html>
144158
)
145159
}

‎e2e/solid-start/basic/src/routes/stream.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Await, createFileRoute } from '@tanstack/solid-router'
2-
import { createEffect, createSignal } from 'solid-js'
2+
import { createEffect, createSignal, Suspense } from 'solid-js'
33

44
export const Route = createFileRoute('/stream')({
55
component: Home,
@@ -45,7 +45,7 @@ function Home() {
4545
})
4646

4747
return (
48-
<>
48+
<Suspense>
4949
<Await
5050
promise={loaderData().promise}
5151
children={(promiseData) => (
@@ -59,6 +59,6 @@ function Home() {
5959
</div>
6060
)}
6161
/>
62-
</>
62+
</Suspense>
6363
)
6464
}

‎e2e/solid-start/custom-basepath/src/routes/__root.tsx‎

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
1+
import {
2+
HeadContent,
3+
Link,
4+
Outlet,
5+
Scripts,
6+
createRootRoute,
7+
} from '@tanstack/solid-router'
28

39
import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
10+
import { HydrationScript } from 'solid-js/web'
411
import { NotFound } from '~/components/NotFound'
512
import appCss from '~/styles/app.css?url'
613
import { seo } from '~/utils/seo'
@@ -48,53 +55,60 @@ export const Route = createRootRoute({
4855

4956
function RootComponent() {
5057
return (
51-
<>
52-
<div class="p-2 flex gap-2 text-lg">
53-
<Link
54-
to="/"
55-
activeProps={{
56-
class: 'font-bold',
57-
}}
58-
activeOptions={{ exact: true }}
59-
>
60-
Home
61-
</Link>{' '}
62-
<Link
63-
to="/posts"
64-
activeProps={{
65-
class: 'font-bold',
66-
}}
67-
>
68-
Posts
69-
</Link>{' '}
70-
<Link
71-
to="/users"
72-
activeProps={{
73-
class: 'font-bold',
74-
}}
75-
>
76-
Users
77-
</Link>{' '}
78-
<Link
79-
to="/deferred"
80-
activeProps={{
81-
class: 'font-bold',
82-
}}
83-
>
84-
Deferred
85-
</Link>{' '}
86-
<Link
87-
// @ts-expect-error
88-
to="/this-route-does-not-exist"
89-
activeProps={{
90-
class: 'font-bold',
91-
}}
92-
>
93-
This Route Does Not Exist
94-
</Link>
95-
</div>
96-
<Outlet />
97-
<TanStackRouterDevtoolsInProd />
98-
</>
58+
<html>
59+
<head>
60+
<HydrationScript />
61+
</head>
62+
<body>
63+
<HeadContent />
64+
<div class="p-2 flex gap-2 text-lg">
65+
<Link
66+
to="/"
67+
activeProps={{
68+
class: 'font-bold',
69+
}}
70+
activeOptions={{ exact: true }}
71+
>
72+
Home
73+
</Link>{' '}
74+
<Link
75+
to="/posts"
76+
activeProps={{
77+
class: 'font-bold',
78+
}}
79+
>
80+
Posts
81+
</Link>{' '}
82+
<Link
83+
to="/users"
84+
activeProps={{
85+
class: 'font-bold',
86+
}}
87+
>
88+
Users
89+
</Link>{' '}
90+
<Link
91+
to="/deferred"
92+
activeProps={{
93+
class: 'font-bold',
94+
}}
95+
>
96+
Deferred
97+
</Link>{' '}
98+
<Link
99+
// @ts-expect-error
100+
to="/this-route-does-not-exist"
101+
activeProps={{
102+
class: 'font-bold',
103+
}}
104+
>
105+
This Route Does Not Exist
106+
</Link>
107+
</div>
108+
<Outlet />
109+
<TanStackRouterDevtoolsInProd />
110+
<Scripts />
111+
</body>
112+
</html>
99113
)
100114
}

0 commit comments

Comments
 (0)