Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8aea397

Browse files
tannerlinsleytannerlinsley
committed
fix: safe document-level hydration... hopefully
1 parent 589f4a9 commit 8aea397

File tree

11 files changed

+447
-591
lines changed

11 files changed

+447
-591
lines changed

‎app.config.mjs

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,23 @@ const customVite = () =>
2323
// 'shiki',
2424
// ],
2525
// },
26-
resolve: {
27-
dedupe: [
28-
...(env.command !== 'build'
29-
? [
30-
'react',
31-
'react-dom',
32-
'@tanstack/store',
33-
'@tanstack/react-store',
34-
'@tanstack/react-router',
35-
'@tanstack/start',
36-
'@tanstack/react-cross-context',
37-
'@tanstack/history',
38-
'use-sync-external-store',
39-
]
40-
: []),
41-
],
42-
},
26+
// resolve: {
27+
// dedupe: [
28+
// ...(env.command !== 'build'
29+
// ? [
30+
// 'react',
31+
// 'react-dom',
32+
// '@tanstack/store',
33+
// '@tanstack/react-store',
34+
// '@tanstack/react-router',
35+
// '@tanstack/start',
36+
// '@tanstack/react-cross-context',
37+
// '@tanstack/history',
38+
// 'use-sync-external-store',
39+
// ]
40+
// : []),
41+
// ],
42+
// },
4343
// plugins: [
4444
// {
4545
// name: 'inline-env-vars-as-prefix',

‎app/client.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,4 @@ import { StartClient } from '@tanstack/start'
88

99
const router = createRouter()
1010

11-
React.startTransition(() => {
12-
hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)
13-
})
11+
hydrateRoot(document, <StartClient router={router} />)

‎app/components/DefaultCatchBoundary.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
2424
console.error(error)
2525

