react 0.14.0-alpha3 → 0.14.0-beta1

package/lib/ReactDOMIDOperations.js

@@ -61,6 +61,20 @@ var ReactDOMIDOperations = {
     }
   },
 
+  /**
+   * Updates a DOM node with new property values.
+   *
+   * @param {string} id ID of the node to update.
+   * @param {string} name A valid property name.
+   * @param {*} value New value of the property.
+   * @internal
+   */
+  updateAttributeByID: function (id, name, value) {
+    var node = ReactMount.getNode(id);
+    !!INVALID_PROPERTY_ERRORS.hasOwnProperty(name) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'updatePropertyByID(...): %s', INVALID_PROPERTY_ERRORS[name]) : invariant(false) : undefined;
+    DOMPropertyOperations.setValueForAttribute(node, name, value);
+  },
+
   /**
    * Updates a DOM node to remove a property. This should only be used to remove
    * DOM properties in `DOMProperty`.

package/lib/ReactDOMInput.js

@@ -11,27 +11,20 @@
 
 'use strict';
 
-var AutoFocusMixin = require("./AutoFocusMixin");
-var DOMPropertyOperations = require("./DOMPropertyOperations");
+var ReactDOMIDOperations = require("./ReactDOMIDOperations");
 var LinkedValueUtils = require("./LinkedValueUtils");
-var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
-var ReactClass = require("./ReactClass");
-var ReactElement = require("./ReactElement");
 var ReactMount = require("./ReactMount");
 var ReactUpdates = require("./ReactUpdates");
 
 var assign = require("./Object.assign");
-var findDOMNode = require("./findDOMNode");
 var invariant = require("./invariant");
 
-var input = ReactElement.createFactory('input');
-
 var instancesByReactID = {};
 
 function forceUpdateIfMounted() {
-  /*jshint validthis:true */
-  if (this.isMounted()) {
-    this.forceUpdate();
+  if (this._rootNodeID) {
+    // DOM component is still mounted; update
+    ReactDOMInput.updateWrapper(this);
   }
 }
 
