@samitouri / QOS-React / commits / 39dbb14da3

[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"