Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Flight] Rename react-transport-... packages to react-server-... #20403

Merged
merged 5 commits into from
Dec 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -185,14 +185,14 @@ module.exports = {
{
files: [
'packages/react-native-renderer/**/*.js',
'packages/react-transport-native-relay/**/*.js',
'packages/react-server-native-relay/**/*.js',
],
globals: {
nativeFabricUIManager: true,
},
},
{
files: ['packages/react-transport-dom-webpack/**/*.js'],
files: ['packages/react-server-dom-webpack/**/*.js'],
globals: {
__webpack_chunk_load__: true,
__webpack_require__: true,
Expand Down
10 changes: 5 additions & 5 deletions fixtures/flight-browser/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ <h1>Flight Example</h1>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../../build/node_modules/react-transport-dom-webpack/umd/react-transport-dom-webpack-server.browser.development.js"></script>
<script src="../../build/node_modules/react-transport-dom-webpack/umd/react-transport-dom-webpack.development.js"></script>
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.server.development.js"></script>
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
let Suspense = React.Suspense;
Expand Down Expand Up @@ -60,7 +60,7 @@ <h1>Flight Example</h1>
content: <HTML />,
};

let stream = ReactTransportDOMServer.renderToReadableStream(model);
let stream = ReactServerDOMWriter.renderToReadableStream(model);
let response = new Response(stream, {
headers: {'Content-Type': 'text/html'},
});
Expand All @@ -70,13 +70,13 @@ <h1>Flight Example</h1>
let blob = await responseToDisplay.blob();
let url = URL.createObjectURL(blob);

let data = ReactTransportDOMClient.createFromFetch(
let data = ReactServerDOMReader.createFromFetch(
fetch(url)
);
// The client also supports XHR streaming.
// var xhr = new XMLHttpRequest();
// xhr.open('GET', url);
// let data = ReactTransportDOMClient.createFromXHR(xhr);
// let data = ReactServerDOMReader.createFromXHR(xhr);
// xhr.send();

renderResult(data);
Expand Down
2 changes: 1 addition & 1 deletion fixtures/flight/config/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict';

// Fork Start
const ReactFlightWebpackPlugin = require('react-transport-dom-webpack/plugin');
const ReactFlightWebpackPlugin = require('react-server-dom-webpack/plugin');
// Fork End

const fs = require('fs');
Expand Down
2 changes: 1 addition & 1 deletion fixtures/flight/loader/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
resolve,
getSource,
transformSource as reactTransformSource,
} from 'react-transport-dom-webpack/node-loader';
} from 'react-server-dom-webpack/node-loader';

export {resolve, getSource};

Expand Down
2 changes: 1 addition & 1 deletion fixtures/flight/server/cli.server.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

const register = require('react-transport-dom-webpack/node-register');
const register = require('react-server-dom-webpack/node-register');
register();

const babelRegister = require('@babel/register');
Expand Down
2 changes: 1 addition & 1 deletion fixtures/flight/server/handler.server.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

const {pipeToNodeWritable} = require('react-transport-dom-webpack/server');
const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
const {readFile} = require('fs');
const {resolve} = require('path');
const React = require('react');
Expand Down
6 changes: 2 additions & 4 deletions fixtures/flight/src/index.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import * as React from 'react';
import {Suspense} from 'react';
import ReactDOM from 'react-dom';
import ReactTransportDOMClient from 'react-transport-dom-webpack';
import ReactServerDOMReader from 'react-server-dom-webpack';

let data = ReactTransportDOMClient.createFromFetch(
fetch('http://localhost:3001')
);
let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));

