Flush direct streams in Bun

[lithdew]

Summary

The ReadableStreamController for direct streams in Bun supports a flush() method to flush all buffered items to its underlying sink.

Without manually calling flush(), all buffered items are only flushed to the underlying sink when the stream is closed. This behavior causes the shell rendered against Suspense boundaries never to be flushed to the underlying sink.

How did you test this change?

A lot of changes to the test runner will need to be made in order to support the Bun runtime. A separate test was manually run in order to ensure that the changes made are correct.

The test works by sanity-checking that the shell rendered against Suspense boundaries are emitted first in the stream.

This test was written and run on Bun v1.1.3.

import { Suspense } from "react";
import { renderToReadableStream } from "react-dom/server";

if (!import.meta.resolveSync("react-dom/server").endsWith("server.bun.js")) {
  throw new Error("react-dom/server is not the correct version:\n  " + import.meta.resolveSync("react-dom/server"));
}

const A = async () => {
  await new Promise(resolve => setImmediate(resolve));
  return <div>hi</div>;
};

const B = async () => {
  return (
    <Suspense fallback={<div>loading</div>}>
      <A />
    </Suspense>
  );
};

const stream = await renderToReadableStream(<B />);

let text = "";
let count = 0;
for await (const chunk of stream) {
  text += new TextDecoder().decode(chunk);
  count++;
}

if (
  text !==
  `<!--$?--><template id="B:0"></template><div>loading</div><!--/$--><div hidden id="S:0"><div>hi</div></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script>`
) {
  throw new Error("unexpected output");
}
if (count !== 2) {
  throw new Error("expected 2 chunks from react ssr stream");
}

[react-sizebot]

Comparing: 9defcd5...628c646

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	168.76 kB	168.76 kB	=	52.91 kB	52.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	170.57 kB	170.57 kB	=	53.44 kB	53.44 kB
facebook-www/ReactDOM-prod.classic.js	=	590.83 kB	590.83 kB	=	103.91 kB	103.91 kB
facebook-www/ReactDOM-prod.modern.js	=	566.65 kB	566.65 kB	=	100.10 kB	100.10 kB
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Generated by 🚫 dangerJS against 628c646

[Jarred-Sumner]

From bun’s end of things, LGTM