Use zen-observable library (#28214)

Our `Observable` use has gotten sufficiently complex that it makes sense to just use a 3rd party implementation and not worry about maintaining it ourselves. As a bonus, it doesn't rely on Node APIs.

Author: devknoll

packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts

@@ -11,7 +11,7 @@ import { setLazyProp, getCookieParser } from '../../../../server/api-utils'
 import { getRedirectStatus } from '../../../../lib/load-custom-routes'
 import getRouteNoAssetPath from '../../../../shared/lib/router/utils/get-route-from-asset-path'
 import { PERMANENT_REDIRECT_STATUS } from '../../../../shared/lib/constants'
-import { resultToChunks } from '../../../../server/utils'
+import { resultsToString } from '../../../../server/utils'
 
 export function getPageHandler(ctx: ServerlessHandlerCtx) {
   const {
@@ -334,7 +334,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
                 defaultLocale: i18n?.defaultLocale,
               })
             )
-            const html = result2 ? (await resultToChunks(result2)).join('') : ''
+            const html = result2 ? await resultsToString([result2]) : ''
             sendPayload(
               req,
               res,
@@ -402,7 +402,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
       }
 
       if (renderMode) return { html: result, renderOpts }
-      return result ? (await resultToChunks(result)).join('') : null
+      return result ? await resultsToString([result]) : null
     } catch (err) {
       if (!parsedUrl!) {
         parsedUrl = parseUrl(req.url!, true)
@@ -464,7 +464,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
           err: res.statusCode === 404 ? undefined : err,
         })
       )
-      return result2 ? (await resultToChunks(result2)).join('') : null
+      return result2 ? await resultsToString([result2]) : null
     }
   }
 

packages/next/compiled/zen-observable/LICENSE

@@ -0,0 +1,18 @@
+Copyright (c) 2018 zenparsing (Kevin Smith)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/next/compiled/zen-observable/esm.js

@@ -0,0 +1 @@
+{"name":"zen-observable","main":"esm.js","license":"MIT"}

packages/next/compiled/zen-observable/package.json

@@ -3,6 +3,7 @@ import { extname, join, dirname, sep } from 'path'
 import { renderToHTML } from '../server/render'
 import { promises } from 'fs'
 import AmpHtmlValidator from 'next/dist/compiled/amphtml-validator'
+import Observable from 'next/dist/compiled/zen-observable'
 import { loadComponents } from '../server/load-components'
 import { isDynamicRoute } from '../shared/lib/router/utils/is-dynamic'
 import { getRouteMatcher } from '../shared/lib/router/utils/route-matcher'
@@ -18,7 +19,7 @@ import { FontManifest } from '../server/font-utils'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
 import { trace } from '../telemetry/trace'
 import { isInAmpMode } from '../shared/lib/amp'
-import { resultFromChunks, resultToChunks } from '../server/utils'
+import { resultsToString } from '../server/utils'
 import { NextConfigComplete } from '../server/config-shared'
 import { setHttpAgentOptions } from '../server/config'
 
