fix: support exactOptionalPropertyTypes (fix vikejs/vike#3251) (#219)

Author: brillout

packages/vike-react/src/integration/onRenderClient.tsx

@@ -102,11 +102,11 @@ function onUncaughtErrorGlobal(
 }
 type OnUncaughtError = RootOptions['onUncaughtError']
 type OnUncaughtErrorArgs = Parameters<NonNullable<RootOptions['onUncaughtError']>>
+type OnUncaughtErrorInfo = OnUncaughtErrorArgs[1]
 
 // Inject componentStack to the error's stack trace
 // - Server counterpart: https://github.com/brillout/react-streaming/blob/e0a6210957e65dad2c92877ad075ebac4713d8fa/src/server/renderToStream/common.ts#L93
-type ErrorInfo = { componentStack?: string }
-function getErrorWithComponentStack(errorOriginal: unknown, errorInfo?: ErrorInfo) {
+function getErrorWithComponentStack(errorOriginal: unknown, errorInfo?: OnUncaughtErrorInfo) {
   if (!errorInfo?.componentStack || !isObject(errorOriginal)) return errorOriginal
   const errorStackLines = String(errorOriginal.stack).split('\n')
 

packages/vike-react/src/integration/onRenderHtml.tsx

@@ -3,7 +3,7 @@ export { onRenderHtml }
 
 import React from 'react'
 import { renderToString, renderToStaticMarkup } from 'react-dom/server'
-import { renderToStream } from 'react-streaming/server'
+import { renderToStream, type RenderToStreamOptions } from 'react-streaming/server'
 import { dangerouslySkipEscape, escapeInject } from 'vike/server'
 import type { PageContextServer } from 'vike/types'
 import { VikeReactProviderPageContext } from '../hooks/usePageContext.js'
@@ -80,29 +80,10 @@ async function renderPageToHtml(pageContext: PageContextServer) {
       const pageHtmlString = renderToString(pageContext.page, renderToStringOptions)
       pageContext.pageHtmlString = pageHtmlString
     } else {
-      const pageHtmlStream = await renderToStream(pageContext.page, {
-        webStream: !streamSetting.type
-          ? /* Let react-streaming decide which stream type to use.
-            false
-            */
-            undefined
-          : streamSetting.type === 'web',
-        userAgent:
-          pageContext.headers?.['user-agent'] ||
-          // TO-DO/eventually: remove old way of acccessing the User Agent header.
-          // @ts-ignore
-          pageContext.userAgent,
-        disable:
-          // +stream.require is true  => default +stream.enable is true
-          // +stream.require is false => default +stream.enable is false
-          streamSetting.enable === false
-            ? true
-            : /* Don't override disabling when bot is detected.
-              false,
-              */
-              undefined,
-        ...renderToStreamOptions,
-      })
+      const pageHtmlStream = await renderToStream(
+        pageContext.page,
+        getRenderToStreamOptions(pageContext, streamSetting, renderToStreamOptions),
+      )
       pageContext.pageHtmlStream = pageHtmlStream
     }
   }
@@ -230,6 +211,37 @@ async function getHtmlInjections(pageContext: PageContextServer) {
   return { bodyHtmlBegin, bodyHtmlEnd, headHtmlBegin, headHtmlEnd }
 }
 
+function getRenderToStreamOptions(
+  pageContext: PageContextServer,
+  streamSetting: StreamSetting,
+  renderToStreamOptions: RenderToStreamOptions | undefined,
+): RenderToStreamOptions {
+  const options: RenderToStreamOptions = {}
+
+  if (streamSetting.type) {
+    options.webStream = streamSetting.type === 'web'
+  } else {
+    // Let react-streaming decide the stream type
+  }
+
+  const userAgent =
+    pageContext.headers?.['user-agent'] ||
+    // TO-DO/eventually: remove old way of acccessing the User Agent header.
+    // @ts-ignore
+    pageContext.userAgent
+  if (userAgent) options.userAgent = userAgent
+
+  // +stream.require is true  => default +stream.enable is true
+  // +stream.require is false => default +stream.enable is false
+  if (streamSetting.enable === false) {
+    options.disable = true
+  } else {
+    // Let react-streaming disable streaming when it detects a bot
+  }
+
+  return { ...options, ...renderToStreamOptions }
+}
+
 type StreamSetting = {
   type: 'node' | 'web' | null
   enable: boolean | null

packages/vike-react/tsconfig.json

@@ -10,6 +10,7 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
     // Resolution
     "esModuleInterop": true,
     "moduleResolution": "Node16",