add stream setting

vikejs · Dec 25, 2023 · 4047651 · 4047651
1 parent f3842d3
commit 4047651
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/vike-solid/renderer/+config.ts b/vike-solid/renderer/+config.ts
@@ -63,15 +63,21 @@ export default {
       env: { config: true },
       effect: toggleSsrRelatedConfig,
     },
+    stream: {
+      env: { server: true }
+    },
   },
 } satisfies Config;
 
 // We purposely define the ConfigVikeSolid interface in this file: that way we ensure it's always applied whenever the user `import vikeSolid from 'vike-solid'`
 declare global {
   namespace VikePackages {
     interface ConfigVikeSolid {
+      /** The page's root Solid component */
+      Page?: Component;
       /** Solid element renderer and appended into <head></head> */
       Head?: Component;
+      /** A component, usually common to several pages, that wraps the root component `Page` */
       Layout?: Component;
       title?: string | ((pageContext: PageContext) => string);
       description?: string;
@@ -92,8 +98,13 @@ declare global {
        *
        */
       ssr?: boolean;
-      /** The page's root Solid component */
-      Page?: Component;
+      /**
+       * Whether to stream the page's HTML. Requires Server-Side Rendering (`ssr: true`).
+       *
+       * @default false
+       *
+       */
+      stream?: boolean
     }
   }
 }
diff --git a/vike-solid/renderer/+onRenderHtml.tsx b/vike-solid/renderer/+onRenderHtml.tsx
@@ -17,13 +17,13 @@ checkVikeVersion()
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext
 ): ReturnType<OnRenderHtmlAsync> => {
+  const { stream, favicon, description } = pageContext.config
+
   const title = getTitle(pageContext);
   const titleTag = !title ? "" : escapeInject`<title>${title}</title>`;
 
-  const { description } = pageContext.config;
-  const descriptionTag = !description
-    ? ""
-    : escapeInject`<meta name="description" content="${description}" />`;
+  const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`
+  const descriptionTag = !description ? '' : escapeInject`<meta name="description" content="${description}" />`
 
   const Head = pageContext.config.Head || (() => <></>);
   const headHtml = renderToString(() => (
@@ -32,18 +32,17 @@ const onRenderHtml: OnRenderHtmlAsync = async (
     </PageContextProvider>
   ));
 
-  const favicon = pageContext.config.favicon;
-  const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`;
+  type TPipe = (writable: { write: (v: string) => void; }) => void
 
-  const { pipe } = renderToStream(() =>
-    !pageContext.Page ? (
-      <></> // the ssr config flag is false
-    ) : (
-      getPageElement(pageContext)
-    )
-  );
-  // const asString = renderToString(() => page);
-  stampPipe(pipe, "node-stream");
+  let pageView: string | ReturnType<typeof dangerouslySkipEscape> | TPipe = ''
+  if (!!pageContext.Page) {
+    if (!stream) {
+      pageView = dangerouslySkipEscape(renderToString(() => getPageElement(pageContext)))
+    } else {
+      pageView = renderToStream(() => getPageElement(pageContext)).pipe
+      stampPipe(pageView, "node-stream");
+    }
+  }
 
   const lang = pageContext.config.lang || "en";
 
@@ -58,7 +57,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (
         ${dangerouslySkipEscape(generateHydrationScript())}
       </head>
       <body>
-        <div id="page-view">${pipe}</div>
+        <div id="page-view">${pageView}</div>
       </body>
       <!-- built with https://github.com/vikejs/vike-solid -->
     </html>`;