Skip to content

Commit 3926e24

Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash using ViewTransition as a direct child with `revealOrder="together"` ``` TypeError: Cannot read properties of null (reading 'autoName') 33 | return props.name; 34 | } > 35 | if (instance.autoName !== null) { | ^ 36 | return instance.autoName; 37 | } ``` When ViewTransition is direct child of SuspenseList, the second render pass calls resetChildFibers, setting stateNode to null. Other fibers create stateNode in completeWork. ViewTransition does not, so stateNode is lost. Followed the pattern used for Offscreen to update stateNode in beginWork if it is null. Also added a regression test.
1 parent 6baff7a commit 3926e24

2 files changed

Lines changed: 192 additions & 0 deletions

File tree

‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @emails react-core
8+
*/
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});

‎packages/react-reconciler/src/ReactFiberBeginWork.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Fix ViewTransition null stateNode with SuspenseList (#35520) · react/react@3926e24 · GitHub
Skip to content
Commit 3926e24
Browse files
jackpopejackpope
authored
Fix ViewTransition null stateNode with SuspenseList (#35520)
I was experimenting with animations in SuspenseList and hit a crash
using ViewTransition as a direct child with `revealOrder="together"`
```
TypeError: Cannot read properties of null (reading 'autoName')
33 | return props.name;
34 | }
> 35 | if (instance.autoName !== null) {
| ^
36 | return instance.autoName;
37 | }
```
When ViewTransition is direct child of SuspenseList, the second render
pass calls resetChildFibers, setting stateNode to null. Other fibers
create stateNode in completeWork. ViewTransition does not, so stateNode
is lost.
Followed the pattern used for Offscreen to update stateNode in beginWork
if it is null.
Also added a regression test.
1 parent 6baff7a commit 3926e24
2 files changed
Lines changed: 192 additions & 0 deletions
File tree
‎packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js‎
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
 * Copyright (c) Meta Platforms, Inc. and affiliates.
3+
 *
4+
 * This source code is licensed under the MIT license found in the
5+
 * LICENSE file in the root directory of this source tree.
6+
 *
7+
 * @emails react-core
8+
 */
9+
10+
'use strict';
11+
12+
letReact;
13+
letReactDOMClient;
14+
letSuspense;
15+
letSuspenseList;
16+
letViewTransition;
17+
letact;
18+
letassertLog;
19+
letScheduler;
20+
lettextCache;
21+
22+
describe('ReactDOMViewTransition',()=>{
23+
letcontainer;
24+
25+
beforeEach(()=>{
26+
jest.resetModules();
27+
React=require('react');
28+
ReactDOMClient=require('react-dom/client');
29+
Scheduler=require('scheduler');
30+
act=require('internal-test-utils').act;
31+
assertLog=require('internal-test-utils').assertLog;
32+
Suspense=React.Suspense;
33+
ViewTransition=React.ViewTransition;
34+
if(gate(flags=>flags.enableSuspenseList)){
35+
SuspenseList=React.unstable_SuspenseList;
36+
}
37+
container=document.createElement('div');
38+
document.body.appendChild(container);
39+
40+
textCache=newMap();
41+
});
42+
43+
afterEach(()=>{
44+
document.body.removeChild(container);
45+
});
46+
47+
functionresolveText(text){
48+
constrecord=textCache.get(text);
49+
if(record===undefined){
50+
constnewRecord={
51+
status: 'resolved',
52+
value: text,
53+
};
54+
textCache.set(text,newRecord);
55+
}elseif(record.status==='pending'){
56+
constthenable=record.value;
57+
record.status='resolved';
58+
record.value=text;
59+
thenable.pings.forEach(t=>t());
60+
}
61+
}
62+
63+
functionreadText(text){
64+
constrecord=textCache.get(text);
65+
if(record!==undefined){
66+
switch(record.status){
67+
case'pending':
68+
Scheduler.log(`Suspend! [${text}]`);
69+
throwrecord.value;
70+
case'rejected':
71+
throwrecord.value;
72+
case'resolved':
73+
returnrecord.value;
74+
}
75+
}else{
76+
Scheduler.log(`Suspend! [${text}]`);
77+
constthenable={
78+
pings: [],
79+
then(resolve){
80+
if(newRecord.status==='pending'){
81+
thenable.pings.push(resolve);
82+
}else{
83+
Promise.resolve().then(()=>resolve(newRecord.value));
84+
}
85+
},
86+
};
87+
88+
constnewRecord={
89+
status: 'pending',
90+
value: thenable,
91+
};
92+
textCache.set(text,newRecord);
93+
94+
throwthenable;
95+
}
96+
}
97+
98+
functionText({text}){
99+
Scheduler.log(text);
100+
returntext;
101+
}
102+
103+
functionAsyncText({text}){
104+
readText(text);
105+
Scheduler.log(text);
106+
returntext;
107+
}
108+
109+
// @gate enableSuspenseList
110+
it('handles ViewTransition wrapping Suspense inside SuspenseList',async()=>{
111+
functionCard({id}){
112+
return(
113+
<div>
114+
<AsyncTexttext={`Card ${id}`}/>
115+
</div>
116+
);
117+
}
118+
119+
functionCardSkeleton({n}){
120+
return<Texttext={`Skeleton ${n}`}/>;
121+
}
122+
123+
functionApp(){
124+
return(
125+
<div>
126+
<SuspenseListrevealOrder="together">
127+
<ViewTransition>
128+
<Suspensefallback={<CardSkeletonn={1}/>}>
129+
<Cardid={1}/>
130+
</Suspense>
131+
</ViewTransition>
132+
<ViewTransition>
133+
<Suspensefallback={<CardSkeletonn={2}/>}>
134+
<Cardid={2}/>
135+
</Suspense>
136+
</ViewTransition>
137+
<ViewTransition>
138+
<Suspensefallback={<CardSkeletonn={3}/>}>
139+
<Cardid={3}/>
140+
</Suspense>
141+
</ViewTransition>
142+
</SuspenseList>
143+
</div>
144+
);
145+
}
146+
147+
constroot=ReactDOMClient.createRoot(container);
148+
149+
// Initial render - all cards should suspend
150+
awaitact(()=>{
151+
root.render(<App/>);
152+
});
153+
154+
assertLog([
155+
'Suspend! [Card 1]',
156+
'Skeleton 1',
157+
'Suspend! [Card 2]',
158+
'Skeleton 2',
159+
'Suspend! [Card 3]',
160+
'Skeleton 3',
161+
'Skeleton 1',
162+
'Skeleton 2',
163+
'Skeleton 3',
164+
]);
165+
166+
awaitact(()=>{
167+
resolveText('Card 1');
168+
resolveText('Card 2');
169+
resolveText('Card 3');
170+
});
171+
172+
assertLog(['Card 1','Card 2','Card 3']);
173+
174+
// All cards should be visible
175+
expect(container.textContent).toContain('Card 1');
176+
expect(container.textContent).toContain('Card 2');
177+
expect(container.textContent).toContain('Card 3');
178+
});
179+
});
‎packages/react-reconciler/src/ReactFiberBeginWork.js‎
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
importtype{UpdateQueue}from'./ReactFiberClassUpdateQueue';
4747
importtype{RootState}from'./ReactFiberRoot';
4848
importtype{TracingMarkerInstance}from'./ReactFiberTracingMarkerComponent';
49+
importtype{ViewTransitionState}from'./ReactFiberViewTransitionComponent';
4950

5051
import{
5152
markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
35663567
workInProgress: Fiber,
35673568
renderLanes: Lanes,
35683569
){
3570+
if(workInProgress.stateNode===null){
3571+
// We previously reset the work-in-progress.
3572+
// We need to create a new ViewTransitionState instance.
3573+
constinstance: ViewTransitionState={
3574+
autoName: null,
3575+
paired: null,
3576+
clones: null,
3577+
ref: null,
3578+
};
3579+
workInProgress.stateNode=instance;
3580+
}
3581+
35693582
constpendingProps: ViewTransitionProps=workInProgress.pendingProps;
35703583
if(pendingProps.name!=null&&pendingProps.name!=='auto'){
35713584
// Explicitly named boundary. We track it so that we can pair it up with another explicit
0 commit comments
Comments
 (0)