Revert "Move validation of text nesting into ReactDOMComponent (facebook#26594)"

This reverts commit ac43bf6.

Author: kassens

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

@@ -45,7 +45,6 @@ import {
   updateTextarea,
   restoreControlledTextareaState,
 } from './ReactDOMTextarea';
-import {validateTextNesting} from './validateDOMNesting';
 import {track} from './inputValueTracking';
 import setInnerHTML from './setInnerHTML';
 import setTextContent from './setTextContent';
@@ -280,9 +279,6 @@ function setProp(
   switch (key) {
     case 'children': {
       if (typeof value === 'string') {
-        if (__DEV__) {
-          validateTextNesting(value, tag);
-        }
         // Avoid setting initial textContent when the text is empty. In IE11 setting
         // textContent on a <textarea> will cause the placeholder to not
         // show within the <textarea> until it has been focused and blurred again.
@@ -294,9 +290,6 @@ function setProp(
           setTextContent(domElement, value);
         }
       } else if (typeof value === 'number') {
-        if (__DEV__) {
-          validateTextNesting('' + value, tag);
-        }
         const canSetTextContent = !enableHostSingletons || tag !== 'body';
         if (canSetTextContent) {
           setTextContent(domElement, '' + value);

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

@@ -59,11 +59,7 @@ import {
 } from './ReactDOMComponent';
 import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
 import setTextContent from './setTextContent';
-import {
-  validateDOMNesting,
-  validateTextNesting,
-  updatedAncestorInfoDev,
-} from './validateDOMNesting';
+import {validateDOMNesting, updatedAncestorInfoDev} from './validateDOMNesting';
 import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
@@ -332,7 +328,18 @@ export function createInstance(
   if (__DEV__) {
     // TODO: take namespace into account when validating.
     const hostContextDev: HostContextDev = (hostContext: any);
-    validateDOMNesting(type, hostContextDev.ancestorInfo);
+    validateDOMNesting(type, null, hostContextDev.ancestorInfo);
+    if (
+      typeof props.children === 'string' ||
+      typeof props.children === 'number'
+    ) {
+      const string = '' + props.children;
+      const ownAncestorInfo = updatedAncestorInfoDev(
+        hostContextDev.ancestorInfo,
+        type,
+      );
+      validateDOMNesting(null, string, ownAncestorInfo);
+    }
     namespace = hostContextDev.namespace;
   } else {
     const hostContextProd: HostContextProd = (hostContext: any);
@@ -484,6 +491,21 @@ export function prepareUpdate(
     // TODO: Figure out how to validateDOMNesting when children turn into a string.
     return null;
   }
+  if (__DEV__) {
+    const hostContextDev = ((hostContext: any): HostContextDev);
+    if (
+      typeof newProps.children !== typeof oldProps.children &&
+      (typeof newProps.children === 'string' ||
+        typeof newProps.children === 'number')
+    ) {
+      const string = '' + newProps.children;
+      const ownAncestorInfo = updatedAncestorInfoDev(
+        hostContextDev.ancestorInfo,
+        type,
+      );
+      validateDOMNesting(null, string, ownAncestorInfo);
+    }
+  }
   return diffProperties(domElement, type, oldProps, newProps);
 }
 
@@ -507,10 +529,7 @@ export function createTextInstance(
 ): TextInstance {
   if (__DEV__) {
     const hostContextDev = ((hostContext: any): HostContextDev);
-    const ancestor = hostContextDev.ancestorInfo.current;
-    if (ancestor != null) {
-      validateTextNesting(text, ancestor.tag);
-    }
+    validateDOMNesting(null, text, hostContextDev.ancestorInfo);
   }
   const textNode: TextInstance = getOwnerDocumentFromRootContainer(
     rootContainerInstance,
@@ -1737,7 +1756,7 @@ export function resolveSingletonInstance(
   if (__DEV__) {
     const hostContextDev = ((hostContext: any): HostContextDev);
     if (validateDOMNestingDev) {
-      validateDOMNesting(type, hostContextDev.ancestorInfo);
+      validateDOMNesting(type, null, hostContextDev.ancestorInfo);
     }
   }
   const ownerDocument = getOwnerDocumentFromRootContainer(

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

@@ -434,14 +434,29 @@ function findInvalidAncestorForTag(
 const didWarn: {[string]: boolean} = {};
 
 function validateDOMNesting(
-  childTag: string,
+  childTag: ?string,
+  childText: ?string,
   ancestorInfo: AncestorInfoDev,
 ): void {
   if (__DEV__) {
     ancestorInfo = ancestorInfo || emptyAncestorInfoDev;
     const parentInfo = ancestorInfo.current;
     const parentTag = parentInfo && parentInfo.tag;
 
+    if (childText != null) {
+      if (childTag != null) {
+        console.error(
+          'validateDOMNesting: when childText is passed, childTag should be null',
+        );
+      }
+      childTag = '#text';
+    } else if (childTag == null) {
+      console.error(
+        'validateDOMNesting: when childText or childTag must be provided',
+      );
+      return;
+    }
+
     const invalidParent = isTagValidWithParent(childTag, parentTag)
       ? null
       : parentInfo;
@@ -463,7 +478,21 @@ function validateDOMNesting(
     }
     didWarn[warnKey] = true;
 
-    const tagDisplayName = '<' + childTag + '>';
+    let tagDisplayName = childTag;
+    let whitespaceInfo = '';
+    if (childTag === '#text') {
+      if (childText != null && /\S/.test(childText)) {
+        tagDisplayName = 'Text nodes';
+      } else {
+        tagDisplayName = 'Whitespace text nodes';
+        whitespaceInfo =
+          " Make sure you don't have any extra whitespace between tags on " +
+          'each line of your source code.';
+      }
+    } else {
+      tagDisplayName = '<' + childTag + '>';
+    }
+
     if (invalidParent) {
       let info = '';
       if (ancestorTag === 'table' && childTag === 'tr') {
@@ -472,9 +501,10 @@ function validateDOMNesting(
           'the browser.';
       }
       console.error(
-        'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s',
+        'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s',
         tagDisplayName,
         ancestorTag,
+        whitespaceInfo,
         info,
       );
     } else {
@@ -488,33 +518,4 @@ function validateDOMNesting(
   }
 }
 
-function validateTextNesting(childText: string, parentTag: string): void {
-  if (__DEV__) {
-    if (isTagValidWithParent('#text', parentTag)) {
-      return;
-    }
-
-    // eslint-disable-next-line react-internal/safe-string-coercion
-    const warnKey = '#text|' + parentTag;
-    if (didWarn[warnKey]) {
-      return;
-    }
-    didWarn[warnKey] = true;
-
-    if (/\S/.test(childText)) {
-      console.error(
-        'validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.',
-        parentTag,
-      );
-    } else {
-      console.error(
-        'validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. ' +
-          "Make sure you don't have any extra whitespace between tags on " +
-          'each line of your source code.',
-        parentTag,
-      );
-    }
-  }
-}
-
-export {updatedAncestorInfoDev, validateDOMNesting, validateTextNesting};
+export {updatedAncestorInfoDev, validateDOMNesting};

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

@@ -1855,57 +1855,6 @@ describe('ReactDOMComponent', () => {
       ]);
     });
 
-    it('warns nicely for updating table rows to use text', () => {
-      const container = document.createElement('div');
-
-      function Row({children}) {
-        return <tr>{children}</tr>;
-      }
-
-      function Foo({children}) {
-        return <table>{children}</table>;
-      }
-
-      // First is fine.
-      ReactDOM.render(<Foo />, container);
-
-      expect(() => ReactDOM.render(<Foo> </Foo>, container)).toErrorDev([
-        'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' +
-          "appear as a child of <table>. Make sure you don't have any extra " +
-          'whitespace between tags on each line of your source code.' +
-          '\n    in table (at **)' +
-          '\n    in Foo (at **)',
-      ]);
-
-      ReactDOM.render(
-        <Foo>
-          <tbody>
-            <Row />
-          </tbody>
-        </Foo>,
-        container,
-      );
-
-      expect(() =>
-        ReactDOM.render(
-          <Foo>
-            <tbody>
-              <Row>text</Row>
-            </tbody>
-          </Foo>,
-          container,
-        ),
-      ).toErrorDev([
-        'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' +
-          'child of <tr>.' +
-          '\n    in tr (at **)' +
-          '\n    in Row (at **)' +
-          '\n    in tbody (at **)' +
-          '\n    in table (at **)' +
-          '\n    in Foo (at **)',
-      ]);
-    });
-
     it('gives useful context in warnings', () => {
       function Row() {
         return <tr />;