Skip to content

Commit ce6fe50

Browse files
sebmarkbagesebmarkbage
authored
Add server-runtime to create Server Blocks (facebook#18392)
This is equivalent to the jsx-runtime in that this is what the compiled output on the server is supposed to target. It's really just the same code for all the different Flights, but they have different types in their arguments so each one gets their own entry point. We might use this to add runtime warnings per entry point. Unlike the client-side React.block call this doesn't provide the factory function that curries the load function. The compiler is expected to wrap this call in the currying factory.
1 parent 64ed221 commit ce6fe50

22 files changed

+181
-25
lines changed

‎packages/react-client/src/__tests__/ReactFlight-test.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let act;
1616
let React;
1717
let ReactNoop;
1818
let ReactNoopFlightServer;
19+
let ReactNoopFlightServerRuntime;
1920
let ReactNoopFlightClient;
2021

2122
describe('ReactFlight', () => {
@@ -25,19 +26,22 @@ describe('ReactFlight', () => {
2526
React = require('react');
2627
ReactNoop = require('react-noop-renderer');
2728
ReactNoopFlightServer = require('react-noop-renderer/flight-server');
29+
ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
2830
ReactNoopFlightClient = require('react-noop-renderer/flight-client');
2931
act = ReactNoop.act;
3032
});
3133

3234
function block(render, load) {
35+
if (load === undefined) {
36+
return () => {
37+
return ReactNoopFlightServerRuntime.serverBlockNoData(render);
38+
};
39+
}
3340
return function(...args) {
34-
if (load === undefined) {
35-
return [Symbol.for('react.server.block'), render];
36-
}
3741
let curriedLoad = () => {
3842
return load(...args);
3943
};
40-
return [Symbol.for('react.server.block'), render, curriedLoad];
44+
return ReactNoopFlightServerRuntime.serverBlock(render, curriedLoad);
4145
};
4246
}
4347

‎packages/react-flight-dom-relay/server-runtime.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+
* @flow
8+
*/
9+
10+
export * from 'react-server/src/ReactFlightServerRuntime';

‎packages/react-flight-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export type {
3131

3232
export type BundlerConfig = void;
3333

34-
export function resolveModuleMetaData(
34+
export function resolveModuleMetaData<T>(
3535
config: BundlerConfig,
36-
resource: ModuleReference,
36+
resource: ModuleReference<T>,
3737
): ModuleMetaData {
3838
return resolveModuleMetaDataImpl(resource);
3939
}

‎packages/react-flight-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ let act;
1111
let React;
1212
let ReactDOM;
1313
let ReactDOMFlightRelayServer;
14+
let ReactDOMFlightRelayServerRuntime;
1415
let ReactDOMFlightRelayClient;
1516

1617
describe('ReactFlightDOMRelay', () => {
@@ -21,6 +22,7 @@ describe('ReactFlightDOMRelay', () => {
2122
React = require('react');
2223
ReactDOM = require('react-dom');
2324
ReactDOMFlightRelayServer = require('react-flight-dom-relay/server');
25+
ReactDOMFlightRelayServerRuntime = require('react-flight-dom-relay/server-runtime');
2426
ReactDOMFlightRelayClient = require('react-flight-dom-relay');
2527
});
2628

@@ -45,14 +47,14 @@ describe('ReactFlightDOMRelay', () => {
4547
}
4648

4749
function block(render, load) {
50+
if (load === undefined) {
51+
return ReactDOMFlightRelayServerRuntime.serverBlock(render);
52+
}
4853
return function(...args) {
49-
if (load === undefined) {
50-
return [Symbol.for('react.server.block'), render];
51-
}
5254
let curriedLoad = () => {
5355
return load(...args);
5456
};
55-
return [Symbol.for('react.server.block'), render, curriedLoad];
57+
return ReactDOMFlightRelayServerRuntime.serverBlock(render, curriedLoad);
5658
};
5759
}
5860

‎packages/react-flight-dom-webpack/npm/server-runtime.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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-runtime.production.min.js');
5+
} else {
6+
module.exports = require('./cjs/react-flight-dom-webpack-server-runtime.development.js');
7+
}

‎packages/react-flight-dom-webpack/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"server.js",
1717
"server.browser.js",
1818
"server.node.js",
19+
"server-runtime.js",
1920
"cjs/",
2021
"umd/"
2122
],

‎packages/react-flight-dom-webpack/server-runtime.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+
* @flow
8+
*/
9+
10+
export * from 'react-server/src/ReactFlightServerRuntime';

‎packages/react-flight-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,18 @@ type WebpackMap = {
1313

1414
export type BundlerConfig = WebpackMap;
1515

16-
export type ModuleReference = string;
16+
// eslint-disable-next-line no-unused-vars
17+
export type ModuleReference<T> = string;
1718

1819
export type ModuleMetaData = {
1920
id: string,
2021
chunks: Array<string>,
2122
name: string,
2223
};
2324

24-
export function resolveModuleMetaData(
25+
export function resolveModuleMetaData<T>(
2526
config: BundlerConfig,
26-
modulePath: ModuleReference,
27+
modulePath: ModuleReference<T>,
2728
): ModuleMetaData {
2829
return config[modulePath];
2930
}

‎packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ let Stream;
2929
let React;
3030
let ReactDOM;
3131
let ReactFlightDOMServer;
32+
let ReactFlightDOMServerRuntime;
3233
let ReactFlightDOMClient;
3334

3435
describe('ReactFlightDOM', () => {
@@ -41,6 +42,7 @@ describe('ReactFlightDOM', () => {
4142
React = require('react');
4243
ReactDOM = require('react-dom');
4344
ReactFlightDOMServer = require('react-flight-dom-webpack/server');
45+
ReactFlightDOMServerRuntime = require('react-flight-dom-webpack/server-runtime');
4446
ReactFlightDOMClient = require('react-flight-dom-webpack');
4547
});
4648

@@ -72,14 +74,19 @@ describe('ReactFlightDOM', () => {
7274
chunks: [],
7375
name: 'd',
7476
};
77+
if (load === undefined) {
78+
return () => {
79+
return ReactFlightDOMServerRuntime.serverBlockNoData('path/' + idx);
80+
};
81+
}
7582
return function(...args) {
76-
if (load === undefined) {
77-
return [Symbol.for('react.server.block'), render];
78-
}
7983
let curriedLoad = () => {
8084
return load(...args);
8185
};
82-
return [Symbol.for('react.server.block'), 'path/' + idx, curriedLoad];
86+
return ReactFlightDOMServerRuntime.serverBlock(
87+
'path/' + idx,
88+
curriedLoad,
89+
);
8390
};
8491
}
8592

‎packages/react-noop-renderer/flight-server-runtime.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+
* @flow
8+
*/
9+
10+
export * from 'react-server/flight-server-runtime';

‎packages/react-noop-renderer/npm/flight-server-runtime.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
module.exports = require('react-server/flight-server-runtime');

‎packages/react-noop-renderer/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"flight-client.js",
3131
"flight-modules.js",
3232
"flight-server.js",
33+
"flight-server-runtime.js",
3334
"cjs/"
3435
]
3536
}

‎packages/react-server/flight-server-runtime.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+
* @flow
8+
*/
9+
10+
export * from './src/ReactFlightServerRuntime';

‎packages/react-server/npm/flight-server-runtime.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
if (process.env.NODE_ENV === 'production') {
4+
module.exports = require('./cjs/react-server-flight-server-runtime.production.min.js');
5+
} else {
6+
module.exports = require('./cjs/react-server-flight-server-runtime.development.js');
7+
}

‎packages/react-server/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"README.md",
1515
"index.js",
1616
"flight.js",
17+
"flight-server-runtime.js",
1718
"cjs/"
1819
],
1920
"main": "index.js",

‎packages/react-server/src/ReactFlightServer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export function resolveModelToJSON(
176176
switch (key) {
177177
case '1': {
178178
// Module reference
179-
let moduleReference: ModuleReference = (value: any);
179+
let moduleReference: ModuleReference<any> = (value: any);
180180
try {
181181
let moduleMetaData: ModuleMetaData = resolveModuleMetaData(
182182
request.bundlerConfig,

‎packages/react-server/src/ReactFlightServerBundlerConfigCustom.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
declare var $$$hostConfig: any;
1111

1212
export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
13-
export opaque type ModuleReference = mixed; // eslint-disable-line no-undef
13+
export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
1414
export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
1515
export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;

‎packages/react-server/src/ReactFlightServerRuntime.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
* @flow
8+
*/
9+
10+
import type {BlockRenderFunction} from 'react/src/ReactBlock';
11+
12+
import type {ModuleReference} from './ReactFlightServerConfig';
13+
14+
import {REACT_SERVER_BLOCK_TYPE} from 'shared/ReactSymbols';
15+
16+
export type ServerBlockComponent<Props, Data> =
17+
| [
18+
Symbol | number,
19+
ModuleReference<BlockRenderFunction<Props, Data>>,
20+
() => Data,
21+
]
22+
| [Symbol | number, ModuleReference<BlockRenderFunction<Props, void>>];
23+
24+
opaque type ServerBlock<Props>: React$AbstractComponent<
25+
Props,
26+
null,
27+
> = React$AbstractComponent<Props, null>;
28+
29+
export function serverBlock<Props, Data>(
30+
moduleReference: ModuleReference<BlockRenderFunction<Props, Data>>,
31+
loadData: () => Data,
32+
): ServerBlock<Props> {
33+
let blockComponent: ServerBlockComponent<Props, Data> = [
34+
REACT_SERVER_BLOCK_TYPE,
35+
moduleReference,
36+
loadData,
37+
];
38+
39+
// $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
40+
return blockComponent;
41+
}
42+
43+
export function serverBlockNoData<Props>(
44+
moduleReference: ModuleReference<BlockRenderFunction<Props, void>>,
45+
): ServerBlock<Props> {
46+
let blockComponent: ServerBlockComponent<Props, void> = [
47+
REACT_SERVER_BLOCK_TYPE,
48+
moduleReference,
49+
];
50+
// $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
51+
return blockComponent;
52+
}

‎packages/react/src/ReactBlock.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export function block<Args: Iterable<any>, Props, Data>(
106106
_render: render,
107107
};
108108

109-
// $FlowFixMe
109+
// $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
110110
return blockComponent;
111111
};
112112
}
@@ -132,7 +132,7 @@ export function block<Args: Iterable<any>, Props, Data>(
132132
_init: lazyInitializer,
133133
};
134134

135-
// $FlowFixMe
135+
// $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
136136
return lazyType;
137137
};
138138
}

‎scripts/flow/react-relay-hooks.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
3030
): void;
3131
declare export function close(destination: Destination): void;
3232

33-
declare export opaque type ModuleReference;
33+
declare export opaque type ModuleReference<T>;
3434
declare export type ModuleMetaData = JSONValue;
35-
declare export function resolveModuleMetaData(
36-
resourceReference: ModuleReference,
35+
declare export function resolveModuleMetaData<T>(
36+
resourceReference: ModuleReference<T>,
3737
): ModuleMetaData;
3838
}
3939

‎scripts/rollup/bundles.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,13 @@ const bundles = [
229229
global: 'ReactFlightDOMServer',
230230
externals: ['react', 'react-dom/server'],
231231
},
232+
{
233+
bundleTypes: [NODE_DEV, NODE_PROD],
234+
moduleType: RENDERER,
235+
entry: 'react-flight-dom-webpack/server-runtime',
236+
global: 'ReactFlightDOMServerRuntime',
237+
externals: ['react'],
238+
},
232239

233240
/******* React DOM Flight Client Webpack *******/
234241
{
@@ -251,6 +258,13 @@ const bundles = [
251258
'ReactFlightDOMRelayServerIntegration',
252259
],
253260
},
261+
{
262+
bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
263+
moduleType: RENDERER,
264+
entry: 'react-flight-dom-relay/server-runtime',
265+
global: 'ReactFlightDOMRelayServerRuntime',
266+
externals: ['react', 'ReactFlightDOMRelayServerIntegration'],
267+
},
254268

255269
/******* React DOM Flight Client Relay *******/
256270
{
@@ -453,6 +467,13 @@ const bundles = [
453467
global: 'ReactFlightServer',
454468
externals: ['react'],
455469
},
470+
{
471+
bundleTypes: [NODE_DEV, NODE_PROD],
472+
moduleType: RENDERER,
473+
entry: 'react-server/flight-server-runtime',
474+
global: 'ReactFlightServerRuntime',
475+
externals: ['react'],
476+
},
456477

457478
/******* React Flight Client *******/
458479
{

0 commit comments

Comments
 (0)