Implement suspensey css for float

Implements waitForCommitToBeReady for resources.

currently it is only opted into when a special prop is passed. This will be removed in the next commit when I update all the tests that now require different mechanics to simulate resource loading.

The general approach is to track how many things we are waiting on and when we hit zero proceed with the commit. For Float CSS in particular we wait for all stylesheet preloads before inserting any uninserted stylesheets. When all the stylesheets have loaded we continue the commit as usual.

Author: gnoff

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

@@ -6,8 +6,6 @@ import {
   clientRenderBoundary,
   completeBoundary,
   completeSegment,
-  LOADED,
-  ERRORED,
 } from './ReactDOMFizzInstructionSetShared';
 
 export {clientRenderBoundary, completeBoundary, completeSegment};
@@ -46,10 +44,6 @@ export function completeBoundaryWithStyles(
   const dependencies = [];
   let href, precedence, attr, loadingState, resourceEl, media;
 
-  function setStatus(s) {
-    this['s'] = s;
-  }
-
   // Sheets Mode
   let sheetMode = true;
   while (true) {
@@ -84,14 +78,10 @@ export function completeBoundaryWithStyles(
         while ((attr = stylesheetDescriptor[j++])) {
           resourceEl.setAttribute(attr, stylesheetDescriptor[j++]);
         }
-        loadingState = resourceEl['_p'] = new Promise((re, rj) => {
-          resourceEl.onload = re;
-          resourceEl.onerror = rj;
+        loadingState = resourceEl['_p'] = new Promise((resolve, reject) => {
+          resourceEl.onload = resolve;
+          resourceEl.onerror = reject;
         });
-        loadingState.then(
-          setStatus.bind(loadingState, LOADED),
-          setStatus.bind(loadingState, ERRORED),
-        );
         // Save this resource element so we can bailout if it is used again
         resourceMap.set(href, resourceEl);
       }

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js

@@ -8,8 +8,6 @@ import {
   clientRenderBoundary,
   completeBoundary,
   completeSegment,
-  LOADED,
-  ERRORED,
 } from './ReactDOMFizzInstructionSetShared';
 
 export {clientRenderBoundary, completeBoundary, completeSegment};
@@ -49,10 +47,6 @@ export function completeBoundaryWithStyles(
   const dependencies = [];
   let href, precedence, attr, loadingState, resourceEl, media;
 
-  function setStatus(s) {
-    this['s'] = s;
-  }
-
   // Sheets Mode
   let sheetMode = true;
   while (true) {
@@ -87,14 +81,10 @@ export function completeBoundaryWithStyles(
         while ((attr = stylesheetDescriptor[j++])) {
           resourceEl.setAttribute(attr, stylesheetDescriptor[j++]);
         }
-        loadingState = resourceEl['_p'] = new Promise((re, rj) => {
-          resourceEl.onload = re;
-          resourceEl.onerror = rj;
+        loadingState = resourceEl['_p'] = new Promise((resolve, reject) => {
+          resourceEl.onload = resolve;
+          resourceEl.onerror = reject;
         });
-        loadingState.then(
-          setStatus.bind(loadingState, LOADED),
-          setStatus.bind(loadingState, ERRORED),
-        );
         // Save this resource element so we can bailout if it is used again
         resourceMap.set(href, resourceEl);
       }

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -8,8 +8,6 @@ export const SUSPENSE_START_DATA = '$';
 export const SUSPENSE_END_DATA = '/$';
 export const SUSPENSE_PENDING_START_DATA = '$?';
 export const SUSPENSE_FALLBACK_START_DATA = '$!';
-export const LOADED = 'l';
-export const ERRORED = 'e';
 
 // TODO: Symbols that are referenced outside this module use dynamic accessor
 // notation instead of dot notation to prevent Closure's advanced compilation

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineSource.js

@@ -2676,6 +2676,65 @@ body {
     );
   });
 
+  it('can delay commit until css resources load', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    React.startTransition(() => {
+      root.render(
+        <>
+          <link
+            rel="stylesheet"
+            href="foo"
+            precedence="default"
+            data-suspensey={true}
+          />
+          <div>hello</div>
+        </>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual(
+      <link rel="preload" as="style" href="foo" />,
+    );
+
+    const preload = document.querySelector('link[rel="preload"][as="style"]');
+    const loadEvent = document.createEvent('Events');
+    loadEvent.initEvent('load', true, true);
+    preload.dispatchEvent(loadEvent);
+
+    // We expect that the stylesheet is inserted now but the commit has not happened yet.
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link
+        rel="stylesheet"
+        href="foo"
+        data-precedence="default"
+        data-suspensey="true"
+      />,
+      <link rel="preload" as="style" href="foo" />,
+    ]);
+
+    const stylesheet = document.querySelector(
+      'link[rel="stylesheet"][data-precedence]',
+    );
+    const loadEvent2 = document.createEvent('Events');
+    loadEvent2.initEvent('load', true, true);
+    stylesheet.dispatchEvent(loadEvent2);
+
+    // We expect that the commit finishes synchronously after the stylesheet loads.
+    expect(getMeaningfulChildren(container)).toEqual(<div>hello</div>);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link
+        rel="stylesheet"
+        href="foo"
+        data-precedence="default"
+        data-suspensey="true"
+      />,
+      <link rel="preload" as="style" href="foo" />,
+    ]);
+  });
+
   describe('ReactDOM.prefetchDNS(href)', () => {
     it('creates a dns-prefetch resource when called', async () => {
       function App({url}) {

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -578,6 +578,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return type === 'suspensey-thing' && typeof props.src === 'string';
     },
 
+    mayResourceSuspendCommit(resource: mixed): boolean {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
     preloadInstance(type: string, props: Props): boolean {
       if (type !== 'suspensey-thing' || typeof props.src !== 'string') {
         throw new Error('Attempted to preload unexpected instance: ' + type);
@@ -608,8 +614,21 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
+    preloadResource(resource: mixed): boolean {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
     startSuspendingCommit,
     suspendInstance,
+
+    suspendResource(resource: mixed): void {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
     waitForCommitToBeReady,
 
     prepareRendererToRender() {},

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

@@ -160,6 +160,7 @@ import {
   unmountHoistable,
   prepareToCommitHoistables,
   suspendInstance,
+  suspendResource,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -4064,23 +4065,72 @@ export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
   resetCurrentDebugFiberInDEV();
 }
 
-export function recursivelyAccumulateSuspenseyCommit(parentFiber: Fiber): void {
+export function accumulateSuspenseyCommit(finishedWork: Fiber): void {
+  accumulateSuspenseyCommitOnFiber(finishedWork);
+}
+
+function recursivelyAccumulateSuspenseyCommit(parentFiber: Fiber): void {
   if (parentFiber.subtreeFlags & SuspenseyCommit) {
     let child = parentFiber.child;
     while (child !== null) {
-      recursivelyAccumulateSuspenseyCommit(child);
-      switch (child.tag) {
-        case HostComponent:
-        case HostHoistable: {
-          if (child.flags & SuspenseyCommit) {
-            const type = child.type;
-            const props = child.memoizedProps;
-            suspendInstance(type, props);
-          }
-          break;
+      accumulateSuspenseyCommitOnFiber(child);
+      child = child.sibling;
+    }
+  }
+}
+
+function accumulateSuspenseyCommitOnFiber(fiber: Fiber) {
+  switch (fiber.tag) {
+    case HostHoistable: {
+      recursivelyAccumulateSuspenseyCommit(fiber);
+      if (fiber.flags & SuspenseyCommit) {
+        if (fiber.memoizedState !== null) {
+          suspendResource(
+            // This should always be set by visiting HostRoot first
+            (currentHoistableRoot: any),
+            fiber.memoizedState,
+            fiber.memoizedProps,
+          );
+        } else {
+          const type = fiber.type;
+          const props = fiber.memoizedProps;
+          suspendInstance(type, props);
         }
       }
-      child = child.sibling;
+      break;
+    }
+    case HostComponent: {
+      recursivelyAccumulateSuspenseyCommit(fiber);
+      if (fiber.flags & SuspenseyCommit) {
+        const type = fiber.type;
+        const props = fiber.memoizedProps;
+        suspendInstance(type, props);
+      }
+      break;
+    }
+    case HostRoot: {
+      if (enableFloat && supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(fiber.stateNode.containerInfo);
+
+        recursivelyAccumulateSuspenseyCommit(fiber);
+        currentHoistableRoot = previousHoistableRoot;
+        break;
+      }
+    }
+    // eslint-disable-next-line-no-fallthrough
+    case HostPortal: {
+      if (enableFloat && supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(fiber.stateNode.containerInfo);
+        recursivelyAccumulateSuspenseyCommit(fiber);
+        currentHoistableRoot = previousHoistableRoot;
+        break;
+      }
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyAccumulateSuspenseyCommit(fiber);
     }
   }
 }

packages/react-noop-renderer/src/createReactNoop.js

@@ -112,6 +112,7 @@ import {
   preparePortalMount,
   prepareScopeUpdate,
   maySuspendCommit,
+  mayResourceSuspendCommit,
   preloadInstance,
 } from './ReactFiberHostConfig';
 import {
@@ -523,7 +524,17 @@ function preloadInstanceAndSuspendIfNeeded(
   renderLanes: Lanes,
 ) {
   // Ask the renderer if this instance should suspend the commit.
-  if (!maySuspendCommit(type, props)) {
+  if (workInProgress.memoizedState !== null) {
+    if (!mayResourceSuspendCommit(workInProgress.memoizedState)) {
+      // If this flag was set previously, we can remove it. The flag represents
+      // whether this particular set of props might ever need to suspend. The
+      // safest thing to do is for shouldSuspendCommit to always return true, but
+      // if the renderer is reasonably confident that the underlying resource
+      // won't be evicted, it can return false as a performance optimization.
+      workInProgress.flags &= ~SuspenseyCommit;
+      return;
+    }
+  } else if (!maySuspendCommit(type, props)) {
     // If this flag was set previously, we can remove it. The flag represents
     // whether this particular set of props might ever need to suspend. The
     // safest thing to do is for maySuspendCommit to always return true, but

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -32,3 +32,6 @@ export const mountHoistable = shim;
 export const unmountHoistable = shim;
 export const createHoistableInstance = shim;
 export const prepareToCommitHoistables = shim;
+export const mayResourceSuspendCommit = shim;
+export const preloadResource = shim;
+export const suspendResource = shim;