From 5a13dd090d63c0c779c0e3b75a3a7bc70459c456 Mon Sep 17 00:00:00 2001
From: SanderSpies <sandermail@gmail.com>
Date: Sun, 13 Oct 2013 08:45:43 +0200
Subject: [PATCH 1/3] Standardize prop -> DOM attribute process

Allow more than strings and numbers to be used as attributes for DOM
nodes. This removes the special casing for `0` and `false` that was
being used in ReactDOMInput and ReactDOMTextarea.

Now we will just `toString` any object we try to insert into a DOM.

Closes #422, #372, #302
---
 src/dom/components/ReactDOMInput.js           | 14 +--
 src/dom/components/ReactDOMTextarea.js        | 19 +---
 .../__tests__/ReactDOMInput-test.js           | 59 +++++++++++-
 .../__tests__/ReactDOMSelect-test.js          | 29 ++++++
 .../__tests__/ReactDOMTextarea-test.js        | 91 ++++++++++++++++---
 .../__tests__/escapeTextForBrowser-test.js    | 56 ++++++++++++
 src/utils/escapeTextForBrowser.js             | 21 +----
 7 files changed, 227 insertions(+), 62 deletions(-)
 create mode 100644 src/utils/__tests__/escapeTextForBrowser-test.js

diff --git a/src/dom/components/ReactDOMInput.js b/src/dom/components/ReactDOMInput.js
index a569a5ec44..b38b4d1172 100644
--- a/src/dom/components/ReactDOMInput.js
+++ b/src/dom/components/ReactDOMInput.js
@@ -55,7 +55,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
     var defaultValue = this.props.defaultValue;
     return {
       checked: this.props.defaultChecked || false,
-      value: defaultValue != null && defaultValue !== false ? defaultValue : ''
+      value: defaultValue != null ? defaultValue : ''
     };
   },
 
@@ -74,9 +74,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
       this.props.checked != null ? this.props.checked : this.state.checked;
 
     var value = this.getValue();
-    props.value = value != null && value !== false ?
-      '' + value :
-      this.state.value;
+    props.value = value != null ? value : this.state.value;
 
     props.onChange = this._handleChange;
 
@@ -105,13 +103,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
 
     var value = this.getValue();
     if (value != null) {
-      // Cast `this.props.value` to a string so falsey values that cast to
-      // truthy strings are not ignored.
-      DOMPropertyOperations.setValueForProperty(
-        rootNode,
-        'value',
-        value !== false ? '' + value : ''
-      );
+      DOMPropertyOperations.setValueForProperty(rootNode, 'value', value);
     }
   },
 
diff --git a/src/dom/components/ReactDOMTextarea.js b/src/dom/components/ReactDOMTextarea.js
index 0aed044df3..b53df29302 100644
--- a/src/dom/components/ReactDOMTextarea.js
+++ b/src/dom/components/ReactDOMTextarea.js
@@ -29,9 +29,6 @@ var merge = require('merge');
 // Store a reference to the <textarea> `ReactDOMComponent`.
 var textarea = ReactDOM.textarea;
 
