Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove createClass, PropTypes, DOM factories, and createMixin from React object (#9788)

Browse Source
This commit is contained in:
Dan Abramov
2017-05-30 15:35:30 +01:00
committed by GitHub
parent 319ba0bba9
commit fedb2ff8ec
12 changed files with 75 additions and 1769 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/addons/ReactDOMFactories.js
-169
View File
@@ -1,169 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMFactories
*/
'use strict';
var ReactElement = require('ReactElement');
/**
* Create a factory that creates HTML tag elements.
*
* @private
*/
var createDOMFactory = ReactElement.createFactory;
if (__DEV__) {
var ReactElementValidator = require('ReactElementValidator');
createDOMFactory = ReactElementValidator.createFactory;
}
/**
* Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
*
* @public
*/
var ReactDOMFactories = {
a: createDOMFactory('a'),
abbr: createDOMFactory('abbr'),
address: createDOMFactory('address'),
area: createDOMFactory('area'),
article: createDOMFactory('article'),
aside: createDOMFactory('aside'),
audio: createDOMFactory('audio'),
b: createDOMFactory('b'),
base: createDOMFactory('base'),
bdi: createDOMFactory('bdi'),
bdo: createDOMFactory('bdo'),
big: createDOMFactory('big'),
blockquote: createDOMFactory('blockquote'),
body: createDOMFactory('body'),
br: createDOMFactory('br'),
button: createDOMFactory('button'),
canvas: createDOMFactory('canvas'),
caption: createDOMFactory('caption'),
cite: createDOMFactory('cite'),
code: createDOMFactory('code'),
col: createDOMFactory('col'),
colgroup: createDOMFactory('colgroup'),
data: createDOMFactory('data'),
datalist: createDOMFactory('datalist'),
dd: createDOMFactory('dd'),
del: createDOMFactory('del'),
details: createDOMFactory('details'),
dfn: createDOMFactory('dfn'),
dialog: createDOMFactory('dialog'),
div: createDOMFactory('div'),
dl: createDOMFactory('dl'),
dt: createDOMFactory('dt'),
em: createDOMFactory('em'),
embed: createDOMFactory('embed'),
fieldset: createDOMFactory('fieldset'),
figcaption: createDOMFactory('figcaption'),
figure: createDOMFactory('figure'),
footer: createDOMFactory('footer'),
form: createDOMFactory('form'),
h1: createDOMFactory('h1'),
h2: createDOMFactory('h2'),
h3: createDOMFactory('h3'),
h4: createDOMFactory('h4'),
h5: createDOMFactory('h5'),
h6: createDOMFactory('h6'),
head: createDOMFactory('head'),
header: createDOMFactory('header'),
hgroup: createDOMFactory('hgroup'),
hr: createDOMFactory('hr'),
html: createDOMFactory('html'),
i: createDOMFactory('i'),
iframe: createDOMFactory('iframe'),
img: createDOMFactory('img'),
input: createDOMFactory('input'),
ins: createDOMFactory('ins'),
kbd: createDOMFactory('kbd'),
keygen: createDOMFactory('keygen'),
label: createDOMFactory('label'),
legend: createDOMFactory('legend'),
li: createDOMFactory('li'),
link: createDOMFactory('link'),
main: createDOMFactory('main'),
map: createDOMFactory('map'),
mark: createDOMFactory('mark'),
menu: createDOMFactory('menu'),
menuitem: createDOMFactory('menuitem'),
meta: createDOMFactory('meta'),
meter: createDOMFactory('meter'),
nav: createDOMFactory('nav'),
noscript: createDOMFactory('noscript'),
object: createDOMFactory('object'),
ol: createDOMFactory('ol'),
optgroup: createDOMFactory('optgroup'),
option: createDOMFactory('option'),
output: createDOMFactory('output'),
p: createDOMFactory('p'),
param: createDOMFactory('param'),
picture: createDOMFactory('picture'),
pre: createDOMFactory('pre'),
progress: createDOMFactory('progress'),
q: createDOMFactory('q'),
rp: createDOMFactory('rp'),
rt: createDOMFactory('rt'),
ruby: createDOMFactory('ruby'),
s: createDOMFactory('s'),
samp: createDOMFactory('samp'),
script: createDOMFactory('script'),
section: createDOMFactory('section'),
select: createDOMFactory('select'),
small: createDOMFactory('small'),
source: createDOMFactory('source'),
span: createDOMFactory('span'),
strong: createDOMFactory('strong'),
style: createDOMFactory('style'),
sub: createDOMFactory('sub'),
summary: createDOMFactory('summary'),
sup: createDOMFactory('sup'),
table: createDOMFactory('table'),
tbody: createDOMFactory('tbody'),
td: createDOMFactory('td'),
textarea: createDOMFactory('textarea'),
tfoot: createDOMFactory('tfoot'),
th: createDOMFactory('th'),
thead: createDOMFactory('thead'),
time: createDOMFactory('time'),
title: createDOMFactory('title'),
tr: createDOMFactory('tr'),
track: createDOMFactory('track'),
u: createDOMFactory('u'),
ul: createDOMFactory('ul'),
var: createDOMFactory('var'),
video: createDOMFactory('video'),
wbr: createDOMFactory('wbr'),
// SVG
circle: createDOMFactory('circle'),
clipPath: createDOMFactory('clipPath'),
defs: createDOMFactory('defs'),
ellipse: createDOMFactory('ellipse'),
g: createDOMFactory('g'),
image: createDOMFactory('image'),
line: createDOMFactory('line'),
linearGradient: createDOMFactory('linearGradient'),
mask: createDOMFactory('mask'),
path: createDOMFactory('path'),
pattern: createDOMFactory('pattern'),
polygon: createDOMFactory('polygon'),
polyline: createDOMFactory('polyline'),
radialGradient: createDOMFactory('radialGradient'),
rect: createDOMFactory('rect'),
stop: createDOMFactory('stop'),
svg: createDOMFactory('svg'),
text: createDOMFactory('text'),
tspan: createDOMFactory('tspan'),
};
module.exports = ReactDOMFactories;
src/addons/__tests__/ReactDOMFactories-test.js
-41
View File
@@ -1,41 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails react-core
*/
'use strict';
var React = require('React');
var {div} = require('ReactDOMFactories');
describe('ReactDOMFactories', () => {
it('allow factories to be called without warnings', () => {
spyOn(console, 'error');
spyOn(console, 'warn');
var element = div();
expect(element.type).toBe('div');
expect(console.error).not.toHaveBeenCalled();
expect(console.warn).not.toHaveBeenCalled();
});
it('warns once when accessing React.DOM methods', () => {
spyOn(console, 'warn');
var a = React.DOM.a();
var p = React.DOM.p();
expect(a.type).toBe('a');
expect(p.type).toBe('p');
expect(console.warn).toHaveBeenCalledTimes(1);
expect(console.warn.calls.first().args[0]).toContain(
'Warning: Accessing factories like React.DOM.a has been deprecated',
);
});
});
src/isomorphic/React.js
-107
View File
@@ -13,35 +13,23 @@
var ReactBaseClasses = require('ReactBaseClasses');
var ReactChildren = require('ReactChildren');
var ReactDOMFactories = require('ReactDOMFactories');
var ReactElement = require('ReactElement');
var ReactPropTypes = require('ReactPropTypes');
var ReactVersion = require('ReactVersion');
var onlyChild = require('onlyChild');
var checkPropTypes = require('prop-types/checkPropTypes');
var createReactClass = require('createClass');
var createElement = ReactElement.createElement;
var createFactory = ReactElement.createFactory;
var cloneElement = ReactElement.cloneElement;
if (__DEV__) {
var lowPriorityWarning = require('lowPriorityWarning');
var canDefineProperty = require('canDefineProperty');
var ReactElementValidator = require('ReactElementValidator');
createElement = ReactElementValidator.createElement;
createFactory = ReactElementValidator.createFactory;
cloneElement = ReactElementValidator.cloneElement;
}
var createMixin = function(mixin) {
return mixin;
};
var React = {
// Modern
Children: {
map: ReactChildren.map,
forEach: ReactChildren.forEach,
@@ -57,19 +45,7 @@ var React = {
cloneElement: cloneElement,
isValidElement: ReactElement.isValidElement,
// TODO (bvaughn) Remove these getters before 16.0.0
PropTypes: ReactPropTypes,
checkPropTypes: checkPropTypes,
createClass: createReactClass,
// Classic
createFactory: createFactory,
createMixin: createMixin,
// This looks DOM specific but these are actually isomorphic helpers
// since they are just generating DOM strings.
DOM: ReactDOMFactories,
version: ReactVersion,
@@ -84,89 +60,6 @@ if (__DEV__) {
ReactComponentTreeHook: require('ReactComponentTreeHook'),
ReactDebugCurrentFrame: require('ReactDebugCurrentFrame'),
});
let warnedForCheckPropTypes = false;
let warnedForCreateMixin = false;
let warnedForCreateClass = false;
let warnedForPropTypes = false;
React.createMixin = function(mixin) {
lowPriorityWarning(
warnedForCreateMixin,
'React.createMixin is deprecated and should not be used. You ' +
'can use this mixin directly instead.',
);
warnedForCreateMixin = true;
return mixin;
};
// TODO (bvaughn) Remove all of these accessors before 16.0.0
if (canDefineProperty) {
Object.defineProperty(React, 'checkPropTypes', {
get() {
lowPriorityWarning(
warnedForCheckPropTypes,
'checkPropTypes has been moved to a separate package. ' +
'Accessing React.checkPropTypes is no longer supported ' +
'and will be removed completely in React 16. ' +
'Use the prop-types package on npm instead. ' +
'(https://fb.me/migrating-from-react-proptypes)',
);
warnedForCheckPropTypes = true;
return checkPropTypes;
},
});
Object.defineProperty(React, 'createClass', {
get: function() {
lowPriorityWarning(
warnedForCreateClass,
'React.createClass is no longer supported. Use a plain JavaScript ' +
"class instead. If you're not yet ready to migrate, " +
'create-react-class is available on npm as a drop-in replacement. ' +
'(https://fb.me/migrating-from-react-create-class)',
);
warnedForCreateClass = true;
return createReactClass;
},
});
Object.defineProperty(React, 'PropTypes', {
get() {
lowPriorityWarning(
warnedForPropTypes,
'PropTypes has been moved to a separate package. ' +
'Accessing React.PropTypes is no longer supported ' +
'and will be removed completely in React 16. ' +
'Use the prop-types package on npm instead. ' +
'(https://fb.me/migrating-from-react-proptypes)',
);
warnedForPropTypes = true;
return ReactPropTypes;
},
});
}
// React.DOM factories are deprecated. Wrap these methods so that
// invocations of the React.DOM namespace and alert users to switch
// to the `react-addons-dom-factories` package.
React.DOM = {};
var warnedForFactories = false;
Object.keys(ReactDOMFactories).forEach(function(factory) {
React.DOM[factory] = function(...args) {
if (!warnedForFactories) {
lowPriorityWarning(
false,
'Accessing factories like React.DOM.%s has been deprecated ' +
'and will be removed in the future. Use the ' +
'react-addons-dom-factories package instead.',
factory,
);
warnedForFactories = true;
}
return ReactDOMFactories[factory](...args);
};
});
}
module.exports = React;
src/isomorphic/__tests__/React-test.js
-74
View File
@@ -1,74 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails react-core
*/
'use strict';
describe('React', () => {
var React;
beforeEach(() => {
React = require('react');
});
it('should log a deprecation warning once when using React.createMixin', () => {
spyOn(console, 'warn');
React.createMixin();
React.createMixin();
expectDev(console.warn.calls.count()).toBe(1);
expectDev(console.warn.calls.argsFor(0)[0]).toContain(
'React.createMixin is deprecated and should not be used',
);
});
it('should warn once when attempting to access React.createClass', () => {
spyOn(console, 'warn');
let createClass = React.createClass;
createClass = React.createClass;
expect(createClass).not.toBe(undefined);
expectDev(console.warn.calls.count()).toBe(1);
expectDev(console.warn.calls.argsFor(0)[0]).toContain(
'React.createClass is no longer supported. Use a plain JavaScript ' +
"class instead. If you're not yet ready to migrate, " +
'create-react-class is available on npm as a drop-in replacement. ' +
'(https://fb.me/migrating-from-react-create-class)',
);
});
it('should warn once when attempting to access React.PropTypes', () => {
spyOn(console, 'warn');
let PropTypes = React.PropTypes;
PropTypes = React.PropTypes;
expect(PropTypes).not.toBe(undefined);
expectDev(console.warn.calls.count()).toBe(1);
expectDev(console.warn.calls.argsFor(0)[0]).toContain(
'PropTypes has been moved to a separate package. ' +
'Accessing React.PropTypes is no longer supported ' +
'and will be removed completely in React 16. ' +
'Use the prop-types package on npm instead. ' +
'(https://fb.me/migrating-from-react-proptypes)',
);
});
it('should warn once when attempting to access React.checkPropTypes', () => {
spyOn(console, 'warn');
let checkPropTypes = React.checkPropTypes;
checkPropTypes = React.checkPropTypes;
expect(checkPropTypes).not.toBe(undefined);
expectDev(console.warn.calls.count()).toBe(1);
expectDev(console.warn.calls.argsFor(0)[0]).toContain(
'checkPropTypes has been moved to a separate package. ' +
'Accessing React.checkPropTypes is no longer supported ' +
'and will be removed completely in React 16. ' +
'Use the prop-types package on npm instead. ' +
'(https://fb.me/migrating-from-react-proptypes)',
);
});
});
src/isomorphic/classic/class/__tests__/create-react-class-integration-test.js → src/isomorphic/classic/__tests__/createReactClassIntegration-test.js
+2 -3
View File
@@ -23,11 +23,10 @@ describe('create-react-class-integration', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('ReactTestUtils');
var createReactClassFactory = require('create-react-class/factory');
createReactClass = createReactClassFactory(
createReactClass = require('create-react-class/factory')(
React.Component,
React.isValidElement,
require('ReactNoopUpdateQueue'),
new React.Component().updater,
);
});
src/isomorphic/classic/class/createClass.js
-19
View File
@@ -1,19 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule createClass
*/
'use strict';
var {Component} = require('ReactBaseClasses');
var {isValidElement} = require('ReactElement');
var ReactNoopUpdateQueue = require('ReactNoopUpdateQueue');
var factory = require('create-react-class/factory');
module.exports = factory(Component, isValidElement, ReactNoopUpdateQueue);
src/isomorphic/classic/types/ReactPropTypes.js
-14
View File
@@ -1,14 +0,0 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactPropTypes
*/
'use strict';
module.exports = require('prop-types');
src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
-1175
View File
File diff suppressed because it is too large Load Diff
src/renderers/__tests__/ReactCompositeComponent-test.js
+28 -28
View File
@@ -17,8 +17,8 @@ var React;
var ReactDOM;
var ReactDOMServer;
var ReactCurrentOwner;
var ReactPropTypes;
var ReactTestUtils;
var PropTypes;
var shallowEqual;
var shallowCompare;
@@ -29,8 +29,8 @@ describe('ReactCompositeComponent', () => {
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactCurrentOwner = require('ReactCurrentOwner');
ReactPropTypes = require('ReactPropTypes');
ReactTestUtils = require('ReactTestUtils');
PropTypes = require('prop-types');
shallowEqual = require('fbjs/lib/shallowEqual');
shallowCompare = function(instance, nextProps, nextState) {
@@ -518,7 +518,7 @@ describe('ReactCompositeComponent', () => {
class Child extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
foo: PropTypes.string,
};
getChildContext() {
@@ -534,7 +534,7 @@ describe('ReactCompositeComponent', () => {
class Grandchild extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string,
foo: PropTypes.string,
};
render() {
@@ -576,8 +576,8 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
flag: ReactPropTypes.bool,
foo: PropTypes.string,
flag: PropTypes.bool,
};
state = {
@@ -604,8 +604,8 @@ describe('ReactCompositeComponent', () => {
class Child extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string,
flag: ReactPropTypes.bool,
foo: PropTypes.string,
flag: PropTypes.bool,
};
render() {
@@ -629,7 +629,7 @@ describe('ReactCompositeComponent', () => {
it('should pass context when re-rendered for static child within a composite component', () => {
class Parent extends React.Component {
static childContextTypes = {
flag: ReactPropTypes.bool,
flag: PropTypes.bool,
};
state = {
@@ -649,7 +649,7 @@ describe('ReactCompositeComponent', () => {
class Child extends React.Component {
static contextTypes = {
flag: ReactPropTypes.bool,
flag: PropTypes.bool,
};
render() {
@@ -685,8 +685,8 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
depth: ReactPropTypes.number,
foo: PropTypes.string,
depth: PropTypes.number,
};
getChildContext() {
@@ -703,12 +703,12 @@ describe('ReactCompositeComponent', () => {
class Child extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string,
depth: ReactPropTypes.number,
foo: PropTypes.string,
depth: PropTypes.number,
};
static childContextTypes = {
depth: ReactPropTypes.number,
depth: PropTypes.number,
};
getChildContext() {
@@ -725,8 +725,8 @@ describe('ReactCompositeComponent', () => {
class Grandchild extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string,
depth: ReactPropTypes.number,
foo: PropTypes.string,
depth: PropTypes.number,
};
render() {
@@ -746,8 +746,8 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
depth: ReactPropTypes.number,
foo: PropTypes.string,
depth: PropTypes.number,
};
state = {
@@ -772,8 +772,8 @@ describe('ReactCompositeComponent', () => {
class Child extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string,
depth: ReactPropTypes.number,
foo: PropTypes.string,
depth: PropTypes.number,
};
render() {
@@ -797,7 +797,7 @@ describe('ReactCompositeComponent', () => {
it('unmasked context propagates through updates', () => {
class Leaf extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string.isRequired,
foo: PropTypes.string.isRequired,
};
componentWillReceiveProps(nextProps, nextContext) {
@@ -831,7 +831,7 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
foo: PropTypes.string,
};
getChildContext() {
@@ -863,7 +863,7 @@ describe('ReactCompositeComponent', () => {
class GrandChild extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string.isRequired,
foo: PropTypes.string.isRequired,
};
componentWillReceiveProps(nextProps, nextContext) {
@@ -885,7 +885,7 @@ describe('ReactCompositeComponent', () => {
class ChildWithContext extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string.isRequired,
foo: PropTypes.string.isRequired,
};
componentWillReceiveProps(nextProps, nextContext) {
@@ -925,7 +925,7 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
foo: PropTypes.string,
};
state = {
@@ -1126,7 +1126,7 @@ describe('ReactCompositeComponent', () => {
it('context should be passed down from the parent', () => {
class Parent extends React.Component {
static childContextTypes = {
foo: ReactPropTypes.string,
foo: PropTypes.string,
};
getChildContext() {
@@ -1142,7 +1142,7 @@ describe('ReactCompositeComponent', () => {
class Component extends React.Component {
static contextTypes = {
foo: ReactPropTypes.string.isRequired,
foo: PropTypes.string.isRequired,
};
render() {