Move to react-helmet-async (#72)

* feat: move to react-helmet-async * feat: set version to v0.11.0
tuono-labs · Nov 3, 2024 · d04a4c4 · d04a4c4
1 parent 7e6dea6
commit d04a4c4
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 37 deletions.
diff --git a/crates/tuono/Cargo.toml b/crates/tuono/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.10.4"
+version = "0.11.0"
 edition = "2021"
 authors = ["V. Ageno <[email protected]>"]
 description = "The react/rust fullstack framework"

diff --git a/crates/tuono_lib/Cargo.toml b/crates/tuono_lib/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib"
-version = "0.10.4"
+version = "0.11.0"
 edition = "2021"
 authors = ["V. Ageno <[email protected]>"]
 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"] }

diff --git a/crates/tuono_lib_macros/Cargo.toml b/crates/tuono_lib_macros/Cargo.toml
@@ -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"]

diff --git a/examples/tutorial/src/routes/pokemons/[pokemon].tsx b/examples/tutorial/src/routes/pokemons/[pokemon].tsx
@@ -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} />
+		</>
+	)
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "workspace",
-  "packageManager": "[email protected]",
+  "packageManager": "[email protected]+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b",
   "scripts": {
     "dev": "turbo watch dev",
     "build": "turbo build --filter tuono",

diff --git a/packages/fs-router-vite-plugin/package.json b/packages/fs-router-vite-plugin/package.json
@@ -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",

diff --git a/packages/lazy-fn-vite-plugin/package.json b/packages/lazy-fn-vite-plugin/package.json
@@ -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",

diff --git a/packages/router/package.json b/packages/router/package.json
@@ -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",

diff --git a/packages/tuono/package.json b/packages/tuono/package.json
@@ -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:*",

diff --git a/packages/tuono/src/hydration/index.tsx b/packages/tuono/src/hydration/index.tsx
@@ -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>,
   )
 }
diff --git a/packages/tuono/src/index.ts b/packages/tuono/src/index.ts
@@ -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'
diff --git a/packages/tuono/src/ssr/index.tsx b/packages/tuono/src/ssr/index.tsx
@@ -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