feat: add support for react 19 (#264)

Co-authored-by: Valerio Ageno <valerioageno@yahoo.it>
This commit is contained in:
Marco Pasqualetti
2025-01-03 11:00:44 +01:00
committed by GitHub
parent 1dc77fc473
commit 592f402ffd
24 changed files with 329 additions and 426 deletions
+5 -5
View File
@@ -3,13 +3,13 @@
"description": "Basic tuono application",
"version": "0.0.1",
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tuono": "link:../../packages/tuono"
},
"devDependencies": {
"@types/react": "^18.3.13",
"@types/react-dom": "^18.3.0",
"typescript": "^5.6.3"
"@types/react": "19.0.2",
"@types/react-dom": "19.0.2",
"typescript": "5.6.3"
}
}
+7 -1
View File
@@ -5,5 +5,11 @@ interface RootRouteProps {
}
export default function RootRoute({ children }: RootRouteProps): JSX.Element {
return <main className="main">{children}</main>
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
)
}
+4 -4
View File
@@ -3,13 +3,13 @@
"description": "The basic tutorial for tuono applications",
"version": "0.0.1",
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tuono": "link:../../packages/tuono"
},
"devDependencies": {
"@types/react": "^18.3.13",
"@types/react-dom": "^18.3.0",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"typescript": "^5.6.3"
}
}
@@ -5,5 +5,11 @@ interface RootRouteProps {
}
export default function RootRoute({ children }: RootRouteProps): JSX.Element {
return <main className="main">{children}</main>
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
)
}
+18 -12
View File
@@ -1,6 +1,6 @@
// src/routes/index.tsx
import type { JSX } from 'react'
import { Head, type TuonoProps } from 'tuono'
import type { TuonoProps } from 'tuono'
import PokemonLink from '@/components/PokemonLink'
@@ -15,20 +15,25 @@ interface IndexProps {
export default function IndexPage({
data,
}: TuonoProps<IndexProps>): JSX.Element | null {
if (!data?.results) {
return null
}
if (!data?.results) return null
return (
<>
<Head>
<title>Tuono tutorial</title>
</Head>
<title>Tuono tutorial</title>
<header className="header">
<a href="https://crates.io/crates/tuono" target="_blank">
<a
href="https://crates.io/crates/tuono"
target="_blank"
rel="noreferrer"
>
Crates
</a>
<a href="https://www.npmjs.com/package/tuono" target="_blank">
<a
href="https://www.npmjs.com/package/tuono"
target="_blank"
rel="noreferrer"
>
Npm
</a>
</header>
@@ -43,9 +48,10 @@ export default function IndexPage({
</div>
<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
<PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
{data.results.map((pokemon, i) => {
return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
})}
{data.results.map((pokemon, i) => (
<PokemonLink key={i} pokemon={pokemon} id={i + 1} />
))}
</ul>
</>
)
@@ -1,5 +1,5 @@
import type { JSX } from 'react'
import { Head, type TuonoProps } from 'tuono'
import type { TuonoProps } from 'tuono'
import PokemonView from '@/components/PokemonView'
@@ -15,9 +15,8 @@ export default function PokemonPage({
}: TuonoProps<Pokemon>): JSX.Element {
return (
<>
<Head>
<title>{`Pokemon: ${data?.name}`}</title>
</Head>
<title>{`Pokemon: ${data?.name ?? ''}`}</title>
<PokemonView pokemon={data} />
</>
)
@@ -4,6 +4,7 @@
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
+4 -4
View File
@@ -4,14 +4,14 @@
"version": "0.0.1",
"dependencies": {
"@mdx-js/react": "3.1.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tuono": "link:../../packages/tuono"
},
"devDependencies": {
"@mdx-js/rollup": "3.1.0",
"@types/react": "18.3.18",
"@types/react-dom": "18.3.5",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"typescript": "^5.6.3"
}
}
+7 -3
View File
@@ -7,8 +7,12 @@ interface RootRouteProps {
export default function RootRoute({ children }: RootRouteProps): JSX.Element {
return (
<main className="main">
<MDXProvider components={{}}>{children}</MDXProvider>
</main>
<html>
<body>
<main>
<MDXProvider components={{}}>{children}</MDXProvider>
</main>
</body>
</html>
)
}