Support data-ssr-root attr in index.html

ije · ije · commit 99c72017f195 · 2022-04-28T02:38:11.000+08:00
diff --git a/examples/feature-apps/monaco-editor/index.html b/examples/feature-apps/monaco-editor/index.html
@@ -31,7 +31,7 @@
 </head>
 
 <body>
-  <div id="root"><!-- ssr-body --></div>
+  <div id="root" data-ssr-root></div>
   <script type="module" src="./main.tsx"></script>
 </body>
 
diff --git a/examples/feature-apps/suspense-ssr/index.html b/examples/feature-apps/suspense-ssr/index.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-  <div id="root"><!-- ssr-body --></div>
+  <div id="root" data-ssr-root></div>
   <script type="module" src="./main.tsx"></script>
 </body>
 
diff --git a/examples/feature-apps/unocss/index.html b/examples/feature-apps/unocss/index.html
@@ -34,7 +34,7 @@
 </head>
 
 <body>
-  <div id="root"><!-- ssr-body --></div>
+  <div id="root" data-ssr-root></div>
   <script type="module" src="./main.tsx"></script>
 </body>
 
diff --git a/examples/react-app/index.html b/examples/react-app/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <div id="root"><!-- ssr-body --></div>
+  <div id="root" data-ssr-root></div>
   <script type="module" src="./main.tsx"></script>
 </body>
 
diff --git a/examples/vue-app/index.html b/examples/vue-app/index.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-  <div id="root"><!-- ssr-body --></div>
+  <div id="root" data-ssr-root></div>
   <script type="module" src="./main.js"></script>
 </body>
 
diff --git a/server/html.ts b/server/html.ts
@@ -37,6 +37,16 @@ async function loadIndexHtml(): Promise<{ html: Uint8Array; hasSSRBody: boolean
     element: () => hasSSRBody = true,
   });
   rewriter.on("*", {
+    element: (e: Element) => {
+      if (e.hasAttribute("data-ssr-root")) {
+        if (hasSSRBody) {
+          e.removeAttribute("data-ssr-root");
+        } else {
+          e.setInnerContent("<ssr-body></ssr-body>", { html: true });
+          hasSSRBody = true;
+        }
+      }
+    },
     comments: (c: Comment) => {
       const text = c.text.trim();
       if (text === "ssr-body" || text === "ssr-output") {
