@samitouri / QOS-React / commits / 1cb6199d22

Consolidate all symbols in a single file (#11629)

Consolidate all symbols in a single file (#11629) * Consolidate all symbols in a single file This reduces the code duplication as we have quite a few now. * Record sizes

Dan Abramov committed Nov 22, 2017 at 18:08 UTC 1cb6199d22af6f6ba2f55e4db18ed2f4216aaaf2
10 files changed +147 -181
packages/react-call-return/src/ReactCallReturn.js
+2 -12
@@ -7,19 +7,9 @@
7 * @flow
8 */
9
10 -import type {ReactCall, ReactNodeList, ReactReturn} from 'shared/ReactTypes';
10 +import {REACT_CALL_TYPE, REACT_RETURN_TYPE} from 'shared/ReactSymbols';
11
12 -// The Symbol used to tag the special React types. If there is no native Symbol
13 -// nor polyfill, then a plain number is used for performance.
14 -var REACT_CALL_TYPE;
15 -var REACT_RETURN_TYPE;
16 -if (typeof Symbol === 'function' && Symbol.for) {
17 - REACT_CALL_TYPE = Symbol.for('react.call');
18 - REACT_RETURN_TYPE = Symbol.for('react.return');
19 -} else {
20 - REACT_CALL_TYPE = 0xeac8;
21 - REACT_RETURN_TYPE = 0xeac9;
22 -}
12 +import type {ReactCall, ReactNodeList, ReactReturn} from 'shared/ReactTypes';
13
14 type CallHandler<T> = (props: T, returns: Array<mixed>) => ReactNodeList;
15
packages/react-dom/src/server/ReactPartialRenderer.js
+1 -6
@@ -19,6 +19,7 @@ import warning from 'fbjs/lib/warning';
19 import checkPropTypes from 'prop-types/checkPropTypes';
20 import describeComponentFrame from 'shared/describeComponentFrame';
21 import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';
22 +import {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
23
24 import {
25 createMarkupForCustomAttribute,
@@ -41,12 +42,6 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn
42 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
43 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
44
44 -var REACT_FRAGMENT_TYPE =
45 - (typeof Symbol === 'function' &&
46 - Symbol.for &&
47 - Symbol.for('react.fragment')) ||
48 - 0xeacb;
49 -
45 // Based on reading the React.Children implementation. TODO: type this somewhere?
46 type ReactNode = string | number | ReactElement;
47 type FlatReactChildren = Array<null | ReactNode>;
packages/react-reconciler/src/ReactChildFiber.js
+8 -35
@@ -14,6 +14,14 @@ import type {ExpirationTime} from 'react-reconciler/src/ReactFiberExpirationTime
14
15 import {enableReactFragment} from 'shared/ReactFeatureFlags';
16 import {Placement, Deletion} from 'shared/ReactTypeOfSideEffect';
17 +import {
18 + getIteratorFn,
19 + REACT_ELEMENT_TYPE,
20 + REACT_FRAGMENT_TYPE,
21 + REACT_CALL_TYPE,
22 + REACT_RETURN_TYPE,
23 + REACT_PORTAL_TYPE,
24 +} from 'shared/ReactSymbols';
25 import {
26 FunctionalComponent,
27 ClassComponent,
@@ -27,7 +35,6 @@ import emptyObject from 'fbjs/lib/emptyObject';
35 import invariant from 'fbjs/lib/invariant';
36 import warning from 'fbjs/lib/warning';
37
30 -import {REACT_PORTAL_TYPE} from './ReactPortal';
38 import {
39 createWorkInProgress,
40 createFiberFromElement,
@@ -87,40 +94,6 @@ if (__DEV__) {
94
95 const isArray = Array.isArray;
96
90 -const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
91 -const FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
92 -
93 -// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
94 -// nor polyfill, then a plain number is used for performance.
95 -var REACT_ELEMENT_TYPE;
96 -var REACT_CALL_TYPE;
97 -var REACT_RETURN_TYPE;
98 -var REACT_FRAGMENT_TYPE;
99 -if (typeof Symbol === 'function' && Symbol.for) {
100 - REACT_ELEMENT_TYPE = Symbol.for('react.element');
101 - REACT_CALL_TYPE = Symbol.for('react.call');
102 - REACT_RETURN_TYPE = Symbol.for('react.return');
103 - REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
104 -} else {
105 - REACT_ELEMENT_TYPE = 0xeac7;
106 - REACT_CALL_TYPE = 0xeac8;
107 - REACT_RETURN_TYPE = 0xeac9;
108 - REACT_FRAGMENT_TYPE = 0xeacb;
109 -}
110 -
111 -function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
112 - if (maybeIterable === null || typeof maybeIterable === 'undefined') {
113 - return null;
114 - }
115 - const iteratorFn =
116 - (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL]) ||
117 - maybeIterable[FAUX_ITERATOR_SYMBOL];
118 - if (typeof iteratorFn === 'function') {
119 - return iteratorFn;
120 - }
121 - return null;
122 -}
123 -
97 function coerceRef(current: Fiber | null, element: ReactElement) {
98 let mixedRef = element.ref;
99 if (mixedRef !== null && typeof mixedRef !== 'function') {
packages/react-reconciler/src/ReactPortal.js
+2 -6
@@ -7,13 +7,9 @@
7 * @flow
8 */
9
10 -import type {ReactNodeList, ReactPortal} from 'shared/ReactTypes';
10 +import {REACT_PORTAL_TYPE} from 'shared/ReactSymbols';
11
12 -// The Symbol used to tag the special React types. If there is no native Symbol
13 -// nor polyfill, then a plain number is used for performance.
14 -export const REACT_PORTAL_TYPE =
15 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) ||
16 - 0xeaca;
12 +import type {ReactNodeList, ReactPortal} from 'shared/ReactTypes';
13
14 export function createPortal(
15 children: ReactNodeList,
packages/react/src/React.js
+1 -6
@@ -8,6 +8,7 @@
8 import assign from 'object-assign';
9 import ReactVersion from 'shared/ReactVersion';
10 import {enableReactFragment} from 'shared/ReactFeatureFlags';
11 +import {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
12
13 import {Component, PureComponent, AsyncComponent} from './ReactBaseClasses';
14 import {forEach, map, count, toArray, only} from './ReactChildren';
@@ -25,12 +26,6 @@ import {
26 } from './ReactElementValidator';
27 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
28
28 -const REACT_FRAGMENT_TYPE =
29 - (typeof Symbol === 'function' &&
30 - Symbol.for &&
31 - Symbol.for('react.fragment')) ||
32 - 0xeacb;
33 -
29 var React = {
30 Children: {
31 map,
packages/react/src/ReactChildren.js
+8 -19
@@ -8,26 +8,17 @@
8 import emptyFunction from 'fbjs/lib/emptyFunction';
9 import invariant from 'fbjs/lib/invariant';
10 import warning from 'fbjs/lib/warning';
11 +import {
12 + getIteratorFn,
13 + REACT_ELEMENT_TYPE,
14 + REACT_CALL_TYPE,
15 + REACT_RETURN_TYPE,
16 + REACT_PORTAL_TYPE,
17 +} from 'shared/ReactSymbols';
18
19 import {isValidElement, cloneAndReplaceKey} from './ReactElement';
20 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
21
15 -var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
16 -var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
17 -// The Symbol used to tag the ReactElement type. If there is no native Symbol
18 -// nor polyfill, then a plain number is used for performance.
19 -var REACT_ELEMENT_TYPE =
20 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
21 - 0xeac7;
22 -const REACT_CALL_TYPE =
23 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.call')) ||
24 - 0xeac8;
25 -const REACT_RETURN_TYPE =
26 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.return')) ||
27 - 0xeac9;
28 -const REACT_PORTAL_TYPE =
29 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) ||
30 - 0xeaca;
22 var SEPARATOR = '.';
23 var SUBSEPARATOR = ':';
24
@@ -170,9 +161,7 @@ function traverseAllChildrenImpl(
161 );
162 }
163 } else {
173 - var iteratorFn =
174 - (ITERATOR_SYMBOL && children[ITERATOR_SYMBOL]) ||
175 - children[FAUX_ITERATOR_SYMBOL];
164 + var iteratorFn = getIteratorFn(children);
165 if (typeof iteratorFn === 'function') {
166 if (__DEV__) {
167 // Warn about using Maps as children
packages/react/src/ReactElement.js
+1 -6
@@ -6,17 +6,12 @@
6 */
7
8 import warning from 'fbjs/lib/warning';
9 +import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
10
11 import ReactCurrentOwner from './ReactCurrentOwner';
12
13 var hasOwnProperty = Object.prototype.hasOwnProperty;
14
14 -// The Symbol used to tag the ReactElement type. If there is no native Symbol
15 -// nor polyfill, then a plain number is used for performance.
16 -var REACT_ELEMENT_TYPE =
17 - (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
18 - 0xeac7;
19 -
15 var RESERVED_PROPS = {
16 key: true,
17 ref: true,
packages/react/src/ReactElementValidator.js
+2 -11
@@ -15,6 +15,7 @@
15 import lowPriorityWarning from 'shared/lowPriorityWarning';
16 import describeComponentFrame from 'shared/describeComponentFrame';
17 import getComponentName from 'shared/getComponentName';
18 +import {getIteratorFn, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
19 import checkPropTypes from 'prop-types/checkPropTypes';
20 import warning from 'fbjs/lib/warning';
21
@@ -54,18 +55,9 @@ if (__DEV__) {
55 return stack;
56 };
57
57 - var REACT_FRAGMENT_TYPE =
58 - (typeof Symbol === 'function' &&
59 - Symbol.for &&
60 - Symbol.for('react.fragment')) ||
61 - 0xeacb;
62 -
58 var VALID_FRAGMENT_PROPS = new Map([['children', true], ['key', true]]);
59 }
60
66 -var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
67 -var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
68 -
61 function getDeclarationErrorAddendum() {
62 if (ReactCurrentOwner.current) {
63 var name = getComponentName(ReactCurrentOwner.current);
@@ -190,8 +182,7 @@ function validateChildKeys(node, parentType) {
182 node._store.validated = true;
183 }
184 } else if (node) {
193 - var iteratorFn =
194 - (ITERATOR_SYMBOL && node[ITERATOR_SYMBOL]) || node[FAUX_ITERATOR_SYMBOL];
185 + var iteratorFn = getIteratorFn(node);
186 if (typeof iteratorFn === 'function') {
187 // Entry iterators used to provide implicit keys,
188 // but now we print a separate warning for them later.
packages/shared/ReactSymbols.js new
+42
@@ -0,0 +1,42 @@
1 +/**
2 + * Copyright (c) 2013-present, Facebook, Inc.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
11 +// nor polyfill, then a plain number is used for performance.
12 +const hasSymbol = typeof Symbol === 'function' && Symbol.for;
13 +
14 +export const REACT_ELEMENT_TYPE = hasSymbol
15 + ? Symbol.for('react.element')
16 + : 0xeac7;
17 +export const REACT_CALL_TYPE = hasSymbol ? Symbol.for('react.call') : 0xeac8;
18 +export const REACT_RETURN_TYPE = hasSymbol
19 + ? Symbol.for('react.return')
20 + : 0xeac9;
21 +export const REACT_PORTAL_TYPE = hasSymbol
22 + ? Symbol.for('react.portal')
23 + : 0xeaca;
24 +export const REACT_FRAGMENT_TYPE = hasSymbol
25 + ? Symbol.for('react.fragment')
26 + : 0xeacb;
27 +
28 +const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
29 +const FAUX_ITERATOR_SYMBOL = '@@iterator';
30 +
31 +export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
32 + if (maybeIterable === null || typeof maybeIterable === 'undefined') {
33 + return null;
34 + }
35 + const maybeIterator =
36 + (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
37 + maybeIterable[FAUX_ITERATOR_SYMBOL];
38 + if (typeof maybeIterator === 'function') {
39 + return maybeIterator;
40 + }
41 + return null;
42 +}
scripts/rollup/results.json
+80 -80
@@ -1,52 +1,52 @@
1 {
2 "bundleSizes": {
3 "react.development.js (UMD_DEV)": {
4 - "size": 55240,
5 - "gzip": 14948
4 + "size": 54810,
5 + "gzip": 14962
6 },
7 "react.production.min.js (UMD_PROD)": {
8 - "size": 6773,
9 - "gzip": 2809
8 + "size": 6603,
9 + "gzip": 2820
10 },
11 "react.development.js (NODE_DEV)": {
12 - "size": 45656,
13 - "gzip": 12650
12 + "size": 45226,
13 + "gzip": 12653
14 },
15 "react.production.min.js (NODE_PROD)": {
16 - "size": 5573,
17 - "gzip": 2371
16 + "size": 5398,
17 + "gzip": 2384
18 },
19 "React-dev.js (FB_DEV)": {
20 - "size": 45456,
21 - "gzip": 12326
20 + "size": 44902,
21 + "gzip": 12309
22 },
23 "React-prod.js (FB_PROD)": {
24 - "size": 12948,
25 - "gzip": 3412
24 + "size": 12778,
25 + "gzip": 3446
26 },
27 "react-dom.development.js (UMD_DEV)": {
28 - "size": 569612,
29 - "gzip": 132927
28 + "size": 569313,
29 + "gzip": 132931
30 },
31 "react-dom.production.min.js (UMD_PROD)": {
32 - "size": 94898,
33 - "gzip": 30780
32 + "size": 94831,
33 + "gzip": 30731
34 },
35 "react-dom.development.js (NODE_DEV)": {
36 - "size": 551033,
37 - "gzip": 128045
36 + "size": 550734,
37 + "gzip": 128057
38 },
39 "react-dom.production.min.js (NODE_PROD)": {
40 - "size": 93076,
41 - "gzip": 30004
40 + "size": 93027,
41 + "gzip": 29952
42 },
43 "ReactDOM-dev.js (FB_DEV)": {
44 - "size": 576250,
45 - "gzip": 132429
44 + "size": 575937,
45 + "gzip": 132396
46 },
47 "ReactDOM-prod.js (FB_PROD)": {
48 - "size": 273030,
49 - "gzip": 51739
48 + "size": 272856,
49 + "gzip": 51733
50 },
51 "react-dom-test-utils.development.js (NODE_DEV)": {
52 "size": 36191,
@@ -85,96 +85,96 @@
85 "gzip": 5327
86 },
87 "react-dom-server.browser.development.js (UMD_DEV)": {
88 - "size": 94649,
89 - "gzip": 25531
88 + "size": 94825,
89 + "gzip": 25613
90 },
91 "react-dom-server.browser.production.min.js (UMD_PROD)": {
92 - "size": 14787,
93 - "gzip": 5859
92 + "size": 14785,
93 + "gzip": 5865
94 },
95 "react-dom-server.browser.development.js (NODE_DEV)": {
96 - "size": 83711,
97 - "gzip": 22732
96 + "size": 83887,
97 + "gzip": 22828
98 },
99 "react-dom-server.browser.production.min.js (NODE_PROD)": {
100 - "size": 14265,
101 - "gzip": 5749
100 + "size": 14263,
101 + "gzip": 5748
102 },
103 "ReactDOMServer-dev.js (FB_DEV)": {
104 - "size": 87438,
105 - "gzip": 22988
104 + "size": 87596,
105 + "gzip": 23087
106 },
107 "ReactDOMServer-prod.js (FB_PROD)": {
108 - "size": 31679,
109 - "gzip": 8157
108 + "size": 31671,
109 + "gzip": 8156
110 },
111 "react-dom-server.node.development.js (NODE_DEV)": {
112 - "size": 85679,
113 - "gzip": 23240
112 + "size": 85855,
113 + "gzip": 23337
114 },
115 "react-dom-server.node.production.min.js (NODE_PROD)": {
116 - "size": 15090,
117 - "gzip": 6057
116 + "size": 15088,
117 + "gzip": 6052
118 },
119 "react-art.development.js (UMD_DEV)": {
120 - "size": 359855,
121 - "gzip": 79647
120 + "size": 359556,
121 + "gzip": 79609
122 },
123 "react-art.production.min.js (UMD_PROD)": {
124 - "size": 83726,
125 - "gzip": 25768
124 + "size": 83658,
125 + "gzip": 25785
126 },
127 "react-art.development.js (NODE_DEV)": {
128 - "size": 283932,
129 - "gzip": 60558
128 + "size": 283633,
129 + "gzip": 60512
130 },
131 "react-art.production.min.js (NODE_PROD)": {
132 - "size": 47681,
133 - "gzip": 14930
132 + "size": 47631,
133 + "gzip": 14903
134 },
135 "ReactART-dev.js (FB_DEV)": {
136 - "size": 295166,
137 - "gzip": 62418
136 + "size": 294853,
137 + "gzip": 62366
138 },
139 "ReactART-prod.js (FB_PROD)": {
140 - "size": 148338,
141 - "gzip": 25339
140 + "size": 148156,
141 + "gzip": 25307
142 },
143 "ReactNativeRenderer-dev.js (RN_DEV)": {
144 - "size": 411706,
145 - "gzip": 90261
144 + "size": 411393,
145 + "gzip": 90175
146 },
147 "ReactNativeRenderer-prod.js (RN_PROD)": {
148 - "size": 201332,
149 - "gzip": 34709
148 + "size": 201148,
149 + "gzip": 34670
150 },
151 "ReactRTRenderer-dev.js (RN_DEV)": {
152 - "size": 289436,
153 - "gzip": 61463
152 + "size": 289123,
153 + "gzip": 61376
154 },
155 "ReactRTRenderer-prod.js (RN_PROD)": {
156 - "size": 138320,
157 - "gzip": 23287
156 + "size": 138136,
157 + "gzip": 23262
158 },
159 "ReactCSRenderer-dev.js (RN_DEV)": {
160 - "size": 279132,
161 - "gzip": 58253
160 + "size": 278819,
161 + "gzip": 58205
162 },
163 "ReactCSRenderer-prod.js (RN_PROD)": {
164 - "size": 130641,
165 - "gzip": 21857
164 + "size": 130459,
165 + "gzip": 21823
166 },
167 "react-test-renderer.development.js (NODE_DEV)": {
168 - "size": 280500,
169 - "gzip": 59363
168 + "size": 280201,
169 + "gzip": 59318
170 },
171 "react-test-renderer.production.min.js (NODE_PROD)": {
172 - "size": 46036,
173 - "gzip": 14212
172 + "size": 45987,
173 + "gzip": 14196
174 },
175 "ReactTestRenderer-dev.js (FB_DEV)": {
176 - "size": 291830,
177 - "gzip": 61220
176 + "size": 291517,
177 + "gzip": 61172
178 },
179 "react-test-renderer-shallow.development.js (NODE_DEV)": {
180 "size": 9686,
@@ -189,24 +189,24 @@
189 "gzip": 2596
190 },
191 "react-noop-renderer.development.js (NODE_DEV)": {
192 - "size": 277191,
193 - "gzip": 58354
192 + "size": 276892,
193 + "gzip": 58307
194 },
195 "react-reconciler.development.js (NODE_DEV)": {
196 - "size": 262361,
197 - "gzip": 54978
196 + "size": 262062,
197 + "gzip": 54933
198 },
199 "react-reconciler.production.min.js (NODE_PROD)": {
200 - "size": 39353,
201 - "gzip": 12233
200 + "size": 39304,
201 + "gzip": 12212
202 },
203 "react-call-return.development.js (NODE_DEV)": {
204 - "size": 2514,
205 - "gzip": 924
204 + "size": 2463,
205 + "gzip": 918
206 },
207 "react-call-return.production.min.js (NODE_PROD)": {
208 - "size": 890,
209 - "gzip": 507
208 + "size": 880,
209 + "gzip": 499
210 },
211 "react-dom-test-utils.development.js (UMD_DEV)": {
212 "size": 41456,