fix: fixed jsonp rendering

BowlingX · BowlingX · commit 5ac100aa6b7e · 2023-03-03T00:04:22.000-05:00
diff --git a/src/server/events.ts b/src/server/events.ts
@@ -0,0 +1,2 @@
+export const EV_BEFORE_HYDRATION = '_next_static_before_hydration'
+export const EV_AFTER_HYDRATION = '_next_static_after_hydration'
diff --git a/src/server/jsonp.ts b/src/server/jsonp.ts
@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+import { EV_BEFORE_HYDRATION } from './events.js'
 
 // see https://github.com/expressjs/express/blob/158a17031a2668269aedb31ea07b58d6b700272b/lib/response.js#L293
 export const sendAsJsonP = (
@@ -51,12 +52,20 @@ export const sendAsJsonP = (
                   console.warn('[next-static]: "rootElement" was provided but not of expected type HTMLElement, please provide a valid element.');
                   return Promise.reject();
               }
-              var thisElement = rootElement && rootElement instanceof HTMLElement ? rootElement : document.body;
-              thisElement.insertAdjacentHTML('beforeend', manifest.content);
+              const thisElement = rootElement && rootElement instanceof HTMLElement ? rootElement : document.body;
+              const scriptNode = document.createRange().createContextualFragment(manifest.scripts);
+              const applicationRoot = document.createElement('div');
+              applicationRoot.setAttribute('data-next-static-outer-root', 'true')
+              applicationRoot.style.cssText = 'visibility: hidden;';
+              applicationRoot.insertAdjacentHTML('beforeend', manifest.content)
+              thisElement.insertAdjacentHTML('afterbegin', manifest.styles)
+              thisElement.appendChild(applicationRoot)
+              thisElement.appendChild(scriptNode)
               return new Promise(function (resolve) {
-                  window.addEventListener('_next_static_hydration_complete', function eventCapture() {
+                  window.addEventListener('${EV_BEFORE_HYDRATION}', function eventCapture() {
                       resolve();
-                      window.removeEventListener('_next_static_hydration_complete', eventCapture);
+                      applicationRoot.style.cssText = 'visibility: visible;';
+                      window.removeEventListener('${EV_BEFORE_HYDRATION}', eventCapture);
                   })
               })
           }
diff --git a/src/shell/app-shell.client.tsx b/src/shell/app-shell.client.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import React from 'react'
 import { ApplicationRoot } from './components/ApplicationRoot.js'
 import application from '@main'
+import { EV_AFTER_HYDRATION, EV_BEFORE_HYDRATION } from '../server/events.js'
 
 async function init() {
   if (typeof window.__NEXT_STATIC_DATA__ === 'undefined') {
@@ -20,9 +21,9 @@ async function init() {
     context,
     query,
   } = window.__NEXT_STATIC_DATA__
+  window.dispatchEvent(new CustomEvent(EV_BEFORE_HYDRATION))
 
   await loadableReady()
-
   const { components, props } = await application(context)
 
   for (const [index, Component] of components.entries()) {
@@ -48,7 +49,7 @@ async function init() {
       root
     )
   }
-  window.dispatchEvent(new CustomEvent('_next_static_hydration_complete'))
+  window.dispatchEvent(new CustomEvent(EV_AFTER_HYDRATION))
 }
 
 ;(async () => {
diff --git a/src/shell/app-shell.server.tsx b/src/shell/app-shell.server.tsx
@@ -94,13 +94,8 @@ export default async function (
 
   const renderedApp = renderToStaticMarkup(Application)
 
-  const Body = () => (
+  const Scripts = () => (
     <>
-      {chunkExtractor.getStyleElements()}
-      <div
-        data-next-static-outer-root="true"
-        dangerouslySetInnerHTML={{ __html: renderedApp }}
-      />
       {chunkExtractor.getScriptElements()}
       <script
         id="__NEXT_STATIC_DATA__"
@@ -113,13 +108,26 @@ export default async function (
   if (thisOutputMode === 'jsonp') {
     return sendAsJsonP(
       {
-        content: renderToStaticMarkup(<Body />),
+        styles: chunkExtractor.getStyleTags(),
+        content: renderedApp,
+        scripts: renderToStaticMarkup(<Scripts />),
       },
       res,
       req
     )
   }
 
+  const Body = () => (
+    <>
+      {chunkExtractor.getStyleElements()}
+      <div
+        data-next-static-outer-root="true"
+        dangerouslySetInnerHTML={{ __html: renderedApp }}
+      />
+      <Scripts />
+    </>
+  )
+
   const Outer = () => (
     <html>
       <head>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const EV_BEFORE_HYDRATION = '_next_static_before_hydration'`
	`2`	`+export const EV_AFTER_HYDRATION = '_next_static_after_hydration'`