React v15.2.0 update: don't pass bad props to DOM elements

This won't be perfect every time (e.g. with `childProps`) but we can do
some things to prevent bad props from being passed.

Author: STRML

lib/CaptureClicks.js

@@ -5,6 +5,15 @@ var urllite     = require('urllite/lib/core');
 var Environment = require('./environment');
 var HashEnvironment = require('./environment/HashEnvironment');
 var assign      = Object.assign || require('object-assign');
+var omit        = require('object.omit');
+
+var PROP_TYPES = {
+  component: React.PropTypes.func.isRequired,
+  environment: React.PropTypes.object,
+  gotoURL: React.PropTypes.func
+};
+
+var PROP_KEYS = Object.keys(PROP_TYPES);
 
 /**
  * A container component which captures <a> clicks and, if there's a matching
@@ -13,10 +22,7 @@ var assign      = Object.assign || require('object-assign');
 var CaptureClicks = React.createClass({
   displayName: 'CaptureClicks',
 
-  propTypes: {
-    component: React.PropTypes.func.isRequired,
-    environment: React.PropTypes.object
-  },
+  propTypes: PROP_TYPES,
 
   getDefaultProps: function() {
     return {
@@ -122,6 +128,7 @@ var CaptureClicks = React.createClass({
     var props = assign({}, this.props, {
       onClick: this.onClick
     });
+    props = omit(props, PROP_KEYS);
     return this.props.component(props, this.props.children);
   }
 

lib/Link.js

@@ -4,6 +4,7 @@ var React             = require('react');
 var NavigatableMixin  = require('./NavigatableMixin');
 var Environment       = require('./environment');
 var assign            = Object.assign || require('object-assign');
+var omit              = require('object.omit');
 
 /**
  * Link.
@@ -78,6 +79,7 @@ var Link = React.createClass({
       onClick: this.onClick,
       href: this._createHref()
     });
+    props = omit(props, ['global', 'globalHash']);
     return React.DOM.a(props, this.props.children);
   }
 });

lib/RouteRenderingMixin.js

@@ -9,6 +9,10 @@ var assign = Object.assign || require('object-assign');
  */
 var RouteRenderingMixin = {
 
+  propTypes: {
+    childProps: React.PropTypes.object
+  },
+
   // Props passed at the `childProps` key are passed to all handlers.
   getChildProps: function() {
     var childProps = this.props.childProps || {};
@@ -25,7 +29,12 @@ var RouteRenderingMixin = {
       throw new Error("React-router-component: No route matched! Did you define a NotFound route?");
     }
     var handler = this.state.handler;
-    var matchProps = this.state.matchProps;
+    var isDOMElement = typeof handler.type === 'string';
+
+    // If this is a DOM element, don't send these props. This won't prevent all
+    // warnings in 15.2.0, but it will catch a lot of them.
+    var matchProps = isDOMElement ? null : this.state.matchProps;
+
     var outProps = assign({ref: this.state.match.route.ref}, this.getChildProps(), matchProps);
 
     // If we were passed an element, we need to clone it before passing it along.

lib/Router.js

@@ -4,6 +4,12 @@ var React                     = require('react');
 var RouterMixin               = require('./RouterMixin');
 var RouteRenderingMixin       = require('./RouteRenderingMixin');
 var assign                    = Object.assign || require('object-assign');
+var omit                      = require('object.omit');
+
+// These are keys to omit - useful for preventing 15.2.0 warning regarding unknown props on DOM els
+var PROP_KEYS = ['component']
+  .concat(Object.keys(RouterMixin.propTypes))
+  .concat(Object.keys(RouteRenderingMixin.propTypes));
 
 /**
  * Create a new router class
@@ -19,6 +25,13 @@ function createRouter(name, component) {
 
     displayName: name,
 
+    propTypes: {
+      component: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ])
+    },
+
     getRoutes: function(props) {
       return props.children;
     },
@@ -39,9 +52,7 @@ function createRouter(name, component) {
         // Pass all props except this component to the Router (containing div/body) and the children,
         // which are swapped out by the route handler.
         var props = assign({}, this.props);
-        delete props.component;
-        delete props.children;
-        delete props.childProps;
+        props = omit(props, PROP_KEYS);
         return React.createElement(this.props.component, props, handler);
       }
     }

lib/matchRoutes.js

@@ -5,6 +5,7 @@ var invariant = require('./util/invariant');
 var warning = require('./util/warning');
 var React = require('react');
 var assign = Object.assign || require('object-assign');
+var omit = require('object.omit');
 var qs = require('qs');
 
 var patternCache = {};
@@ -128,9 +129,7 @@ Match.prototype.getProps = function() {
   props._query = this.query || EMPTY_OBJECT;
 
   // Delete props that shouldn't be passed to the handler.
-  delete props.pattern;
-  delete props.path;
-  delete props.handler;
+  props = omit(props, ['pattern', 'path', 'handler']);
 
   return props;
 }

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "object-assign": "^4.1.0",
+    "object.omit": "^2.0.0",
     "qs": "^6.2.0",
     "url-pattern": "~1.0.1",
     "urllite": "~0.5.0"
@@ -69,4 +70,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }
-}
+}