jacob-mathison/tuono
1
0
Fork 0
mirror of https://github.com/tuono-labs/tuono synced 2026-07-25 21:02:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: create a component tree that matches between client and server to avoid useId output mismatch (#371)

Browse Source 
Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>
This commit is contained in:
Valerio Ageno
2025-01-19 16:23:30 +01:00
committed by GitHub
parent 43910fd75d
commit 33aa37ed7d
20 changed files with 242 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/tuono-app/src/routes/__layout.tsx
+2
View File
@@ -1,4 +1,5 @@
import type { ReactNode, JSX } from 'react'
import { TuonoScripts } from 'tuono'
interface RootLayoutProps {
children: ReactNode
@@ -9,6 +10,7 @@ export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
<html>
<body>
<main>{children}</main>
<TuonoScripts />
</body>
</html>
)
examples/tuono-app/src/routes/index.tsx
+38 -38
View File
@@ -2,47 +2,47 @@ import type { JSX } from 'react'
import type { TuonoProps } from 'tuono'
interface IndexProps {
subtitle: string
subtitle: string
}
export default function IndexPage({
data,
isLoading,
data,
isLoading,
}: TuonoProps<IndexProps>): JSX.Element {
if (isLoading) {
return <h1>Loading...</h1>
}
if (isLoading) {
return <h1>Loading...</h1>
}
return (
<>
<header className="header">
<a href="https://crates.io/crates/tuono" target="_blank">
Crates
</a>
<a href="https://www.npmjs.com/package/tuono" target="_blank">
Npm
</a>
</header>
<div className="title-wrap">
<h1 className="title">
TU<span>O</span>NO
</h1>
<div className="logo">
<img src="rust.svg" className="rust" />
<img src="react.svg" className="react" />
</div>
</div>
<div className="subtitle-wrap">
<p className="subtitle">{data?.subtitle}</p>
<a
href="https://github.com/tuono-labs/tuono"
target="_blank"
className="button"
type="button"
>
Github
</a>
</div>
</>
)
return (
<>
<header className="header">
<a href="https://crates.io/crates/tuono" target="_blank">
Crates
</a>
<a href="https://www.npmjs.com/package/tuono" target="_blank">
Npm
</a>
</header>
<div className="title-wrap">
<h1 className="title">
TU<span>O</span>NO
</h1>
<div className="logo">
<img src="rust.svg" className="rust" />
<img src="react.svg" className="react" />
</div>
</div>
<div className="subtitle-wrap">
<p className="subtitle">{data?.subtitle}</p>
<a
href="https://github.com/tuono-labs/tuono"
target="_blank"
className="button"
type="button"
>
Github
</a>
</div>
</>
)
}
examples/tuono-tutorial/src/routes/__layout.tsx
+2
View File
@@ -1,4 +1,5 @@
import type { ReactNode, JSX } from 'react'
import { TuonoScripts } from 'tuono'
interface RootLayoutProps {
children: ReactNode
@@ -9,6 +10,7 @@ export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
<html>
<body>
<main>{children}</main>
<TuonoScripts />
</body>
</html>
)
examples/with-mdx/src/routes/__layout.tsx
+2
View File
@@ -1,5 +1,6 @@
import type { ReactNode, JSX } from 'react'
import { MDXProvider } from '@mdx-js/react'
import { TuonoScripts } from 'tuono'
interface RootLayoutProps {
children: ReactNode
@@ -12,6 +13,7 @@ export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
<main>
<MDXProvider components={{}}>{children}</MDXProvider>
</main>
<TuonoScripts />
</body>
</html>
)
examples/with-tailwind/src/routes/__layout.tsx
+2
View File
@@ -1,4 +1,5 @@
import type { ReactNode, JSX } from 'react'
import { TuonoScripts } from 'tuono'
interface RootLayoutProps {
children: ReactNode
@@ -12,6 +13,7 @@ export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
</head>
<body>
<main>{children}</main>
<TuonoScripts />
</body>
</html>
)