[Flight] Add server-runtime to create Server Blocks

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

@@ -16,6 +16,7 @@ let act;
 let React;
 let ReactNoop;
 let ReactNoopFlightServer;
+let ReactNoopFlightServerRuntime;
 let ReactNoopFlightClient;
 
 describe('ReactFlight', () => {
@@ -25,19 +26,22 @@ describe('ReactFlight', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = ReactNoop.act;
   });
 
   function block(render, load) {
+    if (load === undefined) {
+      return () => {
+        return ReactNoopFlightServerRuntime.serverBlockNoData(render);
+      };
+    }
     return function(...args) {
-      if (load === undefined) {
-        return [Symbol.for('react.server.block'), render];
-      }
       let curriedLoad = () => {
         return load(...args);
       };
-      return [Symbol.for('react.server.block'), render, curriedLoad];
+      return ReactNoopFlightServerRuntime.serverBlock(render, curriedLoad);
     };
   }
 

packages/react-flight-dom-relay/server-runtime.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-server/src/ReactFlightServerRuntime';

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

@@ -31,9 +31,9 @@ export type {
 
 export type BundlerConfig = void;
 
-export function resolveModuleMetaData(
+export function resolveModuleMetaData<T>(
   config: BundlerConfig,
-  resource: ModuleReference,
+  resource: ModuleReference<T>,
 ): ModuleMetaData {
   return resolveModuleMetaDataImpl(resource);
 }

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

@@ -11,6 +11,7 @@ let act;
 let React;
 let ReactDOM;
 let ReactDOMFlightRelayServer;
+let ReactDOMFlightRelayServerRuntime;
 let ReactDOMFlightRelayClient;
 
 describe('ReactFlightDOMRelay', () => {
@@ -21,6 +22,7 @@ describe('ReactFlightDOMRelay', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMFlightRelayServer = require('react-flight-dom-relay/server');
+    ReactDOMFlightRelayServerRuntime = require('react-flight-dom-relay/server-runtime');
     ReactDOMFlightRelayClient = require('react-flight-dom-relay');
   });
 
@@ -45,14 +47,14 @@ describe('ReactFlightDOMRelay', () => {
   }
 
   function block(render, load) {
+    if (load === undefined) {
+      return ReactDOMFlightRelayServerRuntime.serverBlock(render);
+    }
     return function(...args) {
-      if (load === undefined) {
-        return [Symbol.for('react.server.block'), render];
-      }
       let curriedLoad = () => {
         return load(...args);
       };
-      return [Symbol.for('react.server.block'), render, curriedLoad];
+      return ReactDOMFlightRelayServerRuntime.serverBlock(render, curriedLoad);
     };
   }
 

packages/react-flight-dom-webpack/npm/server-runtime.js

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

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

@@ -16,6 +16,7 @@
     "server.js",
     "server.browser.js",
     "server.node.js",
+    "server-runtime.js",
     "cjs/",
     "umd/"
   ],

packages/react-flight-dom-webpack/server-runtime.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-server/src/ReactFlightServerRuntime';

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

@@ -13,17 +13,18 @@ type WebpackMap = {
 
 export type BundlerConfig = WebpackMap;
 
-export type ModuleReference = string;
+// eslint-disable-next-line no-unused-vars
+export type ModuleReference<T> = string;
 
 export type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
   name: string,
 };
 
-export function resolveModuleMetaData(
+export function resolveModuleMetaData<T>(
   config: BundlerConfig,
-  modulePath: ModuleReference,
+  modulePath: ModuleReference<T>,
 ): ModuleMetaData {
   return config[modulePath];
 }

packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -29,6 +29,7 @@ let Stream;
 let React;
 let ReactDOM;
 let ReactFlightDOMServer;
+let ReactFlightDOMServerRuntime;
 let ReactFlightDOMClient;
 
 describe('ReactFlightDOM', () => {
@@ -41,6 +42,7 @@ describe('ReactFlightDOM', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactFlightDOMServer = require('react-flight-dom-webpack/server');
+    ReactFlightDOMServerRuntime = require('react-flight-dom-webpack/server-runtime');
     ReactFlightDOMClient = require('react-flight-dom-webpack');
   });
 
@@ -72,14 +74,19 @@ describe('ReactFlightDOM', () => {
       chunks: [],
       name: 'd',
     };
+    if (load === undefined) {
+      return () => {
+        return ReactFlightDOMServerRuntime.serverBlockNoData('path/' + idx);
+      };
+    }
     return function(...args) {
-      if (load === undefined) {
-        return [Symbol.for('react.server.block'), render];
-      }
       let curriedLoad = () => {
         return load(...args);
       };
-      return [Symbol.for('react.server.block'), 'path/' + idx, curriedLoad];
+      return ReactFlightDOMServerRuntime.serverBlock(
+        'path/' + idx,
+        curriedLoad,
+      );
     };
   }
 

packages/react-noop-renderer/flight-server-runtime.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-server/flight-server-runtime';

packages/react-noop-renderer/npm/flight-server-runtime.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('react-server/flight-server-runtime');

packages/react-noop-renderer/package.json

@@ -30,6 +30,7 @@
     "flight-client.js",
     "flight-modules.js",
     "flight-server.js",
+    "flight-server-runtime.js",
     "cjs/"
   ]
 }

packages/react-server/flight-server-runtime.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 './src/ReactFlightServerRuntime';

packages/react-server/npm/flight-server-runtime.js

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

packages/react-server/package.json

@@ -14,6 +14,7 @@
     "README.md",
     "index.js",
     "flight.js",
+    "flight-server-runtime.js",
     "cjs/"
   ],
   "main": "index.js",

packages/react-server/src/ReactFlightServer.js

@@ -176,7 +176,7 @@ export function resolveModelToJSON(
     switch (key) {
       case '1': {
         // Module reference
-        let moduleReference: ModuleReference = (value: any);
+        let moduleReference: ModuleReference<any> = (value: any);
         try {
           let moduleMetaData: ModuleMetaData = resolveModuleMetaData(
             request.bundlerConfig,

packages/react-server/src/ReactFlightServerBundlerConfigCustom.js

@@ -10,6 +10,6 @@
 declare var $$$hostConfig: any;
 
 export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
-export opaque type ModuleReference = mixed; // eslint-disable-line no-undef
+export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
 export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;

packages/react-server/src/ReactFlightServerRuntime.js

@@ -0,0 +1,52 @@
+/**
+ * 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 {BlockRenderFunction} from 'react/src/ReactBlock';
+
+import type {ModuleReference} from './ReactFlightServerConfig';
+
+import {REACT_SERVER_BLOCK_TYPE} from 'shared/ReactSymbols';
+
+export type ServerBlockComponent<Props, Data> =
+  | [
+      Symbol | number,
+      ModuleReference<BlockRenderFunction<Props, Data>>,
+      () => Data,
+    ]
+  | [Symbol | number, ModuleReference<BlockRenderFunction<Props, void>>];
+
+opaque type ServerBlock<Props>: React$AbstractComponent<
+  Props,
+  null,
+> = React$AbstractComponent<Props, null>;
+
+export function serverBlock<Props, Data>(
+  moduleReference: ModuleReference<BlockRenderFunction<Props, Data>>,
+  loadData: () => Data,
+): ServerBlock<Props> {
+  let blockComponent: ServerBlockComponent<Props, Data> = [
+    REACT_SERVER_BLOCK_TYPE,
+    moduleReference,
+    loadData,
+  ];
+
+  // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
+  return blockComponent;
+}
+
+export function serverBlockNoData<Props>(
+  moduleReference: ModuleReference<BlockRenderFunction<Props, void>>,
+): ServerBlock<Props> {
+  let blockComponent: ServerBlockComponent<Props, void> = [
+    REACT_SERVER_BLOCK_TYPE,
+    moduleReference,
+  ];
+  // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
+  return blockComponent;
+}

packages/react/src/ReactBlock.js

@@ -106,7 +106,7 @@ export function block<Args: Iterable<any>, Props, Data>(
         _render: render,
       };
 
-      // $FlowFixMe
+      // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
       return blockComponent;
     };
   }
@@ -132,7 +132,7 @@ export function block<Args: Iterable<any>, Props, Data>(
       _init: lazyInitializer,
     };
 
-    // $FlowFixMe
+    // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
     return lazyType;
   };
 }

scripts/flow/react-relay-hooks.js

@@ -30,10 +30,10 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
   ): void;
   declare export function close(destination: Destination): void;
 
-  declare export opaque type ModuleReference;
+  declare export opaque type ModuleReference<T>;
   declare export type ModuleMetaData = JSONValue;
-  declare export function resolveModuleMetaData(
-    resourceReference: ModuleReference,
+  declare export function resolveModuleMetaData<T>(
+    resourceReference: ModuleReference<T>,
   ): ModuleMetaData;
 }
 

scripts/rollup/bundles.js

@@ -229,6 +229,13 @@ const bundles = [
     global: 'ReactFlightDOMServer',
     externals: ['react', 'react-dom/server'],
   },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-flight-dom-webpack/server-runtime',
+    global: 'ReactFlightDOMServerRuntime',
+    externals: ['react'],
+  },
 
   /******* React DOM Flight Client Webpack *******/
   {
@@ -251,6 +258,13 @@ const bundles = [
       'ReactFlightDOMRelayServerIntegration',
     ],
   },
+  {
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: RENDERER,
+    entry: 'react-flight-dom-relay/server-runtime',
+    global: 'ReactFlightDOMRelayServerRuntime',
+    externals: ['react', 'ReactFlightDOMRelayServerIntegration'],
+  },
 
   /******* React DOM Flight Client Relay *******/
   {
@@ -453,6 +467,13 @@ const bundles = [
     global: 'ReactFlightServer',
     externals: ['react'],
   },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server/flight-server-runtime',
+    global: 'ReactFlightServerRuntime',
+    externals: ['react'],
+  },
 
   /******* React Flight Client *******/
   {