Skip to content

Commit 70b0bbd

Browse files
authored
[fizz][external-runtime] Fix: process mutation records before disconnecting (#26169)
> All notifications of mutations that have already been detected, but not yet reported to the observer, are discarded. To hold on to and handle the detected but unreported mutations, use the takeRecords() method. > -- ([Mozilla docs for disconnect]( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect)) Fizz external runtime needs to process mutation records (representing potential Fizz instructions) before calling `disconnect()`. We currently do not do this (and might drop some instructions).
1 parent c7967b1 commit 70b0bbd

File tree

1 file changed

+7
-2
lines changed

1 file changed

+7
-2
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ if (document.readyState === 'loading') {
3535
installFizzInstrObserver(document.body);
3636
}
3737
handleExistingNodes();
38+
// We can call disconnect without takeRecord here,
39+
// since we only expect a single document.body
3840
domBodyObserver.disconnect();
3941
}
4042
});
@@ -54,7 +56,7 @@ function handleExistingNodes() {
5456
}
5557

5658
function installFizzInstrObserver(target /*: Node */) {
57-
const fizzInstrObserver = new MutationObserver(mutations => {
59+
const handleMutations = (mutations /*: Array<MutationRecord> */) => {
5860
for (let i = 0; i < mutations.length; i++) {
5961
const addedNodes = mutations[i].addedNodes;
6062
for (let j = 0; j < addedNodes.length; j++) {
@@ -63,13 +65,16 @@ function installFizzInstrObserver(target /*: Node */) {
6365
}
6466
}
6567
}
66-
});
68+
};
69+
70+
const fizzInstrObserver = new MutationObserver(handleMutations);
6771
// We assume that instruction data nodes are eventually appended to the
6872
// body, even if Fizz is streaming to a shell / subtree.
6973
fizzInstrObserver.observe(target, {
7074
childList: true,
7175
});
7276
window.addEventListener('DOMContentLoaded', () => {
77+
handleMutations(fizzInstrObserver.takeRecords());
7378
fizzInstrObserver.disconnect();
7479
});
7580
}

0 commit comments

Comments
 (0)