Add Relay Flight Build (#18242)

* Rename to clarify that it's client-only

* Rename FizzStreamer to FizzServer for consistency

* Rename react-flight to react-client/flight

For consistency with react-server. Currently this just includes flight
but it could be expanded to include the whole reconciler.

* Add Relay Flight Build

* Rename ReactServerHostConfig to ReactServerStreamConfig

This will be the config specifically for streaming purposes.
There will be other configs for other purposes.

packages/react-flight/README.md → packages/react-client/README.md

@@ -1,4 +1,4 @@
-# react-flight
+# react-client
 
 This is an experimental package for consuming custom React streaming models.
 

packages/react-client/npm/flight.js

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

packages/react-flight/package.json → packages/react-client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-flight",
+  "name": "react-client",
   "description": "React package for consuming streaming models.",
   "version": "0.1.0",
   "private": true,
@@ -12,14 +12,13 @@
   "files": [
     "LICENSE",
     "README.md",
-    "index.js",
+    "flight.js",
     "cjs/"
   ],
-  "main": "index.js",
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",
-    "directory": "packages/react-flight"
+    "directory": "packages/react-client"
   },
   "engines": {
     "node": ">=0.10.0"

packages/react-client/src/forks/ReactFlightClientHostConfig.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-client/src/ReactFlightClientHostConfigBrowser';

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.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-flight-dom-relay/src/ReactFlightDOMRelayClientHostConfig';

packages/react-client/src/forks/ReactFlightClientHostConfig.dom.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-client/src/ReactFlightClientHostConfigBrowser';

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

@@ -13,7 +13,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
-} from 'react-server/src/ReactFizzStreamer';
+} from 'react-server/src/ReactFizzServer';
 
 function renderToReadableStream(children: ReactNodeList): ReadableStream {
   let request;

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

@@ -14,7 +14,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
-} from 'react-server/src/ReactFizzStreamer';
+} from 'react-server/src/ReactFizzServer';
 
 function createDrainHandler(destination, request) {
   return () => startFlowing(request);

packages/react-server/src/forks/ReactServerHostConfig.dom-browser.js → packages/react-flight-dom-relay/index.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactServerHostConfigBrowser';
+export * from './src/ReactFlightDOMRelayClient';

packages/react-flight-dom-relay/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "react-flight-dom-relay",
+  "version": "0.1.0",
+  "private": true,
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-flight-dom-relay"
+  },
+  "dependencies": {
+    "object-assign": "^4.1.1",
+    "scheduler": "^0.11.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}

packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js → packages/react-flight-dom-relay/server.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-flight/src/ReactFlightHostConfigBrowser';
+export * from './src/ReactFlightDOMRelayServer';

packages/react-flight-dom-relay/src/ReactFlightDOMRelayClient.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 {ReactModelRoot} from 'react-client/src/ReactFlightClient';
+
+import {
+  createResponse,
+  getModelRoot,
+  processStringChunk,
+  complete,
+} from 'react-client/src/ReactFlightClient';
+
+type EncodedData = Array<string>;
+
+function read<T>(data: EncodedData): ReactModelRoot<T> {
+  let response = createResponse(data);
+  for (let i = 0; i < data.length; i++) {
+    processStringChunk(response, data[i], 0);
+  }
+  complete(response);
+  return getModelRoot(response);
+}
+
+export {read};

packages/react-flight-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js

@@ -0,0 +1,32 @@
+/**
+ * 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 Source = Array<string>;
+
+export type StringDecoder = void;
+
+export const supportsBinaryStreams = false;
+
+export function createStringDecoder(): void {
+  throw new Error('Should never be called');
+}
+
+export function readPartialStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  throw new Error('Should never be called');
+}
+
+export function readFinalStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  throw new Error('Should never be called');
+}

packages/react-flight-dom-relay/src/ReactFlightDOMRelayServer.js

@@ -0,0 +1,23 @@
+/**
+ * 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 {ReactModel} from 'react-server/src/ReactFlightServer';
+
+import {createRequest, startWork} from 'react-server/src/ReactFlightServer';
+
+type EncodedData = Array<string>;
+
+function render(model: ReactModel): EncodedData {
+  let data: EncodedData = [];
+  let request = createRequest(model, data);
+  startWork(request);
+  return data;
+}
+
+export {render};

packages/react-flight-dom-relay/src/ReactFlightDOMRelayServerHostConfig.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
+ */
+
+export type Destination = Array<string>;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(
+  destination: Destination,
+  buffer: Uint8Array,
+): boolean {
+  destination.push(Buffer.from((buffer: any)).toString('utf8'));
+  return true;
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {}
+
+export function convertStringToBuffer(content: string): Uint8Array {
+  return Buffer.from(content, 'utf8');
+}

packages/react-flight-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.TextDecoder = require('util').TextDecoder;
+
+let React;
+let ReactDOMFlightRelayServer;
+let ReactDOMFlightRelayClient;
+
+describe('ReactFlightDOMRelay', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMFlightRelayServer = require('react-flight-dom-relay/server');
+    ReactDOMFlightRelayClient = require('react-flight-dom-relay');
+  });
+
+  it('can resolve a model', () => {
+    function Bar({text}) {
+      return text.toUpperCase();
+    }
+    function Foo() {
+      return {
+        bar: [<Bar text="a" />, <Bar text="b" />],
+      };
+    }
+    let data = ReactDOMFlightRelayServer.render({
+      foo: <Foo />,
+    });
+    let root = ReactDOMFlightRelayClient.read(data);
+    let model = root.model;
+    expect(model).toEqual({foo: {bar: ['A', 'B']}});
+  });
+});

