[pull] main from react:main#608

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
pull merged 3 commits into from
Jul 20, 2026
Merged

[pull] main from react:main #608

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
689a4fa
[Fizz] Extend stack overflow recovery to retries (#36977)
jackpope Jul 19, 2026
2ba07c6
[DOM] Scroll to text siblings of empty Fragments instead of the paren…
eps1lon Jul 19, 2026
8384090
[Fizz] Support nested enter/exit ViewTransition animations (#36917)
jackpope Jul 19, 2026
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: 7 additions & 0 deletions fixtures/view-transition/server/render.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
// Force resuspend on every load
resetFeedReveal();
resetPageReveal();
resetNestedReveal();
res.socket.on('error', error => {
// Log fatal errors
console.error('Fatal', error);
Expand Down
49 changes: 49 additions & 0 deletions fixtures/view-transition/src/components/NestedParentExit.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
cursor: default;
}

.skeleton-line {
background: #ddd;
border-radius: 4px;
}

.skeleton-title {
height: 15px;
width: 60%;
margin: 0 0 0.35rem;
}

.skeleton-body {
height: 13px;
width: 90%;
}

@keyframes nested-feed-enter {
from {
opacity: 0;
translate: 0 20px;
}
to {
opacity: 1;
translate: 0 0;
}
}

::view-transition-new(.nested-feed-enter) {
animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

::view-transition-old(.nested-feed-exit) {
animation: nested-feed-exit 300ms ease-in forwards;
}
72 changes: 61 additions & 11 deletions fixtures/view-transition/src/components/NestedParentExit.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
ViewTransition,
Suspense,
use,
useState,
useOptimistic,
startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
{id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
feedRevealPromise = null;
}

function FeedReveal() {
if (feedRevealPromise === null) {
feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
}
use(feedRevealPromise);
return null;
}

function FeedSkeleton() {
return (
<ViewTransition exit="nested-feed-exit">
<div className="nested-feed">
{items.map(item => (
// Mirrors FeedItem: each skeleton row relays the exit (level 1), and
// its title/body placeholders relay again (level 2) so they animate
// out separately from the row — up and to the right. This exercises
// the nested parentExit relay through the SSR streaming reveal.
<ViewTransition key={item.id} parentExit="nested-exit-left">
<div className="feed-item feed-item-skeleton">
<ViewTransition parentExit="nested-title-exit-up">
<div className="feed-item-title skeleton-line skeleton-title" />
</ViewTransition>
<ViewTransition parentExit="nested-body-exit-right">
<div className="skeleton-line skeleton-body" />
</ViewTransition>
</div>
</ViewTransition>
))}
</div>
</ViewTransition>
);
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
// eslint-disable-next-line no-console
console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
{selected ? (
<Detail item={selected} onBack={goBack} />
) : (
<>
{items.map((item, index) => (
<FeedItem
key={item.id}
item={item}
index={index}
activeIndex={activeIndex}
onSelect={goToDetail}
/>
))}
</>
<Suspense fallback={<FeedSkeleton />}>
{/* The entering ViewTransition is the direct child of the
Suspense content, so it activates an enter scope and the
feed items below relay parentEnter (emitting
vt-parent-enter annotations in Fizz). */}
<ViewTransition enter="nested-feed-enter">
<div className="nested-feed">
{items.map((item, index) => (
<FeedItem
key={item.id}
item={item}
index={index}
activeIndex={activeIndex}
onSelect={goToDetail}
/>
))}
<FeedReveal />
</div>
</ViewTransition>
</Suspense>
)}
</div>
</ViewTransition>
Expand Down
5 changes: 5 additions & 0 deletions fixtures/view-transition/src/components/NestedReveal.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
delay1 = undefined;
delay2 = undefined;
}

export default function NestedReveal({}) {
if (!delay1) {
delay1 = sleep(100);
Expand Down
43 changes: 42 additions & 1 deletion fixtures/view-transition/src/components/Page.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
top: 10px;
left: 360px;
border: 1px solid #ccc;
}
}

.examples {
display: grid;
/* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
overflowing once card + content padding is subtracted. */
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 20px;
align-items: start;
width: 100%;
box-sizing: border-box;
padding: 10px;
}

.example-card {
display: flex;
flex-direction: column;
min-height: 320px;
background: #eee;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
margin: 0 0 16px;
font-size: 15px;
font-weight: 600;
color: #333;
}

.example-card-content {
flex: 1;
width: 100%;
background: #fff;
border-radius: 10px;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
[pull] main from react:main#608

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

pull
merged 3 commits into

from

Jul 20, 2026
 Merged


[pull] main from react:main
#608
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
689a4fa

[Fizz] Extend stack overflow recovery to retries (#36977)


jackpope Jul 19, 2026
2ba07c6

[DOM] Scroll to text siblings of empty Fragments instead of the paren…


eps1lon Jul 19, 2026
8384090

[Fizz] Support nested enter/exit ViewTransition animations (#36917)


jackpope Jul 19, 2026

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: 7 additions & 0 deletions
fixtures/view-transition/server/render.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,9 @@ import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';

import App from '../src/components/App.js';
import {resetFeedReveal} from '../src/components/NestedParentExit.js';
import {resetPageReveal} from '../src/components/Page.js';
import {resetNestedReveal} from '../src/components/NestedReveal.js';

let assets;
if (process.env.NODE_ENV === 'development') {
Expand All@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
}

export default function render(url, res) {
 // Force resuspend on every load
 resetFeedReveal();
 resetPageReveal();
 resetNestedReveal();
 res.socket.on('error', error => {
 // Log fatal errors
 console.error('Fatal', error);
Expand Down

49 changes: 49 additions & 0 deletions
fixtures/view-transition/src/components/NestedParentExit.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -210,3 +210,52 @@
::view-transition-old(.nested-back-btn-exit):only-child {
 animation: nested-back-btn-exit 200ms ease-in forwards;
}

/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
.feed-item-skeleton {
 cursor: default;
}

.skeleton-line {
 background: #ddd;
 border-radius: 4px;
}

.skeleton-title {
 height: 15px;
 width: 60%;
 margin: 0 0 0.35rem;
}

.skeleton-body {
 height: 13px;
 width: 90%;
}

@keyframes nested-feed-enter {
 from {
 opacity: 0;
 translate: 0 20px;
 }
 to {
 opacity: 1;
 translate: 0 0;
 }
}

::view-transition-new(.nested-feed-enter) {
 animation: nested-feed-enter 450ms ease-out both;
}

@keyframes nested-feed-exit {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

::view-transition-old(.nested-feed-exit) {
 animation: nested-feed-exit 300ms ease-in forwards;
}

72 changes: 61 additions & 11 deletions
fixtures/view-transition/src/components/NestedParentExit.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
import React, {
 ViewTransition,
 Suspense,
 use,
 useState,
 useOptimistic,
 startTransition,
Expand All@@ -14,6 +16,45 @@ const items = [
 {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
];

let feedRevealPromise = null;

export function resetFeedReveal() {
 feedRevealPromise = null;
}

function FeedReveal() {
 if (feedRevealPromise === null) {
 feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
 }
 use(feedRevealPromise);
 return null;
}

function FeedSkeleton() {
 return (
 <ViewTransition exit="nested-feed-exit">
 <div className="nested-feed">
 {items.map(item => (
 // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
 // its title/body placeholders relay again (level 2) so they animate
 // out separately from the row — up and to the right. This exercises
 // the nested parentExit relay through the SSR streaming reveal.
 <ViewTransition key={item.id} parentExit="nested-exit-left">
 <div className="feed-item feed-item-skeleton">
 <ViewTransition parentExit="nested-title-exit-up">
 <div className="feed-item-title skeleton-line skeleton-title" />
 </ViewTransition>
 <ViewTransition parentExit="nested-body-exit-right">
 <div className="skeleton-line skeleton-body" />
 </ViewTransition>
 </div>
 </ViewTransition>
 ))}
 </div>
 </ViewTransition>
 );
}

function logGestureParent(kind, title, _timeline, _options, _instance, types) {
 // eslint-disable-next-line no-console
 console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
Expand DownExpand Up@@ -159,17 +200,26 @@ export default function NestedParentExit() {
 {selected ? (
 <Detail item={selected} onBack={goBack} />
 ) : (
 <>
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 </>
 <Suspense fallback={<FeedSkeleton />}>
 {/* The entering ViewTransition is the direct child of the
 Suspense content, so it activates an enter scope and the
 feed items below relay parentEnter (emitting
 vt-parent-enter annotations in Fizz). */}
 <ViewTransition enter="nested-feed-enter">
 <div className="nested-feed">
 {items.map((item, index) => (
 <FeedItem
 key={item.id}
 item={item}
 index={index}
 activeIndex={activeIndex}
 onSelect={goToDetail}
 />
 ))}
 <FeedReveal />
 </div>
 </ViewTransition>
 </Suspense>
 )}
 </div>
 </ViewTransition>
Expand Down

5 changes: 5 additions & 0 deletions
fixtures/view-transition/src/components/NestedReveal.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,11 @@ function Use({useable}) {
let delay1;
let delay2;

export function resetNestedReveal() {
 delay1 = undefined;
 delay2 = undefined;
}

export default function NestedReveal({}) {
 if (!delay1) {
 delay1 = sleep(100);
Expand Down

43 changes: 42 additions & 1 deletion
fixtures/view-transition/src/components/Page.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,4 +18,45 @@
 top: 10px;
 left: 360px;
 border: 1px solid #ccc;
}
}

.examples {
 display: grid;
 /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
 overflowing once card + content padding is subtracted. */
 grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
 gap: 20px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
}

.example-card {
 display: flex;
 flex-direction: column;
 min-height: 320px;
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.example-card-title {
 margin: 0 0 16px;
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.example-card-content {
 flex: 1;
 width: 100%;
 background: #fff;
 border-radius: 10px;
 padding: 16px;
 box-sizing: border-box;
 overflow: auto;
}
Loading
Loading