fix

Author: galvez

packages/fastify-react/package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "files": [
     "plugin/index.js",
     "plugin/parsers.js",
@@ -24,6 +24,16 @@
     "virtual/resource.js",
     "virtual/root.jsx",
     "virtual/routes.js",
+    "virtual-ts/layouts/default.tsx",
+    "virtual-ts/context.ts",
+    "virtual-ts/core.tsx",
+    "virtual-ts/create.tsx",
+    "virtual-ts/index.ts",
+    "virtual-ts/layouts.ts",
+    "virtual-ts/mount.ts",
+    "virtual-ts/resource.ts",
+    "virtual-ts/root.tsx",
+    "virtual-ts/routes.ts",
     "client.js",
     "context.js",
     "index.js",
@@ -53,7 +63,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.5.0",
-    "unihead": "latest",
     "valtio": "latest",
     "youch": "^3.3.4"
   },

packages/fastify-react/virtual-ts/core.tsx

@@ -3,8 +3,8 @@ import { useEffect } from 'react'
 import { BrowserRouter, StaticRouter, useLocation } from 'react-router'
 import { proxy } from 'valtio'
 import { RouteContext, useRouteContext } from '@fastify/react/client'
-import layouts from '$app/layouts.ts'
-import { waitFetch, waitResource } from '$app/resource.ts'
+import layouts from '$app/layouts.js'
+import { waitFetch, waitResource } from '$app/resource.js'
 
 export const isServer = import.meta.env.SSR
 export const Router = isServer ? StaticRouter : BrowserRouter
@@ -33,7 +33,7 @@ export function useServerAction(action, options = {}) {
   return actionData[action]
 }
 
-export function AppRoute({ head, ctxHydration, ctx, children }) {
+export function AppRoute({ ctxHydration, ctx, children }) {
   // If running on the server, assume all data
   // functions have already ran through the preHandler hook
   if (isServer) {
@@ -100,7 +100,8 @@ export function AppRoute({ head, ctxHydration, ctx, children }) {
   if (!ctx.firstRender && ctx.getMeta) {
     const updateMeta = async () => {
       const { getMeta } = await ctx.loader()
-      head.update(await getMeta(ctx))
+      ctx.head = await getMeta(ctx)
+      ctxHydration.useHead.push(ctx.head)
     }
     waitResource(path, 'updateMeta', updateMeta)
   }

packages/fastify-react/virtual-ts/create.tsx

@@ -1,5 +1,19 @@
-import Root from '$app/root.tsx'
+import { 
+  UnheadProvider as ClientUnheadProvider 
+} from '@unhead/react/client'
+import { 
+  UnheadProvider as ServerUnheadProvider 
+} from '@unhead/react/server?server'
+
+import Root from '$app/root.jsx'
 
 export default function create({ url, ...serverInit }) {
-  return <Root url={url} {...serverInit} />
+  const UnheadProvider = import.meta.env.SSR
+    ? ServerUnheadProvider
+    : ClientUnheadProvider
+  return (
+    <UnheadProvider value={serverInit.ctxHydration.useHead}>
+      <Root url={url} {...serverInit} />
+    </UnheadProvider>
+  )
 }

packages/fastify-react/virtual-ts/mount.ts

@@ -1,23 +1,27 @@
 import { createRoot, hydrateRoot } from 'react-dom/client'
-import Head from 'unihead/client'
 import { hydrateRoutes } from '@fastify/react/client'
-import routes from '$app/routes.ts'
-import create from '$app/create.tsx'
-import * as context from '$app/context.ts'
+import { createHead } from '@unhead/react/client'
+import routes from '$app/routes.js'
+import create from '$app/create.jsx'
+import * as context from '$app/context.js'
 
 async function mountApp (...targets) {
   const ctxHydration = await extendContext(window.route, context)
-  const head = new Head(window.route.head, window.document)
   const resolvedRoutes = await hydrateRoutes(routes)
   const routeMap = Object.fromEntries(
     resolvedRoutes.map((route) => [route.path, route]),
   )
+  const useHead = createHead()
+  ctxHydration.useHead = useHead
+  ctxHydration.useHead.push(window.route.head)
+
   const app = create({
-    head,
     ctxHydration,
     routes: window.routes,
     routeMap,
   })
+
+
   let mountTargetFound = false
   for (const target of targets) {
     const targetElem = document.querySelector(target)