feat(server-renderer): decouple esm build from Node + improve stream API

- deprecate `renderToSTream`
- added `renderToNodeStream`
- added `renderToWebStream`
- added `renderToSimpleStream`

close #3467
close #3111
close #3460

packages/server-renderer/src/helpers/ssrCompile.ts

@@ -16,6 +16,14 @@ export function ssrCompile(
   template: string,
   instance: ComponentInternalInstance
 ): SSRRenderFunction {
+  if (!__NODE_JS__) {
+    throw new Error(
+      `On-the-fly template compilation is not supported in the ESM build of ` +
+        `@vue/server-renderer. All templates must be pre-compiled into ` +
+        `render functions.`
+    )
+  }
+
   const cached = compileCache[template]
   if (cached) {
     return cached

packages/server-renderer/src/index.ts

@@ -1,7 +1,13 @@
 // public
 export { SSRContext } from './render'
 export { renderToString } from './renderToString'
-export { renderToStream } from './renderToStream'
+export {
+  renderToStream,
+  renderToSimpleStream,
+  renderToNodeStream,
+  renderToWebStream,
+  SimpleReadable
+} from './renderToStream'
 
 // internal runtime helpers
 export { renderVNode as ssrRenderVNode } from './render'

packages/server-renderer/src/renderToStream.ts

@@ -12,9 +12,14 @@ import { Readable } from 'stream'
 
 const { isVNode } = ssrUtils
 
+export interface SimpleReadable {
+  push(chunk: string | null): void
+  destroy(err: any): void
+}
+
 async function unrollBuffer(
   buffer: SSRBuffer,
-  stream: Readable
+  stream: SimpleReadable
 ): Promise<void> {
   if (buffer.hasAsync) {
     for (let i = 0; i < buffer.length; i++) {
@@ -35,7 +40,7 @@ async function unrollBuffer(
   }
 }
 
-function unrollBufferSync(buffer: SSRBuffer, stream: Readable) {
+function unrollBufferSync(buffer: SSRBuffer, stream: SimpleReadable) {
   for (let i = 0; i < buffer.length; i++) {
     let item = buffer[i]
     if (isString(item)) {
@@ -47,13 +52,18 @@ function unrollBufferSync(buffer: SSRBuffer, stream: Readable) {
   }
 }
 
-export function renderToStream(
+export function renderToSimpleStream<T extends SimpleReadable>(
   input: App | VNode,
-  context: SSRContext = {}
-): Readable {
+  context: SSRContext,
+  stream: T
+): T {
   if (isVNode(input)) {
     // raw vnode, wrap with app (for context)
-    return renderToStream(createApp({ render: () => input }), context)
+    return renderToSimpleStream(
+      createApp({ render: () => input }),
+      context,
+      stream
+    )
   }
 
   // rendering an app
@@ -62,8 +72,6 @@ export function renderToStream(
   // provide the ssr context to the tree
   input.provide(ssrContextKey, context)
 
-  const stream = new Readable()
-
   Promise.resolve(renderComponentVNode(vnode))
     .then(buffer => unrollBuffer(buffer, stream))
     .then(() => {
@@ -75,3 +83,78 @@ export function renderToStream(
 
   return stream
 }
+
+/**
+ * @deprecated
+ */
+export function renderToStream(
+  input: App | VNode,
+  context: SSRContext = {}
+): Readable {
+  console.warn(
+    `[@vue/server-renderer] renderToStream is deprecated - use renderToNodeStream instead.`
+  )
+  return renderToNodeStream(input, context)
+}
+
+export function renderToNodeStream(
+  input: App | VNode,
+  context: SSRContext = {},
+  UserReadable?: typeof Readable
+): Readable {
+  const stream: Readable = UserReadable
+    ? new UserReadable()
+    : __NODE_JS__
+    ? new (require('stream').Readable)()
+    : null
+
+  if (!stream) {
+    throw new Error(
+      `ESM build of renderToStream() requires explicitly passing in the Node.js ` +
+        `Readable constructor the 3rd argument. Example:\n\n` +
+        `  import { Readable } from 'stream'\n` +
+        `  const stream = renderToStream(app, {}, Readable)`
+    )
+  }
+
+  return renderToSimpleStream(input, context, stream)
+}
+
+const hasGlobalWebStream = typeof ReadableStream === 'function'
+
+export function renderToWebStream(
+  input: App | VNode,
+  context: SSRContext = {},
+  Ctor?: { new (): ReadableStream }
+): ReadableStream {
+  if (!Ctor && !hasGlobalWebStream) {
+    throw new Error(
+      `ReadableStream constructor is not avaialbe in the global scope and ` +
+        `must be explicitly passed in as the 3rd argument:\n\n` +
+        `  import { ReadableStream } from 'stream/web'\n` +
+        `  const stream = renderToWebStream(app, {}, ReadableStream)`
+    )
+  }
+
+  let cancelled = false
+  return new (Ctor || ReadableStream)({
+    start(controller) {
+      renderToSimpleStream(input, context, {
+        push(content) {
+          if (cancelled) return
+          if (content != null) {
+            controller.enqueue(content)
+          } else {
+            controller.close()
+          }
+        },
+        destroy(err) {
+          controller.error(err)
+        }
+      })
+    },
+    cancel() {
+      cancelled = true
+    }
+  })
+}