create postRenderHead hooks

Jason Gao · Jason Gao · commit 3c64203a3d46 · 2022-03-25T14:30:12.000-04:00
diff --git a/packages/fastify-renderer/src/node/DocumentTemplate.tsx b/packages/fastify-renderer/src/node/DocumentTemplate.tsx
@@ -6,6 +6,7 @@ export interface TemplateData<Props> {
   tail: NodeJS.ReadableStream
   content: string | NodeJS.ReadableStream
   props: Props
+  postRenderHead: NodeJS.ReadableStream
 }
 
 /** A template renders out a full HTML document given the content for the document and the scripts for the document, and can optionally grab values out of the props to use for other bits like the page title, metatags, or non-client-side-hydrated body content. */
@@ -19,6 +20,7 @@ export const DefaultDocumentTemplate: Template = (data: TemplateData<any>) => te
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${data.props.title || 'Fastify Renderer App'}</title>
     ${data.head}
+    ${data.postRenderHead}
   </head>
   <body>
     <div id="fstrapp">${data.content}</div>
diff --git a/packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx b/packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx
@@ -204,14 +204,19 @@ export class ReactRenderer implements Renderer {
 
   private renderStreamingTemplate<Props>(app: JSX.Element, bus: RenderBus, ReactDOMServer: any, render: Render<Props>) {
     this.runHeadHooks(bus)
+    // Do nothing for now when using streaming template
+    bus.push('postRenderHead', null)
     const contentStream = ReactDOMServer.renderToNodeStream(app)
-    contentStream.on('end', () => this.runTailHooks(bus))
+    contentStream.on('end', () => {
+      this.runTailHooks(bus)
+    })
 
     return render.document({
       content: contentStream,
       head: bus.stack('head'),
       tail: bus.stack('tail'),
       props: render.props,
+      postRenderHead: bus.stack('postRenderHead'),
     })
   }
 
@@ -221,18 +226,30 @@ export class ReactRenderer implements Renderer {
     ReactDOMServer: any,
     render: Render<Props>
   ) {
-    const content = ReactDOMServer.renderToString(app)
     this.runHeadHooks(bus)
+    const content = ReactDOMServer.renderToString(app)
+    this.runPostRenderHeadHooks(bus)
     this.runTailHooks(bus)
 
     return render.document({
       content,
       head: bus.stack('head'),
       tail: bus.stack('tail'),
       props: render.props,
+      postRenderHead: bus.stack('postRenderHead'),
     })
   }
 
+  private runPostRenderHeadHooks(bus: RenderBus) {
+    // Run any heads hooks that might want to push something after the content
+    for (const hook of this.plugin.hooks) {
+      if (hook.postRenderHeads) {
+        bus.push('postRenderHead', hook.postRenderHeads())
+      }
+    }
+    bus.push('postRenderHead', null)
+  }
+
   private runHeadHooks(bus: RenderBus) {
     // Run any heads hooks that might want to push something before the content
     for (const hook of this.plugin.hooks) {
diff --git a/packages/fastify-renderer/src/node/types.ts b/packages/fastify-renderer/src/node/types.ts
@@ -25,6 +25,7 @@ export interface FastifyRendererHook {
   tails?: () => string
   heads?: () => string
   transform?: (app: ReactElement) => ReactElement
+  postRenderHeads?: () => string
 }
 
 export interface ViteClientManifest {

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ export interface FastifyRendererHook {`
`25`	`25`	`tails?: () => string`
`26`	`26`	`heads?: () => string`
`27`	`27`	`transform?: (app: ReactElement) => ReactElement`
	`28`	`+ postRenderHeads?: () => string`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`export interface ViteClientManifest {`