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';