function Content() {
return data.readRoot();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@

export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
export * from 'react-client/src/ReactFlightClientHostConfigStream';
export * from 'react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
* @flow
*/

export * from 'react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig';
export * from 'react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig';
export * from '../ReactFlightClientHostConfigNoStream';
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@

export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
export * from 'react-client/src/ReactFlightClientHostConfigStream';
export * from 'react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
* @flow
*/

export * from 'react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig';
export * from 'react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig';
export * from '../ReactFlightClientHostConfigNoStream';
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "react-transport-dom-relay",
"name": "react-server-dom-relay",
"version": "0.1.0",
"private": true,
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/react-transport-dom-relay"
"directory": "packages/react-server-dom-relay"
},
"dependencies": {
"object-assign": "^4.1.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ describe('ReactFlightDOMRelay', () => {
act = require('react-dom/test-utils').unstable_concurrentAct;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMFlightRelayServer = require('react-transport-dom-relay/server');
ReactDOMFlightRelayClient = require('react-transport-dom-relay');
ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
ReactDOMFlightRelayClient = require('react-server-dom-relay');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we start getting rid of the codename in source? It’s already being referred to in some places which risks confusion.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are internal FB names. I think I’ve changed the external ones.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah but I mean people read the source too. If we don't need the codename we could just remove it everywhere.

JSResourceReference = require('JSResourceReference');
});

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# react-transport-dom-webpack
# react-server-dom-webpack

Experimental React Flight bindings for DOM using Webpack.

Expand Down
7 changes: 7 additions & 0 deletions packages/react-server-dom-webpack/npm/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-server-dom-webpack.production.min.js');
} else {
module.exports = require('./cjs/react-server-dom-webpack.development.js');
}
3 changes: 3 additions & 0 deletions packages/react-server-dom-webpack/npm/node-register.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./cjs/react-server-dom-webpack-node-register.js');
3 changes: 3 additions & 0 deletions packages/react-server-dom-webpack/npm/plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./cjs/react-server-dom-webpack-plugin.js');
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.production.min.js');
} else {
module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.development.js');
}
6 changes: 6 additions & 0 deletions packages/react-server-dom-webpack/npm/writer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
'use strict';

