[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 @@
     <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/npm/unstable-flight-client.js

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

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

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

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

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

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

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

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-dom/src/__tests__/ReactFlightDOM-test.js

@@ -1,92 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-'use strict';
-
-// Polyfills for test environment
-global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
-global.TextDecoder = require('util').TextDecoder;
-
-let Stream;
-let React;
-let ReactFlightDOMServer;
-let ReactFlightDOMClient;
-
-describe('ReactFlightDOM', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    Stream = require('stream');
-    React = require('react');
-    ReactFlightDOMServer = require('react-dom/unstable-flight-server');
-    ReactFlightDOMClient = require('react-dom/unstable-flight-client');
-  });
-
-  function getTestStream() {
-    let writable = new Stream.PassThrough();
-    let readable = new ReadableStream({
-      start(controller) {
-        writable.on('data', chunk => {
-          controller.enqueue(chunk);
-        });
-        writable.on('end', () => {
-          controller.close();
-        });
-      },
-    });
-    return {
-      writable,
-      readable,
-    };
-  }
-
-  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>',
-      });
-    });
-  });
-});

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

scripts/rollup/bundles.js

@@ -170,23 +170,23 @@ const bundles = [
     externals: ['react', 'react-dom/server'],
   },
 
-  /******* React DOM Flight Server *******/
+  /******* React DOM Flight Server Webpack *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-flight-server.browser',
+    entry: 'react-flight-dom-webpack/server.browser',
     global: 'ReactFlightDOMServer',
     externals: ['react', 'react-dom/server'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-flight-server.node',
+    entry: 'react-flight-dom-webpack/server.node',
     global: 'ReactFlightDOMServer',
     externals: ['react', 'react-dom/server'],
   },
 
-  /******* React DOM Flight Client *******/
+  /******* React DOM Flight Client Webpack *******/
   {
     bundleTypes: [
       NODE_DEV,
@@ -197,7 +197,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-flight-client',
+    entry: 'react-flight-dom-webpack',
     global: 'ReactFlightDOMClient',
     externals: ['react'],
   },

scripts/shared/inlinedHostConfigs.js

@@ -12,8 +12,8 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/unstable-fizz.node',
-      'react-dom/unstable-flight-server.node',
-      'react-dom/unstable-flight-client',
+      'react-flight-dom-webpack/server.node',
+      'react-flight-dom-webpack',
     ],
     isFlowTyped: true,
     isServerSupported: true,
@@ -22,8 +22,8 @@ module.exports = [
     shortName: 'dom-browser',
     entryPoints: [
       'react-dom/unstable-fizz.browser',
-      'react-dom/unstable-flight-server.browser',
-      'react-dom/unstable-flight-client',
+      'react-flight-dom-webpack/server.browser',
+      'react-flight-dom-webpack',
     ],
     isFlowTyped: true,
     isServerSupported: true,

yarn.lock

@@ -13268,6 +13268,35 @@ webpack@^4.26.0:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
+webpack@^4.41.2:
+  version "4.41.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
+  integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
 websocket-driver@>=0.5.1:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"