[Fizz] Do not reinsert stylesheets after initial insert (#27586)

The loading state tracking for suspensey CSS is too complicated. Prior to this change it had a state it could enter into where a stylesheet was already in the DOM but the loading state did not know it was inserted causing a later transition to try to insert it again. This fix is to add proper tracking of insertions on the codepaths that were missing it. It also modifies the logic of when to suspend based on whether the stylesheet has already been inserted or not. This is not 100% correct semantics however because a prior commit could have inserted a stylesheet and a later transition should ideally be able to wait on that load before committing. I haven't attempted to fix this yet however because the loading state tracking is too complicated as it is and requires a more thorough refactor. Additionally it's not particularly valuable to delay a transition on a loading stylesheet when a previous commit also relied on that stylesheet but didn't wait for it b/c it was sync. I will follow up with an improvement PR later fixes: #27585 DiffTrain build for [a998552](a998552)
facebook · Oct 25, 2023 · 6a86afb · 6a86afb
1 parent 76600e4
commit 6a86afb
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 262 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-51ffd3564f97b58737df395d30628a27fa71a39d
+a9985529f1aa55477f0feafe2398d36707cf6108
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-classic-273dc50b";
+var ReactVersion = "18.3.0-www-classic-8d8af9ad";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -579,4 +579,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-4e6d4d90";
+exports.version = "18.3.0-www-modern-ac0f5360";
diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
@@ -590,7 +590,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-035cd9a2";
+exports.version = "18.3.0-www-modern-a09b3b42";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -34159,7 +34159,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-0db07969";
+var ReactVersion = "18.3.0-www-classic-c09aff01";
 
 function createPortal$1(
   children,
@@ -43312,7 +43312,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -43721,6 +43721,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -44306,74 +44307,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
-        }
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
-        markNodeAsHoistable(instance);
-        return;
-      }
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
+        }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+        instance = ownerDocument.createElement("link");
+        markNodeAsHoistable(instance);
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
+      }
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      var _ping = onUnsuspend.bind(state);
+        var _ping = onUnsuspend.bind(state);
 
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -34004,7 +34004,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-b2fbd9ab";
+var ReactVersion = "18.3.0-www-modern-32f0b929";
 
 function createPortal$1(
   children,
@@ -43822,7 +43822,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -44231,6 +44231,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -44816,74 +44817,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
-        }
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
-        markNodeAsHoistable(instance);
-        return;
-      }
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
+        }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+        instance = ownerDocument.createElement("link");
+        markNodeAsHoistable(instance);
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
+      }
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      var _ping = onUnsuspend.bind(state);
+        var _ping = onUnsuspend.bind(state);
 
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -15149,7 +15149,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -15375,6 +15375,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$259)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$259),
             markNodeAsHoistable(instance$259),
             instance$259
@@ -15554,7 +15555,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16482,7 +16485,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1796 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-217e3cb6",
+  version: "18.3.0-www-classic-372e3020",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2142 = {
@@ -16512,7 +16515,7 @@ var internals$jscomp$inline_2142 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-217e3cb6"
+  reconcilerVersion: "18.3.0-www-classic-372e3020"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2143 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16849,4 +16852,4 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-classic-217e3cb6";
+exports.version = "18.3.0-www-classic-372e3020";