diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 8452fb3f793..8665cf5b75e 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -219,6 +219,7 @@ src/isomorphic/classic/class/__tests__/ReactClassMixin-test.js * should work with a null getInitialState return value and a mixin src/isomorphic/classic/element/__tests__/ReactElement-test.js +* should warn when `createFactory` is used * uses the fallback value when in an environment without Symbol * returns a complete element according to spec * should warn when `key` is being accessed on createClass element diff --git a/src/isomorphic/classic/element/ReactDOMFactories.js b/src/isomorphic/classic/element/ReactDOMFactories.js index 4890fa676c0..edb9ffb1d6f 100644 --- a/src/isomorphic/classic/element/ReactDOMFactories.js +++ b/src/isomorphic/classic/element/ReactDOMFactories.js @@ -18,10 +18,10 @@ var ReactElement = require('ReactElement'); * * @private */ -var createDOMFactory = ReactElement.createFactory; +var createDOMFactory = type => ReactElement.createElement.bind(null, type); if (__DEV__) { var ReactElementValidator = require('ReactElementValidator'); - createDOMFactory = ReactElementValidator.createFactory; + createDOMFactory = type => ReactElementValidator.createElement.bind(null, type); } /** diff --git a/src/isomorphic/classic/element/ReactElementValidator.js b/src/isomorphic/classic/element/ReactElementValidator.js index b8146bfd86d..04436c77bda 100644 --- a/src/isomorphic/classic/element/ReactElementValidator.js +++ b/src/isomorphic/classic/element/ReactElementValidator.js @@ -29,6 +29,8 @@ var getComponentName = require('getComponentName'); var getIteratorFn = require('getIteratorFn'); var warning = require('warning'); +var didWarncreateFactory = false; + function getDeclarationErrorAddendum() { if (ReactCurrentOwner.current) { var name = getComponentName(ReactCurrentOwner.current); @@ -273,6 +275,15 @@ var ReactElementValidator = { validatedFactory.type = type; if (__DEV__) { + if (!didWarncreateFactory) { + warning( + false, + 'React.createFactory is deprecated: ' + + 'You can create own createFactory, which is a one-liner. ' + + '`var createFacotry = (type) => ReactElement.createElement.bind(null, type)`' + ); + didWarncreateFactory = true; + } if (canDefineProperty) { Object.defineProperty( validatedFactory, diff --git a/src/isomorphic/classic/element/__tests__/ReactElement-test.js b/src/isomorphic/classic/element/__tests__/ReactElement-test.js index 13187cd3b0d..e33688541b4 100644 --- a/src/isomorphic/classic/element/__tests__/ReactElement-test.js +++ b/src/isomorphic/classic/element/__tests__/ReactElement-test.js @@ -16,6 +16,7 @@ var ReactDOM; var ReactTestUtils; var ReactDOMFeatureFlags; + describe('ReactElement', () => { var ComponentClass; var originalSymbol; @@ -45,12 +46,27 @@ describe('ReactElement', () => { global.Symbol = originalSymbol; }); + it('should warn when `createFactory` is used', () => { + spyOn(console, 'error'); + expectDev(console.error.calls.count()).toBe(0); + React.createFactory('div'); + expectDev(console.error.calls.count()).toBe(1); + expectDev(console.error.calls.argsFor(0)[0]).toContain( + 'React.createFactory is deprecated: ' + + 'You can create own createFactory, which is a one-liner. ' + + '`var createFacotry = (type) => ReactElement.createElement.bind(null, type)`' + ); + + React.createFactory('div'); + expectDev(console.error.calls.count()).toBe(1); + }); + it('uses the fallback value when in an environment without Symbol', () => { expect(
.$$typeof).toBe(0xeac7); }); it('returns a complete element according to spec', () => { - var element = React.createFactory(ComponentClass)(); + var element = React.createElement(ComponentClass); expect(element.type).toBe(ComponentClass); expect(element.key).toBe(null); expect(element.ref).toBe(null); @@ -162,7 +178,7 @@ describe('ReactElement', () => { }); it('allows a string to be passed as the type', () => { - var element = React.createFactory('div')(); + var element = React.createElement('div'); expect(element.type).toBe('div'); expect(element.key).toBe(null); expect(element.ref).toBe(null); @@ -172,13 +188,13 @@ describe('ReactElement', () => { }); it('returns an immutable element', () => { - var element = React.createFactory(ComponentClass)(); + var element = React.createElement(ComponentClass); expect(() => element.type = 'div').toThrow(); }); it('does not reuse the original config object', () => { var config = {foo: 1}; - var element = React.createFactory(ComponentClass)(config); + var element = React.createElement(ComponentClass, config); expect(element.props.foo).toBe(1); config.foo = 2; expect(element.props.foo).toBe(1); @@ -186,12 +202,12 @@ describe('ReactElement', () => { it('does not fail if config has no prototype', () => { var config = Object.create(null, {foo: {value: 1, enumerable: true}}); - var element = React.createFactory(ComponentClass)(config); + var element = React.createElement(ComponentClass, config); expect(element.props.foo).toBe(1); }); it('extracts key and ref from the config', () => { - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { key: '12', ref: '34', foo: '56', @@ -205,7 +221,7 @@ describe('ReactElement', () => { }); it('extracts null key and ref', () => { - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { key: null, ref: null, foo: '12', @@ -224,7 +240,7 @@ describe('ReactElement', () => { key: undefined, ref: undefined, }; - var element = React.createFactory(ComponentClass)(props); + var element = React.createElement(ComponentClass, props); expect(element.type).toBe(ComponentClass); expect(element.key).toBe(null); expect(element.ref).toBe(null); @@ -241,7 +257,7 @@ describe('ReactElement', () => { }); it('coerces the key to a string', () => { - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { key: 12, foo: '56', }); @@ -254,12 +270,11 @@ describe('ReactElement', () => { }); it('preserves the owner on the element', () => { - var Component = React.createFactory(ComponentClass); var element; var Wrapper = React.createClass({ render: function() { - element = Component(); + element = React.createElement(ComponentClass); return element; }, }); @@ -278,7 +293,7 @@ describe('ReactElement', () => { it('merges an additional argument onto the children prop', () => { spyOn(console, 'error'); var a = 1; - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { children: 'text', }, a); expect(element.props.children).toBe(a); @@ -287,7 +302,7 @@ describe('ReactElement', () => { it('does not override children if no rest args are provided', () => { spyOn(console, 'error'); - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { children: 'text', }); expect(element.props.children).toBe('text'); @@ -296,7 +311,7 @@ describe('ReactElement', () => { it('overrides children if null is provided as an argument', () => { spyOn(console, 'error'); - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { children: 'text', }, null); expect(element.props.children).toBe(null); @@ -308,7 +323,7 @@ describe('ReactElement', () => { var a = 1; var b = 2; var c = 3; - var element = React.createFactory(ComponentClass)(null, a, b, c); + var element = React.createElement(ComponentClass, null, a, b, c); expect(element.props.children).toEqual([1, 2, 3]); expectDev(console.error.calls.count()).toBe(0); }); @@ -529,7 +544,7 @@ describe('ReactElement', () => { }); -describe('comparing jsx vs .createFactory() vs .createElement()', () => { +describe('comparing jsx vs .createElement()', () => { var Child; beforeEach(() => { @@ -573,6 +588,7 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => { describe('when using parent that uses .createFactory()', () => { var factory, instance; beforeEach(() => { + spyOn(console, 'error'); var childFactory = React.createFactory(Child); var Parent = React.createClass({ render: function() { @@ -598,15 +614,14 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => { }); describe('when using parent that uses .createElement()', () => { - var factory, instance; + var instance; beforeEach(() => { var Parent = React.createClass({ render: function() { return React.DOM.div({}, React.createElement(Child, { ref: 'child', foo: 'foo value' }, 'children value')); }, }); - factory = React.createFactory(Parent); - instance = ReactTestUtils.renderIntoDocument(factory()); + instance = ReactTestUtils.renderIntoDocument(React.createElement(Parent)); }); it('should scry children but cannot', () => { diff --git a/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js b/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js index 49af3ea80e5..9f1fe38f6a1 100644 --- a/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js +++ b/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js @@ -323,7 +323,7 @@ describe('ReactElementClone', () => { }); it('should ignore undefined key and ref', () => { - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { key: '12', ref: '34', foo: '56', @@ -343,7 +343,7 @@ describe('ReactElementClone', () => { }); it('should extract null key and ref', () => { - var element = React.createFactory(ComponentClass)({ + var element = React.createElement(ComponentClass, { key: '12', ref: '34', foo: '56', diff --git a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js index 6906eb16a9d..98b122de65b 100644 --- a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js +++ b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js @@ -40,7 +40,7 @@ describe('ReactElementValidator', () => { it('warns for keys for arrays of elements in rest args', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); Component(null, [Component(), Component()]); @@ -52,7 +52,7 @@ describe('ReactElementValidator', () => { it('warns for keys for arrays of elements with owner info', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); var InnerClass = React.createClass({ displayName: 'InnerClass', @@ -61,7 +61,7 @@ describe('ReactElementValidator', () => { }, }); - var InnerComponent = React.createFactory(InnerClass); + var InnerComponent = React.createElement.bind(null, InnerClass); var ComponentWrapper = React.createClass({ displayName: 'ComponentWrapper', @@ -185,7 +185,7 @@ describe('ReactElementValidator', () => { it('warns for keys for iterables of elements in rest args', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); var iterable = { '@@iterator': function() { @@ -209,7 +209,7 @@ describe('ReactElementValidator', () => { it('does not warns for arrays of elements with keys', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); Component(null, [Component({key: '#1'}), Component({key: '#2'})]); @@ -218,7 +218,7 @@ describe('ReactElementValidator', () => { it('does not warns for iterable elements with keys', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); var iterable = { '@@iterator': function() { @@ -242,7 +242,7 @@ describe('ReactElementValidator', () => { it('does not warn when the element is directly in rest args', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); Component(null, Component(), Component()); @@ -251,7 +251,7 @@ describe('ReactElementValidator', () => { it('does not warn when the array contains a non-element', () => { spyOn(console, 'error'); - var Component = React.createFactory(ComponentClass); + var Component = React.createElement.bind(null, ComponentClass); Component(null, [{}, {}]); @@ -479,14 +479,15 @@ describe('ReactElementValidator', () => { }); var TestFactory = React.createFactory(TestComponent); expect(TestFactory.type).toBe(TestComponent); - expectDev(console.error.calls.count()).toBe(1); - expectDev(console.error.calls.argsFor(0)[0]).toBe( + // including a deprecated warning + expectDev(console.error.calls.count()).toBe(2); + expectDev(console.error.calls.argsFor(1)[0]).toBe( 'Warning: Factory.type is deprecated. Access the class directly before ' + 'passing it to createFactory.' ); // Warn once, not again expect(TestFactory.type).toBe(TestComponent); - expectDev(console.error.calls.count()).toBe(1); + expectDev(console.error.calls.count()).toBe(2); }); it('does not warn when using DOM node as children', () => { diff --git a/src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee b/src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee index de03d875b0e..5d46be8ad9d 100644 --- a/src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee +++ b/src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee @@ -24,15 +24,15 @@ describe 'ReactCoffeeScriptClass', -> container = document.createElement 'div' attachedListener = null renderedName = null - div = React.createFactory 'div' - span = React.createFactory 'span' + div = React.createElement.bind null, 'div' + span = React.createElement.bind null, 'span' class InnerComponent extends React.Component getName: -> this.props.name render: -> attachedListener = this.props.onClick renderedName = this.props.name return div className: this.props.name - Inner = React.createFactory InnerComponent + Inner = React.createElement.bind null, InnerComponent test = (element, expectedTag, expectedClassName) -> instance = ReactDOM.render(element, container)