Reimplement SSR changes in ReactDOMServerFormatConfig

Author: josepharhar

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

@@ -1097,4 +1097,43 @@ describe('ReactDOMServer', () => {
         'However, it is set to a string.',
     );
   });
+
+  describe('custom element server rendering', () => {
+    it('String properties should be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo="bar" />,
+      );
+      expect(output).toBe(`<my-custom-element foo="bar"></my-custom-element>`);
+    });
+
+    it('Number properties should be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={5} />,
+      );
+      expect(output).toBe(`<my-custom-element foo="5"></my-custom-element>`);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('Object properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={{foo: 'bar'}} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('Array properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={['foo', 'bar']} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+
+    it('Function properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={() => console.log('bar')} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+  });
 });

packages/react-dom/src/server/DOMMarkupOperations.js

@@ -18,7 +18,6 @@ import {
 import sanitizeURL from '../shared/sanitizeURL';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser';
-import {enableCustomElementPropertySupport} from 'shared/ReactFeatureFlags';
 
 /**
  * Operations for dealing with DOM properties.
@@ -31,33 +30,12 @@ import {enableCustomElementPropertySupport} from 'shared/ReactFeatureFlags';
  * @param {*} value
  * @return {?string} Markup string, or null if the property was invalid.
  */
-export function createMarkupForProperty(
-  name: string,
-  value: mixed,
-  isCustomComponent: boolean,
-): string {
-  const propertyInfo =
-    enableCustomElementPropertySupport && isCustomComponent
-      ? null
-      : getPropertyInfo(name);
-  if (
-    name !== 'style' &&
-    shouldIgnoreAttribute(
-      name,
-      propertyInfo,
-      isCustomComponent && enableCustomElementPropertySupport,
-    )
-  ) {
+export function createMarkupForProperty(name: string, value: mixed): string {
+  const propertyInfo = getPropertyInfo(name);
+  if (name !== 'style' && shouldIgnoreAttribute(name, propertyInfo, false)) {
     return '';
   }
-  if (
-    shouldRemoveAttribute(
-      name,
-      value,
-      propertyInfo,
-      isCustomComponent && enableCustomElementPropertySupport,
-    )
-  ) {
+  if (shouldRemoveAttribute(name, value, propertyInfo, false)) {
     return '';
   }
   if (propertyInfo !== null) {

packages/react-dom/src/server/ReactDOMServerFormatConfig.js

@@ -385,6 +385,7 @@ function pushAttribute(
     return;
   }
 
+  // is this where i should do stuff?
   const propertyInfo = getPropertyInfo(name);
   if (propertyInfo !== null) {
     // shouldRemoveAttribute
@@ -1103,6 +1104,15 @@ function pushStartCustomElement(
       if (propValue == null) {
         continue;
       }
+      if (
+        enableCustomElementPropertySupport &&
+        (typeof propValue === 'function' || typeof propValue === 'object')
+      ) {
+        // It is normal to render functions and objects on custom elements when
+        // client rendering, but when server rendering the output isn't useful,
+        // so skip it.
+        continue;
+      }
       if (enableCustomElementPropertySupport && propKey === 'className') {
         // className gets rendered as class on the client, so it should be
         // rendered as class on the server.

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -23,7 +23,6 @@ import {
   disableModulePatternComponents,
   enableSuspenseServerRenderer,
   enableScopeAPI,
-  enableCustomElementPropertySupport,
 } from 'shared/ReactFeatureFlags';
 import {
   checkPropStringCoercion,
@@ -379,16 +378,12 @@ function createOpenTagMarkup(
       propValue = createMarkupForStyles(propValue);
     }
     let markup = null;
-    if (enableCustomElementPropertySupport) {
-      markup = createMarkupForProperty(propKey, propValue, isCustomComponent);
-    } else {
-      if (isCustomComponent) {
-        if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
-          markup = createMarkupForCustomAttribute(propKey, propValue);
-        }
-      } else {
-        markup = createMarkupForProperty(propKey, propValue, false);
+    if (isCustomComponent) {
+      if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
+        markup = createMarkupForCustomAttribute(propKey, propValue);
       }
+    } else {
+      markup = createMarkupForProperty(propKey, propValue);
     }
     if (markup) {
       ret += ' ' + markup;