@samitouri / QOS-React-2 / commits / 34927ea04f

Remove useCreateElement flag (#9873)

* Remove useCreateElement flag * Use Circle node #3 for ESLint

Dan Abramov committed Jun 7, 2017 at 13:22 UTC 34927ea04f0f4c7cd0b5a5989071a7b78d08b793
8 files changed +141 -233
scripts/circleci/test_entry_point.sh
+1 -2
@@ -13,12 +13,11 @@ if [ $((2 % CIRCLE_NODE_TOTAL)) -eq "$CIRCLE_NODE_INDEX" ]; then
13 fi
14
15 if [ $((3 % CIRCLE_NODE_TOTAL)) -eq "$CIRCLE_NODE_INDEX" ]; then
16 - COMMANDS_TO_RUN+=('./scripts/circleci/test_html_generation.sh')
16 + COMMANDS_TO_RUN+=('node ./scripts/tasks/eslint')
17 fi
18
19 # These seem out of order but extract-errors must be run after jest.
20 if [ $((0 % CIRCLE_NODE_TOTAL)) -eq "$CIRCLE_NODE_INDEX" ]; then
21 - COMMANDS_TO_RUN+=('node ./scripts/tasks/eslint')
21 COMMANDS_TO_RUN+=('node ./scripts/prettier/index')
22 COMMANDS_TO_RUN+=('node ./scripts/tasks/flow')
23 COMMANDS_TO_RUN+=('node ./scripts/tasks/jest')
scripts/circleci/test_html_generation.sh deleted
-9
@@ -1,9 +0,0 @@
1 -#!/bin/bash
2 -
3 -set -e
4 -
5 -echo 'Testing in server-render (HTML generation) mode...'
6 -printf '\nmodule.exports.useCreateElement = false;\n' \
7 - >> src/renderers/dom/shared/ReactDOMFeatureFlags.js
8 -node ./scripts/tasks/jest
9 -git checkout -- src/renderers/dom/shared/ReactDOMFeatureFlags.js
src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
+67 -116
@@ -55,9 +55,7 @@ describeStack('ReactHostOperationHistoryHook', () => {
55 {
56 instanceID: inst._debugID,
57 type: 'mount',
58 - payload: ReactDOMFeatureFlags.useCreateElement
59 - ? 'DIV'
60 - : '<div data-reactroot="" data-reactid="1"><p data-reactid="2">Hi.</p></div>',
58 + payload: 'DIV',
59 },
60 ]);
61 });
@@ -76,10 +74,7 @@ describeStack('ReactHostOperationHistoryHook', () => {
74 {
75 instanceID: inst._debugID,
76 type: 'mount',
79 - payload: ReactDOMFeatureFlags.useCreateElement
80 - ? 'DIV'
81 - : '<div data-reactroot="" data-reactid="1">' +
82 - '<p data-reactid="2">Hi.</p></div>',
77 + payload: 'DIV',
78 },
79 ]);
80 });
@@ -141,32 +136,21 @@ describeStack('ReactHostOperationHistoryHook', () => {
136 );
137
138 var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
144 - if (ReactDOMFeatureFlags.useCreateElement) {
145 - assertHistoryMatches([
146 - {
147 - instanceID: inst._debugID,
148 - type: 'update styles',
149 - payload: {
150 - color: 'red',
151 - backgroundColor: 'yellow',
152 - },
153 - },
154 - {
155 - instanceID: inst._debugID,
156 - type: 'mount',
157 - payload: 'DIV',
158 - },
159 - ]);
160 - } else {
161 - assertHistoryMatches([
162 - {
163 - instanceID: inst._debugID,
164 - type: 'mount',
165 - payload: '<div style="color:red;background-color:yellow" ' +
166 - 'data-reactroot="" data-reactid="1"></div>',
139 + assertHistoryMatches([
140 + {
141 + instanceID: inst._debugID,
142 + type: 'update styles',
143 + payload: {
144 + color: 'red',
145 + backgroundColor: 'yellow',
146 },
168 - ]);
169 - }
147 + },
148 + {
149 + instanceID: inst._debugID,
150 + type: 'mount',
151 + payload: 'DIV',
152 + },
153 + ]);
154 });
155
156 it('gets recorded during an update', () => {
@@ -259,34 +243,23 @@ describeStack('ReactHostOperationHistoryHook', () => {
243 ReactDOM.render(<div className="rad" tabIndex={42} />, node);
244
245 var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
262 - if (ReactDOMFeatureFlags.useCreateElement) {
263 - assertHistoryMatches([
264 - {
265 - instanceID: inst._debugID,
266 - type: 'update attribute',
267 - payload: {className: 'rad'},
268 - },
269 - {
270 - instanceID: inst._debugID,
271 - type: 'update attribute',
272 - payload: {tabIndex: 42},
273 - },
274 - {
275 - instanceID: inst._debugID,
276 - type: 'mount',
277 - payload: 'DIV',
278 - },
279 - ]);
280 - } else {
281 - assertHistoryMatches([
282 - {
283 - instanceID: inst._debugID,
284 - type: 'mount',
285 - payload: '<div class="rad" tabindex="42" data-reactroot="" ' +
286 - 'data-reactid="1"></div>',
287 - },
288 - ]);
289 - }
246 + assertHistoryMatches([
247 + {
248 + instanceID: inst._debugID,
249 + type: 'update attribute',
250 + payload: {className: 'rad'},
251 + },
252 + {
253 + instanceID: inst._debugID,
254 + type: 'update attribute',
255 + payload: {tabIndex: 42},
256 + },
257 + {
258 + instanceID: inst._debugID,
259 + type: 'mount',
260 + payload: 'DIV',
261 + },
262 + ]);
263 });
264
265 it('gets recorded during an update', () => {
@@ -362,34 +335,23 @@ describeStack('ReactHostOperationHistoryHook', () => {
335 ReactDOM.render(<div data-x="rad" data-y={42} />, node);
336
337 var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
365 - if (ReactDOMFeatureFlags.useCreateElement) {
366 - assertHistoryMatches([
367 - {
368 - instanceID: inst._debugID,
369 - type: 'update attribute',
370 - payload: {'data-x': 'rad'},
371 - },
372 - {
373 - instanceID: inst._debugID,
374 - type: 'update attribute',
375 - payload: {'data-y': 42},
376 - },
377 - {
378 - instanceID: inst._debugID,
379 - type: 'mount',
380 - payload: 'DIV',
381 - },
382 - ]);
383 - } else {
384 - assertHistoryMatches([
385 - {
386 - instanceID: inst._debugID,
387 - type: 'mount',
388 - payload: '<div data-x="rad" data-y="42" data-reactroot="" ' +
389 - 'data-reactid="1"></div>',
390 - },
391 - ]);
392 - }
338 + assertHistoryMatches([
339 + {
340 + instanceID: inst._debugID,
341 + type: 'update attribute',
342 + payload: {'data-x': 'rad'},
343 + },
344 + {
345 + instanceID: inst._debugID,
346 + type: 'update attribute',
347 + payload: {'data-y': 42},
348 + },
349 + {
350 + instanceID: inst._debugID,
351 + type: 'mount',
352 + payload: 'DIV',
353 + },
354 + ]);
355 });
356
357 it('gets recorded during an update', () => {
@@ -440,34 +402,23 @@ describeStack('ReactHostOperationHistoryHook', () => {
402 ReactDOM.render(<my-component className="rad" tabIndex={42} />, node);
403
404 var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
443 - if (ReactDOMFeatureFlags.useCreateElement) {
444 - assertHistoryMatches([
445 - {
446 - instanceID: inst._debugID,
447 - type: 'update attribute',
448 - payload: {className: 'rad'},
449 - },
450 - {
451 - instanceID: inst._debugID,
452 - type: 'update attribute',
453 - payload: {tabIndex: 42},
454 - },
455 - {
456 - instanceID: inst._debugID,
457 - type: 'mount',
458 - payload: 'MY-COMPONENT',
459 - },
460 - ]);
461 - } else {
462 - assertHistoryMatches([
463 - {
464 - instanceID: inst._debugID,
465 - type: 'mount',
466 - payload: '<my-component className="rad" tabIndex="42" ' +
467 - 'data-reactroot="" data-reactid="1"></my-component>',
468 - },
469 - ]);
470 - }
405 + assertHistoryMatches([
406 + {
407 + instanceID: inst._debugID,
408 + type: 'update attribute',
409 + payload: {className: 'rad'},
410 + },
411 + {
412 + instanceID: inst._debugID,
413 + type: 'update attribute',
414 + payload: {tabIndex: 42},
415 + },
416 + {
417 + instanceID: inst._debugID,
418 + type: 'mount',
419 + payload: 'MY-COMPONENT',
420 + },
421 + ]);
422 });
423
424 it('gets recorded during an update', () => {
src/renderers/dom/shared/ReactDOMFeatureFlags.js
-1
@@ -13,7 +13,6 @@
13
14 var ReactDOMFeatureFlags = {
15 fiberAsyncScheduling: false,
16 - useCreateElement: true,
16 useFiber: true,
17 };
18
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+72 -84
@@ -810,30 +810,28 @@ describe('ReactDOMComponent', () => {
810 });
811
812 it('should warn if the tag is unrecognized', () => {
813 - if (ReactDOMFeatureFlags.useCreateElement) {
814 - spyOn(console, 'error');
815 -
816 - let realToString;
817 - try {
818 - realToString = Object.prototype.toString;
819 - let wrappedToString = function() {
820 - // Emulate browser behavior which is missing in jsdom
821 - if (this instanceof window.HTMLUnknownElement) {
822 - return '[object HTMLUnknownElement]';
823 - }
824 - return realToString.apply(this, arguments);
825 - };
826 - Object.prototype.toString = wrappedToString; // eslint-disable-line no-extend-native
827 - ReactTestUtils.renderIntoDocument(<mycustomcomponent />);
828 - } finally {
829 - Object.prototype.toString = realToString; // eslint-disable-line no-extend-native
830 - }
813 + spyOn(console, 'error');
814
832 - expectDev(console.error.calls.count()).toBe(1);
833 - expectDev(console.error.calls.argsFor(0)[0]).toContain(
834 - 'The tag <mycustomcomponent> is unrecognized in this browser',
835 - );
815 + let realToString;
816 + try {
817 + realToString = Object.prototype.toString;
818 + let wrappedToString = function() {
819 + // Emulate browser behavior which is missing in jsdom
820 + if (this instanceof window.HTMLUnknownElement) {
821 + return '[object HTMLUnknownElement]';
822 + }
823 + return realToString.apply(this, arguments);
824 + };
825 + Object.prototype.toString = wrappedToString; // eslint-disable-line no-extend-native
826 + ReactTestUtils.renderIntoDocument(<mycustomcomponent />);
827 + } finally {
828 + Object.prototype.toString = realToString; // eslint-disable-line no-extend-native
829 }
830 +
831 + expectDev(console.error.calls.count()).toBe(1);
832 + expectDev(console.error.calls.argsFor(0)[0]).toContain(
833 + 'The tag <mycustomcomponent> is unrecognized in this browser',
834 + );
835 });
836
837 it('should warn against children for void elements', () => {
@@ -884,62 +882,58 @@ describe('ReactDOMComponent', () => {
882 });
883
884 it('should emit a warning once for a named custom component using shady DOM', () => {
887 - if (ReactDOMFeatureFlags.useCreateElement) {
888 - spyOn(console, 'error');
889 -
890 - var defaultCreateElement = document.createElement.bind(document);
891 -
892 - try {
893 - document.createElement = element => {
894 - var container = defaultCreateElement(element);
895 - container.shadyRoot = {};
896 - return container;
897 - };
898 - class ShadyComponent extends React.Component {
899 - render() {
900 - return <polymer-component />;
901 - }
885 + spyOn(console, 'error');
886 +
887 + var defaultCreateElement = document.createElement.bind(document);
888 +
889 + try {
890 + document.createElement = element => {
891 + var container = defaultCreateElement(element);
892 + container.shadyRoot = {};
893 + return container;
894 + };
895 + class ShadyComponent extends React.Component {
896 + render() {
897 + return <polymer-component />;
898 }
903 - var node = document.createElement('div');
904 - ReactDOM.render(<ShadyComponent />, node);
905 - expectDev(console.error.calls.count()).toBe(1);
906 - expectDev(console.error.calls.argsFor(0)[0]).toContain(
907 - 'ShadyComponent is using shady DOM. Using shady DOM with React can ' +
908 - 'cause things to break subtly.',
909 - );
910 - mountComponent({is: 'custom-shady-div2'});
911 - expectDev(console.error.calls.count()).toBe(1);
912 - } finally {
913 - document.createElement = defaultCreateElement;
899 }
900 + var node = document.createElement('div');
901 + ReactDOM.render(<ShadyComponent />, node);
902 + expectDev(console.error.calls.count()).toBe(1);
903 + expectDev(console.error.calls.argsFor(0)[0]).toContain(
904 + 'ShadyComponent is using shady DOM. Using shady DOM with React can ' +
905 + 'cause things to break subtly.',
906 + );
907 + mountComponent({is: 'custom-shady-div2'});
908 + expectDev(console.error.calls.count()).toBe(1);
909 + } finally {
910 + document.createElement = defaultCreateElement;
911 }
912 });
913
914 it('should emit a warning once for an unnamed custom component using shady DOM', () => {
919 - if (ReactDOMFeatureFlags.useCreateElement) {
920 - spyOn(console, 'error');
921 -
922 - var defaultCreateElement = document.createElement.bind(document);
923 -
924 - try {
925 - document.createElement = element => {
926 - var container = defaultCreateElement(element);
927 - container.shadyRoot = {};
928 - return container;
929 - };
930 -
931 - mountComponent({is: 'custom-shady-div'});
932 - expectDev(console.error.calls.count()).toBe(1);
933 - expectDev(console.error.calls.argsFor(0)[0]).toContain(
934 - 'A component is using shady DOM. Using shady DOM with React can ' +
935 - 'cause things to break subtly.',
936 - );
937 -
938 - mountComponent({is: 'custom-shady-div2'});
939 - expectDev(console.error.calls.count()).toBe(1);
940 - } finally {
941 - document.createElement = defaultCreateElement;
942 - }
915 + spyOn(console, 'error');
916 +
917 + var defaultCreateElement = document.createElement.bind(document);
918 +
919 + try {
920 + document.createElement = element => {
921 + var container = defaultCreateElement(element);
922 + container.shadyRoot = {};
923 + return container;
924 + };
925 +
926 + mountComponent({is: 'custom-shady-div'});
927 + expectDev(console.error.calls.count()).toBe(1);
928 + expectDev(console.error.calls.argsFor(0)[0]).toContain(
929 + 'A component is using shady DOM. Using shady DOM with React can ' +
930 + 'cause things to break subtly.',
931 + );
932 +
933 + mountComponent({is: 'custom-shady-div2'});
934 + expectDev(console.error.calls.count()).toBe(1);
935 + } finally {
936 + document.createElement = defaultCreateElement;
937 }
938 });
939
@@ -1068,18 +1062,12 @@ describe('ReactDOMComponent', () => {
1062 });
1063
1064 it('should support custom elements which extend native elements', () => {
1071 - if (ReactDOMFeatureFlags.useCreateElement) {
1072 - var container = document.createElement('div');
1073 - spyOn(document, 'createElement').and.callThrough();
1074 - ReactDOM.render(<div is="custom-div" />, container);
1075 - expect(document.createElement).toHaveBeenCalledWith('div', {
1076 - is: 'custom-div',
1077 - });
1078 - } else {
1079 - expect(
1080 - ReactDOMServer.renderToString(<div is="custom-div" />),
1081 - ).toContain('is="custom-div"');
1082 - }
1065 + var container = document.createElement('div');
1066 + spyOn(document, 'createElement').and.callThrough();
1067 + ReactDOM.render(<div is="custom-div" />, container);
1068 + expect(document.createElement).toHaveBeenCalledWith('div', {
1069 + is: 'custom-div',
1070 + });
1071 });
1072
1073 it('should work load and error events on <image> element in SVG', () => {
src/renderers/dom/shared/__tests__/ReactDOMSVG-test.js
-11
@@ -13,14 +13,12 @@
13
14 var React;
15 var ReactDOM;
16 -var ReactDOMFeatureFlags;
16 var ReactDOMServer;
17
18 describe('ReactDOMSVG', () => {
19 beforeEach(() => {
20 React = require('react');
21 ReactDOM = require('react-dom');
23 - ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
22 ReactDOMServer = require('react-dom/server');
23 });
24
@@ -211,15 +209,6 @@ describe('ReactDOMSVG', () => {
209 });
210
211 it('can render HTML into a foreignObject in non-React SVG tree', () => {
214 - if (!ReactDOMFeatureFlags.useCreateElement) {
215 - // jsdom doesn't give HTML namespace to foreignObject.innerHTML children.
216 - // This problem doesn't exist in the browsers.
217 - // https://github.com/facebook/react/pull/8638#issuecomment-269349642
218 - // We will skip this test in non-createElement mode considering
219 - // that non-createElement mounting is effectively dead code now anyway.
220 - return;
221 - }
222 -
212 var outerSVGRoot = document.createElementNS(
213 'http://www.w3.org/2000/svg',
214 'svg',
src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
-8
@@ -1132,9 +1132,6 @@ describe('ReactDOMInput', () => {
1132 });
1133
1134 it('sets type, step, min, max before value always', () => {
1135 - if (!ReactDOMFeatureFlags.useCreateElement) {
1136 - return;
1137 - }
1135 var log = [];
1136 var originalCreateElement = document.createElement;
1137 spyOn(document, 'createElement').and.callFake(function(type) {
@@ -1196,11 +1193,6 @@ describe('ReactDOMInput', () => {
1193 });
1194
1195 it('resets value of date/time input to fix bugs in iOS Safari', () => {
1199 - // https://github.com/facebook/react/issues/7233
1200 - if (!ReactDOMFeatureFlags.useCreateElement) {
1201 - return;
1202 - }
1203 -
1196 function strify(x) {
1197 return JSON.stringify(x, null, 2);
1198 }
src/renderers/dom/stack/client/ReactMount.js
+1 -2
@@ -16,7 +16,6 @@ var DOMProperty = require('DOMProperty');
16 var React = require('react');
17 var ReactDOMComponentTree = require('ReactDOMComponentTree');
18 var ReactDOMContainerInfo = require('ReactDOMContainerInfo');
19 -var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
19 var ReactInstanceMap = require('ReactInstanceMap');
20 var ReactInstrumentation = require('ReactInstrumentation');
21 var ReactMarkupChecksum = require('ReactMarkupChecksum');
@@ -132,7 +131,7 @@ function batchedMountComponentIntoNode(
131 ) {
132 var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
133 /* useCreateElement */
135 - !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement,
134 + !shouldReuseMarkup,
135 );
136 transaction.perform(
137 mountComponentIntoNode,