Validate node nesting, take 3

Nicer version of facebook#644 and facebook#735. Fixes facebook#101. Context is neat.

Author: sophiebits

src/browser/ReactDOM.js

@@ -84,6 +84,7 @@ var ReactDOM = mapObject({
   h6: 'h6',
   head: 'head',
   header: 'header',
+  hgroup: 'hgroup',
   hr: 'hr',
   html: 'html',
   i: 'i',

src/browser/ui/ReactDOMComponent.js

@@ -29,6 +29,7 @@ var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
 var invariant = require('invariant');
 var isEventSupported = require('isEventSupported');
 var keyOf = require('keyOf');
+var validateDOMNesting = require('validateDOMNesting');
 var warning = require('warning');
 
 var deleteListener = ReactBrowserEventEmitter.deleteListener;
@@ -172,6 +173,15 @@ function validateDangerousTag(tag) {
   }
 }
 
+function processChildContext(context, tagName) {
+  if (__DEV__) {
+    // Pass down our tag name to child components for validation purposes
+    context = assign({}, context);
+    context[validateDOMNesting.parentTagContextKey] = tagName;
+  }
+  return context;
+}
+
 /**
  * Creates a new React class that is idempotent and capable of containing other
  * React components. It accepts event listeners and DOM properties that are
@@ -213,7 +223,18 @@ ReactDOMComponent.Mixin = {
    */
   mountComponent: function(rootID, transaction, context) {
     this._rootNodeID = rootID;
+
     assertValidProps(this, this._currentElement.props);
+    if (__DEV__) {
+      if (context[validateDOMNesting.parentTagContextKey]) {
+        validateDOMNesting(
+          context[validateDOMNesting.parentTagContextKey],
+          this._tag,
+          this._currentElement
+        );
+      }
+    }
+
     var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction);
     var tagContent = this._createContentMarkup(transaction, context);
     if (!tagContent && omittedCloseTags[this._tag]) {
@@ -301,7 +322,7 @@ ReactDOMComponent.Mixin = {
         var mountImages = this.mountChildren(
           childrenToUse,
           transaction,
-          context
+          processChildContext(context, this._tag)
         );
         ret = mountImages.join('');
       }
@@ -342,7 +363,11 @@ ReactDOMComponent.Mixin = {
   updateComponent: function(transaction, prevElement, nextElement, context) {
     assertValidProps(this, this._currentElement.props);
     this._updateDOMProperties(prevElement.props, transaction);
-    this._updateDOMChildren(prevElement.props, transaction, context);
+    this._updateDOMChildren(
+      prevElement.props,
+      transaction,
+      processChildContext(context, this._tag)
+    );
   },
 
   /**

src/browser/ui/ReactDOMTextComponent.js

@@ -19,6 +19,7 @@ var ReactDOMComponent = require('ReactDOMComponent');
 
 var assign = require('Object.assign');
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
+var validateDOMNesting = require('validateDOMNesting');
 
 /**
  * Text nodes violate a couple assumptions that React makes about components:
@@ -65,6 +66,16 @@ assign(ReactDOMTextComponent.prototype, {
    * @internal
    */
   mountComponent: function(rootID, transaction, context) {
+    if (__DEV__) {
+      if (context[validateDOMNesting.parentTagContextKey]) {
+        validateDOMNesting(
+          context[validateDOMNesting.parentTagContextKey],
+          'span',
+          null
+        );
+      }
+    }
+
     this._rootNodeID = rootID;
     var escapedText = escapeTextContentForBrowser(this._stringText);
 

src/browser/ui/ReactDefaultInjection.js

@@ -38,6 +38,7 @@ var ReactElement = require('ReactElement');
 var ReactEventListener = require('ReactEventListener');
 var ReactInjection = require('ReactInjection');
 var ReactInstanceHandles = require('ReactInstanceHandles');
+var ReactInstanceMap = require('ReactInstanceMap');
 var ReactMount = require('ReactMount');
 var ReactReconcileTransaction = require('ReactReconcileTransaction');
 var SelectEventPlugin = require('SelectEventPlugin');
@@ -51,12 +52,14 @@ function autoGenerateWrapperClass(type) {
   return ReactClass.createClass({
     tagName: type.toUpperCase(),
     render: function() {
+      // Copy owner down for debugging info
+      var internalInstance = ReactInstanceMap.get(this);
       return new ReactElement(
         type,
-        null,
-        null,
-        null,
-        null,
+        null,  // key
+        null,  // ref
+        internalInstance._currentElement._owner,  // owner
+        null,  // context
         this.props
       );
     }

src/browser/ui/ReactMount.js

@@ -32,6 +32,7 @@ var instantiateReactComponent = require('instantiateReactComponent');
 var invariant = require('invariant');
 var setInnerHTML = require('setInnerHTML');
 var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
+var validateDOMNesting = require('validateDOMNesting');
 var warning = require('warning');
 
 var SEPARATOR = ReactInstanceHandles.SEPARATOR;
@@ -246,8 +247,14 @@ function mountComponentIntoNode(
     container,
     transaction,
     shouldReuseMarkup) {
+  var context = emptyObject;
+  if (__DEV__) {
+    context = {};
+    context[validateDOMNesting.parentTagContextKey] =
+      container.nodeName.toLowerCase();
+  }
   var markup = ReactReconciler.mountComponent(
-    componentInstance, rootID, transaction, emptyObject
+    componentInstance, rootID, transaction, context
   );
   componentInstance._isTopLevel = true;
   ReactMount._mountImageIntoNode(markup, container, shouldReuseMarkup);

src/browser/ui/__tests__/ReactDOMComponent-test.js

@@ -373,11 +373,11 @@ describe('ReactDOMComponent', function() {
 
       var container = document.createElement('div');
 
-      React.render(<menuitem />, container);
+      React.render(<menu><menuitem /></menu>, container);
 
       expect(container.innerHTML).toContain('</menuitem>');
 
-      React.render(<menuitem>children</menuitem>, container);
+      React.render(<menu><menuitem>children</menuitem></menu>, container);
 
       expect(console.warn.argsForCall.length).toBe(1);
       expect(console.warn.argsForCall[0][0]).toContain('void element');
@@ -651,6 +651,54 @@ describe('ReactDOMComponent', function() {
         'Invariant Violation: Invalid tag: div><img /><div'
       );
     });
+  });
+
+  describe('nesting validation', function() {
+    var React;
+    var ReactTestUtils;
+
+    beforeEach(function() {
+      React = require('React');
+      ReactTestUtils = require('ReactTestUtils');
+    });
+
+    it('warns on invalid nesting', () => {
+      spyOn(console, 'warn');
+      ReactTestUtils.renderIntoDocument(<div><tr /></div>);
+
+      expect(console.warn.calls.length).toBe(1);
+      expect(console.warn.calls[0].args[0]).toBe(
+        'Warning: validateDOMNesting(...): <div> cannot contain a <tr> node.'
+      );
+    });
 
+    it('warns on invalid nesting at root', () => {
+      spyOn(console, 'warn');
+      var p = document.createElement('p');
+      React.render(<tr />, p);
+
+      expect(console.warn.calls.length).toBe(1);
+      expect(console.warn.calls[0].args[0]).toBe(
+        'Warning: validateDOMNesting(...): <p> cannot contain a <tr> node.'
+      );
+    });
+
+    it('warns nicely for table rows', () => {
+      spyOn(console, 'warn');
+      var Foo = React.createClass({
+        render: function() {
+          return <table><tr /></table>;
+        }
+      });
+      ReactTestUtils.renderIntoDocument(<Foo />);
+
+      expect(console.warn.calls.length).toBe(1);
+      expect(console.warn.calls[0].args[0]).toBe(
+        'Warning: validateDOMNesting(...): <table> cannot contain a <tr> ' +
+        'node. Add a <tbody> to your code to match the DOM tree generated by ' +
+        'the browser. Check the render method of `Foo`.'
+      );
+    });
   });
+
 });