2626
return (
27-
<div className="flex-1 p-4 flex flex-col items-center justify-center gap-6">
27+
<div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
2828
<h1 className="opacity-10 flex flex-col text-center font-black">
2929
{/* <div className="text-7xl leading-none">{status}</div>
3030
{statusText ? (

‎app/components/Doc.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FaEdit } from 'react-icons/fa'
22
import { DocTitle } from '~/components/DocTitle'
3-
import { Mdx } from '~/components/RenderMarkdown'
3+
import { Markdown } from '~/components/Markdown'
44

55
export function Doc({
66
title,
@@ -22,7 +22,7 @@ export function Doc({
2222
<div className="h-px bg-gray-500 opacity-20" />
2323
<div className="h-4" />
2424
<div className="prose prose-gray prose-sm dark:prose-invert max-w-none">
25-
<Mdx code={content} />
25+
<Markdown code={content} />
2626
</div>
2727
<div className="h-12" />
2828
<div className="w-full h-px bg-gray-500 opacity-30" />

‎app/components/RenderMarkdown.tsx renamed to ‎app/components/Markdown.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,9 @@ function CodeBlock(props: React.HTMLProps<HTMLPreElement>) {
9696
</>
9797
)
9898

99-
React.useLayoutEffect(() => {
99+
React[
100+
typeof document !== 'undefined' ? 'useLayoutEffect' : 'useEffect'
101+
](() => {
100102
;(async () => {
101103
const themes = ['github-light', 'tokyo-night']
102104

@@ -182,7 +184,7 @@ const getHighlighter = cache(async (language: string, themes: string[]) => {
182184
return highlighter
183185
})
184186

185-
export function Mdx({ code }: { code: string }) {
187+
export function Markdown({ code }: { code: string }) {
186188
const jsx = React.useMemo(() => {
187189
const markup = marked.use(gfmHeadingId())(code) as string
188190

‎app/routes/__root.tsx

Lines changed: 35 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,6 @@ import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
2222
export const Route = createRootRouteWithContext<{
2323
assets: RouterManagedTag[]
2424
}>()({
25-
shellComponent: ({ children }) => {
26-
return (
27-
<html lang="en">
28-
<head>
29-
<Meta />
30-
</head>
31-
<body>{children}</body>
32-
</html>
33-
)
34-
},
35-
metaComponent: function Meta({ children }) {
36-
const matches = useMatches()
37-
38-
return (
39-
<>
40-
{children}
41-
{matches.find((d) => d.staticData?.baseParent) ? (
42-
<base target="_parent" />
43-
) : null}
44-
</>
45-
)
46-
},
4725
meta: () => [
4826
{
4927
charSet: 'utf-8',
@@ -113,16 +91,10 @@ export const Route = createRootRouteWithContext<{
11391
})
11492
}
11593
},
116-
errorComponent: ({ error }) => {
94+
errorComponent: (props) => {
11795
return (
11896
<RootDocument>
119-
<DefaultCatchBoundary
120-
error={error}
121-
info={{
122-
componentStack: '',
123-
}}
124-
reset={undefined as any}
125-
/>
97+
<DefaultCatchBoundary {...props} />
12698
</RootDocument>
12799
)
128100
},
@@ -145,6 +117,8 @@ function RootComponent() {
145117
}
146118

147119
function RootDocument({ children }: { children: React.ReactNode }) {
120+
const matches = useMatches()
121+
148122
const isLoading = useRouterState({
149123
select: (s) => s.status === 'pending',
150124
})
@@ -168,34 +142,44 @@ function RootDocument({ children }: { children: React.ReactNode }) {
168142
const showDevtools = showLoading && isRouterPage
169143

170144
return (
171-
<>
172-
<SpeedInsights />
173-
<Analytics />
174-
{children}
175-
{showDevtools ? <TanStackRouterDevtools position="bottom-right" /> : null}
176-
{showLoading ? (
177-
<div
178-
className={`fixed top-0 left-0 h-[300px] w-full
145+
<html lang="en">
146+
<head>
147+
<Meta />
148+
{matches.find((d) => d.staticData?.baseParent) ? (
149+
<base target="_parent" />
150+
) : null}
151+
</head>
152+
<body>
153+
<SpeedInsights />
154+
<Analytics />
155+
<React.Suspense fallback={null}>{children}</React.Suspense>
156+
{showDevtools ? (
157+
<TanStackRouterDevtools position="bottom-right" />
158+
) : null}
159+
{showLoading ? (
160+
<div
161+
className={`fixed top-0 left-0 h-[300px] w-full
179162
transition-all duration-300 pointer-events-none
180163
z-30 dark:h-[200px] dark:!bg-white/10 dark:rounded-[100%] ${
181164
isLoading
182165
? 'delay-0 opacity-1 -translate-y-1/2'
183166
: 'delay-300 opacity-0 -translate-y-full'
184167
}`}
185-
style={{
186-
background: `radial-gradient(closest-side, rgba(0,10,40,0.2) 0%, rgba(0,0,0,0) 100%)`,
187-
}}
188-
>
189-
<div
190-
className={`absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-[30px] p-2 bg-white/80 dark:bg-gray-800
191-
rounded-lg shadow-lg`}
168+
style={{
169+
background: `radial-gradient(closest-side, rgba(0,10,40,0.2) 0%, rgba(0,0,0,0) 100%)`,
170+
}}
192171
>
193-
<CgSpinner className="text-3xl animate-spin" />
172+
<div
173+
className={`absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-[30px] p-2 bg-white/80 dark:bg-gray-800
174+
rounded-lg shadow-lg`}
175+
>
176+
<CgSpinner className="text-3xl animate-spin" />
177+
</div>
194178
</div>
195-
</div>
196-
) : null}
197-
<ScrollRestoration />
198-
<Scripts />
199-
</>
179+
) : null}
180+
<ScrollRestoration />
181+
<Scripts />
182+
</body>
183+
</html>
200184
)
201185
}

‎app/routes/_libraries.ranger.$version.index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,8 +355,6 @@ export default function VersionIndex() {
355355
}}
356356
></iframe>
357357
</div>
358-
{/* )} */}
359-
360358
<div className="flex flex-col gap-4 items-center">
361359
<div className="font-extrabold text-xl lg:text-2xl">
362360
Wow, you've come a long way!

‎app/routes/_libraries.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useParams,
88
} from '@tanstack/react-router'
99
import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
10-
import { MdBook, MdBookOnline, MdLibraryBooks, MdSupport } from 'react-icons/md'
10+
import { MdLibraryBooks, MdSupport } from 'react-icons/md'
1111
import { twMerge } from 'tailwind-merge'
1212
import { SearchBox } from '@orama/searchbox'
1313
import { sortBy } from '~/utils/utils'
@@ -44,6 +44,12 @@ function LibrariesLayout() {
4444

4545
const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10 font-black`
4646

47+
const [mounted, setMounted] = React.useState(false)
48+
49+
React.useEffect(() => {
50+
setMounted(true)
51+
}, [])
52+
4753
const items = (
4854
<>
4955
{sortBy(libraries, (d) => !d.name.includes('TanStack')).map(
@@ -270,9 +276,11 @@ function LibrariesLayout() {
270276
{library?.scarfId ? <Scarf id={library.scarfId} /> : null}
271277
<Outlet />
272278
</div>
273-
<div className="fixed z-50">
274-
<SearchBox {...searchBoxParams} />
275-
</div>
279+
{mounted ? (
280+
<div className="fixed z-50">
281+
<SearchBox {...searchBoxParams} />
282+
</div>
283+
) : null}
276284
</div>
277285
)
278286
}

‎app/routes/blog.index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Link, createFileRoute, notFound } from '@tanstack/react-router'
22

33
import { getPostList } from '~/utils/blog'
44
import { DocTitle } from '~/components/DocTitle'
5-
import { Mdx } from '~/components/RenderMarkdown'
5+
import { Markdown } from '~/components/Markdown'
66
import { format } from 'date-fns'
77
import { Footer } from '~/components/Footer'
88
import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'
@@ -94,7 +94,7 @@ function BlogIndex() {
9494
</div>
9595
) : null}
9696
<div className={`text-sm mt-2 text-black dark:text-white`}>
97-
<Mdx
97+
<Markdown
9898
components={{
9999
a: (props) => <span {...props} />,
100100
}}

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
"@oramacloud/client": "^1.1.5",
2525
"@remix-run/node": "^2.8.1",
2626
"@tailwindcss/typography": "^0.5.13",
27-
"@tanstack/react-router": "1.31.25",
28-
"@tanstack/router-devtools": "1.31.25",
27+
"@tanstack/react-router": "1.31.28",
28+
"@tanstack/router-devtools": "1.31.28",
2929
"@tanstack/router-vite-plugin": "1.31.18",
30-
"@tanstack/start": "1.31.25",
30+
"@tanstack/start": "1.31.28",
3131
"@typescript-eslint/parser": "^7.2.0",
3232
"@vercel/analytics": "^1.2.2",
3333
"@vercel/speed-insights": "^1.0.10",

0 commit comments

Comments
 (0)