fix(preact)!: each head manager for each route

Author: SukkaW

packages/preact/src/entry-server.tsx

@@ -1,12 +1,10 @@
-import { useContext } from "preact/hooks";
 import renderToString from "preact-render-to-string";
 import type { ComponentType } from "preact";
 import type { Context, RouteModule } from "@impalajs/core";
-import { HeadContext } from "./head-context";
+import { HeadContext, HeadManager } from "./head-context";
 
-function HeadContent() {
-  const headProvider = useContext(HeadContext);
-  return <>{...headProvider.getHead()}</>;
+function HeadContent({ headManager }: { headManager: HeadManager }) {
+  return <>{...headManager.getHead()}</>;
 }
 
 export async function render(
@@ -16,13 +14,21 @@ export async function render(
 ) {
   const { default: Page } = await mod();
 
-  const body = renderToString(<Page {...context} />);
+  // We create a new head manager for each request to avoid sharing state across routes
+  const headManager = new HeadManager();
+
+  const body = renderToString(
+    <HeadContext.Provider value={headManager}>
+      <Page {...context} />
+    </HeadContext.Provider>
+  );
 
   const modules = bootstrapModules?.map(
     (m) => `<script type="module" src="${m}"></script>`
   );
 
-  const headContent = renderToString(<HeadContent />);
+  // We then pass the head manager instance that is specific to this request to SSR
+  const headContent = renderToString(<HeadContent headManager={headManager} />);
 
   return {
     body,

packages/preact/src/head-context.tsx

@@ -1,6 +1,6 @@
 import { createContext, VNode } from "preact";
 
-class HeadProvider {
+export class HeadManager {
   private head: VNode<any>[] = [];
 
   private removeTag(tag: string) {
@@ -31,6 +31,6 @@ class HeadProvider {
   }
 }
 
-const headProvider = new HeadProvider();
+const defaultHeadProvider = new HeadManager();
 
-export const HeadContext = createContext(headProvider);
+export const HeadContext = createContext(defaultHeadProvider);

packages/preact/src/head.tsx

@@ -1,6 +1,6 @@
-import { useContext } from "preact/hooks";
+import { useContext, useRef } from "preact/hooks";
 import type { FunctionComponent, VNode } from "preact";
-import { HeadContext } from "./head-context";
+import { HeadManager, HeadContext } from "./head-context";
 
 interface HeadProps {
   title?: string;