[Fiber] Use a safer strategy to track the last precedence (#28110)
Uses a safer strategy to track the last precedence to avoid the need to consistently remember to preprend `'p'` to the precedence value
Josh Story committed
Jan 30, 2024 at 10:10 UTC
1c958aa4abf9e6b638489b1d73cdb1b6dc7c3ab6
1 file changed
+17
-7
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+17
-7
@@ -3481,10 +3481,20 @@ function onUnsuspend(this: SuspendedState) {
3481
}
3482
}
3483
3484
+// We use a value that is type distinct from precedence to track which one is last.
3485
+// This ensures there is no collision with user defined precedences. Normally we would
3486
+// just track this in module scope but since the precedences are tracked per HoistableRoot
3487
+// we need to associate it to something other than a global scope hence why we try to
3488
+// colocate it with the map of precedences in the first place
3489
+const LAST_PRECEDENCE = null;
3490
+
3491
// This is typecast to non-null because it will always be set before read.
3492
// it is important that this not be used except when the stack guarantees it exists.
3493
// Currentlyt his is only during insertSuspendedStylesheet.
3487
-let precedencesByRoot: Map<HoistableRoot, Map<string, Instance>> = (null: any);
3494
+let precedencesByRoot: Map<
3495
+ HoistableRoot,
3496
+ Map<string | typeof LAST_PRECEDENCE, Instance>,
3497
+> = (null: any);
3498
3499
function insertSuspendedStylesheets(
3500
state: SuspendedState,
@@ -3539,15 +3549,15 @@ function insertStylesheetIntoRoot(
3549
// and will be hoisted by the Fizz runtime imminently.
3550
node.getAttribute('media') !== 'not all'
3551
) {
3542
- precedences.set('p' + node.dataset.precedence, node);
3552
+ precedences.set(node.dataset.precedence, node);
3553
last = node;
3554
}
3555
}
3556
if (last) {
3547
- precedences.set('last', last);
3557
+ precedences.set(LAST_PRECEDENCE, last);
3558
}
3559
} else {
3550
- last = precedences.get('last');
3560
+ last = precedences.get(LAST_PRECEDENCE);
3561
}
3562
3563
// We only call this after we have constructed an instance so we assume it here
@@ -3555,11 +3565,11 @@ function insertStylesheetIntoRoot(
3565
// We will always have a precedence for stylesheet instances
3566
const precedence: string = (instance.getAttribute('data-precedence'): any);
3567
3558
- const prior = precedences.get('p' + precedence) || last;
3568
+ const prior = precedences.get(precedence) || last;
3569
if (prior === last) {
3560
- precedences.set('last', instance);
3570
+ precedences.set(LAST_PRECEDENCE, instance);
3571
}
3562
- precedences.set('p' + precedence, instance);
3572
+ precedences.set(precedence, instance);
3573
3574
this.count++;
3575
const onComplete = onUnsuspend.bind(this);