throw new Error(
'The React Server Writer cannot be used outside a react-server environment. ' +
'You must configure Node.js using the `--conditions react-server` flag.'
);
7 changes: 7 additions & 0 deletions packages/react-server-dom-webpack/npm/writer.node.server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.production.min.js');
} else {
module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.development.js');
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-transport-dom-webpack",
"description": "React Transport bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
"name": "react-server-dom-webpack",
"description": "React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
"version": "0.1.0",
"private": true,
"keywords": [
Expand All @@ -14,9 +14,9 @@
"README.md",
"index.js",
"plugin.js",
"server.js",
"server.browser.js",
"server.node.js",
"writer.js",
"writer.browser.server.js",
"writer.node.server.js",
"node-register.js",
"cjs/",
"umd/",
Expand All @@ -25,21 +25,27 @@
"exports": {
".": "./index.js",
"./plugin": "./plugin.js",
"./server": "./server.js",
"./server.browser": "./server.browser.js",
"./server.node": "./server.node.js",
"./node-loader": "./esm/react-transport-dom-webpack-node-loader.js",
"./writer": {
"react-server": {
"node": "./writer.node.server.js",
"browser": "./writer.browser.server.js"
},
"default": "./writer.js"
},
"./writer.node.server": "./writer.node.server.js",
"./writer.browser.server": "./writer.browser.server.js",
"./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
"./node-register": "./node-register.js",
"./package.json": "./package.json"
},
"browser": {
"./server.js": "./server.browser.js"
"./writer.js": "./writer.browser.server.js"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What’s up with this change?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this is still a server even in the browser. So was the extension missing before?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah I see

uses the .server.js convention to enforce that it's only loaded within a react-server environment.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It’s weird that this convention wins and have to be one the end.

It’s also weird that since this reexports, the reexport is considered a hybrid. That just works because it doesn’t have dependencies on other server files.

We probably should change our CJS build output convention to include server at the end.

},
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/react-transport-dom-webpack"
"directory": "packages/react-server-dom-webpack"
},
"engines": {
"node": ">=0.10.0"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ type Options = {
manifestFilename?: string,
};

const PLUGIN_NAME = 'React Transport Plugin';
const PLUGIN_NAME = 'React Server Plugin';

export default class ReactFlightWebpackPlugin {
clientReferences: $ReadOnlyArray<ClientReferencePath>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ let act;
let Stream;
let React;
let ReactDOM;
let ReactTransportDOMServer;
let ReactTransportDOMClient;
let ReactServerDOMWriter;
let ReactServerDOMReader;

describe('ReactFlightDOM', () => {
beforeEach(() => {
Expand All @@ -40,8 +40,8 @@ describe('ReactFlightDOM', () => {
Stream = require('stream');
React = require('react');
ReactDOM = require('react-dom');
ReactTransportDOMServer = require('react-transport-dom-webpack/server');
ReactTransportDOMClient = require('react-transport-dom-webpack');
ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
ReactServerDOMReader = require('react-server-dom-webpack');
});

function getTestStream() {
Expand Down Expand Up @@ -113,8 +113,8 @@ describe('ReactFlightDOM', () => {
}

const {writable, readable} = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(<App />, writable, webpackMap);
const response = ReactTransportDOMClient.createFromReadableStream(readable);
ReactServerDOMWriter.pipeToNodeWritable(<App />, writable, webpackMap);
const response = ReactServerDOMReader.createFromReadableStream(readable);
await waitForSuspense(() => {
const model = response.readRoot();
expect(model).toEqual({
Expand Down Expand Up @@ -163,12 +163,12 @@ describe('ReactFlightDOM', () => {
}

const {writable, readable} = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(
ReactServerDOMWriter.pipeToNodeWritable(
<RootModel />,
writable,
webpackMap,
);
const response = ReactTransportDOMClient.createFromReadableStream(readable);
const response = ReactServerDOMReader.createFromReadableStream(readable);

const container = document.createElement('div');
const root = ReactDOM.unstable_createRoot(container);
Expand Down Expand Up @@ -202,12 +202,12 @@ describe('ReactFlightDOM', () => {
}

const {writable, readable} = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(
ReactServerDOMWriter.pipeToNodeWritable(
<RootModel />,
writable,
webpackMap,
);
const response = ReactTransportDOMClient.createFromReadableStream(readable);
const response = ReactServerDOMReader.createFromReadableStream(readable);

const container = document.createElement('div');
const root = ReactDOM.unstable_createRoot(container);
Expand Down Expand Up @@ -239,12 +239,12 @@ describe('ReactFlightDOM', () => {
}

const {writable, readable} = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(
ReactServerDOMWriter.pipeToNodeWritable(
<RootModel />,
writable,
webpackMap,
);
const response = ReactTransportDOMClient.createFromReadableStream(readable);
const response = ReactServerDOMReader.createFromReadableStream(readable);

const container = document.createElement('div');
const root = ReactDOM.unstable_createRoot(container);
Expand Down Expand Up @@ -374,8 +374,8 @@ describe('ReactFlightDOM', () => {
}

const {writable, readable} = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(model, writable, webpackMap);
const response = ReactTransportDOMClient.createFromReadableStream(readable);
ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap);
const response = ReactServerDOMReader.createFromReadableStream(readable);

const container = document.createElement('div');
const root = ReactDOM.unstable_createRoot(container);
Expand Down Expand Up @@ -473,12 +473,12 @@ describe('ReactFlightDOM', () => {
const root = ReactDOM.unstable_createRoot(container);

const stream1 = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(
ReactServerDOMWriter.pipeToNodeWritable(
<App color="red" />,
stream1.writable,
webpackMap,
);
const response1 = ReactTransportDOMClient.createFromReadableStream(
const response1 = ReactServerDOMReader.createFromReadableStream(
stream1.readable,
);
await act(async () => {
Expand All @@ -501,12 +501,12 @@ describe('ReactFlightDOM', () => {
inputB.value = 'goodbye';

const stream2 = getTestStream();
ReactTransportDOMServer.pipeToNodeWritable(
ReactServerDOMWriter.pipeToNodeWritable(
<App color="blue" />,
stream2.writable,
webpackMap,
);
const response2 = ReactTransportDOMClient.createFromReadableStream(
const response2 = ReactServerDOMReader.createFromReadableStream(
stream2.readable,
);
await act(async () => {
Expand Down
Loading