-// For quickly matching children type, to test if can be treated as content.
-var CONTENT_TYPES = {'string': true, 'number': true};
-
 /**
  * Implements a <textarea> native component that allows setting `value`, and
  * `defaultValue`. This differs from the traditional DOM API because value is
@@ -72,11 +69,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
         );
         children = children[0];
       }
-      invariant(
-        CONTENT_TYPES[typeof children],
-        'If you specify children to <textarea>, it must be a single string ' +
-        'or number., not an array or object.'
-      );
+
       defaultValue = '' + children;
     }
     if (defaultValue == null) {
@@ -86,7 +79,9 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
     return {
       // We save the initial value so that `ReactDOMComponent` doesn't update
       // `textContent` (unnecessary since we update value).
-      initialValue: value != null ? value : defaultValue,
+      // 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),
       value: defaultValue
     };
   },
@@ -118,11 +113,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
   componentDidUpdate: function(prevProps, prevState, rootNode) {
     var value = this.getValue();
     if (value != null) {
-      DOMPropertyOperations.setValueForProperty(
-        rootNode,
-        'value',
-        value !== false ? '' + value : ''
-      );
+      DOMPropertyOperations.setValueForProperty(rootNode, 'value', value);
     }
   },
 
diff --git a/src/dom/components/__tests__/ReactDOMInput-test.js b/src/dom/components/__tests__/ReactDOMInput-test.js
index 61cf2f368e..f5a2e17740 100644
--- a/src/dom/components/__tests__/ReactDOMInput-test.js
+++ b/src/dom/components/__tests__/ReactDOMInput-test.js
@@ -50,11 +50,31 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('0');
   });
 
-  it('should display "" for `defaultValue` of `false`', function() {
+  it('should display "true" for `defaultValue` of `true`', function() {
+    var stub = <input type="text" defaultValue={true} />;
+    var node = renderTextInput(stub);
+
+    expect(node.value).toBe('true');
+  });
+
+  it('should display "false" for `defaultValue` of `false`', function() {
     var stub = <input type="text" defaultValue={false} />;
     var node = renderTextInput(stub);
 
-    expect(node.value).toBe('');
+    expect(node.value).toBe('false');
+  });
+
+  it('should display "foobar" for `defaultValue` of `objectToString`', function() {
+    var objectToString = {
+      toString: function() {
+        return "foobar";
+      }
+    };
+
+    var stub = <input type="text" defaultValue={objectToString} />;
+    var node = renderTextInput(stub);
+
+    expect(node.value).toBe('foobar');
   });
 
   it('should display `value` of number 0', function() {
@@ -64,11 +84,40 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('0');
   });
 
-  it('should display "" for `value` of `false`', function() {
-    var stub = <input type="text" value={false} />;
+  it('should allow setting `value` to `true`', function() {
+    var stub = <input type="text" value="yolo" />;
     var node = renderTextInput(stub);
 
-    expect(node.value).toBe('');
+    expect(node.value).toBe('yolo');
+
+    stub.replaceProps({value: true});
+    expect(node.value).toEqual('true');
+  });
+
+  it("should allow setting `value` to `false`", function() {
+    var stub = <input type="text" value="yolo" />;
+    var node = renderTextInput(stub);
+
+    expect(node.value).toBe('yolo');
+
+    stub.replaceProps({value: false});
+    expect(node.value).toEqual('false');
+  });
+
+  it('should allow setting `value` to `objectToString`', function() {
+    var stub = <input type="text" value="foo" />;
+    var node = renderTextInput(stub);
+
+    expect(node.value).toBe('foo');
+
+    var objectToString = {
+      toString: function() {
+        return "foobar";
+      }
+    };
+
+    stub.replaceProps({value: objectToString});
+    expect(node.value).toEqual('foobar');
   });
 
   it('should properly control a value of number `0`', function() {
diff --git a/src/dom/components/__tests__/ReactDOMSelect-test.js b/src/dom/components/__tests__/ReactDOMSelect-test.js
index ec2b9aee9d..6bbe58ca2a 100644
--- a/src/dom/components/__tests__/ReactDOMSelect-test.js
+++ b/src/dom/components/__tests__/ReactDOMSelect-test.js
@@ -116,6 +116,35 @@ describe('ReactDOMSelect', function() {
     expect(node.options[2].selected).toBe(false);  // gorilla
   });
 
+  it('should allow setting `value` with `objectToString`', function() {
+    var objectToString = {
+      animal: "giraffe",
+      toString: function() {
+        return this.animal;
+      }
+    };
+
+    var stub =
+      <select multiple={true} value={[objectToString]}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>;
+    var node = renderSelect(stub);
+
+    expect(node.options[0].selected).toBe(false);  // monkey
+    expect(node.options[1].selected).toBe(true);  // giraffe
+    expect(node.options[2].selected).toBe(false);  // gorilla
+
+    // Changing the `value` prop should change the selected options.
+    objectToString.animal = "monkey";
+    stub.forceUpdate();
+
+    expect(node.options[0].selected).toBe(true);  // monkey
+    expect(node.options[1].selected).toBe(false);  // giraffe
+    expect(node.options[2].selected).toBe(false);  // gorilla
+  });
+
   it('should allow switching to multiple', function() {
     var stub =
       <select defaultValue="giraffe">
diff --git a/src/dom/components/__tests__/ReactDOMTextarea-test.js b/src/dom/components/__tests__/ReactDOMTextarea-test.js
index a0fd263777..271cd4563f 100644
--- a/src/dom/components/__tests__/ReactDOMTextarea-test.js
+++ b/src/dom/components/__tests__/ReactDOMTextarea-test.js
@@ -62,21 +62,24 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('0');
   });
 
-  it('should display "" for `defaultValue` of `false`', function() {
+  it('should display "false" for `defaultValue` of `false`', function() {
     var stub = <textarea type="text" defaultValue={false} />;
     var node = renderTextarea(stub);
 
-    expect(node.value).toBe('');
+    expect(node.value).toBe('false');
   });
 
-  it('should allow setting `value`', function() {
-    var stub = <textarea value="giraffe" />;
+  it('should display "foobar" for `defaultValue` of `objectToString`', function() {
+    var objectToString = {
+      toString: function() {
+        return "foobar";
+      }
+    };
+
+    var stub = <textarea type="text" defaultValue={objectToString} />;
     var node = renderTextarea(stub);
 
-    expect(node.value).toBe('giraffe');
-
-    stub.replaceProps({value: 'gorilla'});
-    expect(node.value).toEqual('gorilla');
+    expect(node.value).toBe('foobar');
   });
 
   it('should display `value` of number 0', function() {
@@ -86,11 +89,49 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('0');
   });
 
-  it('should display "" for `value` of `false`', function() {
-    var stub = <textarea type="text" value={false} />;
+  it('should allow setting `value` to `giraffe`', function() {
+    var stub = <textarea value="giraffe" />;
     var node = renderTextarea(stub);
 
-    expect(node.value).toBe('');
+    expect(node.value).toBe('giraffe');
+
+    stub.replaceProps({value: 'gorilla'});
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should allow setting `value` to `true`', function() {
+    var stub = <textarea value="giraffe" />;
+    var node = renderTextarea(stub);
+
+    expect(node.value).toBe('giraffe');
+
+    stub.replaceProps({value: true});
+    expect(node.value).toEqual('true');
+  });
+
+  it('should allow setting `value` to `false`', function() {
+    var stub = <textarea value="giraffe" />;
+    var node = renderTextarea(stub);
+
+    expect(node.value).toBe('giraffe');
+
+    stub.replaceProps({value: false});
+    expect(node.value).toEqual('false');
+  });
+
+  it('should allow setting `value` to `objectToString`', function() {
+    var stub = <textarea value="giraffe" />;
+    var node = renderTextarea(stub);
+
+    expect(node.value).toBe('giraffe');
+
+    var obj = {
+      toString: function() {
+        return "foo";
+      }
+    };
+    stub.replaceProps({value: obj});
+    expect(node.value).toEqual('foo');
   });
 
   it('should properly control a value of number `0`', function() {
@@ -123,6 +164,25 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('17');
   });
 
+  it('should allow booleans as children', function() {
+    spyOn(console, 'warn');
+    var node = renderTextarea(<textarea>{false}</textarea>);
+    expect(console.warn.argsForCall.length).toBe(1);
+    expect(node.value).toBe('false');
+  });
+
+  it('should allow objects as children', function() {
+    spyOn(console, 'warn');
+    var obj = {
+      toString: function() {
+        return "sharkswithlasers";
+      }
+    };
+    var node = renderTextarea(<textarea>{obj}</textarea>);
+    expect(console.warn.argsForCall.length).toBe(1);
+    expect(node.value).toBe('sharkswithlasers');
+  });
+
   it('should throw with multiple or invalid children', function() {
     spyOn(console, 'warn');
 
@@ -134,11 +194,12 @@ describe('ReactDOMTextarea', function() {
 
     expect(console.warn.argsForCall.length).toBe(1);
 
+    var stub;
     expect(function() {
-      ReactTestUtils.renderIntoDocument(
-        <textarea><strong /></textarea>
-      );
-    }).toThrow();
+      stub = renderTextarea(<textarea><strong /></textarea>);
+    }).not.toThrow();
+
+    expect(stub.value).toBe('[object Object]');
 
     expect(console.warn.argsForCall.length).toBe(2);
   });
diff --git a/src/utils/__tests__/escapeTextForBrowser-test.js b/src/utils/__tests__/escapeTextForBrowser-test.js
new file mode 100644
index 0000000000..ab5686afe1
--- /dev/null
+++ b/src/utils/__tests__/escapeTextForBrowser-test.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @emails react-core
+ */
+
+"use strict";
+
+describe('escapeTextForBrowser', function() {
+
+  var escapeTextForBrowser = require('escapeTextForBrowser');
+
+  it('should escape boolean to string', function() {
+    expect(escapeTextForBrowser(true)).toBe('true');
+    expect(escapeTextForBrowser(false)).toBe('false');
+  });
+
+  it('should escape object to string', function() {
+    var escaped = escapeTextForBrowser({
+      toString: function() {
+        return 'ponys';
+      }
+    });
+
+    expect(escaped).toBe('ponys');
+  });
+
+  it('should escape number to string', function() {
+    expect(escapeTextForBrowser(42)).toBe('42');
+  });
+
+  it('should escape string', function() {
+    var escaped = escapeTextForBrowser('<script type=\'\' src=""></script>');
+    expect(escaped).not.toContain('<');
+    expect(escaped).not.toContain('>');
+    expect(escaped).not.toContain('\'');
+    expect(escaped).not.toContain('/');
+    expect(escaped).not.toContain('\"');
+
+    escaped = escapeTextForBrowser('&');
+    expect(escaped).toBe('&amp;');
+  });
+
+});
diff --git a/src/utils/escapeTextForBrowser.js b/src/utils/escapeTextForBrowser.js
index 8e49d31e9e..26aed86338 100644
--- a/src/utils/escapeTextForBrowser.js
+++ b/src/utils/escapeTextForBrowser.js
@@ -19,8 +19,6 @@
 
 "use strict";
 
