Move ReactDOMFactories into separate package (#8356)
- Update examples to no longer use React.DOM - Add package and documentation entries for react-addons-dom-factories - Update dom-factories readme - Set up proxy to intercept React.DOM usage - Update ReactDOM children tests to use createElement - Add more specific warning assertion for React DOM factories - Do not use expectDev in ReactDOMFactories tests
Nathan Hunzaker committed
Apr 24, 2017 at 11:08 UTC
86dd083f455f71369b4c1bf1e798dd2fd5a3c9c4
11 files changed
+123
-16
docs/docs/addons.md
+1
@@ -23,6 +23,7 @@ The add-ons below are considered legacy and their use is discouraged.
23
- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/react/docs/react-api.html#react.purecomponent) instead.
24
- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update.
25
- [`update`](update.html). Use [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper) instead.
26
+- [`ReactDOMFactories`](dom-factories.html), pre-configured DOM factories to make React easier to use without JSX.
27
28
### Deprecated Add-ons
29
packages/react-dom-factories/README.md
new
+20
@@ -0,0 +1,20 @@
1
+# `react-addons-dom-factories`
2
+
3
+> Note:
4
+> `ReactDOMFactories` is a legacy add-on. Consider using
5
+> `React.createFactory` or JSX instead.
6
+
7
+Prior to version 16.0.0, React maintained a whitelist of
8
+pre-configured DOM factories. These predefined factories have been
9
+moved to the `react-addons-dom-factories` library.
10
+
11
+## Example
12
+
13
+```javascript
14
+import ReactDOM from 'react-dom';
15
+import DOM from 'react-addons-dom-factories'; // ES6
16
+
17
+const greeting = DOM.div({ className: 'greeting' }, DOM.p(null, 'Hello, world!'));
18
+
19
+ReactDOM.render(greeting, document.getElementById('app'))
20
+```
packages/react-dom-factories/index.js
new
+3
@@ -0,0 +1,3 @@
1
+'use strict';
2
+
3
+module.exports = require('./lib/ReactDOMFactories');
packages/react-dom-factories/package.json
new
+25
@@ -0,0 +1,25 @@
1
+{
2
+ "name": "react-dom-factories",
3
+ "version": "16.0.0-alpha",
4
+ "description": "React package for DOM factory methods.",
5
+ "main": "index.js",
6
+ "repository": "facebook/react",
7
+ "keywords": [
8
+ "react"
9
+ ],
10
+ "license": "BSD-3-Clause",
11
+ "bugs": {
12
+ "url": "https://github.com/facebook/react/issues"
13
+ },
14
+ "homepage": "https://facebook.github.io/react/",
15
+ "peerDependencies": {
16
+ "react": "^16.0.0-alpha"
17
+ },
18
+ "files": [
19
+ "LICENSE",
20
+ "PATENTS",
21
+ "README.md",
22
+ "index.js",
23
+ "lib/"
24
+ ]
25
+}
scripts/fiber/tests-passing.txt
+4
-1
@@ -42,6 +42,10 @@ scripts/shared/__tests__/evalToString-test.js
42
* should support string concat (`+`)
43
* should throw when it finds other types
44
45
+src/addons/__tests__/ReactDOMFactories-test.js
46
+* allow factories to be called without warnings
47
+* warns once when accessing React.DOM methods
48
+
49
src/isomorphic/__tests__/React-test.js
50
* should log a deprecation warning once when using React.createMixin
51
* should warn once when attempting to access React.createClass
@@ -839,7 +843,6 @@ src/renderers/dom/shared/__tests__/ReactDOM-test.js
843
* should allow children to be passed as an argument
844
* should overwrite props.children with children argument
845
* should purge the DOM cache when removing nodes
842
-* allow React.DOM factories to be called without warnings
846
* throws in render() if the mount callback is not a function
847
* throws in render() if the update callback is not a function
848
* preserves focus
src/addons/ReactDOMFactories.js
renamed
-1
@@ -26,7 +26,6 @@ if (__DEV__) {
26
27
/**
28
* Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
29
- * This is also accessible via `React.DOM`.
29
*
30
* @public
31
*/
src/addons/__tests__/ReactDOMFactories-test.js
new
+39
@@ -0,0 +1,39 @@
1
+/**
2
+ * Copyright 2013-present, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @emails react-core
10
+ */
11
+
12
+'use strict';
13
+
14
+var React = require('React');
15
+var {div} = require('ReactDOMFactories');
16
+
17
+describe('ReactDOMFactories', () => {
18
+ it('allow factories to be called without warnings', () => {
19
+ spyOn(console, 'error');
20
+ var element = div();
21
+ expect(element.type).toBe('div');
22
+ expect(console.error).not.toHaveBeenCalled();
23
+ });
24
+
25
+ it('warns once when accessing React.DOM methods', () => {
26
+ spyOn(console, 'error');
27
+
28
+ var a = React.DOM.a();
29
+ var p = React.DOM.p();
30
+
31
+ expect(a.type).toBe('a');
32
+ expect(p.type).toBe('p');
33
+
34
+ expect(console.error).toHaveBeenCalledTimes(1);
35
+ expect(console.error.calls.first().args[0]).toContain(
36
+ 'Warning: Accessing factories like React.DOM.a has been deprecated',
37
+ );
38
+ });
39
+});
src/isomorphic/React.js
+21
@@ -146,6 +146,27 @@ if (__DEV__) {
146
},
147
});
148
}
149
+
150
+ // React.DOM factories are deprecated. Wrap these methods so that
151
+ // invocations of the React.DOM namespace and alert users to switch
152
+ // to the `react-addons-dom-factories` package.
153
+ React.DOM = {};
154
+ var warnedForFactories = false;
155
+ Object.keys(ReactDOMFactories).forEach(function(factory) {
156
+ React.DOM[factory] = function(...args) {
157
+ if (!warnedForFactories) {
158
+ warning(
159
+ false,
160
+ 'Accessing factories like React.DOM.%s has been deprecated ' +
161
+ 'and will be removed in the future. Use the ' +
162
+ 'react-addons-dom-factories package instead.',
163
+ factory,
164
+ );
165
+ warnedForFactories = true;
166
+ }
167
+ return ReactDOMFactories[factory](...args);
168
+ };
169
+ });
170
}
171
172
module.exports = React;
src/isomorphic/classic/element/__tests__/ReactElement-test.js
+6
-4
@@ -322,7 +322,7 @@ describe('ReactElement', () => {
322
expect(React.isValidElement(true)).toEqual(false);
323
expect(React.isValidElement({})).toEqual(false);
324
expect(React.isValidElement('string')).toEqual(false);
325
- expect(React.isValidElement(React.DOM.div)).toEqual(false);
325
+ expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
326
expect(React.isValidElement(Component)).toEqual(false);
327
expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
328
@@ -465,7 +465,7 @@ describe('ReactElement', () => {
465
expect(React.isValidElement(true)).toEqual(false);
466
expect(React.isValidElement({})).toEqual(false);
467
expect(React.isValidElement('string')).toEqual(false);
468
- expect(React.isValidElement(React.DOM.div)).toEqual(false);
468
+ expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
469
expect(React.isValidElement(Component)).toEqual(false);
470
expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
471
@@ -526,7 +526,8 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => {
526
var childFactory = React.createFactory(Child);
527
class Parent extends React.Component {
528
render() {
529
- return React.DOM.div(
529
+ return React.createElement(
530
+ 'div',
531
{},
532
childFactory({ref: 'child', foo: 'foo value'}, 'children value'),
533
);
@@ -561,7 +562,8 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => {
562
beforeEach(() => {
563
class Parent extends React.Component {
564
render() {
564
- return React.DOM.div(
565
+ return React.createElement(
566
+ 'div',
567
{},
568
React.createElement(
569
Child,
src/renderers/dom/shared/__tests__/ReactDOM-test.js
+2
-9
@@ -53,7 +53,7 @@ describe('ReactDOM', () => {
53
54
it('should allow children to be passed as an argument', () => {
55
var argDiv = ReactTestUtils.renderIntoDocument(
56
- React.DOM.div(null, 'child'),
56
+ React.createElement('div', null, 'child'),
57
);
58
var argNode = ReactDOM.findDOMNode(argDiv);
59
expect(argNode.innerHTML).toBe('child');
@@ -61,7 +61,7 @@ describe('ReactDOM', () => {
61
62
it('should overwrite props.children with children argument', () => {
63
var conflictDiv = ReactTestUtils.renderIntoDocument(
64
- React.DOM.div({children: 'fakechild'}, 'child'),
64
+ React.createElement('div', {children: 'fakechild'}, 'child'),
65
);
66
var conflictNode = ReactDOM.findDOMNode(conflictDiv);
67
expect(conflictNode.innerHTML).toBe('child');
@@ -110,13 +110,6 @@ describe('ReactDOM', () => {
110
expect(dog.className).toBe('bigdog');
111
});
112
113
- it('allow React.DOM factories to be called without warnings', () => {
114
- spyOn(console, 'error');
115
- var element = React.DOM.div();
116
- expect(element.type).toBe('div');
117
- expectDev(console.error.calls.count()).toBe(0);
118
- });
119
-
113
it('throws in render() if the mount callback is not a function', () => {
114
spyOn(console, 'error');
115
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+2
-1
@@ -1193,7 +1193,8 @@ describe('ReactDOMComponent', () => {
1193
it('should properly escape text content and attributes values', () => {
1194
expect(
1195
ReactDOMServer.renderToStaticMarkup(
1196
- React.DOM.div(
1196
+ React.createElement(
1197
+ 'div',
1198
{
1199
title: '\'"<>&',
1200
style: {