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

Jump to bottom

[Fizz] Replay Postponed Paths #27379

Merged
merged 7 commits into from
Sep 15, 2023
Merged

[Fizz] Replay Postponed Paths #27379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a238c93
Enable tests
sebmarkbage Sep 13, 2023
31823a1
Split Task into RenderTask and ReplayTask
sebmarkbage Sep 7, 2023
7d2ed27
Replay elements down the parent path that matches
sebmarkbage Sep 7, 2023
38132a5
Resume slots from the children array
sebmarkbage Sep 14, 2023
2808e87
Replay implicit fragments in nested array
sebmarkbage Sep 14, 2023
cf125d2
Error codes
sebmarkbage Sep 14, 2023
5b276c6
Posponing directly inside a Suspense boundary needs a special case
sebmarkbage Sep 13, 2023
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
2 changes: 1 addition & 1 deletion packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6365,6 +6365,6 @@ describe('ReactDOMFizzServer', () => {
resumed.pipe(writable);
});

// TODO: expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
});
});
137 changes: 133 additions & 4 deletions packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
}
const temp = document.createElement('div');
temp.innerHTML = result;
insertNodesAndExecuteScripts(temp, container, null);
await insertNodesAndExecuteScripts(temp, container, null);
}

// @gate experimental
Expand Down Expand Up @@ -490,7 +490,51 @@ describe('ReactDOMFizzStaticBrowser', () => {

await readIntoContainer(resumed);

// TODO: expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
expect(getVisibleChildren(container)).toEqual(
<div>{['Hello', 'World']}</div>,
);
});

// @gate enablePostpone
it('supports postponing in prerender and resuming with a prefix', async () => {
let prerendering = true;
function Postpone() {
if (prerendering) {
React.unstable_postpone();
}
return 'World';
}

function App() {
return (
<div>
<Suspense fallback="Loading...">
Hello
<Postpone />
</Suspense>
</div>
);
}

const prerendered = await ReactDOMFizzStatic.prerender(<App />);
expect(prerendered.postponed).not.toBe(null);

prerendering = false;

const resumed = await ReactDOMFizzServer.resume(
<App />,
prerendered.postponed,
);

await readIntoContainer(prerendered.prelude);

expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

await readIntoContainer(resumed);

expect(getVisibleChildren(container)).toEqual(
<div>{['Hello', 'World']}</div>,
);
});

// @gate enablePostpone
Expand All @@ -500,7 +544,51 @@ describe('ReactDOMFizzStaticBrowser', () => {
React.unstable_postpone();
});

function App() {
return (
<div>
<Suspense fallback="Loading...">
Hi
{prerendering ? Hole : 'Hello'}
</Suspense>
</div>
);
}

const prerendered = await ReactDOMFizzStatic.prerender(<App />);
expect(prerendered.postponed).not.toBe(null);

prerendering = false;

const resumed = await ReactDOMFizzServer.resume(
<App />,
prerendered.postponed,
);

await readIntoContainer(prerendered.prelude);

expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

await readIntoContainer(resumed);

expect(getVisibleChildren(container)).toEqual(
<div>
{'Hi'}
{'Hello'}
</div>,
);
});

// @gate enablePostpone
it('supports postponing in a nested array', async () => {
let prerendering = true;
const Hole = React.lazy(async () => {
React.unstable_postpone();
});
function Postpone() {
if (prerendering) {
React.unstable_postpone();
}
return 'Hello';
}

Expand All @@ -509,7 +597,48 @@ describe('ReactDOMFizzStaticBrowser', () => {
<div>
<Suspense fallback="Loading...">
Hi
{prerendering ? Hole : <Postpone />}
{[<Postpone key="key" />, prerendering ? Hole : 'World']}
</Suspense>
</div>
);
}

const prerendered = await ReactDOMFizzStatic.prerender(<App />);
expect(prerendered.postponed).not.toBe(null);

prerendering = false;

const resumed = await ReactDOMFizzServer.resume(
<App />,
prerendered.postponed,
);

await readIntoContainer(prerendered.prelude);

expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

await readIntoContainer(resumed);

expect(getVisibleChildren(container)).toEqual(
<div>{['Hi', 'Hello', 'World']}</div>,
);
});

// @gate enablePostpone
it('supports postponing in lazy as a direct child', async () => {
let prerendering = true;
const Hole = React.lazy(async () => {
React.unstable_postpone();
});
function Postpone() {
return prerendering ? Hole : 'Hello';
}

function App() {
return (
<div>
<Suspense fallback="Loading...">
<Postpone key="key" />
</Suspense>
</div>
);
Expand All @@ -531,7 +660,7 @@ describe('ReactDOMFizzStaticBrowser', () => {

await readIntoContainer(resumed);

// TODO: expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
});

// @gate enablePostpone
Expand Down
Loading