Change props to be a object-as-a-map

facebook · Mar 4, 2024 · abbdca3 · abbdca3
1 parent 58d09df
commit abbdca3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 37 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -224,7 +224,7 @@ function warnForPropDifference(
   propName: string,
   serverValue: mixed,
   clientValue: mixed,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   if (__DEV__) {
     if (serverValue === clientValue) {
@@ -238,23 +238,21 @@ function warnForPropDifference(
       return;
     }
 
-    serverDifferences.set(propName, serverValue);
+    serverDifferences[propName] = serverValue;
   }
 }
 
 function warnForExtraAttributes(
   domElement: Element,
   attributeNames: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ) {
   if (__DEV__) {
     attributeNames.forEach(function (attributeName) {
-      serverDifferences.set(
-        attributeName,
+      serverDifferences[attributeName] =
         attributeName === 'style'
           ? getStylesObjectFromElement(domElement)
-          : domElement.getAttribute(attributeName),
-      );
+          : domElement.getAttribute(attributeName);
     });
   }
 }
@@ -1830,17 +1828,15 @@ function getPossibleStandardName(propName: string): string | null {
   return null;
 }
 
-export function getPropsFromElement(domElement: Element): Map<string, mixed> {
-  const serverDifferences: Map<string, mixed> = new Map();
+export function getPropsFromElement(domElement: Element): Object {
+  const serverDifferences: {[propName: string]: mixed} = {};
   const attributes = domElement.attributes;
   for (let i = 0; i < attributes.length; i++) {
     const attr = attributes[i];
-    serverDifferences.set(
-      attr.name,
+    serverDifferences[attr.name] =
       attr.name.toLowerCase() === 'style'
         ? getStylesObjectFromElement(domElement)
-        : attr.value,
-    );
+        : attr.value;
   }
   return serverDifferences;
 }
@@ -1863,7 +1859,7 @@ function getStylesObjectFromElement(domElement: Element): {
 function diffHydratedStyles(
   domElement: Element,
   value: mixed,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   if (value != null && typeof value !== 'object') {
     if (__DEV__) {
@@ -1894,7 +1890,7 @@ function diffHydratedStyles(
     }
 
     // Otherwise, we create the object from the DOM for the diff view.
-    serverDifferences.set('style', getStylesObjectFromElement(domElement));
+    serverDifferences.style = getStylesObjectFromElement(domElement);
   }
 }
 
@@ -1904,7 +1900,7 @@ function hydrateAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -1946,7 +1942,7 @@ function hydrateBooleanAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -1983,7 +1979,7 @@ function hydrateOverloadedBooleanAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -2032,7 +2028,7 @@ function hydrateBooleanishAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -2072,7 +2068,7 @@ function hydrateNumericAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -2123,7 +2119,7 @@ function hydratePositiveNumericAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -2174,7 +2170,7 @@ function hydrateSanitizedAttribute(
   attributeName: string,
   value: any,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ): void {
   extraAttributes.delete(attributeName);
   const serverValue = domElement.getAttribute(attributeName);
@@ -2217,7 +2213,7 @@ function diffHydratedCustomComponent(
   props: Object,
   hostContext: HostContext,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ) {
   for (const propKey in props) {
     if (!props.hasOwnProperty(propKey)) {
@@ -2350,7 +2346,7 @@ function diffHydratedGenericElement(
   props: Object,
   hostContext: HostContext,
   extraAttributes: Set<string>,
-  serverDifferences: Map<string, mixed>,
+  serverDifferences: {[propName: string]: mixed},
 ) {
   for (const propKey in props) {
     if (!props.hasOwnProperty(propKey)) {
@@ -2401,9 +2397,9 @@ function diffHydratedGenericElement(
         if (nextHtml != null) {
           const expectedHTML = normalizeHTML(domElement, nextHtml);
           if (serverHTML !== expectedHTML) {
-            serverDifferences.set(propKey, {
+            serverDifferences[propKey] = {
               __html: serverHTML,
-            });
+            };
           }
         }
         continue;
@@ -2967,8 +2963,8 @@ export function diffHydratedProperties(
   tag: string,
   props: Object,
   hostContext: HostContext,
-): Map<string, mixed> {
-  const serverDifferences: Map<string, mixed> = new Map();
+): null | Object {
+  const serverDifferences: {[propName: string]: mixed} = {};
   if (__DEV__) {
     const extraAttributes: Set<string> = new Set();
     const attributes = domElement.attributes;
@@ -3012,6 +3008,9 @@ export function diffHydratedProperties(
       warnForExtraAttributes(domElement, extraAttributes, serverDifferences);
     }
   }
+  if (Object.keys(serverDifferences).length === 0) {
+    return null;
+  }
   return serverDifferences;
 }
 
@@ -3030,6 +3029,9 @@ export function hydrateText(
 }
 
 export function diffHydratedText(textNode: Text, text: string): null | string {
+  if (textNode.nodeValue === text) {
+    return null;
+  }
   const normalizedClientText = normalizeMarkupForTextOrAttribute(text);
   const normalizedServerText = normalizeMarkupForTextOrAttribute(
     textNode.nodeValue,

diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1354,7 +1354,7 @@ export function getFirstHydratableChildWithinSuspenseInstance(
 
 export function describeHydratableInstanceForDevWarnings(
   instance: HydratableInstance,
-): string | {type: string, props: Map<string, mixed>} {
+): string | {type: string, props: $ReadOnly<Props>} {
   // Reverse engineer a pseudo react-element from hydratable instnace
   if (instance.nodeType === ELEMENT_NODE) {
     // Reverse engineer a set of props that can print for dev warnings
@@ -1365,7 +1365,7 @@ export function describeHydratableInstanceForDevWarnings(
   } else if (instance.nodeType === COMMENT_NODE) {
     return {
       type: 'Suspense',
-      props: new Map(),
+      props: {},
     };
   } else {
     return instance.nodeValue;
@@ -1406,7 +1406,7 @@ export function diffHydratedPropsForDevWarnings(
   type: string,
   props: Props,
   hostContext: HostContext,
-): Map<string, mixed> {
+): null | $ReadOnly<Props> {
   return diffHydratedProperties(instance, type, props, hostContext);
 }
 

diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -528,22 +528,26 @@ function prepareToHydrateHostInstance(
         fiber.memoizedProps,
         hostContext,
       );
-      if (differences.size > 0) {
-        if (differences.has('children') && !didWarnInvalidHydration) {
+      if (differences !== null) {
+        if (differences.children != null && !didWarnInvalidHydration) {
           didWarnInvalidHydration = true;
-          const serverValue = differences.get('children');
+          const serverValue = differences.children;
           const clientValue = fiber.memoizedProps.children;
           console.error(
             'Text content did not match. Server: "%s" Client: "%s"',
             serverValue,
             clientValue,
           );
         }
-        differences.forEach((serverValue: mixed, propName: string) => {
+        for (const propName in differences) {
+          if (!differences.hasOwnProperty(propName)) {
+            continue;
+          }
           if (didWarnInvalidHydration) {
-            return;
+            break;
           }
           didWarnInvalidHydration = true;
+          const serverValue = differences[propName];
           const clientValue = fiber.memoizedProps[propName];
           if (propName === 'children') {
             // Already handled above
@@ -557,7 +561,7 @@ function prepareToHydrateHostInstance(
           } else {
             console.error('Extra attribute from the server: %s', propName);
           }
-        });
+        }
       }
     }
   }