{"commit":{"authorName":"Michael Ridgway","revision":"b1fc5f949d10d75bc566b1be7722227043fe4c44","authoredAt":"2015-07-23T16:41:47-07:00","authorEmail":"mridgway@yahoo-inc.com","subject":"Allow classes created with React.createClass to opt out of autobinding","shortRevision":"b1fc5f949d"},"parents":["bcfba9178fed6fe435c6976e353c183504160a88"],"files":[{"path":"src\/isomorphic\/classic\/class\/ReactClass.js","status":"M"},{"path":"src\/isomorphic\/classic\/class\/__tests__\/ReactBindOptout-test.js","status":"A"}],"patch":"diff --git a\/src\/isomorphic\/classic\/class\/ReactClass.js b\/src\/isomorphic\/classic\/class\/ReactClass.js\nindex 74c25242a6..f8ddb2522f 100644\n--- a\/src\/isomorphic\/classic\/class\/ReactClass.js\n+++ b\/src\/isomorphic\/classic\/class\/ReactClass.js\n@@ -395,6 +395,7 @@ var RESERVED_SPEC_KEYS = {\n statics: function(Constructor, statics) {\n mixStaticSpecIntoComponent(Constructor, statics);\n },\n+ autobind: function() {}, \/\/ noop\n };\n \n function validateTypeDef(Constructor, typeDef, location) {\n@@ -499,7 +500,8 @@ function mixSpecIntoComponent(Constructor, spec) {\n var shouldAutoBind =\n isFunction &&\n !isReactClassMethod &&\n- !isAlreadyDefined;\n+ !isAlreadyDefined &&\n+ spec.autobind !== false;\n \n if (shouldAutoBind) {\n if (!proto.__reactAutoBindMap) {\ndiff --git a\/src\/isomorphic\/classic\/class\/__tests__\/ReactBindOptout-test.js b\/src\/isomorphic\/classic\/class\/__tests__\/ReactBindOptout-test.js\nnew file mode 100644\nindex 0000000000..cf410eb4e9\n--- \/dev\/null\n+++ b\/src\/isomorphic\/classic\/class\/__tests__\/ReactBindOptout-test.js\n@@ -0,0 +1,234 @@\n+\/**\n+ * Copyright 2013-2015, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @emails react-core\n+ *\/\n+\/*global global:true*\/\n+'use strict';\n+\n+var mocks = require('mocks');\n+var React = require('React');\n+var ReactTestUtils = require('ReactTestUtils');\n+var reactComponentExpect = require('reactComponentExpect');\n+\n+\/\/ TODO: Test render and all stock methods.\n+describe('autobind optout', function() {\n+\n+ it('should work with manual binding', function() {\n+\n+ var mouseDidEnter = mocks.getMockFunction();\n+ var mouseDidLeave = mocks.getMockFunction();\n+ var mouseDidClick = mocks.getMockFunction();\n+\n+ var TestBindComponent = React.createClass({\n+ autobind: false,\n+ getInitialState: function() {\n+ return {something: 'hi'};\n+ },\n+ onMouseEnter: mouseDidEnter,\n+ onMouseLeave: mouseDidLeave,\n+ onClick: mouseDidClick,\n+\n+ render: function() {\n+ return (\n+ \n+ );\n+ },\n+ });\n+\n+ var instance1 = ;\n+ var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);\n+ var rendered1 = reactComponentExpect(mountedInstance1)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ var instance2 = ;\n+ var mountedInstance2 = ReactTestUtils.renderIntoDocument(instance2);\n+ var rendered2 = reactComponentExpect(mountedInstance2)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ ReactTestUtils.Simulate.click(rendered1);\n+ expect(mouseDidClick.mock.instances.length).toBe(1);\n+ expect(mouseDidClick.mock.instances[0]).toBe(mountedInstance1);\n+\n+ ReactTestUtils.Simulate.click(rendered2);\n+ expect(mouseDidClick.mock.instances.length).toBe(2);\n+ expect(mouseDidClick.mock.instances[1]).toBe(mountedInstance2);\n+\n+ ReactTestUtils.Simulate.mouseOver(rendered1);\n+ expect(mouseDidEnter.mock.instances.length).toBe(1);\n+ expect(mouseDidEnter.mock.instances[0]).toBe(mountedInstance1);\n+\n+ ReactTestUtils.Simulate.mouseOver(rendered2);\n+ expect(mouseDidEnter.mock.instances.length).toBe(2);\n+ expect(mouseDidEnter.mock.instances[1]).toBe(mountedInstance2);\n+\n+ ReactTestUtils.Simulate.mouseOut(rendered1);\n+ expect(mouseDidLeave.mock.instances.length).toBe(1);\n+ expect(mouseDidLeave.mock.instances[0]).toBe(mountedInstance1);\n+\n+ ReactTestUtils.Simulate.mouseOut(rendered2);\n+ expect(mouseDidLeave.mock.instances.length).toBe(2);\n+ expect(mouseDidLeave.mock.instances[1]).toBe(mountedInstance2);\n+ });\n+\n+ it('should not hold reference to instance', function() {\n+ var mouseDidClick = function () {\n+ void this.state.something;\n+ };\n+\n+ var TestBindComponent = React.createClass({\n+ autobind: false,\n+ getInitialState: function() {\n+ return {something: 'hi'};\n+ },\n+ onClick: mouseDidClick,\n+\n+ \/\/ auto binding only occurs on top level functions in class defs.\n+ badIdeas: {\n+ badBind: function() {\n+ void this.state.something;\n+ },\n+ },\n+\n+ render: function() {\n+ return (\n+ \n+ );\n+ },\n+ });\n+\n+ var instance1 = ;\n+ var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);\n+ var rendered1 = reactComponentExpect(mountedInstance1)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ var instance2 = ;\n+ var mountedInstance2 = ReactTestUtils.renderIntoDocument(instance2);\n+ var rendered2 = reactComponentExpect(mountedInstance2)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ expect(function() {\n+ var badIdea = instance1.badIdeas.badBind;\n+ badIdea();\n+ }).toThrow();\n+\n+ expect(mountedInstance1.onClick).toBe(mountedInstance2.onClick);\n+\n+ expect(function () {\n+ ReactTestUtils.Simulate.click(rendered1);\n+ }).toThrow();\n+\n+ expect(function () {\n+ ReactTestUtils.Simulate.click(rendered2);\n+ }).toThrow();\n+ });\n+\n+ it('works with mixins that have not opted out of autobinding', function() {\n+ var mouseDidClick = mocks.getMockFunction();\n+\n+ var TestMixin = {\n+ onClick: mouseDidClick,\n+ };\n+\n+ var TestBindComponent = React.createClass({\n+ mixins: [TestMixin],\n+\n+ render: function() {\n+ return

;\n+ },\n+ });\n+\n+ var instance1 = ;\n+ var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);\n+ var rendered1 = reactComponentExpect(mountedInstance1)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ ReactTestUtils.Simulate.click(rendered1);\n+ expect(mouseDidClick.mock.instances.length).toBe(1);\n+ expect(mouseDidClick.mock.instances[0]).toBe(mountedInstance1);\n+ });\n+\n+ it('works with mixins that have opted out of autobinding', function() {\n+ var mouseDidClick = mocks.getMockFunction();\n+\n+ var TestMixin = {\n+ autobind: false,\n+ onClick: mouseDidClick,\n+ };\n+\n+ var TestBindComponent = React.createClass({\n+ mixins: [TestMixin],\n+\n+ render: function() {\n+ return

;\n+ },\n+ });\n+\n+ var instance1 = ;\n+ var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);\n+ var rendered1 = reactComponentExpect(mountedInstance1)\n+ .expectRenderedChild()\n+ .instance();\n+\n+ ReactTestUtils.Simulate.click(rendered1);\n+ expect(mouseDidClick.mock.instances.length).toBe(1);\n+ expect(mouseDidClick.mock.instances[0]).toBe(mountedInstance1);\n+ });\n+\n+ it('does not warn if you try to bind to this', function() {\n+ spyOn(console, 'error');\n+\n+ var TestBindComponent = React.createClass({\n+ autobind: false,\n+ handleClick: function() { },\n+ render: function() {\n+ return

;\n+ },\n+ });\n+\n+ ReactTestUtils.renderIntoDocument();\n+\n+ expect(console.error.argsForCall.length).toBe(0);\n+ });\n+\n+ it('does not warn if you pass an manually bound method to setState', function() {\n+ spyOn(console, 'error');\n+\n+ var TestBindComponent = React.createClass({\n+ autobind: false,\n+ getInitialState: function() {\n+ return {foo: 1};\n+ },\n+ componentDidMount: function() {\n+ this.setState({foo: 2}, this.handleUpdate.bind(this));\n+ },\n+ handleUpdate: function() {\n+\n+ },\n+ render: function() {\n+ return

;\n+ },\n+ });\n+\n+ ReactTestUtils.renderIntoDocument();\n+\n+ expect(console.error.argsForCall.length).toBe(0);\n+ });\n+\n+});\n","body":""}

dillon1000/react

Files changed