Use AbortSignal option for W3C streams instead of external control

facebook · Mar 18, 2021 · ab84723 · ab84723
1 parent 5d8cdc8
commit ab84723
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 18 deletions.
diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
@@ -20,7 +20,10 @@ <h1>Fizz Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom-unstable-fizz.browser.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
-      let {stream} = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>);
+      let controller = new AbortController();
+      let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>, {
+        signal: controller.signal,
+      });
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
     "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
+    "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -12,6 +12,7 @@
 // Polyfills for test environment
 global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
+global.AbortController = require('abort-controller');
 
 let React;
 let ReactDOMFizzServer;
@@ -50,7 +51,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should call renderToReadableStream', async () => {
-    const {stream} = ReactDOMFizzServer.renderToReadableStream(
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
     );
     const result = await readResult(stream);
@@ -59,7 +60,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should error the stream when an error is thrown at the root', async () => {
-    const {stream} = ReactDOMFizzServer.renderToReadableStream(
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Throw />
       </div>,
@@ -78,7 +79,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should error the stream when an error is thrown inside a fallback', async () => {
-    const {stream} = ReactDOMFizzServer.renderToReadableStream(
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<Throw />}>
           <InfiniteSuspend />
@@ -99,7 +100,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
-    const {stream} = ReactDOMFizzServer.renderToReadableStream(
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
@@ -113,15 +114,17 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
-    const {abort, stream} = ReactDOMFizzServer.renderToReadableStream(
+    const controller = new AbortController();
+    const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
+      {signal: controller.signal},
     );
 
-    abort();
+    controller.abort();
 
     const result = await readResult(stream);
     expect(result).toContain('Loading');

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -16,14 +16,19 @@ import {
   abort,
 } from 'react-server/src/ReactFizzServer';
 
-type Controls = {
-  stream: ReadableStream,
-  abort(): void,
+type Options = {
+  signal?: AbortSignal,
 };
 
-function renderToReadableStream(children: ReactNodeList): Controls {
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): ReadableStream {
   let request;
-  const stream = new ReadableStream({
+  if (options && options.signal) {
+    options.signal.addEventListener('abort', () => abort(request));
+  }
+  return new ReadableStream({
     start(controller) {
       request = createRequest(children, controller);
       startWork(request);
@@ -33,12 +38,6 @@ function renderToReadableStream(children: ReactNodeList): Controls {
     },
     cancel(reason) {},
   });
-  return {
-    stream,
-    abort() {
-      abort(request);
-    },
-  };
 }
 
 export {renderToReadableStream};