[Fizz] New Server Rendering Infra (facebook#14144)

* [Fizz] Add Flow/Jest/Rollup build infra Add a new package for react-stream which allows for custom server renderer outputs. I picked the name because it's a reasonable name but also because the npm name is currently owned by a friend of the project. The react-dom build has its own inlined server renderer under the name `react-dom/fizz`. There is also a noop renderer to be used for testing. At some point we might add a public one to test-renderer but for now I don't want to have to think about public API design for the tests. * Add FormatConfig too We need to separate the format (DOM, React Native, etc) from the host running the server (Node, Browser, etc). * Basic wiring between Node, Noop and DOM configs The Node DOM API is pipeToNodeStream which accepts a writable stream. * Merge host and format config in dynamic react-stream entry point Simpler API this way but also avoids having to fork the wrapper config. Fixes noop builds. * Add setImmediate/Buffer globals to lint config Used by the server renderer * Properly include fizz.node.js Also use forwarding to it from fizz.js in builds so that tests covers this. * Make react-stream private since we're not ready to publish or even name it yet * Rename Renderer -> Streamer * Prefix react-dom/fizz with react-dom/unstable-fizz * 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. * Add Fizz Browser Fixture This is for testing server rendering - on the client. * Lower version number to detach it from react-reconciler version
n8schloss · Jan 31, 2019 · 5f38fa8 · 5f38fa8
1 parent d3559d3
commit 5f38fa8
Show file tree

Hide file tree

Showing 48 changed files with 1,214 additions and 87 deletions.
diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%; overflow: hidden">
+ <head>
+ <meta charset="utf-8">
+ <title>Fizz Example</title>
+ </head>
+ <body>
+ <h1>Fizz Example</h1>
+ <div id="container">
+ <p>
+ To install React, follow the instructions on
+ <a href="https://github.com/facebook/react/">GitHub</a>.
+ </p>
+ <p>
+ If you can see this, React is <strong>not</strong> working right.
+ If you checked out the source from GitHub make sure to run <code>npm run build</code>.
+ </p>
+ </div>
+ <script src="../../build/dist/react.development.js"></script>
+ <script src="../../build/dist/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 response = new Response(stream, {
+ headers: {'Content-Type': 'text/html'},
+ });
+ display(response);
+
+ async function display(responseToDisplay) {
+ let blob = await responseToDisplay.blob();
+ let url = URL.createObjectURL(blob);
+ let iframe = document.createElement('iframe');
+ iframe.src = url;
+ let container = document.getElementById('container');
+ container.innerHTML = '';
+ container.appendChild(iframe);
+ }
+ </script>
+ </body>
+</html>
diff --git a/package.json b/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"

diff --git a/packages/react-dom/npm/unstable-fizz.browser.js b/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');
+}
diff --git a/packages/react-dom/npm/unstable-fizz.js b/packages/react-dom/npm/unstable-fizz.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./unstable-fizz.node');
diff --git a/packages/react-dom/npm/unstable-fizz.node.js b/packages/react-dom/npm/unstable-fizz.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./cjs/react-dom-unstable-fizz.node.production.min.js');
+} else {
+ module.exports = require('./cjs/react-dom-unstable-fizz.node.development.js');
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
@@ -32,12 +32,16 @@
  "server.node.js",
  "test-utils.js",
  "unstable-fire.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": [

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/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>');
+ });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -0,0 +1,39 @@
+/**
+ * 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
+ * @jest-environment node
+ */
+
+'use strict';
+
+let Stream;
+let React;
+let ReactDOMFizzServer;
+
+describe('ReactDOMFizzServer', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ React = require('react');
+ ReactDOMFizzServer = require('react-dom/unstable-fizz');
+ Stream = require('stream');
+ });
+
+ function getTestWritable() {
+ let writable = new Stream.PassThrough();
+ writable.setEncoding('utf8');
+ writable.result = '';
+ writable.on('data', chunk => (writable.result += chunk));
+ return writable;
+ }
+
+ it('should call pipeToNodeWritable', () => {
+ let writable = getTestWritable();
+ ReactDOMFizzServer.pipeToNodeWritable(<div>hello world</div>, writable);
+ jest.runAllTimers();
+ expect(writable.result).toBe('<div>hello world</div>');
+ });
+});
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.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,
+};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.js
@@ -0,0 +1,19 @@
+/**
+ * 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 {convertStringToBuffer} from 'react-stream/src/ReactFizzHostConfig';
+
+export function formatChunk(type: string, props: Object): Uint8Array {
+ let str = '<' + type + '>';
+ if (typeof props.children === 'string') {
+ str += props.children;
+ }
+ str += '</' + type + '>';
+ return convertStringToBuffer(str);
+}
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -0,0 +1,30 @@
+/**
+ * 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 type {Writable} from 'stream';
+
+import {createRequest, startWork, startFlowing} from 'react-stream/inline.dom';
+
+function createDrainHandler(destination, request) {
+ return () => startFlowing(request, 0);
+}
+
+function pipeToNodeWritable(
+ children: ReactNodeList,
+ destination: Writable,
+): void {
+ let request = createRequest(children, destination);
+ destination.on('drain', createDrainHandler(destination, request));
+ startWork(request);
+}
+
+export default {
+ pipeToNodeWritable,
+};
diff --git a/packages/react-dom/unstable-fizz.browser.js b/packages/react-dom/unstable-fizz.browser.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;
diff --git a/packages/react-dom/unstable-fizz.js b/packages/react-dom/unstable-fizz.js
@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+module.exports = require('./unstable-fizz.node');
diff --git a/packages/react-dom/unstable-fizz.node.js b/packages/react-dom/unstable-fizz.node.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 ReactDOMFizzServerNode = require('./src/server/ReactDOMFizzServerNode');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest
+module.exports = ReactDOMFizzServerNode.default || ReactDOMFizzServerNode;
diff --git a/packages/react-noop-renderer/npm/server.js b/packages/react-noop-renderer/npm/server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./cjs/react-noop-renderer-server.production.min.js');
+} else {
+ module.exports = require('./cjs/react-noop-renderer-server.development.js');
+}
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
@@ -10,7 +10,8 @@
  "object-assign": "^4.1.1",
  "prop-types": "^15.6.2",
  "regenerator-runtime": "^0.11.0",
- "react-reconciler": "*"
+ "react-reconciler": "*",
+ "react-stream": "*"
  },
  "peerDependencies": {
  "react": "^16.0.0"
@@ -21,6 +22,7 @@
  "build-info.json",
  "index.js",
  "persistent.js",
+ "server.js",
  "cjs/"
  ]
 }
diff --git a/packages/react-noop-renderer/server.js b/packages/react-noop-renderer/server.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 ReactNoopServer = require('./src/ReactNoopServer');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest.
+module.exports = ReactNoopServer.default || ReactNoopServer;