[Flight] Move Flight DOM to a Webpack Specific Package (#17372)

* Move Flight DOM to Webpack Specific Packagee

We'll have Webpack specific coupling so we need to ensure that it can be
versioned separately from various Webpack versions. We'll also have builds
for other bundlers in the future.

* Move to peerDep

* Move DOM Flight Tests

* Merge ReactFlightIntegration into ReactFlightDOM

This was an integration test. We can add to it.

* Fix fixture paths

fixtures/flight-browser/index.html

@@ -19,8 +19,8 @@ <h1>Flight Example</h1>
     <script src="../../build/dist/react.development.js"></script>
     <script src="../../build/dist/react-dom.development.js"></script>
     <script src="../../build/dist/react-dom-server.browser.development.js"></script>
-    <script src="../../build/dist/react-dom-unstable-flight-server.browser.development.js"></script>
-    <script src="../../build/dist/react-dom-unstable-flight-client.development.js"></script>
+    <script src="../../build/dist/react-flight-dom-webpack-server.browser.development.js"></script>
+    <script src="../../build/dist/react-flight-dom-webpack.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;

fixtures/flight/server/handler.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const ReactFlightDOMServer = require('react-dom/unstable-flight-server');
+const ReactFlightDOMServer = require('react-flight-dom-webpack/server');
 const React = require('react');
 const Stream = require('stream');
 

fixtures/flight/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactFlightDOMClient from 'react-dom/unstable-flight-client';
+import ReactFlightDOMClient from 'react-flight-dom-webpack';
 import App from './App';
 
 let data = ReactFlightDOMClient.readFromFetch(fetch('http://localhost:3001'));

packages/react-dom/package.json

@@ -39,18 +39,13 @@
     "unstable-fizz.js",
     "unstable-fizz.browser.js",
     "unstable-fizz.node.js",
-    "unstable-flight-client.js",
-    "unstable-flight-server.js",
-    "unstable-flight-server.browser.js",
-    "unstable-flight-server.node.js",
     "unstable-native-dependencies.js",
     "cjs/",
     "umd/"
   ],
   "browser": {
     "./server.js": "./server.browser.js",
-    "./unstable-fizz.js": "./unstable-fizz.browser.js",
-    "./unstable-flight-server.js": "./unstable-flight-server.browser.js"
+    "./unstable-fizz.js": "./unstable-fizz.browser.js"
   },
   "browserify": {
     "transform": [

packages/react-flight-dom-webpack/README.md

@@ -0,0 +1,5 @@
+# react-flight-dom-webpack
+
+Experimental React Flight bindings for DOM using Webpack.
+
+**Use it at your own risk.**

packages/react-dom/unstable-flight-client.js → packages/react-flight-dom-webpack/index.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-const ReactFlightDOMClient = require('./src/client/flight/ReactFlightDOMClient');
+const ReactFlightDOMClient = require('./src/ReactFlightDOMClient');
 
 // TODO: decide on the top-level export form.
 // This is hacky but makes it work with both Rollup and Jest

packages/react-flight-dom-webpack/npm/index.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+{
+  "name": "react-flight-dom-webpack",
+  "description": "React Flight bindings for DOM using Webpack.",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "server.js",
+    "server.browser.js",
+    "server.node.js",
+    "cjs/",
+    "umd/"
+  ],
+  "browser": {
+    "./server.js": "./server.browser.js"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-flight-dom-webpack"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "webpack": "^4.41.2"
+  },
+  "dependencies": {
+    "loose-envify": "^1.1.0",
+    "object-assign": "^4.1.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  }
+}

packages/react-dom/unstable-flight-server.browser.js → packages/react-flight-dom-webpack/server.browser.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-const ReactFlightDOMServerBrowser = require('./src/server/flight/ReactFlightDOMServerBrowser');
+const ReactFlightDOMServerBrowser = require('./src/ReactFlightDOMServerBrowser');
 
 // TODO: decide on the top-level export form.
 // This is hacky but makes it work with both Rollup and Jest

packages/react-dom/unstable-flight-server.js → packages/react-flight-dom-webpack/server.js

@@ -9,4 +9,4 @@
 
 'use strict';
 
-module.exports = require('./unstable-flight-server.node');
+module.exports = require('./server.node');

packages/react-dom/unstable-flight-server.node.js → packages/react-flight-dom-webpack/server.node.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-const ReactFlightDOMServerNode = require('./src/server/flight/ReactFlightDOMServerNode');
+const ReactFlightDOMServerNode = require('./src/ReactFlightDOMServerNode');
 
 // TODO: decide on the top-level export form.
 // This is hacky but makes it work with both Rollup and Jest

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

@@ -24,15 +24,15 @@ let ReactDOM;
 let ReactFlightDOMServer;
 let ReactFlightDOMClient;
 
-describe('ReactFlightIntegration', () => {
+describe('ReactFlightDOM', () => {
   beforeEach(() => {
     jest.resetModules();
     act = require('react-dom/test-utils').act;
     Stream = require('stream');
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactFlightDOMServer = require('react-dom/unstable-flight-server');
-    ReactFlightDOMClient = require('react-dom/unstable-flight-client');
+    ReactFlightDOMServer = require('react-flight-dom-webpack/server');
+    ReactFlightDOMClient = require('react-flight-dom-webpack');
   });
 
   function getTestStream() {
@@ -53,6 +53,50 @@ describe('ReactFlightIntegration', () => {
     };
   }
 
+  async function waitForSuspense(fn) {
+    while (true) {
+      try {
+        return fn();
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          await promise;
+        } else {
+          throw promise;
+        }
+      }
+    }
+  }
+
+  it('should resolve HTML using Node streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      let model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    let {writable, readable} = getTestStream();
+    ReactFlightDOMServer.pipeToNodeWritable(<App />, writable);
+    let result = ReactFlightDOMClient.readFromReadableStream(readable);
+    await waitForSuspense(() => {
+      expect(result.model).toEqual({
+        html: '<div><span>hello</span><span>world</span></div>',
+      });
+    });
+  });
+
   it.experimental('should resolve the root', async () => {
     let {Suspense} = React;
 

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

@@ -23,8 +23,8 @@ describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactFlightDOMServer = require('react-dom/unstable-flight-server.browser');
-    ReactFlightDOMClient = require('react-dom/unstable-flight-client');
+    ReactFlightDOMServer = require('react-flight-dom-webpack/server.browser');
+    ReactFlightDOMClient = require('react-flight-dom-webpack');
   });
 
   async function waitForSuspense(fn) {

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

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

packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js

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

packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
+export * from '../ReactDOMServerFormatConfig';

packages/react-server/src/forks/ReactServerFormatConfig.dom.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
+export * from '../ReactDOMServerFormatConfig';