Implement React Native host config

This is not wired up. I just need something for the flow types since
Flight and Fizz are both handled by the isServerSupported flag.

Might as well add something though.

The principle of this format is the same structure as for HTML but a
simpler binary format.

Each entry is a tag followed by some data and terminated by null.

Author: sebmarkbage

packages/react-server/src/ReactDOMServerFormatConfig.js

@@ -38,7 +38,9 @@ export type SuspenseBoundaryID = {
   id: null | string,
 };
 
-export function createSuspenseBoundaryID(): SuspenseBoundaryID {
+export function createSuspenseBoundaryID(
+  responseState: ResponseState,
+): SuspenseBoundaryID {
   return {id: null};
 }
 

packages/react-server/src/ReactFizzServer.js

@@ -145,9 +145,9 @@ function pingSuspendedWork(request: Request, work: SuspendedWork): void {
   }
 }
 
-function createSuspenseBoundary(): SuspenseBoundary {
+function createSuspenseBoundary(request: Request): SuspenseBoundary {
   return {
-    id: createSuspenseBoundaryID(),
+    id: createSuspenseBoundaryID(request.responseState),
     rootSegmentID: -1,
     parentFlushed: false,
     pendingWork: 0,
@@ -264,7 +264,7 @@ function renderNode(
     const fallback: ReactNodeList = props.fallback;
     const content: ReactNodeList = props.children;
 
-    const newBoundary = createSuspenseBoundary();
+    const newBoundary = createSuspenseBoundary(request);
 
     const insertionIndex = segment.chunks.length;
     // The children of the boundary segment is actually the fallback.

packages/react-server/src/ReactNativeServerFormatConfig.js

@@ -7,17 +7,197 @@
  * @flow
  */
 
-import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
+import type {Destination} from 'react-server/src/ReactServerStreamConfig';
 
-export function formatChunkAsString(type: string, props: Object): string {
-  let str = '<' + type + '>';
-  if (typeof props.children === 'string') {
-    str += props.children;
+import {
+  writeChunk,
+  convertStringToBuffer,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import invariant from 'shared/invariant';
+
+// Every list of children or string is null terminated.
+const END_TAG = 0;
+// Tree node tags.
+const INSTANCE_TAG = 1;
+const PLACEHOLDER_TAG = 2;
+const SUSPENSE_PENDING_TAG = 3;
+const SUSPENSE_COMPLETE_TAG = 4;
+const SUSPENSE_CLIENT_RENDER_TAG = 5;
+// Command tags.
+const SEGMENT_TAG = 1;
+const SUSPENSE_UPDATE_TO_COMPLETE_TAG = 2;
+const SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG = 3;
+
+const END = new Uint8Array(1);
+END[0] = END_TAG;
+const PLACEHOLDER = new Uint8Array(1);
+PLACEHOLDER[0] = PLACEHOLDER_TAG;
+const INSTANCE = new Uint8Array(1);
+INSTANCE[0] = INSTANCE_TAG;
+const SUSPENSE_PENDING = new Uint8Array(1);
+SUSPENSE_PENDING[0] = SUSPENSE_PENDING_TAG;
+const SUSPENSE_COMPLETE = new Uint8Array(1);
+SUSPENSE_COMPLETE[0] = SUSPENSE_COMPLETE_TAG;
+const SUSPENSE_CLIENT_RENDER = new Uint8Array(1);
+SUSPENSE_CLIENT_RENDER[0] = SUSPENSE_CLIENT_RENDER_TAG;
+
+const SEGMENT = new Uint8Array(1);
+SEGMENT[0] = SEGMENT_TAG;
+const SUSPENSE_UPDATE_TO_COMPLETE = new Uint8Array(1);
+SUSPENSE_UPDATE_TO_COMPLETE[0] = SUSPENSE_UPDATE_TO_COMPLETE_TAG;
+const SUSPENSE_UPDATE_TO_CLIENT_RENDER = new Uint8Array(1);
+SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
+
+// Per response,
+export type ResponseState = {
+  nextSuspenseID: number,
+};
+
+// Allows us to keep track of what we've already written so we can refer back to it.
+export function createResponseState(): ResponseState {
+  return {
+    nextSuspenseID: 0,
+  };
+}
+
+// This object is used to lazily reuse the ID of the first generated node, or assign one.
+// This is very specific to DOM where we can't assign an ID to.
+export type SuspenseBoundaryID = number;
+
+export function createSuspenseBoundaryID(
+  responseState: ResponseState,
+): SuspenseBoundaryID {
+  return responseState.nextSuspenseID++;
+}
+
+const RAW_TEXT = convertStringToBuffer('RCTRawText');
+
+export function pushTextInstance(
+  target: Array<Uint8Array>,
+  text: string,
+): void {
+  target.push(
+    INSTANCE,
+    RAW_TEXT, // Type
+    END, // Null terminated type string
+    // TODO: props { text: text }
+    END, // End of children
+  );
+}
+
+export function pushStartInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  target.push(
+    INSTANCE,
+    convertStringToBuffer(type),
+    END, // Null terminated type string
+    // TODO: props
+  );
+}
+
+export function pushEndInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  target.push(END);
+}
+
+// IDs are formatted as little endian Uint16
+function formatID(id: number): Uint8Array {
+  if (id > 0xffff) {
+    invariant(
+      false,
+      'More boundaries or placeholders than we expected to ever emit.',
+    );
   }
-  str += '</' + type + '>';
-  return str;
+  const buffer = new Uint8Array(2);
+  buffer[0] = (id >>> 8) & 0xff;
+  buffer[1] = id & 0xff;
+  return buffer;
+}
+
+// Structural Nodes
+
+// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+// display. It's never visible to users.
+export function writePlaceholder(
+  destination: Destination,
+  id: number,
+): boolean {
+  writeChunk(destination, PLACEHOLDER);
+  return writeChunk(destination, formatID(id));
+}
+
+// Suspense boundaries are encoded as comments.
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_COMPLETE);
+  return writeChunk(destination, formatID(id));
+}
+export function writeStartPendingSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_PENDING);
+  return writeChunk(destination, formatID(id));
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_CLIENT_RENDER);
+  return writeChunk(destination, formatID(id));
+}
+export function writeEndSuspenseBoundary(destination: Destination): boolean {
+  return writeChunk(destination, END);
+}
+
+export function writeStartSegment(
+  destination: Destination,
+  id: number,
+): boolean {
+  writeChunk(destination, SEGMENT);
+  return writeChunk(destination, formatID(id));
+}
+export function writeEndSegment(destination: Destination): boolean {
+  return writeChunk(destination, END);
+}
+
+// Instruction Set
+
+export function writeCompletedSegmentInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  contentSegmentID: number,
+): boolean {
+  // We don't need to emit this. Instead the client will keep track of pending placeholders.
+  // TODO: Returning true here is not correct. Avoid having to call this function at all.
+  return true;
+}
+
+export function writeCompletedBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+  contentSegmentID: number,
+): boolean {
+  writeChunk(destination, SUSPENSE_UPDATE_TO_COMPLETE);
+  writeChunk(destination, formatID(boundaryID));
+  return writeChunk(destination, formatID(contentSegmentID));
 }
 
-export function formatChunk(type: string, props: Object): Uint8Array {
-  return convertStringToBuffer(formatChunkAsString(type, props));
+export function writeClientRenderBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
+  return writeChunk(destination, formatID(boundaryID));
 }