Allow Float methods to be called anytime in Fiber

Previously we restricted Float methods to only being callable while rendering. This allowed us to make associations between calls and their position in the DOM tree, for instance hoisting preinitialized styles into a ShadowRoot or an iframe Document.

When considering how we are going to support Flight support in Float however it became clear that this restriction would lead to compromises on the implementation because the Flight client does not execute within the context of a client render. We want to be able to disaptch Float directives coming from Flight as soon as possible and this requires being able to call them outside of render.

this patch modifies Float so that its methods are callable anywhere. The main consequence of this change is Float will always use the Document the renderer script is running within as the HoistableRoot. This means if you preinit as style inside a component render targeting a ShadowRoot the style will load in the ownerDocument not the ShadowRoot. Practially speaking it means that preinit is not useful inside ShadowRoots and iframes.

This tradeoff was deemed acceptable because these methods are optimistic, not critical. Additionally, the other methods, preconntect, prefetchDNS, and preload, are not impacted because they already operated at the level of the ownerDocument and really only interface with the Network cache layer.

Author: gnoff

packages/react-dom-bindings/src/client/ReactDOMHostConfig.js

@@ -1939,24 +1939,9 @@ export function prepareToCommitHoistables() {
 // that the resource is meant to apply too (for example stylesheets or scripts). This is only
 // appropriate for resources that don't really have a strict tie to the document itself for example
 // preloads
-let lastCurrentDocument: ?Document = null;
-let previousDispatcher = null;
-export function prepareRendererToRender(rootContainer: Container) {
-  if (enableFloat) {
-    const rootNode = getHoistableRoot(rootContainer);
-    lastCurrentDocument = getDocumentFromRoot(rootNode);
-
-    previousDispatcher = Dispatcher.current;
-    Dispatcher.current = ReactDOMClientDispatcher;
-  }
-}
+export function prepareRendererToRender(rootContainer: Container) {}
 
-export function resetRendererAfterRender() {
-  if (enableFloat) {
-    Dispatcher.current = previousDispatcher;
-    previousDispatcher = null;
-  }
-}
+export function resetRendererAfterRender() {}
 
 // global collections of Resources
 const preloadPropsMap: Map<string, PreloadProps> = new Map();
@@ -1979,29 +1964,12 @@ function getCurrentResourceRoot(): null | HoistableRoot {
   return currentContainer ? getHoistableRoot(currentContainer) : null;
 }
 
-// Preloads are somewhat special. Even if we don't have the Document
-// used by the root that is rendering a component trying to insert a preload
-// we can still seed the file cache by doing the preload on any document we have
-// access to. We prefer the currentDocument if it exists, we also prefer the
-// lastCurrentDocument if that exists. As a fallback we will use the window.document
-// if available.
-function getDocumentForPreloads(): ?Document {
-  const root = getCurrentResourceRoot();
-  if (root) {
-    return root.ownerDocument || root;
-  } else {
-    try {
-      return lastCurrentDocument || window.document;
-    } catch (error) {
-      return null;
-    }
-  }
-}
-
 function getDocumentFromRoot(root: HoistableRoot): Document {
   return root.ownerDocument || root;
 }
 
+let thisScriptOwnerDocument: null | Document = null;
+
 // We want this to be the default dispatcher on ReactDOMSharedInternals but we don't want to mutate
 // internals in Module scope. Instead we export it and Internals will import it. There is already a cycle
 // from Internals -> ReactDOM -> HostConfig -> Internals so this doesn't introduce a new one.
@@ -2012,12 +1980,17 @@ export const ReactDOMClientDispatcher = {
   preinit,
 };
 
+export function prepareHostDispatcher() {
+  Dispatcher.current = ReactDOMClientDispatcher;
+  thisScriptOwnerDocument = document;
+}
+
 function preconnectAs(
   rel: 'preconnect' | 'dns-prefetch',
   crossOrigin: null | '' | 'use-credentials',
   href: string,
 ) {
-  const ownerDocument = getDocumentForPreloads();
+  const ownerDocument = thisScriptOwnerDocument;
   if (typeof href === 'string' && href && ownerDocument) {
     const limitedEscapedHref =
       escapeSelectorAttributeValueInsideDoubleQuotes(href);
@@ -2040,6 +2013,9 @@ function preconnectAs(
 }
 
 function prefetchDNS(href: string, options?: mixed) {
+  if (!enableFloat) {
+    return;
+  }
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -2067,6 +2043,9 @@ function prefetchDNS(href: string, options?: mixed) {
 }
 
 function preconnect(href: string, options?: {crossOrigin?: string}) {
+  if (!enableFloat) {
+    return;
+  }
   if (__DEV__) {
     if (typeof href !== 'string' || !href) {
       console.error(
@@ -2102,10 +2081,13 @@ type PreloadOptions = {
   type?: string,
 };
 function preload(href: string, options: PreloadOptions) {
+  if (!enableFloat) {
+    return;
+  }
   if (__DEV__) {
     validatePreloadArguments(href, options);
   }
-  const ownerDocument = getDocumentForPreloads();
+  const ownerDocument = thisScriptOwnerDocument;
   if (
     typeof href === 'string' &&
     href &&
@@ -2163,6 +2145,9 @@ type PreinitOptions = {
   integrity?: string,
 };
 function preinit(href: string, options: PreinitOptions) {
+  if (!enableFloat) {
+    return;
+  }
   if (__DEV__) {
     validatePreinitArguments(href, options);
   }
@@ -2181,7 +2166,7 @@ function preinit(href: string, options: PreinitOptions) {
         // was called outside of a render. Given the passive nature of this fallback
         // we do not warn in dev when props disagree if there happens to already be a
         // matching preload with this href
-        const preloadDocument = getDocumentForPreloads();
+        const preloadDocument = thisScriptOwnerDocument;
         if (preloadDocument) {
           const limitedEscapedHref =
             escapeSelectorAttributeValueInsideDoubleQuotes(href);

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -24,8 +24,6 @@ let ReactDOMFizzServer;
 let Suspense;
 let textCache;
 let loadCache;
-let window;
-let document;
 let writable;
 const CSPnonce = null;
 let container;
@@ -51,8 +49,8 @@ function resetJSDOM(markup) {
       media: query,
     })),
   });
-  window = jsdom.window;
-  document = jsdom.window.document;
+  global.window = jsdom.window;
+  global.document = jsdom.window.document;
 }
 
 describe('ReactDOMFloat', () => {

packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js

@@ -58,7 +58,7 @@ describe('ReactErrorLoggingRecovery', () => {
     console.error = originalConsoleError;
   });
 
-  it('should recover from errors in console.error', function () {
+  it('should recover from errors in console.error', async function () {
     const div = document.createElement('div');
     let didCatch = false;
     try {

packages/react-dom/src/client/ReactDOMRoot.js

@@ -13,9 +13,7 @@ import type {
   TransitionTracingCallbacks,
 } from 'react-reconciler/src/ReactInternalTypes';
 
-import ReactDOMSharedInternals from '../ReactDOMSharedInternals';
-const {Dispatcher} = ReactDOMSharedInternals;
-import {ReactDOMClientDispatcher} from 'react-dom-bindings/src/client/ReactDOMHostConfig';
+import {prepareHostDispatcher} from 'react-dom-bindings/src/client/ReactDOMHostConfig';
 import {queueExplicitHydrationTarget} from 'react-dom-bindings/src/events/ReactDOMEventReplaying';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import {
@@ -247,11 +245,8 @@ export function createRoot(
     transitionCallbacks,
   );
   markContainerAsRoot(root.current, container);
+  prepareHostDispatcher();
 
-  if (enableFloat) {
-    // Set the default dispatcher to the client dispatcher
-    Dispatcher.current = ReactDOMClientDispatcher;
-  }
   const rootContainerElement: Document | Element | DocumentFragment =
     container.nodeType === COMMENT_NODE
       ? (container.parentNode: any)
@@ -339,10 +334,7 @@ export function hydrateRoot(
     transitionCallbacks,
   );
   markContainerAsRoot(root.current, container);
-  if (enableFloat) {
-    // Set the default dispatcher to the client dispatcher
-    Dispatcher.current = ReactDOMClientDispatcher;
-  }
+  prepareHostDispatcher();
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
   listenToAllSupportedEvents(container);