Skip to content
Permalink
Browse files

[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
  • Loading branch information
sebmarkbage committed Nov 15, 2019
1 parent 532810a commit 39dbb14da321cabafe3ab67de41150672aa301fc
Showing with 177 additions and 148 deletions.
  1. +2 −2 fixtures/flight-browser/index.html
  2. +1 −1 fixtures/flight/server/handler.js
  3. +1 −1 fixtures/flight/src/index.js
  4. +0 −7 packages/react-dom/npm/unstable-flight-client.js
  5. +0 −7 packages/react-dom/npm/unstable-flight-server.browser.js
  6. +0 −3 packages/react-dom/npm/unstable-flight-server.js
  7. +0 −7 packages/react-dom/npm/unstable-flight-server.node.js
  8. +1 −6 packages/react-dom/package.json
  9. +0 −92 packages/react-dom/src/__tests__/ReactFlightDOM-test.js
  10. +5 −0 packages/react-flight-dom-webpack/README.md
  11. +1 −1 packages/{react-dom/unstable-flight-client.js → react-flight-dom-webpack/index.js}
  12. +7 −0 packages/react-flight-dom-webpack/npm/index.js
  13. +7 −0 packages/react-flight-dom-webpack/npm/server.browser.js
  14. +3 −0 packages/react-flight-dom-webpack/npm/server.js
  15. +7 −0 packages/react-flight-dom-webpack/npm/server.node.js
  16. +48 −0 packages/react-flight-dom-webpack/package.json
  17. +1 −1 packages/{react-dom/unstable-flight-server.browser.js → react-flight-dom-webpack/server.browser.js}
  18. +1 −1 packages/{react-dom/unstable-flight-server.js → react-flight-dom-webpack/server.js}
  19. +1 −1 packages/{react-dom/unstable-flight-server.node.js → react-flight-dom-webpack/server.node.js}
  20. 0 packages/{react-dom/src/client/flight → react-flight-dom-webpack/src}/ReactFlightDOMClient.js
  21. 0 packages/{react-dom/src/server/flight → react-flight-dom-webpack/src}/ReactFlightDOMServerBrowser.js
  22. 0 packages/{react-dom/src/server/flight → react-flight-dom-webpack/src}/ReactFlightDOMServerNode.js
  23. +47 −3 ..._/ReactFlightIntegration-test.js → react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js}
  24. +2 −2 packages/{react-dom → react-flight-dom-webpack}/src/__tests__/ReactFlightDOMBrowser-test.js
  25. 0 ...src/client/flight/ReactFlightDOMHostConfig.js → react-flight/src/ReactFlightHostConfigBrowser.js}
  26. +1 −1 packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js
  27. +1 −1 packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js
  28. 0 packages/{react-dom/src/server → react-server/src}/ReactDOMServerFormatConfig.js
  29. +1 −1 packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
  30. +1 −1 packages/react-server/src/forks/ReactServerFormatConfig.dom.js
  31. +5 −5 scripts/rollup/bundles.js
  32. +4 −4 scripts/shared/inlinedHostConfigs.js
  33. +29 −0 yarn.lock
@@ -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;
@@ -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');

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

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

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

This file was deleted.

@@ -0,0 +1,5 @@
# react-flight-dom-webpack

Experimental React Flight bindings for DOM using Webpack.

**Use it at your own risk.**
@@ -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
@@ -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');
}
@@ -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');
}
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./server.node');
@@ -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');
}
@@ -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"
]
}
}
@@ -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
@@ -9,4 +9,4 @@

'use strict';

module.exports = require('./unstable-flight-server.node');
module.exports = require('./server.node');
@@ -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
@@ -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;

@@ -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) {
@@ -7,4 +7,4 @@
* @flow
*/

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

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

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

export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
export * from '../ReactDOMServerFormatConfig';

0 comments on commit 39dbb14

Please sign in to comment.
You can’t perform that action at this time.