react 0.14.0-alpha2 → 0.14.0-beta3

package/lib/ReactDOMOption.js

@@ -11,96 +11,76 @@
 
 'use strict';
 
-var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
-var ReactChildren = require("./ReactChildren");
-var ReactClass = require("./ReactClass");
-var ReactDOMSelect = require("./ReactDOMSelect");
-var ReactElement = require("./ReactElement");
-var ReactInstanceMap = require("./ReactInstanceMap");
-var ReactPropTypes = require("./ReactPropTypes");
+var ReactChildren = require('./ReactChildren');
+var ReactDOMSelect = require('./ReactDOMSelect');
 
-var assign = require("./Object.assign");
-var warning = require("./warning");
-
-var option = ReactElement.createFactory('option');
+var assign = require('./Object.assign');
+var warning = require('fbjs/lib/warning');
 
 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>.') : null;
+    if (process.env.NODE_ENV !== 'production') {
+      process.env.NODE_ENV !== 'production' ? 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 = ReactInstanceMap.get(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;
       }
       if (typeof child === 'string' || typeof child === 'number') {
         content += child;
       } else {
-        'production' !== process.env.NODE_ENV ? warning(false, 'Only strings and numbers are supported as <option> children.') : null;
+        process.env.NODE_ENV !== 'production' ? warning(false, 'Only strings and numbers are supported as <option> children.') : undefined;
       }
     });
 
-    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 ReactUpdates = require("./ReactUpdates");
-var ReactPropTypes = require("./ReactPropTypes");
+var LinkedValueUtils = require('./LinkedValueUtils');
+var ReactMount = require('./ReactMount');
+var ReactUpdates = require('./ReactUpdates');
 
