fix(react)!: add <HeadProvider />

Author: SukkaW

packages/preact/src/entry-server.tsx

@@ -17,6 +17,7 @@ export async function render(
   // We create a new head manager for each request to avoid sharing state across routes
   const headManager = new HeadManager();
 
+  // Now on each render, each page will use their own head context instead of default one
   const body = renderToString(
     <HeadContext.Provider value={headManager}>
       <Page {...context} />

packages/react/src/entry-server.tsx

@@ -1,8 +1,8 @@
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
-import { ElementType, useContext } from "react";
+import { ElementType } from "react";
 import type { Context, RouteModule } from "@impalajs/core";
 import { Writable, WritableOptions } from "node:stream";
-import { HeadContext } from "./head-context";
+import { HeadContext, HeadManager } from "./head-context";
 
 class StringResponse extends Writable {
   private buffer: string;
@@ -30,9 +30,8 @@ class StringResponse extends Writable {
   }
 }
 
-function HeadContent() {
-  const headProvider = useContext(HeadContext);
-  return <>{...headProvider.getHead()}</>;
+function HeadContent({ headManager }: { headManager: HeadManager }) {
+  return <>{...headManager.getHead()}</>;
 }
 
 export async function render(
@@ -42,22 +41,32 @@ export async function render(
 ) {
   const { default: Page } = await mod();
 
+  // We create a new head manager for each request to avoid sharing state across routes
+  const headManager = new HeadManager();
+
   const response = new StringResponse();
 
-  const { pipe } = renderToPipeableStream(<Page {...context} />, {
-    bootstrapModules,
-    bootstrapScriptContent: `window.___CONTEXT=${JSON.stringify(context)};`,
-    onAllReady() {
-      pipe(response);
-    },
-    onError(error) {
-      console.error(error);
-    },
-  });
+  const { pipe } = renderToPipeableStream(
+    // Now on each render, each page will use their own head context instead of default one
+    (
+      <HeadContext.Provider value={headManager}>
+        <Page {...context} />
+      </HeadContext.Provider>
+    ),
+    {
+      bootstrapModules,
+      bootstrapScriptContent: `window.___CONTEXT=${JSON.stringify(context)};`,
+      onAllReady() {
+        pipe(response);
+      },
+      onError(error) {
+        console.error(error);
+      },
+    });
 
   const body = await response.getData();
 
-  const head = renderToStaticMarkup(<HeadContent />);
+  const head = renderToStaticMarkup(<HeadContent headManager={headManager} />);
 
   return { body, head };
 }

packages/react/src/head-context.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, ReactElement, ReactNode } from "react";
 
-class HeadProvider {
+export class HeadManager {
   private head: React.ReactElement[] = [];
 
   private removeTag(tag: string) {
@@ -31,6 +31,6 @@ class HeadProvider {
   }
 }
 
-const headProvider = new HeadProvider();
+const defaultHeadManager = new HeadManager();
 
-export const HeadContext = createContext(headProvider);
+export const HeadContext = createContext(defaultHeadManager);