chains host dispatchers. The idea here is that host dispatchers are not bound to renders so we need to be able to dispatch to them at any time. This updates the implementation to chain these dispatchers so that each renderer can respond to the dispatch. Semantically we don't always want every renderer to do this for instance if Fizz handles a float method we don't want Fiber to as well so each dispatcher implementation can decide if it makes sense to forward the call or not. For float methods server disaptchers will handle the call if they can resolve a Request otherwise they will forward. For client dispatchers they will handle the call and always forward. The choice needs to be made for each dispatcher method and may have implications on correct renderer import order. For now we just live with the restriction that if you want to use server and client together (such as renderToString in the browser) you need to import the server renderer after the client renderer.

Author: gnoff

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {HostDispatcher} from 'react-dom/src/shared/ReactDOMTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 import type {DOMEventName} from '../events/DOMEventNames';
 import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
@@ -107,6 +106,10 @@ import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 import {validateLinkPropsForStyleResource} from '../shared/ReactDOMResourceValidation';
 import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
 
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+const ReactDOMCurrentDispatcher =
+  ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -2108,10 +2111,8 @@ function getDocumentFromRoot(root: HoistableRoot): Document {
   return root.ownerDocument || root;
 }
 
-// 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.
-export const ReactDOMClientDispatcher: HostDispatcher = {
+const previousDispatcher = ReactDOMCurrentDispatcher.current;
+ReactDOMCurrentDispatcher.current = {
   prefetchDNS,
   preconnect,
   preload,
@@ -2162,20 +2163,23 @@ function prefetchDNS(href: string) {
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.prefetchDNS(href);
   preconnectAs('dns-prefetch', href, null);
 }
 
 function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preconnect(href, crossOrigin);
   preconnectAs('preconnect', href, crossOrigin);
 }
 
 function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preload(href, as, options);
   const ownerDocument = getDocumentForImperativeFloatMethods();
   if (href && as && ownerDocument) {
     let preloadSelector = `link[rel="preload"][as="${escapeSelectorAttributeValueInsideDoubleQuotes(
@@ -2256,6 +2260,7 @@ function preloadModule(href: string, options?: ?PreloadModuleImplOptions) {
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preloadModule(href, options);
   const ownerDocument = getDocumentForImperativeFloatMethods();
   if (href) {
     const as =
@@ -2319,6 +2324,7 @@ function preinitStyle(
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preinitStyle(href, precedence, options);
   const ownerDocument = getDocumentForImperativeFloatMethods();
 
   if (href) {
@@ -2395,6 +2401,7 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions) {
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preinitScript(src, options);
   const ownerDocument = getDocumentForImperativeFloatMethods();
 
   if (src) {
@@ -2453,6 +2460,7 @@ function preinitModuleScript(
   if (!enableFloat) {
     return;
   }
+  previousDispatcher.preinitModuleScript(src, options);
   const ownerDocument = getDocumentForImperativeFloatMethods();
 
   if (src) {

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

@@ -8,7 +8,6 @@
  */
 
 import type {
-  HostDispatcher,
   CrossOriginEnum,
   PreloadImplOptions,
   PreloadModuleImplOptions,
@@ -25,7 +24,12 @@ import {
   resolveRequest,
 } from 'react-server/src/ReactFlightServer';
 
-export const ReactDOMFlightServerDispatcher: HostDispatcher = {
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+const ReactDOMCurrentDispatcher =
+  ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
+
+const previousDispatcher = ReactDOMCurrentDispatcher.current;
+ReactDOMCurrentDispatcher.current = {
   prefetchDNS,
   preconnect,
   preload,
@@ -48,6 +52,8 @@ function prefetchDNS(href: string) {
         }
         hints.add(key);
         emitHint(request, 'D', href);
+      } else {
+        previousDispatcher.prefetchDNS(href);
       }
     }
   }
@@ -71,6 +77,8 @@ function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
         } else {
           emitHint(request, 'C', href);
         }
+      } else {
+        previousDispatcher.preconnect(href, crossOrigin);
       }
     }
   }
@@ -104,6 +112,8 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         } else {
           emitHint(request, 'L', [href, as]);
         }
+      } else {
+        previousDispatcher.preload(href, as, options);
       }
     }
   }
@@ -128,6 +138,8 @@ function preloadModule(href: string, options?: ?PreloadModuleImplOptions) {
         } else {
           return emitHint(request, 'm', href);
         }
+      } else {
+        previousDispatcher.preloadModule(href, options);
       }
     }
   }
@@ -162,18 +174,20 @@ function preinitStyle(
         } else {
           return emitHint(request, 'S', href);
         }
+      } else {
+        previousDispatcher.preinitStyle(href, precedence, options);
       }
     }
   }
 }
 
-function preinitScript(href: string, options?: ?PreinitScriptOptions) {
+function preinitScript(src: string, options?: ?PreinitScriptOptions) {
   if (enableFloat) {
-    if (typeof href === 'string') {
+    if (typeof src === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const key = 'X|' + href;
+        const key = 'X|' + src;
         if (hints.has(key)) {
           // duplicate hint
           return;
@@ -182,25 +196,27 @@ function preinitScript(href: string, options?: ?PreinitScriptOptions) {
 
         const trimmed = trimOptions(options);
         if (trimmed) {
-          return emitHint(request, 'X', [href, trimmed]);
+          return emitHint(request, 'X', [src, trimmed]);
         } else {
-          return emitHint(request, 'X', href);
+          return emitHint(request, 'X', src);
         }
+      } else {
+        previousDispatcher.preinitScript(src, options);
       }
     }
   }
 }
 
 function preinitModuleScript(
-  href: string,
+  src: string,
   options?: ?PreinitModuleScriptOptions,
 ) {
   if (enableFloat) {
-    if (typeof href === 'string') {
+    if (typeof src === 'string') {
       const request = resolveRequest();
       if (request) {
         const hints = getHints(request);
-        const key = 'M|' + href;
+        const key = 'M|' + src;
         if (hints.has(key)) {
           // duplicate hint
           return;
@@ -209,10 +225,12 @@ function preinitModuleScript(
 
         const trimmed = trimOptions(options);
         if (trimmed) {
-          return emitHint(request, 'M', [href, trimmed]);
+          return emitHint(request, 'M', [src, trimmed]);
         } else {
-          return emitHint(request, 'M', href);
+          return emitHint(request, 'M', src);
         }
+      } else {
+        previousDispatcher.preinitModuleScript(src, options);
       }
     }
   }

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

@@ -88,22 +88,20 @@ import {getValueDescriptorExpectingObjectForWarning} from '../shared/ReactDOMRes
 import {NotPending} from '../shared/ReactDOMFormActions';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
-const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
+const ReactDOMCurrentDispatcher =
+  ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
 
-const ReactDOMServerDispatcher = {
+const previousDispatcher = ReactDOMCurrentDispatcher.current;
+ReactDOMCurrentDispatcher.current = {
   prefetchDNS,
   preconnect,
   preload,
   preloadModule,
-  preinitStyle,
   preinitScript,
+  preinitStyle,
   preinitModuleScript,
 };
 
-export function prepareHostDispatcher() {
-  ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher;
-}
-
 // We make every property of the descriptor optional because it is not a contract that
 // the headers provided by onHeaders has any particular header types.
 export type HeadersDescriptor = {
@@ -5342,6 +5340,7 @@ function prefetchDNS(href: string) {
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.prefetchDNS(href);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5397,6 +5396,7 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preconnect(href, crossOrigin);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5460,6 +5460,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preload(href, as, options);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5663,6 +5664,7 @@ function preloadModule(
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preloadModule(href, options);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5739,6 +5741,7 @@ function preinitStyle(
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preinitStyle(href, precedence, options);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5826,6 +5829,7 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preinitScript(src, options);
     return;
   }
   const resumableState = getResumableState(request);
@@ -5891,6 +5895,7 @@ function preinitModuleScript(
     // the resources for this call in either case we opt to do nothing. We can consider making this a warning
     // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
     // fetching) and we don't want to warn in those cases.
+    previousDispatcher.preinitModuleScript(src, options);
     return;
   }
   const resumableState = getResumableState(request);

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

@@ -163,7 +163,6 @@ export {
   writeHoistables,
   writePostamble,
   hoistHoistables,
-  prepareHostDispatcher,
   resetResumableState,
   completeResumableState,
   emitEarlyPreloads,

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

@@ -16,14 +16,9 @@ import type {
   PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
-import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
-const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
-
-import {ReactDOMFlightServerDispatcher} from './ReactDOMFlightServerHostDispatcher';
-
-export function prepareHostDispatcher(): void {
-  ReactDOMCurrentDispatcher.current = ReactDOMFlightServerDispatcher;
-}
+// This module registers the host dispatcher so it needs to be imported
+// but it does not have any exports
+import './ReactDOMFlightServerHostDispatcher';
 
 // Used to distinguish these contexts from ones used in other renderers.
 // E.g. this can be used to distinguish legacy renderers from this modern one.