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.

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

Lazily freeze in case anything in the currently initializing chunk is blocked #29139

Merged
merged 3 commits into from
May 17, 2024
Merged

Lazily freeze in case anything in the currently initializing chunk is blocked #29139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef0c6fb
[Flight] Add failing test to reproduce issue with `Object.freeze`
unstubbable May 17, 2024
f31e8e1
Lazily freeze in case anything in the currently initializing chunk is…
sebmarkbage May 17, 2024
9304ef9
Wait if there's a cycle
sebmarkbage May 17, 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
7 changes: 6 additions & 1 deletion packages/react-client/src/ReactFlightClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -641,7 +641,12 @@ function createElement(
}
// TODO: We should be freezing the element but currently, we might write into
// _debugInfo later. We could move it into _store which remains mutable.
Object.freeze(element.props);
if (initializingChunkBlockedModel !== null) {
const freeze = Object.freeze.bind(Object, element.props);
initializingChunk.then(freeze, freeze);
Copy link
Contributor

@lubieowoce lubieowoce May 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Q: is there a possibility that this callback would run before a createModelResolver callback, in which case we'd still try to mutate a frozen object? or is the inside-out traversal order of the JSON reviver protecting us from that

Copy link
Collaborator Author

@sebmarkbage sebmarkbage May 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This waits until the entire chunk that was being parsed is resolved which means that everything inside it has to be initialized already. Otherwise other user spaces listeners could observer the intermediate state.

However, this does mean that an early listener to this chunk can observe it before we freeze it. Which is actually quite likely since initialization happens lazily in the first place. If that listener is the typical case of React listening then it's just a ping to schedule a rerender and the rerender happens after. You could listen yourself but this is an edge case that you need to wait for the blocked model in the first place and it's dev only and you might end up hitting the freeze later if you do something similar anyway.

} else {
Object.freeze(element.props);
}
}
return element;
}
Expand Down
49 changes: 49 additions & 0 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 @@ -198,6 +198,55 @@ describe('ReactFlightDOMBrowser', () => {
});
});

it('should resolve client components (with async chunks) when referenced in props', async () => {
let resolveClientComponentChunk;

const ClientOuter = clientExports(function ClientOuter({
Component,
children,
}) {
return <Component>{children}</Component>;
});

const ClientInner = clientExports(
function ClientInner({children}) {
return <span>{children}</span>;
},
'42',
'/test.js',
new Promise(resolve => (resolveClientComponentChunk = resolve)),
);

function Server() {
return <ClientOuter Component={ClientInner}>Hello, World!</ClientOuter>;
}

const stream = ReactServerDOMServer.renderToReadableStream(
<Server />,
webpackMap,
);

function ClientRoot({response}) {
return use(response);
}

const response = ReactServerDOMClient.createFromReadableStream(stream);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

await act(() => {
root.render(<ClientRoot response={response} />);
});

expect(container.innerHTML).toBe('');

await act(() => {
resolveClientComponentChunk();
});

expect(container.innerHTML).toBe('<span>Hello, World!</span>');
});

it('should progressively reveal server components', async () => {
let reportedErrors = [];

Expand Down
5 changes: 5 additions & 0 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 @@ -69,10 +69,15 @@ exports.clientExports = function clientExports(
moduleExports,
chunkId,
chunkFilename,
blockOnChunk,
) {
const chunks = [];
if (chunkId) {
chunks.push(chunkId, chunkFilename);

if (blockOnChunk) {
webpackChunkMap[chunkId] = blockOnChunk;
}
}
const idx = '' + webpackModuleIdx++;
webpackClientModules[idx] = moduleExports;
Expand Down