Skip to content

Commit fd248c9

Browse files
committed
Try in fixture
1 parent 4bbbfe7 commit fd248c9

File tree

5 files changed

+37
-22
lines changed

5 files changed

+37
-22
lines changed

fixtures/view-transition/server/render.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export default function render(url, res) {
2323
const {pipe, abort} = renderToPipeableStream(
2424
<App assets={assets} initialURL={url} />,
2525
{
26+
// TODO: Temporary hack. Detect from attributes instead.
27+
bootstrapScriptContent: 'window._useVT = true;',
2628
bootstrapScripts: [assets['main.js']],
2729
onShellReady() {
2830
// If something errored before we started streaming, we set the error code appropriately.

fixtures/view-transition/src/components/Page.js

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React, {
88
useId,
99
useOptimistic,
1010
startTransition,
11+
Suspense,
1112
} from 'react';
1213

1314
import {createPortal} from 'react-dom';
@@ -60,6 +61,12 @@ function Id() {
6061
return <span id={useId()} />;
6162
}
6263

64+
let wait;
65+
function Suspend() {
66+
if (!wait) wait = sleep(500);
67+
return React.use(wait);
68+
}
69+
6370
export default function Page({url, navigate}) {
6471
const [renderedUrl, optimisticNavigate] = useOptimistic(
6572
url,
@@ -93,7 +100,7 @@ export default function Page({url, navigate}) {
93100
// a flushSync will.
94101
// Promise.resolve().then(() => {
95102
// flushSync(() => {
96-
setCounter(c => c + 10);
103+
// setCounter(c => c + 10);
97104
// });
98105
// });
99106
}, [show]);
@@ -193,18 +200,23 @@ export default function Page({url, navigate}) {
193200
<div>!!</div>
194201
</ViewTransition>
195202
</Activity>
196-
<p>these</p>
197-
<p>rows</p>
198-
<p>exist</p>
199-
<p>to</p>
200-
<p>test</p>
201-
<p>scrolling</p>
202-
<p>content</p>
203-
<p>out</p>
204-
<p>of</p>
205-
{portal}
206-
<p>the</p>
207-
<p>viewport</p>
203+
<Suspense fallback="Loading">
204+
<ViewTransition>
205+
<p>these</p>
206+
<p>rows</p>
207+
<p>exist</p>
208+
<p>to</p>
209+
<p>test</p>
210+
<p>scrolling</p>
211+
<p>content</p>
212+
<p>out</p>
213+
<p>of</p>
214+
{portal}
215+
<p>the</p>
216+
<p>viewport</p>
217+
<Suspend />
218+
</ViewTransition>
219+
</Suspense>
208220
{show ? <Component /> : null}
209221
</div>
210222
</ViewTransition>

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -934,7 +934,7 @@ export function getSuspenseFallbackFormatContext(
934934
resumableState: ResumableState,
935935
parentContext: FormatContext,
936936
): FormatContext {
937-
if (parentContext & UPDATE_SCOPE) {
937+
if (parentContext.tagScope & UPDATE_SCOPE) {
938938
// If we're rendering a Suspense in fallback mode and that is inside a ViewTransition,
939939
// which hasn't disabled updates, then revealing it might animate the parent so we need
940940
// the ViewTransition instructions.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,15 @@ export function revealCompletedBoundariesWithViewTransitions(revealBoundaries) {
8989
existingTransition.finished.then(window['$RV'], window['$RV']);
9090
return;
9191
}
92-
const shouldStartViewTransition = window._useVT; // TODO: Detect.
92+
const shouldStartViewTransition = window['_useVT']; // TODO: Detect.
9393
if (shouldStartViewTransition) {
94-
const transition = (document['__reactViewTransition'] =
95-
document.startViewTransition({
96-
update: revealBoundaries,
97-
types: [], // TODO: Add a hard coded type for Suspense reveals.
98-
}));
99-
transition.finally(() => {
94+
const transition = (document['__reactViewTransition'] = document[
95+
'startViewTransition'
96+
]({
97+
update: revealBoundaries,
98+
types: [], // TODO: Add a hard coded type for Suspense reveals.
99+
}));
100+
transition.finished.finally(() => {
100101
if (document['__reactViewTransition'] === transition) {
101102
document['__reactViewTransition'] = null;
102103
}

0 commit comments

Comments
 (0)