@@ -274,7 +275,7 @@ export default async function exportPage({
 
         // if it was auto-exported the HTML is loaded here
         if (typeof mod === 'string') {
-          renderResult = resultFromChunks([mod])
+          renderResult = Observable.of(mod)
           queryWithAutoExportWarn()
         } else {
           // for non-dynamic SSG pages we should have already
@@ -352,7 +353,7 @@ export default async function exportPage({
         }
 
         if (typeof components.Component === 'string') {
-          renderResult = resultFromChunks([components.Component])
+          renderResult = Observable.of(components.Component)
           queryWithAutoExportWarn()
         } else {
           /**
@@ -417,8 +418,7 @@ export default async function exportPage({
         }
       }
 
-      const htmlChunks = renderResult ? await resultToChunks(renderResult) : []
-      const html = htmlChunks.join('')
+      const html = renderResult ? await resultsToString([renderResult]) : ''
       if (inAmpMode && !curRenderOpts.ampSkipValidation) {
         if (!results.ssgNotFound) {
           await validateAmp(html, path, curRenderOpts.ampValidatorPath)
@@ -460,8 +460,9 @@ export default async function exportPage({
             )
           }
 
-          const ampChunks = await resultToChunks(ampRenderResult)
-          const ampHtml = ampChunks.join('')
+          const ampHtml = ampRenderResult
+            ? await resultsToString([ampRenderResult])
+            : ''
           if (!curRenderOpts.ampSkipValidation) {
             await validateAmp(ampHtml, page + '?amp=1')
           }

packages/next/export/worker.ts

@@ -185,6 +185,7 @@
     "@types/text-table": "0.2.1",
     "@types/webpack": "5.28.0",
     "@types/webpack-sources": "0.1.5",
+    "@types/zen-observable": "0.8.3",
     "@vercel/ncc": "0.27.0",
     "@vercel/nft": "0.12.2",
     "amphtml-validator": "1.0.33",
@@ -248,7 +249,8 @@
     "unistore": "3.4.1",
     "web-vitals": "2.1.0",
     "webpack": "4.44.1",
-    "webpack-sources": "1.4.3"
+    "webpack-sources": "1.4.3",
+    "zen-observable": "0.8.15"
   },
   "engines": {
     "node": ">=12.0.0"

packages/next/package.json

@@ -10,6 +10,7 @@ import {
   ParsedUrlQuery,
 } from 'querystring'
 import { format as formatUrl, parse as parseUrl, UrlWithParsedQuery } from 'url'
+import Observable from 'next/dist/compiled/zen-observable'
 import { PrerenderManifest } from '../build'
 import {
   getRedirectStatus,
@@ -76,12 +77,7 @@ import { sendRenderResult, setRevalidateHeaders } from './send-payload'
 import { serveStatic } from './serve-static'
 import { IncrementalCache } from './incremental-cache'
 import { execOnce } from '../shared/lib/utils'
-import {
-  isBlockedPage,
-  RenderResult,
-  resultFromChunks,
-  resultToChunks,
-} from './utils'
+import { isBlockedPage, RenderResult, resultsToString } from './utils'
 import { loadEnvConfig } from '@next/env'
 import './node-polyfill-fetch'
 import { PagesManifest } from '../build/webpack/plugins/pages-manifest-plugin'
@@ -1267,7 +1263,7 @@ export default class Server {
         req,
         res,
         resultOrPayload: requireStaticHTML
-          ? (await resultToChunks(body)).join('')
+          ? await resultsToString([body])
           : body,
         type,
         generateEtags,
@@ -1296,8 +1292,7 @@ export default class Server {
     if (payload === null) {
       return null
     }
-    const chunks = await resultToChunks(payload.body)
-    return chunks.join('')
+    return resultsToString([payload.body])
   }
 
   public async render(
@@ -1472,7 +1467,7 @@ export default class Server {
       return {
         type: 'html',
         // TODO: Static pages should be written as chunks
-        body: resultFromChunks([components.Component]),
+        body: Observable.of(components.Component),
       }
     }
 
@@ -1751,7 +1746,7 @@ export default class Server {
               return {
                 value: {
                   kind: 'PAGE',
-                  html: resultFromChunks([html]),
+                  html: Observable.of(html),
                   pageData: {},
                 },
               }
@@ -1830,7 +1825,7 @@ export default class Server {
       if (isDataReq) {
         return {
           type: 'json',
-          body: resultFromChunks([JSON.stringify(cachedData.props)]),
+          body: Observable.of(JSON.stringify(cachedData.props)),
           revalidateOptions,
         }
       } else {
@@ -1841,7 +1836,7 @@ export default class Server {
       return {
         type: isDataReq ? 'json' : 'html',
         body: isDataReq
-          ? resultFromChunks([JSON.stringify(cachedData.pageData)])
+          ? Observable.of(JSON.stringify(cachedData.pageData))
           : cachedData.html,
         revalidateOptions,
       }
@@ -2076,7 +2071,7 @@ export default class Server {
       }
       return {
         type: 'html',
-        body: resultFromChunks(['Internal Server Error']),
+        body: Observable.of('Internal Server Error'),
       }
     }
   }