@@ -14,6 +14,7 @@ let act;
14
14
let use ;
15
15
let startTransition ;
16
16
let React ;
17
+ let ReactServer ;
17
18
let ReactNoop ;
18
19
let ReactNoopFlightServer ;
19
20
let ReactNoopFlightClient ;
@@ -25,12 +26,18 @@ let assertLog;
25
26
describe ( 'ReactFlight' , ( ) => {
26
27
beforeEach ( ( ) => {
27
28
jest . resetModules ( ) ;
28
-
29
+ jest . mock ( 'react' , ( ) => require ( 'react/react.shared-subset' ) ) ;
30
+ ReactServer = require ( 'react' ) ;
31
+ ReactNoopFlightServer = require ( 'react-noop-renderer/flight-server' ) ;
32
+ // This stores the state so we need to preserve it
33
+ const flightModules = require ( 'react-noop-renderer/flight-modules' ) ;
34
+ __unmockReact ( ) ;
35
+ jest . resetModules ( ) ;
36
+ jest . mock ( 'react-noop-renderer/flight-modules' , ( ) => flightModules ) ;
29
37
React = require ( 'react' ) ;
30
38
startTransition = React . startTransition ;
31
39
use = React . use ;
32
40
ReactNoop = require ( 'react-noop-renderer' ) ;
33
- ReactNoopFlightServer = require ( 'react-noop-renderer/flight-server' ) ;
34
41
ReactNoopFlightClient = require ( 'react-noop-renderer/flight-client' ) ;
35
42
act = require ( 'internal-test-utils' ) . act ;
36
43
Scheduler = require ( 'scheduler' ) ;
@@ -111,6 +118,19 @@ describe('ReactFlight', () => {
111
118
return ctx ;
112
119
}
113
120
121
+ function createServerServerContext ( globalName , defaultValue , withStack ) {
122
+ let ctx ;
123
+ expect ( ( ) => {
124
+ ctx = ReactServer . createServerContext ( globalName , defaultValue ) ;
125
+ } ) . toErrorDev (
126
+ 'Server Context is deprecated and will soon be removed. ' +
127
+ 'It was never documented and we have found it not to be useful ' +
128
+ 'enough to warrant the downside it imposes on all apps.' ,
129
+ { withoutStack : ! withStack } ,
130
+ ) ;
131
+ return ctx ;
132
+ }
133
+
114
134
function clientReference ( value ) {
115
135
return Object . defineProperties (
116
136
function ( ) {
@@ -970,7 +990,7 @@ describe('ReactFlight', () => {
970
990
const Context = React . createContext ( ) ;
971
991
const ClientContext = clientReference ( Context ) ;
972
992
function ServerComponent ( ) {
973
- return React . useContext ( ClientContext ) ;
993
+ return ReactServer . useContext ( ClientContext ) ;
974
994
}
975
995
expect ( ( ) => {
976
996
const transport = ReactNoopFlightServer . render ( < ServerComponent /> ) ;
@@ -982,7 +1002,7 @@ describe('ReactFlight', () => {
982
1002
983
1003
describe ( 'Hooks' , ( ) => {
984
1004
function DivWithId ( { children} ) {
985
- const id = React . useId ( ) ;
1005
+ const id = ReactServer . useId ( ) ;
986
1006
return < div prop = { id } > { children } </ div > ;
987
1007
}
988
1008
@@ -1039,7 +1059,7 @@ describe('ReactFlight', () => {
1039
1059
// so the output passed to the Client has no knowledge of the useId use. In the future we would like to add a DEV warning when this happens. For now
1040
1060
// we just accept that it is a nuance of useId in Flight
1041
1061
function App ( ) {
1042
- const id = React . useId ( ) ;
1062
+ const id = ReactServer . useId ( ) ;
1043
1063
const div = < div prop = { id } > { id } </ div > ;
1044
1064
return < ClientDoublerModuleRef el = { div } /> ;
1045
1065
}
@@ -1076,19 +1096,17 @@ describe('ReactFlight', () => {
1076
1096
describe ( 'ServerContext' , ( ) => {
1077
1097
// @gate enableServerContext
1078
1098
it ( 'supports basic createServerContext usage' , async ( ) => {
1079
- const ServerContext = createServerContext (
1099
+ const ServerContext = createServerServerContext (
1080
1100
'ServerContext' ,
1081
1101
'hello from server' ,
1082
1102
) ;
1083
1103
function Foo ( ) {
1084
- const context = React . useContext ( ServerContext ) ;
1104
+ const context = ReactServer . useContext ( ServerContext ) ;
1085
1105
return < div > { context } </ div > ;
1086
1106
}
1087
1107
1088
1108
const transport = ReactNoopFlightServer . render ( < Foo /> ) ;
1089
1109
await act ( async ( ) => {
1090
- ServerContext . _currentRenderer = null ;
1091
- ServerContext . _currentRenderer2 = null ;
1092
1110
ReactNoop . render ( await ReactNoopFlightClient . read ( transport ) ) ;
1093
1111
} ) ;
1094
1112
@@ -1097,7 +1115,10 @@ describe('ReactFlight', () => {
1097
1115
1098
1116
// @gate enableServerContext
1099
1117
it ( 'propagates ServerContext providers in flight' , async ( ) => {
1100
- const ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1118
+ const ServerContext = createServerServerContext (
1119
+ 'ServerContext' ,
1120
+ 'default' ,
1121
+ ) ;
1101
1122
1102
1123
function Foo ( ) {
1103
1124
return (
@@ -1109,14 +1130,12 @@ describe('ReactFlight', () => {
1109
1130
) ;
1110
1131
}
1111
1132
function Bar ( ) {
1112
- const context = React . useContext ( ServerContext ) ;
1133
+ const context = ReactServer . useContext ( ServerContext ) ;
1113
1134
return context ;
1114
1135
}
1115
1136
1116
1137
const transport = ReactNoopFlightServer . render ( < Foo /> ) ;
1117
1138
await act ( async ( ) => {
1118
- ServerContext . _currentRenderer = null ;
1119
- ServerContext . _currentRenderer2 = null ;
1120
1139
ReactNoop . render ( await ReactNoopFlightClient . read ( transport ) ) ;
1121
1140
} ) ;
1122
1141
@@ -1125,7 +1144,7 @@ describe('ReactFlight', () => {
1125
1144
1126
1145
// @gate enableServerContext
1127
1146
it ( 'errors if you try passing JSX through ServerContext value' , ( ) => {
1128
- const ServerContext = createServerContext ( 'ServerContext' , {
1147
+ const ServerContext = createServerServerContext ( 'ServerContext' , {
1129
1148
foo : {
1130
1149
bar : < span > hi this is default</ span > ,
1131
1150
} ,
@@ -1146,7 +1165,7 @@ describe('ReactFlight', () => {
1146
1165
) ;
1147
1166
}
1148
1167
function Bar ( ) {
1149
- const context = React . useContext ( ServerContext ) ;
1168
+ const context = ReactServer . useContext ( ServerContext ) ;
1150
1169
return context . foo . bar ;
1151
1170
}
1152
1171
@@ -1159,7 +1178,10 @@ describe('ReactFlight', () => {
1159
1178
1160
1179
// @gate enableServerContext
1161
1180
it ( 'propagates ServerContext and cleans up the providers in flight' , async ( ) => {
1162
- const ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1181
+ const ServerContext = createServerServerContext (
1182
+ 'ServerContext' ,
1183
+ 'default' ,
1184
+ ) ;
1163
1185
1164
1186
function Foo ( ) {
1165
1187
return (
@@ -1181,7 +1203,7 @@ describe('ReactFlight', () => {
1181
1203
) ;
1182
1204
}
1183
1205
function Bar ( ) {
1184
- const context = React . useContext ( ServerContext ) ;
1206
+ const context = ReactServer . useContext ( ServerContext ) ;
1185
1207
return < span > { context } </ span > ;
1186
1208
}
1187
1209
@@ -1203,7 +1225,10 @@ describe('ReactFlight', () => {
1203
1225
1204
1226
// @gate enableServerContext
1205
1227
it ( 'propagates ServerContext providers in flight after suspending' , async ( ) => {
1206
- const ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1228
+ const ServerContext = createServerServerContext (
1229
+ 'ServerContext' ,
1230
+ 'default' ,
1231
+ ) ;
1207
1232
1208
1233
function Foo ( ) {
1209
1234
return (
@@ -1231,7 +1256,7 @@ describe('ReactFlight', () => {
1231
1256
throw promise ;
1232
1257
}
1233
1258
Scheduler . log ( 'rendered' ) ;
1234
- const context = React . useContext ( ServerContext ) ;
1259
+ const context = ReactServer . useContext ( ServerContext ) ;
1235
1260
return context ;
1236
1261
}
1237
1262
@@ -1248,8 +1273,6 @@ describe('ReactFlight', () => {
1248
1273
assertLog ( [ 'rendered' ] ) ;
1249
1274
1250
1275
await act ( async ( ) => {
1251
- ServerContext . _currentRenderer = null ;
1252
- ServerContext . _currentRenderer2 = null ;
1253
1276
ReactNoop . render ( await ReactNoopFlightClient . read ( transport ) ) ;
1254
1277
} ) ;
1255
1278
@@ -1258,11 +1281,15 @@ describe('ReactFlight', () => {
1258
1281
1259
1282
// @gate enableServerContext
1260
1283
it ( 'serializes ServerContext to client' , async ( ) => {
1261
- const ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1284
+ const ServerContext = createServerServerContext (
1285
+ 'ServerContext' ,
1286
+ 'default' ,
1287
+ ) ;
1288
+ const ClientContext = createServerContext ( 'ServerContext' , 'default' ) ;
1262
1289
1263
1290
function ClientBar ( ) {
1264
1291
Scheduler . log ( 'ClientBar' ) ;
1265
- const context = React . useContext ( ServerContext ) ;
1292
+ const context = React . useContext ( ClientContext ) ;
1266
1293
return < span > { context } </ span > ;
1267
1294
}
1268
1295
@@ -1285,8 +1312,6 @@ describe('ReactFlight', () => {
1285
1312
assertLog ( [ ] ) ;
1286
1313
1287
1314
await act ( async ( ) => {
1288
- ServerContext . _currentRenderer = null ;
1289
- ServerContext . _currentRenderer2 = null ;
1290
1315
const flightModel = await ReactNoopFlightClient . read ( transport ) ;
1291
1316
ReactNoop . render ( flightModel . foo ) ;
1292
1317
} ) ;
@@ -1301,9 +1326,12 @@ describe('ReactFlight', () => {
1301
1326
1302
1327
// @gate enableServerContext
1303
1328
it ( 'takes ServerContext from the client for refetching use cases' , async ( ) => {
1304
- const ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1329
+ const ServerContext = createServerServerContext (
1330
+ 'ServerContext' ,
1331
+ 'default' ,
1332
+ ) ;
1305
1333
function Bar ( ) {
1306
- return < span > { React . useContext ( ServerContext ) } </ span > ;
1334
+ return < span > { ReactServer . useContext ( ServerContext ) } </ span > ;
1307
1335
}
1308
1336
const transport = ReactNoopFlightServer . render ( < Bar /> , {
1309
1337
context : [ [ 'ServerContext' , 'Override' ] ] ,
@@ -1321,7 +1349,7 @@ describe('ReactFlight', () => {
1321
1349
let ServerContext ;
1322
1350
function inlineLazyServerContextInitialization ( ) {
1323
1351
if ( ! ServerContext ) {
1324
- ServerContext = createServerContext ( 'ServerContext' , 'default' ) ;
1352
+ ServerContext = createServerServerContext ( 'ServerContext' , 'default' ) ;
1325
1353
}
1326
1354
return ServerContext ;
1327
1355
}
@@ -1346,7 +1374,7 @@ describe('ReactFlight', () => {
1346
1374
return (
1347
1375
< article >
1348
1376
< div >
1349
- { React . useContext ( inlineLazyServerContextInitialization ( ) ) }
1377
+ { ReactServer . useContext ( inlineLazyServerContextInitialization ( ) ) }
1350
1378
</ div >
1351
1379
< Baz />
1352
1380
</ article >
@@ -1381,11 +1409,17 @@ describe('ReactFlight', () => {
1381
1409
// Reset all modules, except flight-modules which keeps the registry of Client Components
1382
1410
const flightModules = require ( 'react-noop-renderer/flight-modules' ) ;
1383
1411
jest . resetModules ( ) ;
1412
+ jest . mock ( 'react' , ( ) => require ( 'react/react.shared-subset' ) ) ;
1384
1413
jest . mock ( 'react-noop-renderer/flight-modules' , ( ) => flightModules ) ;
1385
1414
1415
+ ReactServer = require ( 'react' ) ;
1416
+ ReactNoopFlightServer = require ( 'react-noop-renderer/flight-server' ) ;
1417
+
1418
+ __unmockReact ( ) ;
1419
+ jest . resetModules ( ) ;
1420
+ jest . mock ( 'react-noop-renderer/flight-modules' , ( ) => flightModules ) ;
1386
1421
React = require ( 'react' ) ;
1387
1422
ReactNoop = require ( 'react-noop-renderer' ) ;
1388
- ReactNoopFlightServer = require ( 'react-noop-renderer/flight-server' ) ;
1389
1423
ReactNoopFlightClient = require ( 'react-noop-renderer/flight-client' ) ;
1390
1424
act = require ( 'internal-test-utils' ) . act ;
1391
1425
Scheduler = require ( 'scheduler' ) ;
0 commit comments