Boolean props should coerce consistently between HostHoistable and HostComponent and Fizz equivalents

gnoff · gnoff · commit fea1d999248d · 2023-05-02T09:17:01.000-07:00
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1027,7 +1027,12 @@ export function isHydratableType(type: string, props: Props): boolean {
   if (enableFloat) {
     if (type === 'script') {
       const {async, onLoad, onError} = (props: any);
-      return !(async && (onLoad || onError));
+      return !(
+        async &&
+        (onLoad || onError) &&
+        typeof async !== 'function' &&
+        typeof async !== 'symbol'
+      );
     }
     return true;
   } else {
@@ -2455,9 +2460,15 @@ export function getResource(
       return null;
     }
     case 'script': {
-      if (typeof pendingProps.src === 'string' && pendingProps.async === true) {
-        const scriptProps: ScriptProps = pendingProps;
-        const key = getScriptKey(scriptProps.src);
+      const async = pendingProps.async;
+      const src = pendingProps.src;
+      if (
+        typeof src === 'string' &&
+        async &&
+        typeof async !== 'function' &&
+        typeof async !== 'symbol'
+      ) {
+        const key = getScriptKey(src);
         const scripts = getResourcesFromRoot(resourceRoot).hoistableScripts;
 
         let resource = scripts.get(key);
@@ -3102,16 +3113,20 @@ export function isHostHoistableType(
       }
     }
     case 'script': {
+      const isAsync =
+        props.async &&
+        typeof props.async !== 'function' &&
+        typeof props.async !== 'symbol';
       if (
-        props.async !== true ||
+        !isAsync ||
         props.onLoad ||
         props.onError ||
-        typeof props.src !== 'string' ||
-        !props.src
+        !props.src ||
+        typeof props.src !== 'string'
       ) {
         if (__DEV__) {
           if (outsideHostContainerContext) {
-            if (props.async !== true) {
+            if (!isAsync) {
               console.error(
                 'Cannot render a sync or defer <script> outside the main document without knowing its order.' +
                   ' Try adding async="" or moving it into the root <head> tag.',
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2575,7 +2575,13 @@ function pushScript(
 
     const src = props.src;
     const key = getResourceKey('script', src);
-    if (props.async !== true || props.onLoad || props.onError) {
+
+    const isAsync =
+      props.async &&
+      typeof props.async !== 'function' &&
+      typeof props.async !== 'symbol';
+
+    if (!isAsync || props.onLoad || props.onError) {
       // we don't want to preload nomodule scripts
       if (props.noModule !== true) {
         // We can't resourcify scripts with load listeners. To avoid ambiguity with
@@ -2600,7 +2606,7 @@ function pushScript(
         }
       }
 
-      if (props.async !== true) {
+      if (!isAsync) {
         // This is not an async script, we can preloaded it but it still needs to
         // be emitted in place since it needs to hydrate on the client
         pushScriptImpl(target, props);