-var assign = require("./Object.assign");
-var findDOMNode = require("./findDOMNode");
-
-var select = ReactElement.createFactory('select');
+var assign = require('./Object.assign');
+var warning = require('fbjs/lib/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) {
+      process.env.NODE_ENV !== 'production' ? 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 {
+      process.env.NODE_ENV !== 'production' ? 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 (process.env.NODE_ENV !== 'production') {
+      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;

package/lib/ReactDOMSelection.js

@@ -11,10 +11,10 @@
 
 'use strict';
 
-var ExecutionEnvironment = require("./ExecutionEnvironment");
+var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 
-var getNodeForCharacterOffset = require("./getNodeForCharacterOffset");
-var getTextContentAccessor = require("./getTextContentAccessor");
+var getNodeForCharacterOffset = require('./getNodeForCharacterOffset');
+var getTextContentAccessor = require('./getTextContentAccessor');
 
 /**
  * While `isCollapsed` is available on the Selection object and `collapsed`

package/lib/ReactDOMServer.js

@@ -11,8 +11,8 @@
 
 'use strict';
 
-var ReactDefaultInjection = require("./ReactDefaultInjection");
-var ReactServerRendering = require("./ReactServerRendering");
+var ReactDefaultInjection = require('./ReactDefaultInjection');
+var ReactServerRendering = require('./ReactServerRendering');
 
 ReactDefaultInjection.inject();
 

package/lib/ReactDOMTextComponent.js

@@ -12,13 +12,13 @@
 
 'use strict';
 
-var DOMPropertyOperations = require("./DOMPropertyOperations");
-var ReactComponentBrowserEnvironment = require("./ReactComponentBrowserEnvironment");
-var ReactDOMComponent = require("./ReactDOMComponent");
+var DOMPropertyOperations = require('./DOMPropertyOperations');
+var ReactComponentBrowserEnvironment = require('./ReactComponentBrowserEnvironment');
+var ReactDOMComponent = require('./ReactDOMComponent');
 
-var assign = require("./Object.assign");
-var escapeTextContentForBrowser = require("./escapeTextContentForBrowser");
-var validateDOMNesting = require("./validateDOMNesting");
+var assign = require('./Object.assign');
+var escapeTextContentForBrowser = require('./escapeTextContentForBrowser');
+var validateDOMNesting = require('./validateDOMNesting');
 
 /**
  * Text nodes violate a couple assumptions that React makes about components:
@@ -35,7 +35,9 @@ var validateDOMNesting = require("./validateDOMNesting");
  * @extends ReactComponent
  * @internal
  */
-var ReactDOMTextComponent = function (props) {};
+var ReactDOMTextComponent = function (props) {
+  // This constructor and its argument is currently used by mocks.
+};
 
 assign(ReactDOMTextComponent.prototype, {
 
@@ -63,7 +65,7 @@ assign(ReactDOMTextComponent.prototype, {
    * @internal
    */
   mountComponent: function (rootID, transaction, context) {
-    if ('production' !== process.env.NODE_ENV) {
+    if (process.env.NODE_ENV !== 'production') {
       if (context[validateDOMNesting.ancestorInfoContextKey]) {
         validateDOMNesting('span', null, context[validateDOMNesting.ancestorInfoContextKey]);
       }
@@ -109,6 +111,4 @@ assign(ReactDOMTextComponent.prototype, {
 
 });
 
-module.exports = ReactDOMTextComponent;
-
-// This constructor and its argument is currently used by mocks.
+module.exports = ReactDOMTextComponent;

package/lib/ReactDOMTextarea.js

@@ -11,26 +11,18 @@
 
 'use strict';
 
-var AutoFocusMixin = require("./AutoFocusMixin");
-var DOMPropertyOperations = require("./DOMPropertyOperations");
-var LinkedValueUtils = require("./LinkedValueUtils");
-var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
-var ReactClass = require("./ReactClass");
-var ReactElement = require("./ReactElement");
-var ReactUpdates = require("./ReactUpdates");
+var LinkedValueUtils = require('./LinkedValueUtils');
+var ReactDOMIDOperations = require('./ReactDOMIDOperations');
+var ReactUpdates = require('./ReactUpdates');
 
-var assign = require("./Object.assign");
-var findDOMNode = require("./findDOMNode");
-var invariant = require("./invariant");
-
-var warning = require("./warning");
-
-var textarea = ReactElement.createFactory('textarea');
+var assign = require('./Object.assign');
+var invariant = require('fbjs/lib/invariant');
+var warning = require('fbjs/lib/warning');
 
 function forceUpdateIfMounted() {
-  /*jshint validthis:true */
-  if (this.isMounted()) {
-    this.forceUpdate();
+  if (this._rootNodeID) {
+    // DOM component is still mounted; update
+    ReactDOMTextarea.updateWrapper(this);
   }
 }
 
@@ -49,23 +41,35 @@ function forceUpdateIfMounted() {
  * The rendered element will be initialized with an empty value, the prop
  * `defaultValue` if specified, or the children content (deprecated).
  */
-var ReactDOMTextarea = ReactClass.createClass({
-  displayName: 'ReactDOMTextarea',
-  tagName: 'TEXTAREA',
+var ReactDOMTextarea = {
+  getNativeProps: function (inst, props, context) {
+    !(props.dangerouslySetInnerHTML == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, '`dangerouslySetInnerHTML` does not make sense on <textarea>.') : invariant(false) : undefined;
 
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
+    // Always set children to the same thing. In IE9, the selection range will
+    // get reset if `textContent` is mutated.
+    var nativeProps = assign({}, props, {
+      defaultValue: undefined,
+      value: undefined,
+      children: inst._wrapperState.initialValue,
+      onChange: inst._wrapperState.onChange
+    });
+
+    return nativeProps;
+  },
 
-  getInitialState: function () {
-    var defaultValue = this.props.defaultValue;
+  mountWrapper: function (inst, props) {
+    LinkedValueUtils.checkPropTypes('textarea', props, inst._currentElement._owner);
+
+    var defaultValue = props.defaultValue;
     // TODO (yungsters): Remove support for children content in <textarea>.
-    var children = this.props.children;
+    var children = props.children;
     if (children != null) {
-      if ('production' !== process.env.NODE_ENV) {
-        'production' !== process.env.NODE_ENV ? warning(false, 'Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.') : null;
+      if (process.env.NODE_ENV !== 'production') {
+        process.env.NODE_ENV !== 'production' ? warning(false, 'Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.') : undefined;
       }
-      'production' !== process.env.NODE_ENV ? invariant(defaultValue == null, 'If you supply `defaultValue` on a <textarea>, do not pass children.') : invariant(defaultValue == null);
+      !(defaultValue == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'If you supply `defaultValue` on a <textarea>, do not pass children.') : invariant(false) : undefined;
       if (Array.isArray(children)) {
-        'production' !== process.env.NODE_ENV ? invariant(children.length <= 1, '<textarea> can only have at most one child.') : invariant(children.length <= 1);
+        !(children.length <= 1) ? process.env.NODE_ENV !== 'production' ? invariant(false, '<textarea> can only have at most one child.') : invariant(false) : undefined;
         children = children[0];
       }
 
@@ -74,51 +78,34 @@ var ReactDOMTextarea = ReactClass.createClass({
     if (defaultValue == null) {
       defaultValue = '';
     }
-    var value = LinkedValueUtils.getValue(this.props);
-    return {
+    var value = LinkedValueUtils.getValue(props);
+
+    inst._wrapperState = {
       // We save the initial value so that `ReactDOMComponent` doesn't update
       // `textContent` (unnecessary since we update value).
       // The initial value can be a boolean or object so that's why it's
       // forced to be a string.
-      initialValue: '' + (value != null ? value : defaultValue)
+      initialValue: '' + (value != null ? value : defaultValue),
+      onChange: _handleChange.bind(inst)
     };
   },
 
-  render: function () {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
-
-    'production' !== process.env.NODE_ENV ? invariant(props.dangerouslySetInnerHTML == null, '`dangerouslySetInnerHTML` does not make sense on <textarea>.') : invariant(props.dangerouslySetInnerHTML == null);
-
-    props.defaultValue = null;
-    props.value = null;
-    props.onChange = this._handleChange;
-
-    // Always set children to the same thing. In IE9, the selection range will
-    // get reset if `textContent` is mutated.
-    return textarea(props, this.state.initialValue);
-  },
-
-  componentDidUpdate: function (prevProps, prevState, prevContext) {
-    var value = LinkedValueUtils.getValue(this.props);
+  updateWrapper: function (inst) {
+    var props = inst._currentElement.props;
+    var value = LinkedValueUtils.getValue(props);
     if (value != null) {
-      var rootNode = findDOMNode(this);
       // 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);
     }
-  },
-
-  _handleChange: function (event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this.props);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
-    }
-    ReactUpdates.asap(forceUpdateIfMounted, this);
-    return returnValue;
   }
+};
 
-});
+function _handleChange(event) {
+  var props = this._currentElement.props;
+  var returnValue = LinkedValueUtils.executeOnChange(props, event);
+  ReactUpdates.asap(forceUpdateIfMounted, this);
+  return returnValue;
+}
 
 module.exports = ReactDOMTextarea;