@@ -51,110 +44,101 @@ function forceUpdateIfMounted() {
  *
  * @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
-var ReactDOMInput = ReactClass.createClass({
-  displayName: 'ReactDOMInput',
-  tagName: 'INPUT',
-
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
-
-  getInitialState: function () {
-    var defaultValue = this.props.defaultValue;
-    return {
-      initialChecked: this.props.defaultChecked || false,
-      initialValue: defaultValue != null ? defaultValue : null
-    };
+var ReactDOMInput = {
+  getNativeProps: function (inst, props, context) {
+    var value = LinkedValueUtils.getValue(props);
+    var checked = LinkedValueUtils.getChecked(props);
+
+    var nativeProps = assign({}, props, {
+      defaultChecked: undefined,
+      defaultValue: undefined,
+      value: value != null ? value : inst._wrapperState.initialValue,
+      checked: checked != null ? checked : inst._wrapperState.initialChecked,
+      onChange: inst._wrapperState.onChange
+    });
+
+    return nativeProps;
   },
 
-  render: function () {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
-
-    props.defaultChecked = null;
-    props.defaultValue = null;
+  mountWrapper: function (inst, props) {
+    LinkedValueUtils.checkPropTypes('input', props, inst._currentElement._owner);
 
-    var value = LinkedValueUtils.getValue(this.props);
-    props.value = value != null ? value : this.state.initialValue;
-
-    var checked = LinkedValueUtils.getChecked(this.props);
-    props.checked = checked != null ? checked : this.state.initialChecked;
-
-    props.onChange = this._handleChange;
+    var defaultValue = props.defaultValue;
+    inst._wrapperState = {
+      initialChecked: props.defaultChecked || false,
+      initialValue: defaultValue != null ? defaultValue : null,
+      onChange: _handleChange.bind(inst)
+    };
 
-    return input(props, this.props.children);
+    instancesByReactID[inst._rootNodeID] = inst;
   },
 
-  componentDidMount: function () {
-    var id = ReactMount.getID(findDOMNode(this));
-    instancesByReactID[id] = this;
+  unmountWrapper: function (inst) {
+    delete instancesByReactID[inst._rootNodeID];
   },
 
-  componentWillUnmount: function () {
-    var rootNode = findDOMNode(this);
-    var id = ReactMount.getID(rootNode);
-    delete instancesByReactID[id];
-  },
+  updateWrapper: function (inst) {
+    var props = inst._currentElement.props;
 
-  componentDidUpdate: function (prevProps, prevState, prevContext) {
-    var rootNode = findDOMNode(this);
-    if (this.props.checked != null) {
-      DOMPropertyOperations.setValueForProperty(rootNode, 'checked', this.props.checked || false);
+    // TODO: Shouldn't this be getChecked(props)?
+    var checked = props.checked;
+    if (checked != null) {
+      ReactDOMIDOperations.updatePropertyByID(inst._rootNodeID, 'checked', checked || false);
     }
 
-    var value = LinkedValueUtils.getValue(this.props);
+    var value = LinkedValueUtils.getValue(props);
     if (value != null) {
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(rootNode, 'value', '' + value);
+      ReactDOMIDOperations.updatePropertyByID(inst._rootNodeID, 'value', '' + value);
     }
-  },
+  }
+};
+
+function _handleChange(event) {
+  var props = this._currentElement.props;
+
+  var returnValue = LinkedValueUtils.executeOnChange(props, event);
+
+  // Here we use asap to wait until all updates have propagated, which
+  // is important when using controlled components within layers:
+  // https://github.com/facebook/react/issues/1698
+  ReactUpdates.asap(forceUpdateIfMounted, this);
 
-  _handleChange: function (event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this.props);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
+  var name = props.name;
+  if (props.type === 'radio' && name != null) {
+    var rootNode = ReactMount.getNode(this._rootNodeID);
+    var queryRoot = rootNode;
+
+    while (queryRoot.parentNode) {
+      queryRoot = queryRoot.parentNode;
     }
-    // Here we use asap to wait until all updates have propagated, which
-    // is important when using controlled components within layers:
-    // https://github.com/facebook/react/issues/1698
-    ReactUpdates.asap(forceUpdateIfMounted, this);
-
-    var name = this.props.name;
-    if (this.props.type === 'radio' && name != null) {
-      var rootNode = findDOMNode(this);
-      var queryRoot = rootNode;
-
-      while (queryRoot.parentNode) {
-        queryRoot = queryRoot.parentNode;
-      }
 
-      // If `rootNode.form` was non-null, then we could try `form.elements`,
-      // but that sometimes behaves strangely in IE8. We could also try using
-      // `form.getElementsByName`, but that will only return direct children
-      // and won't include inputs that use the HTML5 `form=` attribute. Since
-      // the input might not even be in a form, let's just use the global
-      // `querySelectorAll` to ensure we don't miss anything.
-      var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
-
-      for (var i = 0; i < group.length; i++) {
-        var otherNode = group[i];
-        if (otherNode === rootNode || otherNode.form !== rootNode.form) {
-          continue;
-        }
-        var otherID = ReactMount.getID(otherNode);
-        !otherID ? 'production' !== process.env.NODE_ENV ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the ' + 'same `name` is not supported.') : invariant(false) : undefined;
-        var otherInstance = instancesByReactID[otherID];
-        !otherInstance ? 'production' !== process.env.NODE_ENV ? invariant(false, 'ReactDOMInput: Unknown radio button ID %s.', otherID) : invariant(false) : undefined;
-        // If this is a controlled radio button group, forcing the input that
-        // was previously checked to update will cause it to be come re-checked
-        // as appropriate.
-        ReactUpdates.asap(forceUpdateIfMounted, otherInstance);
+    // If `rootNode.form` was non-null, then we could try `form.elements`,
+    // but that sometimes behaves strangely in IE8. We could also try using
+    // `form.getElementsByName`, but that will only return direct children
+    // and won't include inputs that use the HTML5 `form=` attribute. Since
+    // the input might not even be in a form, let's just use the global
+    // `querySelectorAll` to ensure we don't miss anything.
+    var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
+
+    for (var i = 0; i < group.length; i++) {
+      var otherNode = group[i];
+      if (otherNode === rootNode || otherNode.form !== rootNode.form) {
+        continue;
       }
+      var otherID = ReactMount.getID(otherNode);
+      !otherID ? 'production' !== process.env.NODE_ENV ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the ' + 'same `name` is not supported.') : invariant(false) : undefined;
+      var otherInstance = instancesByReactID[otherID];
+      !otherInstance ? 'production' !== process.env.NODE_ENV ? invariant(false, 'ReactDOMInput: Unknown radio button ID %s.', otherID) : invariant(false) : undefined;
+      // If this is a controlled radio button group, forcing the input that
+      // was previously checked to update will cause it to be come re-checked
+      // as appropriate.
+      ReactUpdates.asap(forceUpdateIfMounted, otherInstance);
     }
-
-    return returnValue;
   }
 
-});
+  return returnValue;
+}
 
 module.exports = ReactDOMInput;

package/lib/ReactDOMOption.js

@@ -11,82 +11,62 @@
 
 'use strict';
 
-var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
 var ReactChildren = require("./ReactChildren");
-var ReactClass = require("./ReactClass");
 var ReactDOMSelect = require("./ReactDOMSelect");
-var ReactElement = require("./ReactElement");
-var ReactPropTypes = require("./ReactPropTypes");
 
 var assign = require("./Object.assign");
 var warning = require("./warning");
 
-var option = ReactElement.createFactory('option');
-
 var valueContextKey = ReactDOMSelect.valueContextKey;
 
 /**
  * Implements an <option> native component that warns when `selected` is set.
  */
-var ReactDOMOption = ReactClass.createClass({
-  displayName: 'ReactDOMOption',
-  tagName: 'OPTION',
-
-  mixins: [ReactBrowserComponentMixin],
-
-  getInitialState: function () {
-    return { selected: null };
-  },
-
-  contextTypes: (function () {
-    var obj = {};
-    obj[valueContextKey] = ReactPropTypes.any;
-    return obj;
-  })(),
-
-  componentWillMount: function () {
+var ReactDOMOption = {
+  mountWrapper: function (inst, props, context) {
     // TODO (yungsters): Remove support for `selected` in <option>.
     if ('production' !== process.env.NODE_ENV) {
-      'production' !== process.env.NODE_ENV ? warning(this.props.selected == null, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.') : undefined;
+      'production' !== process.env.NODE_ENV ? warning(props.selected == null, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.') : undefined;
     }
 
-    // Look up whether this option is 'selected' via parent-based context
-    var context = this.context;
+    // Look up whether this option is 'selected' via context
     var selectValue = context[valueContextKey];
 
     // If context key is null (e.g., no specified value or after initial mount)
-    // or missing (e.g., for <datalist>) skip props
+    // or missing (e.g., for <datalist>), we don't change props.selected
+    var selected = null;
     if (selectValue != null) {
-      var selected = false;
+      selected = false;
       if (Array.isArray(selectValue)) {
         // multiple
         for (var i = 0; i < selectValue.length; i++) {
-          if ('' + selectValue[i] === '' + this.props.value) {
+          if ('' + selectValue[i] === '' + props.value) {
             selected = true;
             break;
           }
         }
       } else {
-        selected = '' + selectValue === '' + this.props.value;
+        selected = '' + selectValue === '' + props.value;
       }
-      this.setState({ selected: selected });
     }
+
+    inst._wrapperState = { selected: selected };
   },
 
-  render: function () {
-    var props = this.props;
+  getNativeProps: function (inst, props, context) {
+    var nativeProps = assign({ selected: undefined, children: undefined }, props);
 
     // Read state only from initial mount because <select> updates value
     // manually; we need the initial state only for server rendering
-    if (this.state.selected != null) {
-      props = assign({}, props, { selected: this.state.selected });
+    if (inst._wrapperState.selected != null) {
+      nativeProps.selected = inst._wrapperState.selected;
     }
 
     var content = '';
 
     // Flatten children and warn if they aren't strings or numbers;
     // invalid types are ignored.
-    ReactChildren.forEach(this.props.children, function (child) {
+    ReactChildren.forEach(props.children, function (child) {
       if (child == null) {
         return;
       }
@@ -97,9 +77,10 @@ var ReactDOMOption = ReactClass.createClass({
       }
     });
 
-    return option(props, content);
+    nativeProps.children = content;
+    return nativeProps;
   }
 
-});
+};
 
 module.exports = ReactDOMOption;

package/lib/ReactDOMSelect.js

@@ -11,61 +11,72 @@
 
 'use strict';
 
-var AutoFocusMixin = require("./AutoFocusMixin");
 var LinkedValueUtils = require("./LinkedValueUtils");
-var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
-var ReactClass = require("./ReactClass");
-var ReactElement = require("./ReactElement");
+var ReactMount = require("./ReactMount");
 var ReactUpdates = require("./ReactUpdates");
-var ReactPropTypes = require("./ReactPropTypes");
 
 var assign = require("./Object.assign");
-var findDOMNode = require("./findDOMNode");
-
-var select = ReactElement.createFactory('select');
+var warning = require("./warning");
 
 var valueContextKey = '__ReactDOMSelect_value$' + Math.random().toString(36).slice(2);
 
 function updateOptionsIfPendingUpdateAndMounted() {
-  /*jshint validthis:true */
-  if (this._pendingUpdate) {
-    this._pendingUpdate = false;
-    var value = LinkedValueUtils.getValue(this.props);
-    if (value != null && this.isMounted()) {
-      updateOptions(this, value);
+  if (this._wrapperState.pendingUpdate && this._rootNodeID) {
+    this._wrapperState.pendingUpdate = false;
+
+    var props = this._currentElement.props;
+    var value = LinkedValueUtils.getValue(props);
+
+    if (value != null) {
+      updateOptions(this, props, value);
     }
   }
 }
 
+function getDeclarationErrorAddendum(owner) {
+  if (owner) {
+    var name = owner.getName();
+    if (name) {
+      return ' Check the render method of `' + name + '`.';
+    }
+  }
+  return '';
+}
+
+var valuePropNames = ['value', 'defaultValue'];
+
 /**
  * Validation function for `value` and `defaultValue`.
  * @private
  */
-function selectValueType(props, propName, componentName) {
-  if (props[propName] == null) {
-    return null;
-  }
-  if (props.multiple) {
-    if (!Array.isArray(props[propName])) {
-      return new Error('The `' + propName + '` prop supplied to <select> must be an array if ' + '`multiple` is true.');
+function checkSelectPropTypes(inst, props) {
+  var owner = inst._currentElement._owner;
+  LinkedValueUtils.checkPropTypes('select', props, owner);
+
+  for (var i = 0; i < valuePropNames.length; i++) {
+    var propName = valuePropNames[i];
+    if (props[propName] == null) {
+      continue;
     }
-  } else {
-    if (Array.isArray(props[propName])) {
-      return new Error('The `' + propName + '` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.');
+    if (props.multiple) {
+      'production' !== process.env.NODE_ENV ? warning(Array.isArray(props[propName]), 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, getDeclarationErrorAddendum(owner)) : undefined;
+    } else {
+      'production' !== process.env.NODE_ENV ? warning(!Array.isArray(props[propName]), 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, getDeclarationErrorAddendum(owner)) : undefined;
     }
   }
 }
 
 /**
- * @param {ReactComponent} component Instance of ReactDOMSelect
+ * @param {ReactDOMComponent} inst
+ * @param {boolean} multiple
  * @param {*} propValue A stringable (with `multiple`, a list of stringables).
  * @private
  */
-function updateOptions(component, propValue) {
+function updateOptions(inst, multiple, propValue) {
   var selectedValue, i;
-  var options = findDOMNode(component).options;
+  var options = ReactMount.getNode(inst._rootNodeID).options;
 
-  if (component.props.multiple) {
+  if (multiple) {
     selectedValue = {};
     for (i = 0; i < propValue.length; i++) {
       selectedValue['' + propValue[i]] = true;
@@ -107,92 +118,71 @@ function updateOptions(component, propValue) {
  * If `defaultValue` is provided, any options with the supplied values will be
  * selected.
  */
-var ReactDOMSelect = ReactClass.createClass({
-  displayName: 'ReactDOMSelect',
-  tagName: 'SELECT',
-
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
-
-  statics: {
-    valueContextKey: valueContextKey
+var ReactDOMSelect = {
+  valueContextKey: valueContextKey,
+
+  getNativeProps: function (inst, props, context) {
+    return assign({}, props, {
+      onChange: inst._wrapperState.onChange,
+      value: undefined
+    });
   },
 
-  propTypes: {
-    defaultValue: selectValueType,
-    value: selectValueType
-  },
-
-  getInitialState: function () {
-    // Pass down initial value so initial generated markup has correct
-    // `selected` attributes
-    var value = LinkedValueUtils.getValue(this.props);
-    if (value != null) {
-      return { initialValue: value };
-    } else {
-      return { initialValue: this.props.defaultValue };
+  mountWrapper: function (inst, props) {
+    if ('production' !== process.env.NODE_ENV) {
+      checkSelectPropTypes(inst, props);
     }
-  },
 
-  childContextTypes: (function () {
-    var obj = {};
-    obj[valueContextKey] = ReactPropTypes.any;
-    return obj;
-  })(),
-
-  getChildContext: function () {
-    var obj = {};
-    obj[valueContextKey] = this.state.initialValue;
-    return obj;
+    var value = LinkedValueUtils.getValue(props);
+    inst._wrapperState = {
+      pendingUpdate: false,
+      initialValue: value != null ? value : props.defaultValue,
+      onChange: _handleChange.bind(inst),
+      wasMultiple: Boolean(props.multiple)
+    };
   },
 
-  render: function () {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
-
-    props.onChange = this._handleChange;
-    props.value = null;
-
-    return select(props, this.props.children);
+  processChildContext: function (inst, props, context) {
+    // Pass down initial value so initial generated markup has correct
+    // `selected` attributes
+    var childContext = assign({}, context);
+    childContext[valueContextKey] = inst._wrapperState.initialValue;
+    return childContext;
   },
 
-  componentWillMount: function () {
-    this._pendingUpdate = false;
-  },
+  postUpdateWrapper: function (inst) {
+    var props = inst._currentElement.props;
 
-  componentWillReceiveProps: function (nextProps) {
     // After the initial mount, we control selected-ness manually so don't pass
     // the context value down
-    this.setState({ initialValue: null });
-  },
+    inst._wrapperState.initialValue = undefined;
+
+    var wasMultiple = inst._wrapperState.wasMultiple;
+    inst._wrapperState.wasMultiple = Boolean(props.multiple);
 
-  componentDidUpdate: function (prevProps) {
-    var value = LinkedValueUtils.getValue(this.props);
+    var value = LinkedValueUtils.getValue(props);
     if (value != null) {
-      this._pendingUpdate = false;
-      updateOptions(this, value);
-    } else if (!prevProps.multiple !== !this.props.multiple) {
+      inst._wrapperState.pendingUpdate = false;
+      updateOptions(inst, Boolean(props.multiple), value);
+    } else if (wasMultiple !== Boolean(props.multiple)) {
       // For simplicity, reapply `defaultValue` if `multiple` is toggled.
-      if (this.props.defaultValue != null) {
-        updateOptions(this, this.props.defaultValue);
+      if (props.defaultValue != null) {
+        updateOptions(inst, Boolean(props.multiple), props.defaultValue);
       } else {
         // Revert the select back to its default unselected state.
-        updateOptions(this, this.props.multiple ? [] : '');
+        updateOptions(inst, Boolean(props.multiple), props.multiple ? [] : '');
       }
     }
-  },
-
-  _handleChange: function (event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this.props);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
-    }
-
-    this._pendingUpdate = true;
-    ReactUpdates.asap(updateOptionsIfPendingUpdateAndMounted, this);
-    return returnValue;
   }
+};
 
-});
+function _handleChange(event) {
+  var props = this._currentElement.props;
+  var returnValue = LinkedValueUtils.executeOnChange(props, event);
+
+  this._wrapperState.pendingUpdate = true;
+  ReactUpdates.asap(updateOptionsIfPendingUpdateAndMounted, this);
+  return returnValue;
+}
 
 module.exports = ReactDOMSelect;