Add Fizz Browser host config

This lets Fizz render to WHATWG streams. E.g. for rendering in a
Service Worker.

I added react-dom/unstable-fizz.browser as the entry point for this.

Since we now have two configurations of DOM. I had to add another
inlinedHostConfigs configuration called `dom-browser`. The reconciler
treats this configuration the same as `dom`. For stream it checks
against the ReactFizzHostConfigBrowser instead of the Node one.

Author: sebmarkbage

package.json

@@ -84,7 +84,8 @@
     "targz": "^1.0.1",
     "through2": "^2.0.0",
     "tmp": "~0.0.28",
-    "typescript": "~1.8.10"
+    "typescript": "~1.8.10",
+    "@mattiasbuelens/web-streams-polyfill": "0.1.0"
   },
   "devEngines": {
     "node": "8.x || 9.x || 10.x"

packages/react-dom/npm/unstable-fizz.browser.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-unstable-fizz.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom-unstable-fizz.browser.development.js');
+}

packages/react-dom/npm/unstable-fizz.node.js

@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-unstable-fizz.production.min.js');
+  module.exports = require('./cjs/react-dom-unstable-fizz.node.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-unstable-fizz.development.js');
+  module.exports = require('./cjs/react-dom-unstable-fizz.node.development.js');
 }

packages/react-dom/package.json

@@ -31,13 +31,15 @@
     "server.node.js",
     "test-utils.js",
     "unstable-fizz.js",
+    "unstable-fizz.browser.js",
     "unstable-fizz.node.js",
     "unstable-native-dependencies.js",
     "cjs/",
     "umd/"
   ],
   "browser": {
-    "./server.js": "./server.browser.js"
+    "./server.js": "./server.browser.js",
+    "./unstable-fizz.js": "./unstable-fizz.browser.js"
   },
   "browserify": {
     "transform": [

packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactDOMFizzServer;
+
+describe('ReactDOMFizzServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/unstable-fizz.browser');
+  });
+
+  async function readResult(stream) {
+    let reader = stream.getReader();
+    let result = '';
+    while (true) {
+      let {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  it('should call renderToReadableStream', async () => {
+    let stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+    );
+    let result = await readResult(stream);
+    expect(result).toBe('<div>hello world</div>');
+  });
+});

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js renamed to packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-stream/inline.dom-browser';
+
+function renderToReadableStream(children: ReactNodeList): ReadableStream {
+  let request;
+  return new ReadableStream({
+    start(controller) {
+      request = createRequest(children, controller);
+      startWork(request);
+    },
+    pull(controller) {
+      startFlowing(request, controller.desiredSize);
+    },
+    cancel(reason) {},
+  });
+}
+
+export default {
+  renderToReadableStream,
+};

packages/react-dom/src/server/ReactDOMFizzServerBrowser.js

@@ -16,7 +16,10 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request, 0);
 }
 
-function pipeToNodeWritable(children: ReactNodeList, destination: Writable) {
+function pipeToNodeWritable(
+  children: ReactNodeList,
+  destination: Writable,
+): void {
   let request = createRequest(children, destination);
   destination.on('drain', createDrainHandler(destination, request));
   startWork(request);

packages/react-dom/src/server/ReactDOMFizzServerNode.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactDOMFizzServerBrowser = require('./src/server/ReactDOMFizzServerBrowser');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest
+module.exports = ReactDOMFizzServerBrowser.default || ReactDOMFizzServerBrowser;

packages/react-dom/unstable-fizz.browser.js

@@ -27,6 +27,7 @@ const ReactNoopServer = ReactFizzStreamer({
     destination.push(JSON.parse(Buffer.from((buffer: any)).toString('utf8')));
   },
   completeWriting(destination: Destination): void {},
+  close(destination: Destination): void {},
   flushBuffered(destination: Destination): void {},
   convertStringToBuffer(content: string): Uint8Array {
     return Buffer.from(content, 'utf8');

packages/react-noop-renderer/src/ReactNoopServer.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
+
+export * from './src/ReactFiberReconciler';

packages/react-reconciler/inline.dom-browser.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/client/ReactDOMHostConfig';

packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
+
+export * from './src/ReactFizzStreamer';

packages/react-stream/inline.dom-browser.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type Destination = ReadableStreamController;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {
+  // WHATWG Streams do not yet have a way to flush the underlying
+  // transform streams. https://github.com/whatwg/streams/issues/960
+}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(destination: Destination, buffer: Uint8Array) {
+  destination.enqueue(buffer);
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {
+  destination.close();
+}
+
+const textEncoder = new TextEncoder();
+
+export function convertStringToBuffer(content: string): Uint8Array {
+  return textEncoder.encode(content);
+}

packages/react-stream/src/ReactFizzHostConfigBrowser.js

@@ -39,6 +39,10 @@ export function completeWriting(destination: Destination) {
   destination.uncork();
 }
 
+export function close(destination: Destination) {
+  destination.end();
+}
+
 export function convertStringToBuffer(content: string): Uint8Array {
   return Buffer.from(content, 'utf8');
 }

packages/react-stream/src/ReactFizzHostConfigNode.js

@@ -16,6 +16,7 @@ import {
   writeChunk,
   completeWriting,
   flushBuffered,
+  close,
 } from './ReactFizzHostConfig';
 import {formatChunk} from './ReactFizzFormatConfig';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
@@ -36,7 +37,8 @@ export function createRequest(
 
 function performWork(request: OpaqueRequest): void {
   let element = (request.children: any);
-  if (element.$$typeof !== REACT_ELEMENT_TYPE) {
+  request.children = null;
+  if (element && element.$$typeof !== REACT_ELEMENT_TYPE) {
     return;
   }
   let type = element.type;
@@ -55,6 +57,7 @@ function performWork(request: OpaqueRequest): void {
 function flushCompletedChunks(request: OpaqueRequest) {
   let destination = request.destination;
   let chunks = request.completedChunks;
+  request.completedChunks = [];
 
   beginWriting(destination);
   try {
@@ -65,6 +68,7 @@ function flushCompletedChunks(request: OpaqueRequest) {
   } finally {
     completeWriting(destination);
   }
+  close(destination);
 }
 
 export function startWork(request: OpaqueRequest): void {

packages/react-stream/src/ReactFizzStreamer.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/server/ReactDOMFizzServerFormatConfig';

packages/react-stream/src/forks/ReactFizzFormatConfig.dom-browser.js

@@ -31,4 +31,5 @@ export const beginWriting = $$$hostConfig.beginWriting;
 export const writeChunk = $$$hostConfig.writeChunk;
 export const completeWriting = $$$hostConfig.completeWriting;
 export const flushBuffered = $$$hostConfig.flushBuffered;
+export const close = $$$hostConfig.close;
 export const convertStringToBuffer = $$$hostConfig.convertStringToBuffer;

packages/react-stream/src/forks/ReactFizzHostConfig.custom.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactFizzHostConfigBrowser';

packages/react-stream/src/forks/ReactFizzHostConfig.dom-browser.js

@@ -140,10 +140,17 @@ const bundles = [
   },
 
   /******* React DOM Fizz Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/unstable-fizz.browser',
+    global: 'ReactDOMFizzServer',
+    externals: ['react'],
+  },
   {
     bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-fizz',
+    entry: 'react-dom/unstable-fizz.node',
     global: 'ReactDOMFizzServer',
     externals: ['react'],
   },