react 0.14.0-alpha3 → 0.14.0-beta1

package/lib/EnterLeaveEventPlugin.js

@@ -53,7 +53,7 @@ var EnterLeaveEventPlugin = {
    * @return {*} An accumulation of synthetic events.
    * @see {EventPluginHub.extractEvents}
    */
-  extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {
+  extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {
     if (topLevelType === topLevelTypes.topMouseOver && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
       return null;
     }
@@ -93,12 +93,12 @@ var EnterLeaveEventPlugin = {
     var fromID = from ? ReactMount.getID(from) : '';
     var toID = to ? ReactMount.getID(to) : '';
 
-    var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, fromID, nativeEvent);
+    var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, fromID, nativeEvent, nativeEventTarget);
     leave.type = 'mouseleave';
     leave.target = from;
     leave.relatedTarget = to;
 
-    var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, toID, nativeEvent);
+    var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, toID, nativeEvent, nativeEventTarget);
     enter.type = 'mouseenter';
     enter.target = to;
     enter.relatedTarget = from;

package/lib/EventPluginHub.js

@@ -212,14 +212,14 @@ var EventPluginHub = {
    * @return {*} An accumulation of synthetic events.
    * @internal
    */
-  extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {
+  extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {
     var events;
     var plugins = EventPluginRegistry.plugins;
     for (var i = 0; i < plugins.length; i++) {
       // Not every plugin in the ordering may be loaded at runtime.
       var possiblePlugin = plugins[i];
       if (possiblePlugin) {
-        var extractedEvents = possiblePlugin.extractEvents(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent);
+        var extractedEvents = possiblePlugin.extractEvents(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget);
         if (extractedEvents) {
           events = accumulateInto(events, extractedEvents);
         }

package/lib/EventPluginUtils.js

@@ -88,8 +88,8 @@ function forEachEventDispatch(event, cb) {
 
 /**
  * Default implementation of PluginModule.executeDispatch().
- * @param {SyntheticEvent} SyntheticEvent to handle
- * @param {function} Application-level callback
+ * @param {SyntheticEvent} event SyntheticEvent to handle
+ * @param {function} listener Application-level callback
  * @param {string} domID DOM id to pass to the callback.
  */
 function executeDispatch(event, listener, domID) {
@@ -112,8 +112,8 @@ function executeDispatchesInOrder(event, cb) {
  * Standard/simple iteration through an event's collected dispatches, but stops
  * at the first dispatch execution returning true, and returns that id.
  *
- * @return id of the first dispatch execution who's listener returns true, or
- * null if no listener returned true.
+ * @return {?string} id of the first dispatch execution who's listener returns
+ * true, or null if no listener returned true.
  */
 function executeDispatchesInOrderStopAtTrueImpl(event) {
   var dispatchListeners = event._dispatchListeners;
@@ -156,7 +156,7 @@ function executeDispatchesInOrderStopAtTrue(event) {
  * return values at each dispatch execution, but it does tend to make sense when
  * dealing with "direct" dispatches.
  *
- * @return The return value of executing the single dispatch.
+ * @return {*} The return value of executing the single dispatch.
  */
 function executeDirectDispatch(event) {
   if ('production' !== process.env.NODE_ENV) {
@@ -173,7 +173,7 @@ function executeDirectDispatch(event) {
 
 /**
  * @param {SyntheticEvent} event
- * @return {bool} True iff number of dispatches accumulated is greater than 0.
+ * @return {boolean} True iff number of dispatches accumulated is greater than 0.
  */
 function hasDispatches(event) {
   return !!event._dispatchListeners;

package/lib/HTMLDOMPropertyConfig.js

@@ -43,13 +43,14 @@ var HTMLDOMPropertyConfig = {
     alt: null,
     async: HAS_BOOLEAN_VALUE,
     autoComplete: null,
-    // autoFocus is polyfilled/normalized by AutoFocusMixin
+    // autoFocus is polyfilled/normalized by AutoFocusUtils
     // autoFocus: HAS_BOOLEAN_VALUE,
     autoPlay: HAS_BOOLEAN_VALUE,
     capture: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
     cellPadding: null,
     cellSpacing: null,
     charSet: MUST_USE_ATTRIBUTE,
+    challenge: MUST_USE_ATTRIBUTE,
     checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
     classID: MUST_USE_ATTRIBUTE,
     // To set className on SVG elements, it's necessary to use .setAttribute;
@@ -91,6 +92,9 @@ var HTMLDOMPropertyConfig = {
     httpEquiv: null,
     icon: null,
     id: MUST_USE_PROPERTY,
+    is: MUST_USE_ATTRIBUTE,
+    keyParams: MUST_USE_ATTRIBUTE,
+    keyType: MUST_USE_ATTRIBUTE,
     label: null,
     lang: null,
     list: MUST_USE_ATTRIBUTE,
@@ -168,6 +172,9 @@ var HTMLDOMPropertyConfig = {
     itemRef: MUST_USE_ATTRIBUTE,
     // property is supported for OpenGraph in meta tags.
     property: null,
+    // IE-only attribute that specifies security restrictions on an iframe
+    // as an alternative to the sandbox attribute on IE<10
+    security: MUST_USE_ATTRIBUTE,
     // IE-only attribute that controls focus behavior
     unselectable: MUST_USE_ATTRIBUTE
   },

package/lib/LinkedValueUtils.js

@@ -13,8 +13,10 @@
 'use strict';
 
 var ReactPropTypes = require("./ReactPropTypes");
+var ReactPropTypeLocations = require("./ReactPropTypeLocations");
 
 var invariant = require("./invariant");
+var warning = require("./warning");
 
 var hasReadOnlyValue = {
   'button': true,
@@ -39,20 +41,31 @@ function _assertCheckedLink(inputProps) {
   !(inputProps.checked == null && inputProps.onChange == null) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'Cannot provide a checkedLink and a checked property or onChange event. ' + 'If you want to use checked or onChange, you probably don\'t want to ' + 'use checkedLink') : invariant(false) : undefined;
 }
 
-/**
- * @param {SyntheticEvent} e change event to handle
- */
-function _handleLinkedValueChange(e) {
-  /*jshint validthis:true */
-  this.props.valueLink.requestChange(e.target.value);
-}
+var propTypes = {
+  value: function (props, propName, componentName) {
+    if (!props[propName] || hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled) {
+      return null;
+    }
+    return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+  },
+  checked: function (props, propName, componentName) {
+    if (!props[propName] || props.onChange || props.readOnly || props.disabled) {
+      return null;
+    }
+    return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
+  },
+  onChange: ReactPropTypes.func
+};
 
-/**
-  * @param {SyntheticEvent} e change event to handle
-  */
-function _handleLinkedCheckChange(e) {
-  /*jshint validthis:true */
-  this.props.checkedLink.requestChange(e.target.checked);
+var loggedTypeFailures = {};
+function getDeclarationErrorAddendum(owner) {
+  if (owner) {
+    var name = owner.getName();
+    if (name) {
+      return ' Check the render method of `' + name + '`.';
+    }
+  }
+  return '';
 }
 
 /**
@@ -60,21 +73,19 @@ function _handleLinkedCheckChange(e) {
  * this outside of the ReactDOM controlled form components.
  */
 var LinkedValueUtils = {
-  Mixin: {
-    propTypes: {
-      value: function (props, propName, componentName) {
-        if (!props[propName] || hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled) {
-          return null;
-        }
-        return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
-      },
-      checked: function (props, propName, componentName) {
-        if (!props[propName] || props.onChange || props.readOnly || props.disabled) {
-          return null;
-        }
-        return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
-      },
-      onChange: ReactPropTypes.func
+  checkPropTypes: function (tagName, props, owner) {
+    for (var propName in propTypes) {
+      if (propTypes.hasOwnProperty(propName)) {
+        var error = propTypes[propName](props, propName, tagName, ReactPropTypeLocations.prop);
+      }
+      if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+        // Only monitor this failure once because there tends to be a lot of the
+        // same error.
+        loggedTypeFailures[error.message] = true;
+
+        var addendum = getDeclarationErrorAddendum(owner);
+        'production' !== process.env.NODE_ENV ? warning(false, 'Failed form propType: %s%s', error.message, addendum) : undefined;
+      }
     }
   },
 
@@ -105,17 +116,18 @@ var LinkedValueUtils = {
 
   /**
    * @param {object} inputProps Props for form component
-   * @return {function} change callback either from onChange prop or link.
+   * @param {SyntheticEvent} event change event to handle
    */
-  getOnChange: function (inputProps) {
+  executeOnChange: function (inputProps, event) {
     if (inputProps.valueLink) {
       _assertValueLink(inputProps);
-      return _handleLinkedValueChange;
+      return inputProps.valueLink.requestChange(event.target.value);
     } else if (inputProps.checkedLink) {
       _assertCheckedLink(inputProps);
-      return _handleLinkedCheckChange;
+      return inputProps.checkedLink.requestChange(event.target.checked);
+    } else if (inputProps.onChange) {
+      return inputProps.onChange.call(undefined, event);
     }
-    return inputProps.onChange;
   }
 };
 

package/lib/PooledClass.js

@@ -53,6 +53,17 @@ var threeArgumentPooler = function (a1, a2, a3) {
   }
 };
 
+var fourArgumentPooler = function (a1, a2, a3, a4) {
+  var Klass = this;
+  if (Klass.instancePool.length) {
+    var instance = Klass.instancePool.pop();
+    Klass.call(instance, a1, a2, a3, a4);
+    return instance;
+  } else {
+    return new Klass(a1, a2, a3, a4);
+  }
+};
+
 var fiveArgumentPooler = function (a1, a2, a3, a4, a5) {
   var Klass = this;
   if (Klass.instancePool.length) {
@@ -103,6 +114,7 @@ var PooledClass = {
   oneArgumentPooler: oneArgumentPooler,
   twoArgumentPooler: twoArgumentPooler,
   threeArgumentPooler: threeArgumentPooler,
+  fourArgumentPooler: fourArgumentPooler,
   fiveArgumentPooler: fiveArgumentPooler
 };
 

package/lib/React.js

@@ -23,6 +23,6 @@ assign(React, ReactIsomorphic);
 assign(React, ReactDOMClient);
 assign(React, ReactDOMServer);
 
-React.version = '0.14.0-alpha3';
+React.version = '0.14.0-beta1';
 
 module.exports = React;

package/lib/ReactCSSTransitionGroupChild.js

@@ -40,6 +40,14 @@ var ReactCSSTransitionGroupChild = React.createClass({
 
   transition: function (animationType, finishCallback) {
     var node = React.findDOMNode(this);
+
+    if (!node) {
+      if (finishCallback) {
+        finishCallback();
+      }
+      return;
+    }
+
     var className = this.props.name + '-' + animationType;
     var activeClassName = className + '-active';
     var noEventTimeout = null;

package/lib/ReactChildren.js

@@ -47,7 +47,7 @@ function forEachSingleChild(traverseContext, child, name) {
  * leaf child.
  *
  * @param {?*} children Children tree container.
- * @param {function(*, int)} forEachFunc.
+ * @param {function(*, int)} forEachFunc
  * @param {*} forEachContext Context for forEachContext.
  */
 function forEachChildren(children, forEachFunc, forEachContext) {
@@ -102,8 +102,8 @@ function mapSingleChildIntoContext(traverseContext, child, name) {
  * previously relying on the fact that we guarded against null children.
  *
  * @param {?*} children Children tree container.
- * @param {function(*, int)} mapFunction.
- * @param {*} mapContext Context for mapFunction.
+ * @param {function(*, int)} func The map function.
+ * @param {*} context Context for mapFunction.
  * @return {object} Object containing the ordered map of results.
  */
 function mapChildren(children, func, context) {

package/lib/ReactClass.js

@@ -12,16 +12,14 @@
 'use strict';
 
 var ReactComponent = require("./ReactComponent");
-var ReactCurrentOwner = require("./ReactCurrentOwner");
 var ReactElement = require("./ReactElement");
 var ReactErrorUtils = require("./ReactErrorUtils");
-var ReactInstanceMap = require("./ReactInstanceMap");
-var ReactLifeCycle = require("./ReactLifeCycle");
 var ReactPropTypeLocations = require("./ReactPropTypeLocations");
 var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
-var ReactUpdateQueue = require("./ReactUpdateQueue");
+var ReactNoopUpdateQueue = require("./ReactNoopUpdateQueue");
 
 var assign = require("./Object.assign");
+var emptyObject = require("./emptyObject");
 var invariant = require("./invariant");
 var keyMirror = require("./keyMirror");
 var keyOf = require("./keyOf");
@@ -56,6 +54,14 @@ var SpecPolicy = keyMirror({
 
 var injectedMixins = [];
 
+var warnedSetProps = false;
+function warnSetProps() {
+  if (!warnedSetProps) {
+    warnedSetProps = true;
+    'production' !== process.env.NODE_ENV ? warning(false, 'setProps(...) and replaceProps(...) are deprecated. ' + 'Instead, call React.render again at the top level.') : undefined;
+  }
+}
+
 /**
  * Composite components are higher-level components that compose other composite
  * or native components.
@@ -592,18 +598,6 @@ function bindAutoBindMethods(component) {
   }
 }
 
-var typeDeprecationDescriptor = {
-  enumerable: false,
-  get: function () {
-    var displayName = this.displayName || this.name || 'Component';
-    'production' !== process.env.NODE_ENV ? warning(false, '%s.type is deprecated. Use %s directly to access the class.', displayName, displayName) : undefined;
-    Object.defineProperty(this, 'type', {
-      value: this
-    });
-    return this;
-  }
-};
-
 /**
  * Add more to the ReactClass base class. These are all legacy features and
  * therefore not already part of the modern ReactComponent.
@@ -615,9 +609,9 @@ var ReactClassMixin = {
    * type signature and the only use case for this, is to avoid that.
    */
   replaceState: function (newState, callback) {
-    ReactUpdateQueue.enqueueReplaceState(this, newState);
+    this.updater.enqueueReplaceState(this, newState);
     if (callback) {
-      ReactUpdateQueue.enqueueCallback(this, callback);
+      this.updater.enqueueCallback(this, callback);
     }
   },
 
@@ -628,19 +622,7 @@ var ReactClassMixin = {
    * @final
    */
   isMounted: function () {
-    if ('production' !== process.env.NODE_ENV) {
-      var owner = ReactCurrentOwner.current;
-      if (owner !== null) {
-        'production' !== process.env.NODE_ENV ? warning(owner._warnedAboutRefsInRender, '%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : undefined;
-        owner._warnedAboutRefsInRender = true;
-      }
-    }
-    var internalInstance = ReactInstanceMap.get(this);
-    if (internalInstance) {
-      return internalInstance !== ReactLifeCycle.currentlyMountingInstance;
-    } else {
-      return false;
-    }
+    return this.updater.isMounted(this);
   },
 
   /**
@@ -653,9 +635,12 @@ var ReactClassMixin = {
    * @deprecated
    */
   setProps: function (partialProps, callback) {
-    ReactUpdateQueue.enqueueSetProps(this, partialProps);
+    if ('production' !== process.env.NODE_ENV) {
+      warnSetProps();
+    }
+    this.updater.enqueueSetProps(this, partialProps);
     if (callback) {
-      ReactUpdateQueue.enqueueCallback(this, callback);
+      this.updater.enqueueCallback(this, callback);
     }
   },
 
@@ -669,9 +654,12 @@ var ReactClassMixin = {
    * @deprecated
    */
   replaceProps: function (newProps, callback) {
-    ReactUpdateQueue.enqueueReplaceProps(this, newProps);
+    if ('production' !== process.env.NODE_ENV) {
+      warnSetProps();
+    }
+    this.updater.enqueueReplaceProps(this, newProps);
     if (callback) {
-      ReactUpdateQueue.enqueueCallback(this, callback);
+      this.updater.enqueueCallback(this, callback);
     }
   }
 };
@@ -694,7 +682,7 @@ var ReactClass = {
    * @public
    */
   createClass: function (spec) {
-    var Constructor = function (props, context) {
+    var Constructor = function (props, context, updater) {
       // This constructor is overridden by mocks. The argument is used
       // by mocks to assert on what gets mounted.
 
@@ -709,6 +697,9 @@ var ReactClass = {
 
       this.props = props;
       this.context = context;
+      this.refs = emptyObject;
+      this.updater = updater || ReactNoopUpdateQueue;
+
       this.state = null;
 
       // ReactClasses doesn't have constructors. Instead, they use the
@@ -756,6 +747,7 @@ var ReactClass = {
 
     if ('production' !== process.env.NODE_ENV) {
       'production' !== process.env.NODE_ENV ? warning(!Constructor.prototype.componentShouldUpdate, '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', spec.displayName || 'A component') : undefined;
+      'production' !== process.env.NODE_ENV ? warning(!Constructor.prototype.componentWillRecieveProps, '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', spec.displayName || 'A component') : undefined;
     }
 
     // Reduce time spent doing lookups by setting these on the prototype.
@@ -765,14 +757,6 @@ var ReactClass = {
       }
     }
 
-    // Legacy hook
-    Constructor.type = Constructor;
-    if ('production' !== process.env.NODE_ENV) {
-      try {
-        Object.defineProperty(Constructor, 'type', typeDeprecationDescriptor);
-      } catch (x) {}
-    }
-
     return Constructor;
   },
 
@@ -784,6 +768,4 @@ var ReactClass = {
 
 };
 
-module.exports = ReactClass;
-
-// IE will fail on defineProperty (es5-shim/sham too)
+module.exports = ReactClass;