Fix/web stream error handling

packages/runtime-core/src/component.ts

@@ -990,6 +990,28 @@ export function registerRuntimeCompiler(_compile: any): void {
 // dev only
 export const isRuntimeOnly = (): boolean => !compile
 
+/**
+ * @internal
+ */
+export function getResolvedCompilerOptions(
+  instance: ComponentInternalInstance,
+): CompilerOptions {
+  const Component = instance.type as ComponentOptions
+  const { isCustomElement, compilerOptions } = instance.appContext.config
+  const { delimiters, compilerOptions: componentCompilerOptions } = Component
+
+  return extend(
+    extend(
+      {
+        isCustomElement,
+        delimiters,
+      },
+      compilerOptions,
+    ),
+    componentCompilerOptions,
+  )
+}
+
 export function finishComponentSetup(
   instance: ComponentInternalInstance,
   isSSR: boolean,
@@ -1021,19 +1043,7 @@ export function finishComponentSetup(
         if (__DEV__) {
           startMeasure(instance, `compile`)
         }
-        const { isCustomElement, compilerOptions } = instance.appContext.config
-        const { delimiters, compilerOptions: componentCompilerOptions } =
-          Component
-        const finalCompilerOptions: CompilerOptions = extend(
-          extend(
-            {
-              isCustomElement,
-              delimiters,
-            },
-            compilerOptions,
-          ),
-          componentCompilerOptions,
-        )
+        const finalCompilerOptions = getResolvedCompilerOptions(instance)
         if (__COMPAT__) {
           // pass runtime compat config into the compiler
           finalCompilerOptions.compatConfig = Object.create(globalCompatConfig)

packages/runtime-core/src/index.ts

@@ -397,6 +397,7 @@ export { transformVNodeArgs } from './vnode'
 import {
   createComponentInstance,
   getComponentPublicInstance,
+  getResolvedCompilerOptions,
   setupComponent,
 } from './component'
 import { renderComponentRoot } from './componentRenderUtils'
@@ -416,6 +417,7 @@ const _ssrUtils: {
   ensureValidVNode: typeof ensureValidVNode
   pushWarningContext: typeof pushWarningContext
   popWarningContext: typeof popWarningContext
+  getResolvedCompilerOptions: typeof getResolvedCompilerOptions
 } = {
   createComponentInstance,
   setupComponent,
@@ -427,6 +429,7 @@ const _ssrUtils: {
   ensureValidVNode,
   pushWarningContext,
   popWarningContext,
+  getResolvedCompilerOptions,
 }
 
 /**

packages/server-renderer/__tests__/nodeStream.spec.ts

@@ -0,0 +1,69 @@
+import { createApp, defineAsyncComponent, h } from 'vue'
+import { pipeToNodeWritable, renderToNodeStream } from '../src'
+import { Writable } from 'node:stream'
+import { describe, expect, test } from 'vitest'
+
+describe('Node.js Streams backpressure', () => {
+  test('pipeToNodeWritable backpressure', async () => {
+    const Async = defineAsyncComponent(() =>
+      Promise.resolve({
+        render: () => h('div', 'b'),
+      }),
+    )
+    const App = {
+      render: () => [h('div', 'a'), h(Async)],
+    }
+
+    let writeCount = 0
+    const writable = new Writable({
+      highWaterMark: 1,
+      write(_chunk, _encoding, callback) {
+        writeCount++
+        callback()
+      },
+    })
+
+    const originalWrite = writable.write.bind(writable)
+    let firstCall = true
+    writable.write = (chunk: any, encoding?: any, cb?: any): any => {
+      if (firstCall) {
+        firstCall = false
+        originalWrite(chunk, encoding, cb)
+        return false
+      }
+      return originalWrite(chunk, encoding, cb)
+    }
+
+    pipeToNodeWritable(createApp(App), {}, writable)
+
+    await new Promise(resolve => setTimeout(resolve, 20))
+    // Should have only 1 write because it returned false and we're waiting for drain
+    expect(writeCount).toBe(1)
+
+    writable.emit('drain')
+    await new Promise(resolve => setTimeout(resolve, 20))
+    // Second write should have happened after drain
+    expect(writeCount).toBeGreaterThan(1)
+  })
+
+  test('renderToNodeStream backpressure', async () => {
+    const Async = defineAsyncComponent(() =>
+      Promise.resolve({
+        render: () => h('div', 'b'),
+      }),
+    )
+    const App = {
+      render: () => [h('div', 'a'), h(Async)],
+    }
+
+    const stream = renderToNodeStream(createApp(App))
+
+    // In Node.js Readable, push() returns false when the buffer is full.
+    // For our test, we'll just verify that it streams correctly first.
+    let res = ''
+    for await (const chunk of stream) {
+      res += chunk
+    }
+    expect(res).toBe('<!--[--><div>a</div><div>b</div><!--]-->')
+  })
+})

packages/server-renderer/__tests__/webStream.spec.ts

@@ -64,3 +64,85 @@ test('pipeToWebWritable', async () => {
 
   expect(res).toBe(`<!--[--><div>parent</div><div>async</div><!--]-->`)
 })
+
+test('pipeToWebWritable error handling', async () => {
+  const App = {
+    ssrRender() {
+      throw new Error('ssr render error')
+    },
+  }
+
+  let abortedReason: any
+  const writable = new WritableStream({
+    abort(reason) {
+      abortedReason = reason
+    },
+  })
+
+  pipeToWebWritable(createApp(App), {}, writable)
+
+  // Wait for the error to propagate
+  await new Promise(resolve => setTimeout(resolve, 10))
+
+  expect(abortedReason).toBeInstanceOf(Error)
+  expect(abortedReason.message).toBe('ssr render error')
+})
+
+test('pipeToWebWritable backpressure', async () => {
+  const Async = defineAsyncComponent(() =>
+    Promise.resolve({
+      render: () => h('div', 'b'),
+    }),
+  )
+  const App = {
+    render: () => [h('div', 'a'), h(Async)],
+  }
+
+  let writeCount = 0
+  let resolveWrite: any
+  const writable = new WritableStream({
+    write() {
+      writeCount++
+      return new Promise(resolve => {
+        resolveWrite = resolve
+      })
+    },
+  })
+
+  pipeToWebWritable(createApp(App), {}, writable)
+
+  await new Promise(resolve => setTimeout(resolve, 20))
+  // Should have only 1 write because the first one is pending
+  expect(writeCount).toBe(1)
+
+  resolveWrite()
+  await new Promise(resolve => setTimeout(resolve, 20))
+  // Second write should have happened after the async component resolved
+  expect(writeCount).toBeGreaterThan(1)
+})
+
+test('renderToWebStream backpressure', async () => {
+  const Async = defineAsyncComponent(() =>
+    Promise.resolve({
+      render: () => h('div', 'b'),
+    }),
+  )
+  const App = {
+    render: () => [h('div', 'a'), h(Async)],
+  }
+
+  const stream = renderToWebStream(createApp(App), {})
+  const reader = stream.getReader()
+
+  const { value: v1 } = await reader.read()
+  expect(new TextDecoder().decode(v1)).toBe('<!--[--><div>a</div>')
+
+  const { value: v2 } = await reader.read()
+  expect(new TextDecoder().decode(v2)).toBe('<div>b</div>')
+
+  const { value: v3 } = await reader.read()
+  expect(new TextDecoder().decode(v3)).toBe('<!--]-->')
+
+  const { done } = await reader.read()
+  expect(done).toBe(true)
+})

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

@@ -1,11 +1,12 @@
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
+  ssrUtils,
   warn,
 } from 'vue'
 import { compile } from '@vue/compiler-ssr'
 import { NO, extend, generateCodeFrame, isFunction } from '@vue/shared'
 import type { CompilerError, CompilerOptions } from '@vue/compiler-core'
 import type { PushFn } from '../render'
 
 import * as Vue from 'vue'
@@ -32,21 +33,7 @@
     )
   }
 
-  // TODO: This is copied from runtime-core/src/component.ts and should probably be refactored
-  const Component = instance.type as ComponentOptions
-  const { isCustomElement, compilerOptions } = instance.appContext.config
-  const { delimiters, compilerOptions: componentCompilerOptions } = Component
-
-  const finalCompilerOptions: CompilerOptions = extend(
-    extend(
-      {
-        isCustomElement,
-        delimiters,
-      },
-      compilerOptions,
-    ),
-    componentCompilerOptions,
-  )
+  const finalCompilerOptions = ssrUtils.getResolvedCompilerOptions(instance)
 
   finalCompilerOptions.isCustomElement =
     finalCompilerOptions.isCustomElement || NO