Move to react-helmet-async (#72)

* feat: move to react-helmet-async

* feat: set version to v0.11.0
This commit is contained in:
Valerio Ageno
2024-11-03 21:09:32 +01:00
committed by GitHub
parent 7e6dea68f4
commit d04a4c4103
12 changed files with 41 additions and 37 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "tuono"
version = "0.10.4"
version = "0.11.0"
edition = "2021"
authors = ["V. Ageno <valerioageno@yahoo.it>"]
description = "The react/rust fullstack framework"
+2 -2
View File
@@ -1,6 +1,6 @@
[package]
name = "tuono_lib"
version = "0.10.4"
version = "0.11.0"
edition = "2021"
authors = ["V. Ageno <valerioageno@yahoo.it>"]
description = "The react/rust fullstack framework"
@@ -33,7 +33,7 @@ either = "1.13.0"
tower-http = {version = "0.6.0", features = ["fs"]}
colored = "2.1.0"
tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.10.4"}
tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.11.0"}
# Match the same version used by axum
tokio-tungstenite = "0.24.0"
futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "tuono_lib_macros"
version = "0.10.4"
version = "0.11.0"
edition = "2021"
description = "The react/rust fullstack framework"
keywords = [ "react", "typescript", "fullstack", "web", "ssr"]
@@ -2,21 +2,21 @@ import { Head, type TuonoProps } from 'tuono'
import PokemonView from '../../components/PokemonView'
interface Pokemon {
name: string
id: string
weight: number
height: number
name: string
id: string
weight: number
height: number
}
export default function PokemonPage({
data,
data,
}: TuonoProps<Pokemon>): JSX.Element {
return (
<>
<Head>
<title>Pokemon: {data?.name}</title>
</Head>
<PokemonView pokemon={data} />
</>
)
return (
<>
<Head>
<title>{`Pokemon: ${data?.name}`}</title>
</Head>
<PokemonView pokemon={data} />
</>
)
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "workspace",
"packageManager": "pnpm@9.12.3",
"packageManager": "pnpm@9.12.3+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b",
"scripts": {
"dev": "turbo watch dev",
"build": "turbo build --filter tuono",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "tuono-fs-router-vite-plugin",
"version": "0.10.4",
"version": "0.11.0",
"description": "Plugin for the tuono's file system router. Tuono is the react/rust fullstack framework",
"scripts": {
"dev": "vite build --watch",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "tuono-lazy-fn-vite-plugin",
"version": "0.10.4",
"version": "0.11.0",
"description": "Plugin for the tuono's lazy fn. Tuono is the react/rust fullstack framework",
"scripts": {
"dev": "vite build --watch",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "tuono-router",
"version": "0.10.4",
"version": "0.11.0",
"description": "React routing component for the framework tuono. Tuono is the react/rust fullstack framework",
"scripts": {
"dev": "vite build --watch",
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "tuono",
"version": "0.10.4",
"version": "0.11.0",
"description": "The react/rust fullstack framework",
"scripts": {
"dev": "vite build --watch",
@@ -87,7 +87,7 @@
"@types/node": "^22.0.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"fast-text-encoding": "^1.0.6",
"react-meta-tags": "^1.0.1",
"react-helmet-async": "^2.0.5",
"tuono-fs-router-vite-plugin": "workspace:*",
"tuono-lazy-fn-vite-plugin": "workspace:*",
"tuono-router": "workspace:*",
+4 -1
View File
@@ -1,6 +1,7 @@
import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import { RouterProvider, createRouter } from 'tuono-router'
import { HelmetProvider } from 'react-helmet-async'
type RouteTree = any
@@ -14,7 +15,9 @@ export function hydrate(routeTree: RouteTree): void {
hydrateRoot(
rootElement,
<React.StrictMode>
<RouterProvider router={router} />
<HelmetProvider>
<RouterProvider router={router} />
</HelmetProvider>
</React.StrictMode>,
)
}
+1 -3
View File
@@ -1,4 +1,4 @@
import Head from 'react-meta-tags'
export { Helmet as Head } from 'react-helmet-async'
export {
createRoute,
@@ -11,6 +11,4 @@ export {
useRouter,
} from 'tuono-router'
export { Head }
export type { TuonoProps } from './types'
+13 -10
View File
@@ -1,8 +1,8 @@
import 'fast-text-encoding' // Mandatory for React18
import * as React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import MetaTagsServer from 'react-meta-tags/server'
import { MetaTagsContext } from 'react-meta-tags'
import type { HelmetServerState } from 'react-helmet-async'
import { HelmetProvider } from 'react-helmet-async'
import { RouterProvider, createRouter } from 'tuono-router'
type RouteTree = any
@@ -44,23 +44,26 @@ export function serverSideRendering(routeTree: RouteTree) {
const cssBundles = props.cssBundles as string[]
const router = createRouter({ routeTree }) // Render the app
const metaTagsInstance = MetaTagsServer()
const helmetContext = {}
const app = renderToString(
<MetaTagsContext extract={metaTagsInstance.extract}>
<HelmetProvider context={helmetContext}>
<RouterProvider router={router} serverProps={props} />
</MetaTagsContext>,
</HelmetProvider>,
)
const metaTags = metaTagsInstance.renderToString()
const { helmet } = helmetContext as { helmet: HelmetServerState }
return `<!doctype html>
<html>
<html ${helmet.htmlAttributes.toString()}>
<head>
${metaTags}
${helmet.title.toString()}
${helmet.priority.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
${helmet.script.toString()}
${generateCssLinks(cssBundles, mode)}
</head>
<body>
<body ${helmet.bodyAttributes.toString()}>
<div id="__tuono">${app}</div>
${renderToStaticMarkup(
<script