packages/react-flight-dom-webpack/src/ReactFlightDOMClient.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactModelRoot} from 'react-flight/src/ReactFlightClient';
+import type {ReactModelRoot} from 'react-client/src/ReactFlightClient';
 
 import {
   createResponse,
@@ -16,7 +16,7 @@ import {
   processStringChunk,
   processBinaryChunk,
   complete,
-} from 'react-flight/src/ReactFlightClient';
+} from 'react-client/src/ReactFlightClient';
 
 function startReadingFromStream(response, stream: ReadableStream): void {
   let reader = stream.getReader();

packages/react-noop-renderer/package.json

@@ -14,7 +14,7 @@
     "object-assign": "^4.1.1",
     "regenerator-runtime": "^0.11.0",
     "react-reconciler": "*",
-    "react-flight": "*",
+    "react-client": "*",
     "react-server": "*"
   },
   "peerDependencies": {

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

@@ -14,9 +14,9 @@
  * environment.
  */
 
-import type {ReactModelRoot} from 'react-flight';
+import type {ReactModelRoot} from 'react-client/flight';
 
-import ReactFlightClient from 'react-flight';
+import ReactFlightClient from 'react-client/flight';
 
 type Source = Array<string>;
 

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

@@ -14,11 +14,11 @@
  * environment.
  */
 
-import ReactFizzStreamer from 'react-server';
+import ReactFizzServer from 'react-server';
 
 type Destination = Array<string>;
 
-const ReactNoopServer = ReactFizzStreamer({
+const ReactNoopServer = ReactFizzServer({
   scheduleWork(callback: () => void) {
     callback();
   },

packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js → packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-relay.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-flight/src/ReactFlightHostConfigBrowser';
+export * from 'react-dom/src/client/ReactDOMHostConfig';

packages/react-server/index.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFizzStreamer';
+export * from './src/ReactFizzServer';

packages/react-server/src/ReactDOMServerFormatConfig.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {convertStringToBuffer} from 'react-server/src/ReactServerHostConfig';
+import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
 
 import {renderToStaticMarkup} from 'react-dom/server';
 

packages/react-server/src/ReactFizzStreamer.js → packages/react-server/src/ReactFizzServer.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Destination} from './ReactServerHostConfig';
+import type {Destination} from './ReactServerStreamConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {
@@ -17,7 +17,7 @@ import {
   completeWriting,
   flushBuffered,
   close,
-} from './ReactServerHostConfig';
+} from './ReactServerStreamConfig';
 import {formatChunk} from './ReactServerFormatConfig';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';