Skip to content

Commit ead9218

Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models, if the result is an already outlined reference, we can emit it directly, without also outlining the reference. This would create an unnecessary indirection. Before: ``` :N1760023808330.2688 0:D"$2" 0:D"$3" 0:D"$4" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":3.0989999999999327} 3:"$1" 4:{"time":3.261792000000014} ``` After: ``` :N1760023786873.8916 0:D"$2" 0:D"$1" 0:D"$3" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":2.4145829999999933} 3:{"time":2.5488749999999527} ``` Notice how the second debug info chunk is now directly referencing chunk `1` in the debug channel, without outlining and referencing `"$1"` as its own debug chunk `3`. This not only simplifies the RSC payload, and reduces overhead. But more importantly it helps the client resolve cyclic references when a model has debug info that has a reference back to the model. The client is currently not able to resolve such a cycle when those chunk indirections are involved. Ideally, it would also be able to resolve them regardless, but that requires more work. In the meantime, this fixes an immediate issue.
1 parent d446597 commit ead9218

2 files changed

Lines changed: 71 additions & 8 deletions

File tree

‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
`);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});

‎packages/react-server/src/ReactFlightServer.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));

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" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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('^' + ".*" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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('^' + ".*" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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('^' + ".*" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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('^' + ".*" + '
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
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); }
})();
})();
[Flight] Avoid unnecessary indirection when serializing debug info (#… · react/react@ead9218 · GitHub
Skip to content
Commit ead9218
Browse files
unstubbableunstubbable
authored
[Flight] Avoid unnecessary indirection when serializing debug info (#34797)
When a debug channel is hooked up, and we're serializing debug models,
if the result is an already outlined reference, we can emit it directly,
without also outlining the reference. This would create an unnecessary
indirection.
Before:
```
:N1760023808330.2688
0:D"$2"
0:D"$3"
0:D"$4"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":3.0989999999999327}
3:"$1"
4:{"time":3.261792000000014}
```
After:
```
:N1760023786873.8916
0:D"$2"
0:D"$1"
0:D"$3"
0:"hi"
1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}}
2:{"time":2.4145829999999933}
3:{"time":2.5488749999999527}
```
Notice how the second debug info chunk is now directly referencing chunk
`1` in the debug channel, without outlining and referencing `"$1"` as
its own debug chunk `3`.
This not only simplifies the RSC payload, and reduces overhead. But more
importantly it helps the client resolve cyclic references when a model
has debug info that has a reference back to the model. The client is
currently not able to resolve such a cycle when those chunk indirections
are involved. Ideally, it would also be able to resolve them regardless,
but that requires more work. In the meantime, this fixes an immediate
issue.
1 parent d446597 commit ead9218
2 files changed
Lines changed: 71 additions & 8 deletions
File tree
‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js‎
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
30513051
 `);
30523052
}
30533053
});
3054+
3055+
it('should resolve a cycle between debug info and the value it produces when using a debug channel',async()=>{
3056+
// Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057+
3058+
functionInner({style}){
3059+
return<divstyle={style}/>;
3060+
}
3061+
3062+
functionComponent({style}){
3063+
return<Innerstyle={style}/>;
3064+
}
3065+
3066+
conststyle={};
3067+
constelement=<Componentstyle={style}/>;
3068+
style.element=element;
3069+
3070+
letdebugReadableStreamController;
3071+
3072+
constdebugReadableStream=newReadableStream({
3073+
start(controller){
3074+
debugReadableStreamController=controller;
3075+
},
3076+
});
3077+
3078+
constrscStream=awaitserverAct(()=>
3079+
ReactServerDOMServer.renderToReadableStream(element,webpackMap,{
3080+
debugChannel: {
3081+
writable: newWritableStream({
3082+
write(chunk){
3083+
debugReadableStreamController.enqueue(chunk);
3084+
},
3085+
close(){
3086+
debugReadableStreamController.close();
3087+
},
3088+
}),
3089+
},
3090+
}),
3091+
);
3092+
3093+
functionClientRoot({response}){
3094+
returnuse(response);
3095+
}
3096+
3097+
constresponse=ReactServerDOMClient.createFromReadableStream(rscStream,{
3098+
debugChannel: {readable: debugReadableStream},
3099+
});
3100+
3101+
constcontainer=document.createElement('div');
3102+
constroot=ReactDOMClient.createRoot(container);
3103+
3104+
awaitact(()=>{
3105+
root.render(<ClientRootresponse={response}/>);
3106+
});
3107+
3108+
expect(container.innerHTML).toBe('<div></div>');
3109+
});
30543110
});
‎packages/react-server/src/ReactFlightServer.js‎
Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
43004300

43014301
 const json: string = serializeDebugModel(request, 500, debugInfo);
43024302
 if (request.debugDestination !== null) {
4303-
// Outline the actual timing information to the debug channel.
4304-
constoutlinedId=request.nextChunkId++;
4305-
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4306-
request.pendingDebugChunks++;
4307-
request.completedDebugChunks.push(stringToChunk(debugRow));
4308-
constrow=
4309-
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4310-
request.completedRegularChunks.push(stringToChunk(row));
4303+
if(json[0]==='"'&&json[1]==='$'){
4304+
// This is already an outlined reference so we can just emit it directly,
4305+
// without an unnecessary indirection.
4306+
constrow=serializeRowHeader('D',id)+json+'\n';
4307+
request.completedRegularChunks.push(stringToChunk(row));
4308+
} else {
4309+
// Outline the debug information to the debug channel.
4310+
constoutlinedId=request.nextChunkId++;
4311+
constdebugRow=outlinedId.toString(16)+':'+json+'\n';
4312+
request.pendingDebugChunks++;
4313+
request.completedDebugChunks.push(stringToChunk(debugRow));
4314+
constrow=
4315+
serializeRowHeader('D',id)+'"$'+outlinedId.toString(16)+'"\n';
4316+
request.completedRegularChunks.push(stringToChunk(row));
4317+
}
43114318
}else{
43124319
constrow=serializeRowHeader('D',id)+json+'\n';
43134320
request.completedRegularChunks.push(stringToChunk(row));
0 commit comments
Comments
 (0)