Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Flight] Respect async flag in client manifest #30959

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Sep 13, 2024
Merged

[Flight] Respect async flag in client manifest #30959

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
efe1856
WIP turbopack
unstubbable Sep 13, 2024
0a8d96d
Use options param for `clientExports` in `WebpackMock`
unstubbable Sep 13, 2024
f69f2f9
WIP webpack
unstubbable Sep 13, 2024
7dc6a10
Finalize error message
unstubbable Sep 13, 2024
4ea5db0
Revert "Use options param for `clientExports` in `WebpackMock`"
unstubbable Sep 13, 2024
3e4ee4a
Use `clientExportsESM` for webpack
unstubbable Sep 13, 2024
ffa8187
Use `clientExportsESM` for turbopack
unstubbable Sep 13, 2024
6cb770b
Add missing space to error message
unstubbable Sep 13, 2024
cc98c20
Re-add `async` to `ImportManifestEntry` type
unstubbable Sep 13, 2024
c1b4272
Fix wrong usage of `exports`
unstubbable Sep 13, 2024
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
Prev Previous commit
Next Next commit
Use options param for clientExports in WebpackMock
  • Loading branch information
@unstubbable
unstubbable committed Sep 13, 2024
commit 0a8d96d46fabbbabefd92f11a76177fb04c8c8d2
123 changes: 90 additions & 33 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,9 +213,15 @@ describe('ReactFlightDOMBrowser', () => {
function ClientInner({children}) {
return <span>{children}</span>;
},
'42',
'/test.js',
new Promise(resolve => (resolveClientComponentChunk = resolve)),
{
chunk: {
id: '42',
filename: '/test.js',
promise: new Promise(
resolve => (resolveClientComponentChunk = resolve),
),
},
},
);

function Server() {
Expand Down Expand Up @@ -258,9 +264,15 @@ describe('ReactFlightDOMBrowser', () => {
function ClientInner({value}) {
return <pre>{JSON.stringify(value)}</pre>;
},
'42',
'/test.js',
new Promise(resolve => (resolveClientComponentChunk = resolve)),
{
chunk: {
id: '42',
filename: '/test.js',
promise: new Promise(
resolve => (resolveClientComponentChunk = resolve),
),
},
},
);

function Server({value}) {
Expand Down Expand Up @@ -309,9 +321,15 @@ describe('ReactFlightDOMBrowser', () => {
function ClientInner({value}) {
return <pre>{JSON.stringify(value)}</pre>;
},
'42',
'/test.js',
new Promise(resolve => (resolveClientComponentChunk = resolve)),
{
chunk: {
id: '42',
filename: '/test.js',
promise: new Promise(
resolve => (resolveClientComponentChunk = resolve),
),
},
},
);

function Server({value}) {
Expand Down Expand Up @@ -355,12 +373,15 @@ describe('ReactFlightDOMBrowser', () => {
it('should resolve deduped objects that are themselves blocked', async () => {
let resolveClientComponentChunk;

const Client = clientExports(
[4, 5],
'42',
'/test.js',
new Promise(resolve => (resolveClientComponentChunk = resolve)),
);
const Client = clientExports([4, 5], {
chunk: {
id: '42',
filename: '/test.js',
promise: new Promise(
resolve => (resolveClientComponentChunk = resolve),
),
},
});

const shared = [1, 2, 3, Client];

Expand Down Expand Up @@ -407,9 +428,15 @@ describe('ReactFlightDOMBrowser', () => {
function ClientOuter({children, value}) {
return children;
},
'1',
'/outer.js',
new Promise(resolve => (resolveOuterClientComponentChunk = resolve)),
{
chunk: {
id: '1',
filename: '/outer.js',
promise: new Promise(
resolve => (resolveOuterClientComponentChunk = resolve),
),
},
},
);

function PassthroughServerComponent({children}) {
Expand All @@ -420,9 +447,15 @@ describe('ReactFlightDOMBrowser', () => {
function ClientInner({children}) {
return JSON.stringify(children);
},
'2',
'/inner.js',
new Promise(resolve => (resolveInnerClientComponentChunk = resolve)),
{
chunk: {
id: '2',
filename: '/inner.js',
promise: new Promise(
resolve => (resolveInnerClientComponentChunk = resolve),
),
},
},
);

const value = {};
Expand Down Expand Up @@ -475,18 +508,30 @@ describe('ReactFlightDOMBrowser', () => {
function FooClient({children}) {
return JSON.stringify(children);
},
'1',
'/foo.js',
new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
{
chunk: {
id: '1',
filename: '/foo.js',
promise: new Promise(
resolve => (resolveFooClientComponentChunk = resolve),
),
},
},
);

const BarClient = clientExports(
function BarClient() {
return 'not used';
},
'2',
'/bar.js',
new Promise(resolve => (resolveBarClientComponentChunk = resolve)),
{
chunk: {
id: '2',
filename: '/bar.js',
promise: new Promise(
resolve => (resolveBarClientComponentChunk = resolve),
),
},
},
);

const shared = {foo: 1};
Expand Down Expand Up @@ -539,9 +584,15 @@ describe('ReactFlightDOMBrowser', () => {
function Foo({children, item}) {
return children;
},
'1',
'/foo.js',
new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
{
chunk: {
id: '1',
filename: '/foo.js',
promise: new Promise(
resolve => (resolveFooClientComponentChunk = resolve),
),
},
},
);

const shared = <div />;
Expand Down Expand Up @@ -590,9 +641,15 @@ describe('ReactFlightDOMBrowser', () => {
function Foo({children, item}) {
return children;
},
'1',
'/foo.js',
new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
{
chunk: {
id: '1',
filename: '/foo.js',
promise: new Promise(
resolve => (resolveFooClientComponentChunk = resolve),
),
},
},
);

const shared = <div />;
Expand Down
16 changes: 6 additions & 10 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,9 @@ describe('ReactFlightDOMNode', () => {
}
// The Client build may not have the same IDs as the Server bundles for the same
// component.
const ClientComponentOnTheClient = clientExports(
ClientComponent,
123,
'path/to/chunk.js',
);
const ClientComponentOnTheClient = clientExports(ClientComponent, {
chunk: {id: 123, filename: 'path/to/chunk.js'},
});
const ClientComponentOnTheServer = clientExports(ClientComponent);

// In the SSR bundle this module won't exist. We simulate this by deleting it.
Expand Down Expand Up @@ -236,11 +234,9 @@ describe('ReactFlightDOMNode', () => {
}
// The Client build may not have the same IDs as the Server bundles for the same
// component.
const ClientComponentOnTheClient = clientExports(
ClientComponent,
123,
'path/to/chunk.js',
);
const ClientComponentOnTheClient = clientExports(ClientComponent, {
chunk: {id: 123, filename: 'path/to/chunk.js'},
});
const ClientComponentOnTheServer = clientExports(ClientComponent);

// In the SSR bundle this module won't exist. We simulate this by deleting it.
Expand Down
18 changes: 11 additions & 7 deletions packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,20 @@ exports.clientModuleError = function clientModuleError(moduleError) {

exports.clientExports = function clientExports(
moduleExports,
chunkId,
chunkFilename,
blockOnChunk,
options?: {
chunk?: {
id: string | number,
filename: string,
promise?: Promise,
},
} = {},
) {
const chunks = [];
if (chunkId) {
chunks.push(chunkId, chunkFilename);
if (options.chunk) {
chunks.push(options.chunk.id, options.chunk.filename);

if (blockOnChunk) {
webpackChunkMap[chunkId] = blockOnChunk;
if (options.chunk.promise) {
webpackChunkMap[options.chunk.id] = options.chunk.promise;
}
}
const idx = '' + webpackModuleIdx++;
Expand Down