[Flight] Integrate Blocks into Flight

packages/react-client/src/ReactFlightClient.js

@@ -7,18 +7,25 @@
  * @flow
  */
 
-import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import type {BlockComponent, BlockRenderFunction} from 'react/src/ReactBlock';
+import type {LazyComponent} from 'react/src/ReactLazy';
 
-// import type {
-//   ModuleReference,
-//   ModuleMetaData,
-// } from './ReactFlightClientHostConfig';
+import type {
+  ModuleReference,
+  ModuleMetaData,
+} from './ReactFlightClientHostConfig';
 
-// import {
-//   resolveModuleReference,
-//   preloadModule,
-//   requireModule,
-// } from './ReactFlightClientHostConfig';
+import {
+  resolveModuleReference,
+  preloadModule,
+  requireModule,
+} from './ReactFlightClientHostConfig';
+
+import {
+  REACT_LAZY_TYPE,
+  REACT_BLOCK_TYPE,
+  REACT_ELEMENT_TYPE,
+} from 'shared/ReactSymbols';
 
 export type ReactModelRoot<T> = {|
   model: T,
@@ -32,40 +39,43 @@ export type JSONValue =
   | {[key: string]: JSONValue}
   | Array<JSONValue>;
 
-const isArray = Array.isArray;
-
 const PENDING = 0;
 const RESOLVED = 1;
 const ERRORED = 2;
 
+const CHUNK_TYPE = Symbol('flight.chunk');
+
 type PendingChunk = {|
+  $$typeof: Symbol,
   status: 0,
   value: Promise<void>,
   resolve: () => void,
 |};
-type ResolvedChunk = {|
+type ResolvedChunk<T> = {|
+  $$typeof: Symbol,
   status: 1,
-  value: mixed,
+  value: T,
   resolve: null,
 |};
 type ErroredChunk = {|
+  $$typeof: Symbol,
   status: 2,
   value: Error,
   resolve: null,
 |};
-type Chunk = PendingChunk | ResolvedChunk | ErroredChunk;
+type Chunk<T> = PendingChunk | ResolvedChunk<T> | ErroredChunk;
 
 export type Response = {
   partialRow: string,
   modelRoot: ReactModelRoot<any>,
-  chunks: Map<number, Chunk>,
+  chunks: Map<number, Chunk<any>>,
 };
 
 export function createResponse(): Response {
   let modelRoot: ReactModelRoot<any> = ({}: any);
-  let rootChunk: Chunk = createPendingChunk();
+  let rootChunk: Chunk<any> = createPendingChunk();
   definePendingProperty(modelRoot, 'model', rootChunk);
-  let chunks: Map<number, Chunk> = new Map();
+  let chunks: Map<number, Chunk<any>> = new Map();
   chunks.set(0, rootChunk);
   let response = {
     partialRow: '',
@@ -79,6 +89,7 @@ function createPendingChunk(): PendingChunk {
   let resolve: () => void = (null: any);
   let promise = new Promise(r => (resolve = r));
   return {
+    $$typeof: CHUNK_TYPE,
     status: PENDING,
     value: promise,
     resolve: resolve,
@@ -87,13 +98,14 @@ function createPendingChunk(): PendingChunk {
 
 function createErrorChunk(error: Error): ErroredChunk {
   return {
+    $$typeof: CHUNK_TYPE,
     status: ERRORED,
     value: error,
     resolve: null,
   };
 }
 
-function triggerErrorOnChunk(chunk: Chunk, error: Error): void {
+function triggerErrorOnChunk<T>(chunk: Chunk<T>, error: Error): void {
   if (chunk.status !== PENDING) {
     // We already resolved. We didn't expect to see this.
     return;
@@ -106,21 +118,22 @@ function triggerErrorOnChunk(chunk: Chunk, error: Error): void {
   resolve();
 }
 
-function createResolvedChunk(value: mixed): ResolvedChunk {
+function createResolvedChunk<T>(value: T): ResolvedChunk<T> {
   return {
+    $$typeof: CHUNK_TYPE,
     status: RESOLVED,
     value: value,
     resolve: null,
   };
 }
 
-function resolveChunk(chunk: Chunk, value: mixed): void {
+function resolveChunk<T>(chunk: Chunk<T>, value: T): void {
   if (chunk.status !== PENDING) {
     // We already resolved. We didn't expect to see this.
     return;
   }
   let resolve = chunk.resolve;
-  let resolvedChunk: ResolvedChunk = (chunk: any);
+  let resolvedChunk: ResolvedChunk<T> = (chunk: any);
   resolvedChunk.status = RESOLVED;
   resolvedChunk.value = value;
   resolvedChunk.resolve = null;
@@ -138,10 +151,23 @@ export function reportGlobalError(response: Response, error: Error): void {
   });
 }
 
-function definePendingProperty(
+function readMaybeChunk<T>(maybeChunk: Chunk<T> | T): T {
+  if ((maybeChunk: any).$$typeof !== CHUNK_TYPE) {
+    // $FlowFixMe
+    return maybeChunk;
+  }
+  let chunk: Chunk<T> = (maybeChunk: any);
+  if (chunk.status === RESOLVED) {
+    return chunk.value;
+  } else {
+    throw chunk.value;
+  }
+}
+
+function definePendingProperty<T>(
   object: Object,
   key: string,
-  chunk: Chunk,
+  chunk: Chunk<T>,
 ): void {
   Object.defineProperty(object, key, {
     configurable: false,
@@ -197,6 +223,55 @@ function createElement(type, key, props): React$Element<any> {
   return element;
 }
 
+type UninitializedBlockPayload<Data> = [
+  mixed,
+  ModuleMetaData | Chunk<ModuleMetaData>,
+  Data | Chunk<Data>,
+];
+
+type Thenable<T> = {
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): Thenable<any>,
+};
+
+function initializeBlock<Props, Data>(
+  tuple: UninitializedBlockPayload<Data>,
+): BlockComponent<Props, Data> {
+  // Require module first and then data. The ordering matters.
+  let moduleMetaData: ModuleMetaData = readMaybeChunk(tuple[1]);
+  let moduleReference: ModuleReference<
+    BlockRenderFunction<Props, Data>,
+  > = resolveModuleReference(moduleMetaData);
+  // TODO: Do this earlier, as the chunk is resolved.
+  preloadModule(moduleReference);
+
+  let moduleExport = requireModule(moduleReference);
+
+  // The ordering here is important because this call might suspend.
+  // We don't want that to prevent the module graph for being initialized.
+  let data: Data = readMaybeChunk(tuple[2]);
+
+  return {
+    $$typeof: REACT_BLOCK_TYPE,
+    _status: -1,
+    _data: data,
+    _render: moduleExport,
+  };
+}
+
+function createLazyBlock<Props, Data>(
+  tuple: UninitializedBlockPayload<Data>,
+): LazyComponent<BlockComponent<Props, Data>, UninitializedBlockPayload<Data>> {
+  let lazyType: LazyComponent<
+    BlockComponent<Props, Data>,
+    UninitializedBlockPayload<Data>,
+  > = {
+    $$typeof: REACT_LAZY_TYPE,
+    _payload: tuple,
+    _init: initializeBlock,
+  };
+  return lazyType;
+}
+
 export function parseModelFromJSON(
   response: Response,
   targetObj: Object,
@@ -217,20 +292,26 @@ export function parseModelFromJSON(
         if (!chunk) {
           chunk = createPendingChunk();
           chunks.set(id, chunk);
-        } else if (chunk.status === RESOLVED) {
-          return chunk.value;
         }
-        definePendingProperty(targetObj, key, chunk);
-        return undefined;
+        return chunk;
       }
     }
+    if (value === '@') {
+      return REACT_BLOCK_TYPE;
+    }
   }
-  if (isArray(value)) {
+  if (typeof value === 'object' && value !== null) {
     let tuple: [mixed, mixed, mixed, mixed] = (value: any);
-    if (tuple[0] === REACT_ELEMENT_TYPE) {
-      // TODO: Consider having React just directly accept these arrays as elements.
-      // Or even change the ReactElement type to be an array.
-      return createElement(tuple[1], tuple[2], tuple[3]);
+    switch (tuple[0]) {
+      case REACT_ELEMENT_TYPE: {
+        // TODO: Consider having React just directly accept these arrays as elements.
+        // Or even change the ReactElement type to be an array.
+        return createElement(tuple[1], tuple[2], tuple[3]);
+      }
+      case REACT_BLOCK_TYPE: {
+        // TODO: Consider having React just directly accept these arrays as blocks.
+        return createLazyBlock((tuple: any));
+      }
     }
   }
   return value;

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -10,7 +10,11 @@
 
 'use strict';
 
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+let act;
 let React;
+let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
 
@@ -19,24 +23,78 @@ describe('ReactFlight', () => {
     jest.resetModules();
 
     React = require('react');
+    ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    act = ReactNoop.act;
   });
 
-  it('can resolve a model', () => {
+  function block(query, render) {
+    return function(...args) {
+      let curriedQuery = () => {
+        return query(...args);
+      };
+      return [Symbol.for('react.server.block'), render, curriedQuery];
+    };
+  }
+
+  it('can render a server component', () => {
     function Bar({text}) {
       return text.toUpperCase();
     }
     function Foo() {
       return {
-        bar: [<Bar text="a" />, <Bar text="b" />],
+        bar: (
+          <div>
+            <Bar text="a" />, <Bar text="b" />
+          </div>
+        ),
       };
     }
     let transport = ReactNoopFlightServer.render({
       foo: <Foo />,
     });
     let root = ReactNoopFlightClient.read(transport);
     let model = root.model;
-    expect(model).toEqual({foo: {bar: ['A', 'B']}});
+    expect(model).toEqual({
+      foo: {
+        bar: (
+          <div>
+            {'A'}
+            {', '}
+            {'B'}
+          </div>
+        ),
+      },
+    });
   });
+
+  if (ReactFeatureFlags.enableBlocksAPI) {
+    it('can transfer a Block to the client and render there', () => {
+      function Query(firstName, lastName) {
+        return {name: firstName + ' ' + lastName};
+      }
+      function User(props, data) {
+        return (
+          <span>
+            {props.greeting}, {data.name}
+          </span>
+        );
+      }
+      let loadUser = block(Query, User);
+      let model = {
+        User: loadUser('Seb', 'Smith'),
+      };
+
+      let transport = ReactNoopFlightServer.render(model);
+      let root = ReactNoopFlightClient.read(transport);
+
+      act(() => {
+        let UserClient = root.model.User;
+        ReactNoop.render(<UserClient greeting="Hello" />);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
+    });
+  }
 });