feat(react): replace unihead with unhead

Author: galvez

packages/fastify-react/context.js

@@ -1,3 +1,5 @@
+import { createHead } from '@unhead/react/server'
+
 const routeContextInspect = Symbol.for('nodejs.util.inspect.custom')
 
 export default class RouteContext {
@@ -15,10 +17,12 @@ export default class RouteContext {
   }
 
   constructor(server, req, reply, route) {
+    this.app = null
     this.server = server
     this.req = req
     this.reply = reply
     this.head = {}
+    this.useHead = createHead()
     this.actionData = {}
     this.state = null
     this.data = route.data
@@ -46,6 +50,7 @@ export default class RouteContext {
       actionData: this.actionData,
       state: this.state,
       data: this.data,
+      head: this.head,
       layout: this.layout,
       getMeta: this.getMeta,
       getData: this.getData,

packages/fastify-react/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@fastify/vite": "workspace:^",
+    "@unhead/react": "^2.0.8",
     "acorn": "^8.14.1",
     "acorn-strip-function": "^1.2.0",
     "acorn-walk": "^8.3.4",

packages/fastify-react/rendering.js

@@ -6,7 +6,7 @@ import { Minipass } from 'minipass'
 // which enables the combination of React.lazy() and Suspense
 import { renderToPipeableStream } from 'react-dom/server'
 import * as devalue from 'devalue'
-import Head from 'unihead'
+import { transformHtmlTemplate } from '@unhead/react/server'
 import { createHtmlTemplates } from './templating.js'
 
 // Helper function to get an AsyncIterable (via PassThrough)
@@ -46,6 +46,7 @@ export function onAllReady(app) {
 export async function createRenderFunction ({ routes, create }) {
   // Used when hydrating React Router on the client
   const routeMap = Object.fromEntries(routes.map(_ => [_.path, _]))
+
   // Registered as reply.render()
   return function () {
     if (this.request.route.streaming) {
@@ -80,6 +81,7 @@ export async function createHtmlFunction (source, _, config) {
   return async function () {
     const { routes, context, body } = await this.render()
 
+    context.useHead.push(context.head)
     this.type('text/html')
 
     // Use template with client module import removed
@@ -116,24 +118,35 @@ export async function createHtmlFunction (source, _, config) {
   }
 }
 
-export function sendClientOnlyShell (templates, context, body) {
-  context.head = new Head(context.head).render()
-  return `${
-    templates.beforeElement(context)
-  }${
-    templates.afterElement(context)
-  }`
+export async function sendClientOnlyShell (templates, context) {
+  return await transformHtmlTemplate(
+    context.useHead,
+    `${
+      templates.beforeElement(context)
+    }${
+      templates.afterElement(context)
+    }`
+  )
 }
 
 export function streamShell (templates, context, body) {
-  context.head = new Head(context.head).render()
   return Readable.from(createShellStream(templates, context, body))
 }
 
 async function * createShellStream (templates, context, body) {
-  yield templates.beforeElement(context)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.beforeElement(context)
+  )
+
   for await (const chunk of body) {
-    yield chunk
+    yield await transformHtmlTemplate(
+      context.useHead,
+      chunk.toString()
+    )
   }
-  yield templates.afterElement(context)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.afterElement(context)
+  )
 }

packages/fastify-react/virtual/core.jsx

@@ -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/create.jsx

@@ -1,5 +1,19 @@
+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/mount.js

@@ -1,23 +1,27 @@
 import { createRoot, hydrateRoot } from 'react-dom/client'
-import Head from 'unihead/client'
 import { hydrateRoutes } from '@fastify/react/client'
+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)