-var invariant = require('invariant');
-
 var ESCAPE_LOOKUP = {
   "&": "&amp;",
   ">": "&gt;",
@@ -30,6 +28,8 @@ var ESCAPE_LOOKUP = {
   "/": "&#x2f;"
 };
 
+var ESCAPE_REGEX = /[&><"'\/]/g;
+
 function escaper(match) {
   return ESCAPE_LOOKUP[match];
 }
@@ -37,24 +37,11 @@ function escaper(match) {
 /**
  * Escapes text to prevent scripting attacks.
  *
- * @param {number|string} text Text value to escape.
+ * @param {*} text Text value to escape.
  * @return {string} An escaped string.
  */
 function escapeTextForBrowser(text) {
-  var type = typeof text;
-  invariant(
-    type !== 'object',
-    'escapeTextForBrowser(...): Attempted to escape an object.'
-  );
-  if (text === '') {
-    return '';
-  } else {
-    if (type === 'string') {
-      return text.replace(/[&><"'\/]/g, escaper);
-    } else {
-      return (''+text).replace(/[&><"'\/]/g, escaper);
-    }
-  }
+  return ('' + text).replace(ESCAPE_REGEX, escaper);
 }
 
 module.exports = escapeTextForBrowser;

From b0645bd5d3bbea40e93194a6c403ce3ba633d45a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Tue, 15 Oct 2013 10:42:06 -0700
Subject: [PATCH 2/3] Be consistent with object naming in tests

This also fixes line length issues our linter was complaining about.
---
 src/dom/components/__tests__/ReactDOMInput-test.js   | 12 ++++++------
 .../components/__tests__/ReactDOMTextarea-test.js    | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/dom/components/__tests__/ReactDOMInput-test.js b/src/dom/components/__tests__/ReactDOMInput-test.js
index f5a2e17740..ea42b4e5a0 100644
--- a/src/dom/components/__tests__/ReactDOMInput-test.js
+++ b/src/dom/components/__tests__/ReactDOMInput-test.js
@@ -64,14 +64,14 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('false');
   });
 
-  it('should display "foobar" for `defaultValue` of `objectToString`', function() {
-    var objectToString = {
+  it('should display "foobar" for `defaultValue` of `objToString`', function() {
+    var objToString = {
       toString: function() {
         return "foobar";
       }
     };
 
-    var stub = <input type="text" defaultValue={objectToString} />;
+    var stub = <input type="text" defaultValue={objToString} />;
     var node = renderTextInput(stub);
 
     expect(node.value).toBe('foobar');
@@ -104,19 +104,19 @@ describe('ReactDOMInput', function() {
     expect(node.value).toEqual('false');
   });
 
-  it('should allow setting `value` to `objectToString`', function() {
+  it('should allow setting `value` to `objToString`', function() {
     var stub = <input type="text" value="foo" />;
     var node = renderTextInput(stub);
 
     expect(node.value).toBe('foo');
 
-    var objectToString = {
+    var objToString = {
       toString: function() {
         return "foobar";
       }
     };
 
-    stub.replaceProps({value: objectToString});
+    stub.replaceProps({value: objToString});
     expect(node.value).toEqual('foobar');
   });
 
diff --git a/src/dom/components/__tests__/ReactDOMTextarea-test.js b/src/dom/components/__tests__/ReactDOMTextarea-test.js
index 271cd4563f..aaca8ea596 100644
--- a/src/dom/components/__tests__/ReactDOMTextarea-test.js
+++ b/src/dom/components/__tests__/ReactDOMTextarea-test.js
@@ -69,14 +69,14 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('false');
   });
 
-  it('should display "foobar" for `defaultValue` of `objectToString`', function() {
-    var objectToString = {
+  it('should display "foobar" for `defaultValue` of `objToString`', function() {
+    var objToString = {
       toString: function() {
         return "foobar";
       }
     };
 
-    var stub = <textarea type="text" defaultValue={objectToString} />;
+    var stub = <textarea type="text" defaultValue={objToString} />;
     var node = renderTextarea(stub);
 
     expect(node.value).toBe('foobar');
@@ -119,18 +119,18 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toEqual('false');
   });
 
-  it('should allow setting `value` to `objectToString`', function() {
+  it('should allow setting `value` to `objToString`', function() {
     var stub = <textarea value="giraffe" />;
     var node = renderTextarea(stub);
 
     expect(node.value).toBe('giraffe');
 
-    var obj = {
+    var objToString = {
       toString: function() {
         return "foo";
       }
     };
-    stub.replaceProps({value: obj});
+    stub.replaceProps({value: objToString});
     expect(node.value).toEqual('foo');
   });
 

From 087c2afed191ddfe1161fa38668d4f5f583f8a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Tue, 15 Oct 2013 11:37:09 -0700
Subject: [PATCH 3/3] Make sure DOM components work in JSDOM

---
 src/dom/components/ReactDOMInput.js    | 4 +++-
 src/dom/components/ReactDOMTextarea.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/dom/components/ReactDOMInput.js b/src/dom/components/ReactDOMInput.js
index b38b4d1172..fce25d7cdc 100644
--- a/src/dom/components/ReactDOMInput.js
+++ b/src/dom/components/ReactDOMInput.js
@@ -103,7 +103,9 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
 
     var value = this.getValue();
     if (value != null) {
-      DOMPropertyOperations.setValueForProperty(rootNode, 'value', value);
+      // 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);
     }
   },
 
diff --git a/src/dom/components/ReactDOMTextarea.js b/src/dom/components/ReactDOMTextarea.js
index b53df29302..9da6fac114 100644
--- a/src/dom/components/ReactDOMTextarea.js
+++ b/src/dom/components/ReactDOMTextarea.js
@@ -113,7 +113,9 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
   componentDidUpdate: function(prevProps, prevState, rootNode) {
     var value = this.getValue();
     if (value != null) {
-      DOMPropertyOperations.setValueForProperty(rootNode, 'value', value);
+      // 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);
     }
   },