File tree Expand file tree Collapse file tree 2 files changed +54
-0
lines changed
packages/react-server-dom-webpack/src/__tests__ Expand file tree Collapse file tree 2 files changed +54
-0
lines changed Original file line number Diff line number Diff line change @@ -198,6 +198,55 @@ describe('ReactFlightDOMBrowser', () => {
198198 } ) ;
199199 } ) ;
200200
201+ it ( 'should resolve client components (with async chunks) when referenced in props' , async ( ) => {
202+ let resolveClientComponentChunk ;
203+
204+ const ClientOuter = clientExports ( function ClientOuter ( {
205+ Component,
206+ children,
207+ } ) {
208+ return < Component > { children } </ Component > ;
209+ } ) ;
210+
211+ const ClientInner = clientExports (
212+ function ClientInner ( { children} ) {
213+ return < span > { children } </ span > ;
214+ } ,
215+ '42' ,
216+ '/test.js' ,
217+ new Promise ( resolve => ( resolveClientComponentChunk = resolve ) ) ,
218+ ) ;
219+
220+ function Server ( ) {
221+ return < ClientOuter Component = { ClientInner } > Hello, World!</ ClientOuter > ;
222+ }
223+
224+ const stream = ReactServerDOMServer . renderToReadableStream (
225+ < Server /> ,
226+ webpackMap ,
227+ ) ;
228+
229+ function ClientRoot ( { response} ) {
230+ return use ( response ) ;
231+ }
232+
233+ const response = ReactServerDOMClient . createFromReadableStream ( stream ) ;
234+ const container = document . createElement ( 'div' ) ;
235+ const root = ReactDOMClient . createRoot ( container ) ;
236+
237+ await act ( ( ) => {
238+ root . render ( < ClientRoot response = { response } /> ) ;
239+ } ) ;
240+
241+ expect ( container . innerHTML ) . toBe ( '' ) ;
242+
243+ await act ( ( ) => {
244+ resolveClientComponentChunk ( ) ;
245+ } ) ;
246+
247+ expect ( container . innerHTML ) . toBe ( '<span>Hello, World!</span>' ) ;
248+ } ) ;
249+
201250 it ( 'should progressively reveal server components' , async ( ) => {
202251 let reportedErrors = [ ] ;
203252
Original file line number Diff line number Diff line change @@ -69,10 +69,15 @@ exports.clientExports = function clientExports(
6969 moduleExports ,
7070 chunkId ,
7171 chunkFilename ,
72+ blockOnChunk ,
7273) {
7374 const chunks = [ ] ;
7475 if ( chunkId ) {
7576 chunks . push ( chunkId , chunkFilename ) ;
77+
78+ if ( blockOnChunk ) {
79+ webpackChunkMap [ chunkId ] = blockOnChunk ;
80+ }
7681 }
7782 const idx = '' + webpackModuleIdx ++ ;
7883 webpackClientModules [ idx ] = moduleExports ;
You can’t perform that action at this time.
0 commit comments