[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
Sebastian Markbåge committed
Nov 15, 2019 at 11:46 UTC
39dbb14da321cabafe3ab67de41150672aa301fc
33 files changed
+177
-148
fixtures/flight-browser/index.html
+2
-2
@@ -19,8 +19,8 @@
19
<script src="../../build/dist/react.development.js"></script>
20
<script src="../../build/dist/react-dom.development.js"></script>
21
<script src="../../build/dist/react-dom-server.browser.development.js"></script>
22
- <script src="../../build/dist/react-dom-unstable-flight-server.browser.development.js"></script>
23
- <script src="../../build/dist/react-dom-unstable-flight-client.development.js"></script>
22
+ <script src="../../build/dist/react-flight-dom-webpack-server.browser.development.js"></script>
23
+ <script src="../../build/dist/react-flight-dom-webpack.development.js"></script>
24
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
25
<script type="text/babel">
26
let Suspense = React.Suspense;
fixtures/flight/server/handler.js
+1
-1
@@ -1,6 +1,6 @@
1
'use strict';
2
3
-const ReactFlightDOMServer = require('react-dom/unstable-flight-server');
3
+const ReactFlightDOMServer = require('react-flight-dom-webpack/server');
4
const React = require('react');
5
const Stream = require('stream');
6
fixtures/flight/src/index.js
+1
-1
@@ -1,6 +1,6 @@
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
-import ReactFlightDOMClient from 'react-dom/unstable-flight-client';
3
+import ReactFlightDOMClient from 'react-flight-dom-webpack';
4
import App from './App';
5
6
let data = ReactFlightDOMClient.readFromFetch(fetch('http://localhost:3001'));
packages/react-dom/npm/unstable-flight-client.js
deleted
-7
@@ -1,7 +0,0 @@
1
-'use strict';
2
-
3
-if (process.env.NODE_ENV === 'production') {
4
- module.exports = require('./cjs/react-dom-unstable-flight-client.production.min.js');
5
-} else {
6
- module.exports = require('./cjs/react-dom-unstable-flight-client.development.js');
7
-}
packages/react-dom/npm/unstable-flight-server.browser.js
deleted
-7
@@ -1,7 +0,0 @@
1
-'use strict';
2
-
3
-if (process.env.NODE_ENV === 'production') {
4
- module.exports = require('./cjs/react-dom-unstable-flight-server.browser.production.min.js');
5
-} else {
6
- module.exports = require('./cjs/react-dom-unstable-flight-server.browser.development.js');
7
-}
packages/react-dom/npm/unstable-flight-server.js
deleted
-3
@@ -1,3 +0,0 @@
1
-'use strict';
2
-
3
-module.exports = require('./unstable-flight-server.node');
packages/react-dom/npm/unstable-flight-server.node.js
deleted
-7
@@ -1,7 +0,0 @@
1
-'use strict';
2
-
3
-if (process.env.NODE_ENV === 'production') {
4
- module.exports = require('./cjs/react-dom-unstable-flight-server.node.production.min.js');
5
-} else {
6
- module.exports = require('./cjs/react-dom-unstable-flight-server.node.development.js');
7
-}
packages/react-dom/package.json
+1
-6
@@ -39,18 +39,13 @@
39
"unstable-fizz.js",
40
"unstable-fizz.browser.js",
41
"unstable-fizz.node.js",
42
- "unstable-flight-client.js",
43
- "unstable-flight-server.js",
44
- "unstable-flight-server.browser.js",
45
- "unstable-flight-server.node.js",
42
"unstable-native-dependencies.js",
43
"cjs/",
44
"umd/"
45
],
46
"browser": {
47
"./server.js": "./server.browser.js",
52
- "./unstable-fizz.js": "./unstable-fizz.browser.js",
53
- "./unstable-flight-server.js": "./unstable-flight-server.browser.js"
48
+ "./unstable-fizz.js": "./unstable-fizz.browser.js"
49
},
50
"browserify": {
51
"transform": [
packages/react-dom/src/__tests__/ReactFlightDOM-test.js
deleted
-92
@@ -1,92 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- * @jest-environment node
9
- */
10
-
11
-'use strict';
12
-
13
-// Polyfills for test environment
14
-global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
15
-global.TextDecoder = require('util').TextDecoder;
16
-
17
-let Stream;
18
-let React;
19
-let ReactFlightDOMServer;
20
-let ReactFlightDOMClient;
21
-
22
-describe('ReactFlightDOM', () => {
23
- beforeEach(() => {
24
- jest.resetModules();
25
- Stream = require('stream');
26
- React = require('react');
27
- ReactFlightDOMServer = require('react-dom/unstable-flight-server');
28
- ReactFlightDOMClient = require('react-dom/unstable-flight-client');
29
- });
30
-
31
- function getTestStream() {
32
- let writable = new Stream.PassThrough();
33
- let readable = new ReadableStream({
34
- start(controller) {
35
- writable.on('data', chunk => {
36
- controller.enqueue(chunk);
37
- });
38
- writable.on('end', () => {
39
- controller.close();
40
- });
41
- },
42
- });
43
- return {
44
- writable,
45
- readable,
46
- };
47
- }
48
-
49
- async function waitForSuspense(fn) {
50
- while (true) {
51
- try {
52
- return fn();
53
- } catch (promise) {
54
- if (typeof promise.then === 'function') {
55
- await promise;
56
- } else {
57
- throw promise;
58
- }
59
- }
60
- }
61
- }
62
-
63
- it('should resolve HTML using Node streams', async () => {
64
- function Text({children}) {
65
- return <span>{children}</span>;
66
- }
67
- function HTML() {
68
- return (
69
- <div>
70
- <Text>hello</Text>
71
- <Text>world</Text>
72
- </div>
73
- );
74
- }
75
-
76
- function App() {
77
- let model = {
78
- html: <HTML />,
79
- };
80
- return model;
81
- }
82
-
83
- let {writable, readable} = getTestStream();
84
- ReactFlightDOMServer.pipeToNodeWritable(<App />, writable);
85
- let result = ReactFlightDOMClient.readFromReadableStream(readable);
86
- await waitForSuspense(() => {
87
- expect(result.model).toEqual({
88
- html: '<div><span>hello</span><span>world</span></div>',
89
- });
90
- });
91
- });
92
-});
packages/react-flight-dom-webpack/README.md
new
+5
@@ -0,0 +1,5 @@
1
+# react-flight-dom-webpack
2
+
3
+Experimental React Flight bindings for DOM using Webpack.
4
+
5
+**Use it at your own risk.**
packages/react-flight-dom-webpack/index.js
renamed
+1
-1
@@ -9,7 +9,7 @@
9
10
'use strict';
11
12
-const ReactFlightDOMClient = require('./src/client/flight/ReactFlightDOMClient');
12
+const ReactFlightDOMClient = require('./src/ReactFlightDOMClient');
13
14
// TODO: decide on the top-level export form.
15
// This is hacky but makes it work with both Rollup and Jest
packages/react-flight-dom-webpack/npm/index.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-flight-dom-webpack.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-flight-dom-webpack.development.js');
7
+}
packages/react-flight-dom-webpack/npm/server.browser.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-flight-dom-webpack-server.browser.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-flight-dom-webpack-server.browser.development.js');
7
+}
packages/react-flight-dom-webpack/npm/server.js
new
+3
@@ -0,0 +1,3 @@
1
+'use strict';
2
+
3
+module.exports = require('./server.node');
packages/react-flight-dom-webpack/npm/server.node.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-flight-dom-webpack-server.node.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-flight-dom-webpack-server.node.development.js');
7
+}
packages/react-flight-dom-webpack/package.json
new
+48
@@ -0,0 +1,48 @@
1
+{
2
+ "name": "react-flight-dom-webpack",
3
+ "description": "React Flight bindings for DOM using Webpack.",
4
+ "version": "0.1.0",
5
+ "private": true,
6
+ "keywords": [
7
+ "react"
8
+ ],
9
+ "homepage": "https://reactjs.org/",
10
+ "bugs": "https://github.com/facebook/react/issues",
11
+ "license": "MIT",
12
+ "files": [
13
+ "LICENSE",
14
+ "README.md",
15
+ "index.js",
16
+ "server.js",
17
+ "server.browser.js",
18
+ "server.node.js",
19
+ "cjs/",
20
+ "umd/"
21
+ ],
22
+ "browser": {
23
+ "./server.js": "./server.browser.js"
24
+ },
25
+ "main": "index.js",
26
+ "repository": {
27
+ "type" : "git",
28
+ "url" : "https://github.com/facebook/react.git",
29
+ "directory": "packages/react-flight-dom-webpack"
30
+ },
31
+ "engines": {
32
+ "node": ">=0.10.0"
33
+ },
34
+ "peerDependencies": {
35
+ "react": "^16.0.0",
36
+ "react-dom": "^16.0.0",
37
+ "webpack": "^4.41.2"
38
+ },
39
+ "dependencies": {
40
+ "loose-envify": "^1.1.0",
41
+ "object-assign": "^4.1.1"
42
+ },
43
+ "browserify": {
44
+ "transform": [
45
+ "loose-envify"
46
+ ]
47
+ }
48
+}
packages/react-flight-dom-webpack/server.browser.js
renamed
+1
-1
@@ -9,7 +9,7 @@
9
10
'use strict';
11
12
-const ReactFlightDOMServerBrowser = require('./src/server/flight/ReactFlightDOMServerBrowser');
12
+const ReactFlightDOMServerBrowser = require('./src/ReactFlightDOMServerBrowser');
13
14
// TODO: decide on the top-level export form.
15
// This is hacky but makes it work with both Rollup and Jest
packages/react-flight-dom-webpack/server.js
renamed
+1
-1
@@ -9,4 +9,4 @@
9
10
'use strict';
11
12
-module.exports = require('./unstable-flight-server.node');
12
+module.exports = require('./server.node');
packages/react-flight-dom-webpack/server.node.js
renamed
+1
-1
@@ -9,7 +9,7 @@
9
10
'use strict';
11
12
-const ReactFlightDOMServerNode = require('./src/server/flight/ReactFlightDOMServerNode');
12
+const ReactFlightDOMServerNode = require('./src/ReactFlightDOMServerNode');
13
14
// TODO: decide on the top-level export form.
15
// This is hacky but makes it work with both Rollup and Jest
packages/react-flight-dom-webpack/src/ReactFlightDOMClient.js
renamed
packages/react-flight-dom-webpack/src/ReactFlightDOMServerBrowser.js
renamed
packages/react-flight-dom-webpack/src/ReactFlightDOMServerNode.js
renamed
packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js
renamed
+47
-3
@@ -24,15 +24,15 @@ let ReactDOM;
24
let ReactFlightDOMServer;
25
let ReactFlightDOMClient;
26
27
-describe('ReactFlightIntegration', () => {
27
+describe('ReactFlightDOM', () => {
28
beforeEach(() => {
29
jest.resetModules();
30
act = require('react-dom/test-utils').act;
31
Stream = require('stream');
32
React = require('react');
33
ReactDOM = require('react-dom');
34
- ReactFlightDOMServer = require('react-dom/unstable-flight-server');
35
- ReactFlightDOMClient = require('react-dom/unstable-flight-client');
34
+ ReactFlightDOMServer = require('react-flight-dom-webpack/server');
35
+ ReactFlightDOMClient = require('react-flight-dom-webpack');
36
});
37
38
function getTestStream() {
@@ -53,6 +53,50 @@ describe('ReactFlightIntegration', () => {
53
};
54
}
55
56
+ async function waitForSuspense(fn) {
57
+ while (true) {
58
+ try {
59
+ return fn();
60
+ } catch (promise) {
61
+ if (typeof promise.then === 'function') {
62
+ await promise;
63
+ } else {
64
+ throw promise;
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ it('should resolve HTML using Node streams', async () => {
71
+ function Text({children}) {
72
+ return <span>{children}</span>;
73
+ }
74
+ function HTML() {
75
+ return (
76
+ <div>
77
+ <Text>hello</Text>
78
+ <Text>world</Text>
79
+ </div>
80
+ );
81
+ }
82
+
83
+ function App() {
84
+ let model = {
85
+ html: <HTML />,
86
+ };
87
+ return model;
88
+ }
89
+
90
+ let {writable, readable} = getTestStream();
91
+ ReactFlightDOMServer.pipeToNodeWritable(<App />, writable);
92
+ let result = ReactFlightDOMClient.readFromReadableStream(readable);
93
+ await waitForSuspense(() => {
94
+ expect(result.model).toEqual({
95
+ html: '<div><span>hello</span><span>world</span></div>',
96
+ });
97
+ });
98
+ });
99
+
100
it.experimental('should resolve the root', async () => {
101
let {Suspense} = React;
102
packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
renamed
+2
-2
@@ -23,8 +23,8 @@ describe('ReactFlightDOMBrowser', () => {
23
beforeEach(() => {
24
jest.resetModules();
25
React = require('react');
26
- ReactFlightDOMServer = require('react-dom/unstable-flight-server.browser');
27
- ReactFlightDOMClient = require('react-dom/unstable-flight-client');
26
+ ReactFlightDOMServer = require('react-flight-dom-webpack/server.browser');
27
+ ReactFlightDOMClient = require('react-flight-dom-webpack');
28
});
29
30
async function waitForSuspense(fn) {
packages/react-flight/src/ReactFlightHostConfigBrowser.js
renamed
packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js
+1
-1
@@ -7,4 +7,4 @@
7
* @flow
8
*/
9
10
-export * from 'react-dom/src/client/flight/ReactFlightDOMHostConfig';
10
+export * from 'react-flight/src/ReactFlightHostConfigBrowser';
packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js
+1
-1
@@ -7,4 +7,4 @@
7
* @flow
8
*/
9
10
-export * from 'react-dom/src/client/flight/ReactFlightDOMHostConfig';
10
+export * from 'react-flight/src/ReactFlightHostConfigBrowser';
packages/react-server/src/ReactDOMServerFormatConfig.js
renamed
packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
+1
-1
@@ -7,4 +7,4 @@
7
* @flow
8
*/
9
10
-export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
10
+export * from '../ReactDOMServerFormatConfig';
packages/react-server/src/forks/ReactServerFormatConfig.dom.js
+1
-1
@@ -7,4 +7,4 @@
7
* @flow
8
*/
9
10
-export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
10
+export * from '../ReactDOMServerFormatConfig';
scripts/rollup/bundles.js
+5
-5
@@ -170,23 +170,23 @@ const bundles = [
170
externals: ['react', 'react-dom/server'],
171
},
172
173
- /******* React DOM Flight Server *******/
173
+ /******* React DOM Flight Server Webpack *******/
174
{
175
bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
176
moduleType: RENDERER,
177
- entry: 'react-dom/unstable-flight-server.browser',
177
+ entry: 'react-flight-dom-webpack/server.browser',
178
global: 'ReactFlightDOMServer',
179
externals: ['react', 'react-dom/server'],
180
},
181
{
182
bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
183
moduleType: RENDERER,
184
- entry: 'react-dom/unstable-flight-server.node',
184
+ entry: 'react-flight-dom-webpack/server.node',
185
global: 'ReactFlightDOMServer',
186
externals: ['react', 'react-dom/server'],
187
},
188
189
- /******* React DOM Flight Client *******/
189
+ /******* React DOM Flight Client Webpack *******/
190
{
191
bundleTypes: [
192
NODE_DEV,
@@ -197,7 +197,7 @@ const bundles = [
197
FB_WWW_PROD,
198
],
199
moduleType: RENDERER,
200
- entry: 'react-dom/unstable-flight-client',
200
+ entry: 'react-flight-dom-webpack',
201
global: 'ReactFlightDOMClient',
202
externals: ['react'],
203
},
scripts/shared/inlinedHostConfigs.js
+4
-4
@@ -12,8 +12,8 @@ module.exports = [
12
entryPoints: [
13
'react-dom',
14
'react-dom/unstable-fizz.node',
15
- 'react-dom/unstable-flight-server.node',
16
- 'react-dom/unstable-flight-client',
15
+ 'react-flight-dom-webpack/server.node',
16
+ 'react-flight-dom-webpack',
17
],
18
isFlowTyped: true,
19
isServerSupported: true,
@@ -22,8 +22,8 @@ module.exports = [
22
shortName: 'dom-browser',
23
entryPoints: [
24
'react-dom/unstable-fizz.browser',
25
- 'react-dom/unstable-flight-server.browser',
26
- 'react-dom/unstable-flight-client',
25
+ 'react-flight-dom-webpack/server.browser',
26
+ 'react-flight-dom-webpack',
27
],
28
isFlowTyped: true,
29
isServerSupported: true,
yarn.lock
+29
@@ -13268,6 +13268,35 @@ webpack@^4.26.0:
13268
watchpack "^1.6.0"
13269
webpack-sources "^1.4.1"
13270
13271
+webpack@^4.41.2:
13272
+ version "4.41.2"
13273
+ resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
13274
+ integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
13275
+ dependencies:
13276
+ "@webassemblyjs/ast" "1.8.5"
13277
+ "@webassemblyjs/helper-module-context" "1.8.5"
13278
+ "@webassemblyjs/wasm-edit" "1.8.5"
13279
+ "@webassemblyjs/wasm-parser" "1.8.5"
13280
+ acorn "^6.2.1"
13281
+ ajv "^6.10.2"
13282
+ ajv-keywords "^3.4.1"
13283
+ chrome-trace-event "^1.0.2"
13284
+ enhanced-resolve "^4.1.0"
13285
+ eslint-scope "^4.0.3"
13286
+ json-parse-better-errors "^1.0.2"
13287
+ loader-runner "^2.4.0"
13288
+ loader-utils "^1.2.3"
13289
+ memory-fs "^0.4.1"
13290
+ micromatch "^3.1.10"
13291
+ mkdirp "^0.5.1"
13292
+ neo-async "^2.6.1"
13293
+ node-libs-browser "^2.2.1"
13294
+ schema-utils "^1.0.0"
13295
+ tapable "^1.1.3"
13296
+ terser-webpack-plugin "^1.4.1"
13297
+ watchpack "^1.6.0"
13298
+ webpack-sources "^1.4.1"
13299
+
13300
websocket-driver@>=0.5.1:
13301
version "0.7.3"
13302
resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"