Add package builds for new server renderer and enable tests (#9710)
* Adjust some expectations of the server markup format of Fiber Currently this case is using the stack renderer. * Ensure debug hooks are injected into the Stack server renderer In our tests this normally happens because ReactDOM.js injects them into the shared module, but when Fiber is enabled or this is its own flat bundle, that doesn't happen. * Add package builds for new server renderer and enable tests ReactServer -> ReactDOMServerStream This file is going to be the replacement for ReactDOMServer. I mock ReactDOMServer and user ReactDOMServerStream when we have the fiber flag enabled. I'm now also enabling this as the default for distributions builds (react-dom/server on npm and react-dom-server.production.min.js as umd bundle). I'm using traverseStackChildren instead of traverseAllChildren because traverseAllChildren is now only in the isomorphic package and we don't want to build all of that that into the server package. I also have to require lower case react for the builds to work.
Sebastian Markbåge committed
May 17, 2017 at 17:19 UTC
e5e874d0e87566d405c66bffb6aee3e4a01b9ae6
10 files changed
+209
-83
scripts/fiber/tests-failing.txt
-14
@@ -46,34 +46,23 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
46
* renders a div with text with client render on top of good server markup
47
* renders a div with text with flanking whitespace with client render on top of good server markup
48
* renders a div with an empty text child with client render on top of good server markup
49
-* renders a div with multiple empty text children with server string render
49
* renders a div with multiple empty text children with client render on top of good server markup
51
-* renders a div with multiple whitespace children with server string render
50
* renders a div with multiple whitespace children with client render on top of good server markup
53
-* renders a div with text sibling to a node with server string render
51
* renders a div with text sibling to a node with client render on top of good server markup
52
* renders a non-standard element with text with client render on top of good server markup
53
* renders a custom element with text with client render on top of good server markup
57
-* renders a leading blank child with a text sibling with server string render
54
* renders a leading blank child with a text sibling with client render on top of good server markup
59
-* renders a trailing blank child with a text sibling with server string render
55
* renders a trailing blank child with a text sibling with client render on top of good server markup
61
-* renders an element with two text children with server string render
56
* renders an element with two text children with client render on top of good server markup
57
* renders a number as single child with client render on top of good server markup
58
* renders zero as single child with client render on top of good server markup
65
-* renders an element with number and text children with server string render
59
* renders an element with number and text children with client render on top of good server markup
60
* renders null single child as blank with client render on top of good server markup
61
* renders false single child as blank with client render on top of good server markup
62
* renders undefined single child as blank with client render on top of good server markup
70
-* renders a null component children as empty with server string render
63
* renders a null component children as empty with client render on top of good server markup
72
-* renders null children as blank with server string render
64
* renders null children as blank with client render on top of good server markup
74
-* renders false children as blank with server string render
65
* renders false children as blank with client render on top of good server markup
76
-* renders null and false children together as blank with server string render
66
* renders null and false children together as blank with client render on top of good server markup
67
* renders only null and false children as blank with client render on top of good server markup
68
* renders an svg element with client render on top of good server markup
@@ -92,12 +81,9 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
81
* renders multi-child hierarchies of components with client render on top of good server markup
82
* renders a div with a child with client render on top of good server markup
83
* renders a div with multiple children with client render on top of good server markup
95
-* renders a div with multiple children separated by whitespace with server string render
84
* renders a div with multiple children separated by whitespace with client render on top of good server markup
97
-* renders a div with a single child surrounded by whitespace with server string render
85
* renders a div with a single child surrounded by whitespace with client render on top of good server markup
86
* renders >,<, and & as single child with client render on top of good server markup
100
-* renders >,<, and & as multiple children with server string render
87
* renders >,<, and & as multiple children with client render on top of good server markup
88
* renders an input with a value and an onChange with client render on top of good server markup
89
* renders an input with a value and readOnly with client render on top of good server markup
scripts/fiber/tests-passing-except-dev.txt
-5
@@ -1,7 +1,4 @@
1
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
2
-* should warn about incorrect casing on properties (ssr)
3
-* should warn about incorrect casing on event handlers (ssr)
4
-* should warn about class (ssr)
2
* should suggest property name if available (ssr)
3
4
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -38,10 +35,8 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
35
* renders no children attribute with client render on top of bad server markup
36
* renders no key attribute with client render on top of bad server markup
37
* renders no dangerouslySetInnerHTML attribute with client render on top of bad server markup
41
-* renders no unknown attributes with server string render
38
* renders no unknown attributes with client render on top of bad server markup
39
* renders unknown data- attributes with client render on top of bad server markup
44
-* renders no unknown attributes for non-standard elements with server string render
40
* renders no unknown attributes for non-standard elements with client render on top of bad server markup
41
* renders unknown attributes for custom elements with client render on top of bad server markup
42
* renders unknown attributes for custom elements using is with client render on top of bad server markup
scripts/fiber/tests-passing.txt
+19
@@ -929,9 +929,12 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
929
* warns on invalid nesting at root
930
* warns nicely for table rows
931
* gives useful context in warnings
932
+* should warn about incorrect casing on properties (ssr)
933
+* should warn about incorrect casing on event handlers (ssr)
934
* should warn about incorrect casing on properties
935
* should warn about incorrect casing on event handlers
936
* should warn about class
937
+* should warn about class (ssr)
938
* should warn about props that are no longer supported
939
* should warn about props that are no longer supported (ssr)
940
* gives source code refs for unknown prop warning
@@ -1034,9 +1037,11 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
1037
* renders no key attribute with clean client render
1038
* renders no dangerouslySetInnerHTML attribute with server string render
1039
* renders no dangerouslySetInnerHTML attribute with clean client render
1040
+* renders no unknown attributes with server string render
1041
* renders no unknown attributes with clean client render
1042
* renders unknown data- attributes with server string render
1043
* renders unknown data- attributes with clean client render
1044
+* renders no unknown attributes for non-standard elements with server string render
1045
* renders no unknown attributes for non-standard elements with clean client render
1046
* renders unknown attributes for custom elements with server string render
1047
* renders unknown attributes for custom elements with clean client render
@@ -1050,20 +1055,27 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
1055
* renders a div with text with flanking whitespace with clean client render
1056
* renders a div with an empty text child with server string render
1057
* renders a div with an empty text child with clean client render
1058
+* renders a div with multiple empty text children with server string render
1059
* renders a div with multiple empty text children with clean client render
1060
+* renders a div with multiple whitespace children with server string render
1061
* renders a div with multiple whitespace children with clean client render
1062
+* renders a div with text sibling to a node with server string render
1063
* renders a div with text sibling to a node with clean client render
1064
* renders a non-standard element with text with server string render
1065
* renders a non-standard element with text with clean client render
1066
* renders a custom element with text with server string render
1067
* renders a custom element with text with clean client render
1068
+* renders a leading blank child with a text sibling with server string render
1069
* renders a leading blank child with a text sibling with clean client render
1070
+* renders a trailing blank child with a text sibling with server string render
1071
* renders a trailing blank child with a text sibling with clean client render
1072
+* renders an element with two text children with server string render
1073
* renders an element with two text children with clean client render
1074
* renders a number as single child with server string render
1075
* renders a number as single child with clean client render
1076
* renders zero as single child with server string render
1077
* renders zero as single child with clean client render
1078
+* renders an element with number and text children with server string render
1079
* renders an element with number and text children with clean client render
1080
* renders null single child as blank with server string render
1081
* renders null single child as blank with clean client render
@@ -1071,9 +1083,13 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
1083
* renders false single child as blank with clean client render
1084
* renders undefined single child as blank with server string render
1085
* renders undefined single child as blank with clean client render
1086
+* renders a null component children as empty with server string render
1087
* renders a null component children as empty with clean client render
1088
+* renders null children as blank with server string render
1089
* renders null children as blank with clean client render
1090
+* renders false children as blank with server string render
1091
* renders false children as blank with clean client render
1092
+* renders null and false children together as blank with server string render
1093
* renders null and false children together as blank with clean client render
1094
* renders only null and false children as blank with server string render
1095
* renders only null and false children as blank with clean client render
@@ -1109,10 +1125,13 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
1125
* renders a div with a child with clean client render
1126
* renders a div with multiple children with server string render
1127
* renders a div with multiple children with clean client render
1128
+* renders a div with multiple children separated by whitespace with server string render
1129
* renders a div with multiple children separated by whitespace with clean client render
1130
+* renders a div with a single child surrounded by whitespace with server string render
1131
* renders a div with a single child surrounded by whitespace with clean client render
1132
* renders >,<, and & as single child with server string render
1133
* renders >,<, and & as single child with clean client render
1134
+* renders >,<, and & as multiple children with server string render
1135
* renders >,<, and & as multiple children with clean client render
1136
* throws when rendering a string component with server string render
1137
* throws when rendering an undefined component with server string render
scripts/jest/test-framework-setup.js
+1
@@ -3,6 +3,7 @@
3
// We want to globally mock this but jest doesn't let us do that by default
4
// for a file that already exists. So we have to explicitly mock it.
5
jest.mock('ReactDOM');
6
+jest.mock('ReactDOMServer');
7
jest.mock('ReactNative');
8
jest.mock('ReactDOMFeatureFlags', () => {
9
const flags = require.requireActual('ReactDOMFeatureFlags');
scripts/rollup/bundles.js
+29
-11
@@ -158,8 +158,7 @@ const bundles = [
158
/******* React DOM Server *******/
159
{
160
babelOpts: babelOptsReact,
161
- // TODO: deal with the Node version of react-dom-server package
162
- bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
161
+ bundleTypes: [FB_DEV, FB_PROD],
162
config: {
163
destDir: 'build/',
164
globals: {
@@ -169,27 +168,46 @@ const bundles = [
168
sourceMap: false,
169
},
170
entry: 'src/renderers/dom/ReactDOMServer.js',
172
- externals: [
173
- 'prop-types',
174
- 'prop-types/checkPropTypes',
175
- 'create-react-class/factory',
176
- ],
171
+ externals: ['prop-types', 'prop-types/checkPropTypes'],
172
fbEntry: 'src/renderers/dom/ReactDOMServer.js',
173
hasteName: 'ReactDOMServerStack',
174
isRenderer: true,
180
- label: 'dom-server',
175
+ label: 'dom-server-stack',
176
+ manglePropertiesOnProd: false,
177
+ name: 'react-dom-stack/server',
178
+ paths: [
179
+ 'src/renderers/dom/**/*.js',
180
+ 'src/renderers/shared/**/*.js',
181
+ 'src/ReactVersion.js',
182
+ 'src/shared/**/*.js',
183
+ ],
184
+ },
185
+ {
186
+ babelOpts: babelOptsReact,
187
+ bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
188
+ config: {
189
+ destDir: 'build/',
190
+ globals: {
191
+ react: 'React',
192
+ },
193
+ moduleName: 'ReactDOMServer',
194
+ sourceMap: false,
195
+ },
196
+ entry: 'src/renderers/dom/ReactDOMServerStream.js',
197
+ externals: ['prop-types', 'prop-types/checkPropTypes'],
198
+ fbEntry: 'src/renderers/dom/ReactDOMServerStream.js',
199
+ hasteName: 'ReactDOMServerStream',
200
+ isRenderer: true,
201
+ label: 'dom-server-stream',
202
manglePropertiesOnProd: false,
203
name: 'react-dom/server',
204
paths: [
184
- 'src/isomorphic/**/*.js',
205
'src/renderers/dom/**/*.js',
206
'src/renderers/shared/**/*.js',
207
'src/ReactVersion.js',
208
'src/shared/**/*.js',
189
- 'src/addons/**/*.js',
209
],
210
},
192
- // TODO: there is no Fiber version of ReactDOMServer.
211
212
/******* React ART *******/
213
{
src/renderers/dom/ReactDOMServer.js
+11
@@ -25,4 +25,15 @@ var ReactDOMServer = {
25
version: ReactVersion,
26
};
27
28
+if (__DEV__) {
29
+ var ReactInstrumentation = require('ReactInstrumentation');
30
+ var ReactDOMUnknownPropertyHook = require('ReactDOMUnknownPropertyHook');
31
+ var ReactDOMNullInputValuePropHook = require('ReactDOMNullInputValuePropHook');
32
+ var ReactDOMInvalidARIAHook = require('ReactDOMInvalidARIAHook');
33
+
34
+ ReactInstrumentation.debugTool.addHook(ReactDOMUnknownPropertyHook);
35
+ ReactInstrumentation.debugTool.addHook(ReactDOMNullInputValuePropHook);
36
+ ReactInstrumentation.debugTool.addHook(ReactDOMInvalidARIAHook);
37
+}
38
+
39
module.exports = ReactDOMServer;
src/renderers/dom/ReactDOMServerStream.js
renamed
+3
-3
@@ -6,7 +6,7 @@
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
- * @providesModule ReactServer
9
+ * @providesModule ReactDOMServerStream
10
*/
11
12
'use strict';
@@ -19,10 +19,10 @@ var ReactVersion = require('ReactVersion');
19
ReactDOMInjection.inject();
20
ReactDOMStackInjection.inject();
21
22
-var ReactServer = {
22
+var ReactDOMServer = {
23
renderToString: ReactServerRenderer.renderToString,
24
renderToStaticMarkup: ReactServerRenderer.renderToStaticMarkup,
25
version: ReactVersion,
26
};
27
28
-module.exports = ReactServer;
28
+module.exports = ReactDOMServer;
src/renderers/dom/__mocks__/ReactDOMServer.js
new
+18
@@ -0,0 +1,18 @@
1
+/**
2
+ * Copyright 2013-2015, 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
+
10
+'use strict';
11
+
12
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
13
+
14
+var useFiber = ReactDOMFeatureFlags.useFiber;
15
+
16
+module.exports = useFiber
17
+ ? require('ReactDOMServerStream')
18
+ : require.requireActual('ReactDOMServer');
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+122
-40
@@ -528,10 +528,16 @@ describe('ReactDOMServerIntegration', () => {
528
if (ReactDOMFeatureFlags.useFiber) {
529
// with Fiber, there are just three separate text node children,
530
// each of which is blank.
531
- expect(e.childNodes.length).toBe(3);
532
- expectTextNode(e.childNodes[0], '');
533
- expectTextNode(e.childNodes[1], '');
534
- expectTextNode(e.childNodes[2], '');
531
+ if (render === serverRender) {
532
+ // For plain server markup result we expect six comment nodes.
533
+ expect(e.childNodes.length).toBe(6);
534
+ expect(e.textContent).toBe('');
535
+ } else {
536
+ expect(e.childNodes.length).toBe(3);
537
+ expectTextNode(e.childNodes[0], '');
538
+ expectTextNode(e.childNodes[1], '');
539
+ expectTextNode(e.childNodes[2], '');
540
+ }
541
} else {
542
// with Stack, there are six react-text comment nodes.
543
expect(e.childNodes.length).toBe(6);
@@ -545,10 +551,17 @@ describe('ReactDOMServerIntegration', () => {
551
const e = await render(<div>{' '}{' '}{' '}</div>);
552
if (ReactDOMFeatureFlags.useFiber) {
553
// with Fiber, there are just three text nodes.
548
- expect(e.childNodes.length).toBe(3);
549
- expectTextNode(e.childNodes[0], ' ');
550
- expectTextNode(e.childNodes[1], ' ');
551
- expectTextNode(e.childNodes[2], ' ');
554
+ if (render === serverRender) {
555
+ expect(e.childNodes.length).toBe(9);
556
+ expectTextNode(e.childNodes[1], ' ');
557
+ expectTextNode(e.childNodes[4], ' ');
558
+ expectTextNode(e.childNodes[7], ' ');
559
+ } else {
560
+ expect(e.childNodes.length).toBe(3);
561
+ expectTextNode(e.childNodes[0], ' ');
562
+ expectTextNode(e.childNodes[1], ' ');
563
+ expectTextNode(e.childNodes[2], ' ');
564
+ }
565
} else {
566
// with Stack, each of the text nodes is surrounded by react-text
567
// comment nodes, making 9 nodes in total.
@@ -562,7 +575,7 @@ describe('ReactDOMServerIntegration', () => {
575
itRenders('a div with text sibling to a node', async render => {
576
const e = await render(<div>Text<span>More Text</span></div>);
577
let spanNode;
565
- if (ReactDOMFeatureFlags.useFiber) {
578
+ if (ReactDOMFeatureFlags.useFiber && render !== serverRender) {
579
// with Fiber, there are only two children, the "Text" text node and
580
// the span element.
581
expect(e.childNodes.length).toBe(2);
@@ -573,7 +586,11 @@ describe('ReactDOMServerIntegration', () => {
586
expect(e.childNodes.length).toBe(4);
587
spanNode = e.childNodes[3];
588
}
576
- expectTextNode(e.childNodes[0], 'Text');
589
+ if (ReactDOMFeatureFlags.useFiber && render === serverRender) {
590
+ expectTextNode(e.childNodes[1], 'Text');
591
+ } else {
592
+ expectTextNode(e.childNodes[0], 'Text');
593
+ }
594
expect(spanNode.tagName).toBe('SPAN');
595
expect(spanNode.childNodes.length).toBe(1);
596
expectNode(spanNode.firstChild, TEXT_NODE_TYPE, 'More Text');
@@ -597,9 +614,14 @@ describe('ReactDOMServerIntegration', () => {
614
const e = await render(<div>{''}foo</div>);
615
if (ReactDOMFeatureFlags.useFiber) {
616
// with Fiber, there are just two text nodes.
600
- expect(e.childNodes.length).toBe(2);
601
- expectTextNode(e.childNodes[0], '');
602
- expectTextNode(e.childNodes[1], 'foo');
617
+ if (render === serverRender) {
618
+ expect(e.childNodes.length).toBe(5);
619
+ expectTextNode(e.childNodes[3], 'foo');
620
+ } else {
621
+ expect(e.childNodes.length).toBe(2);
622
+ expectTextNode(e.childNodes[0], '');
623
+ expectTextNode(e.childNodes[1], 'foo');
624
+ }
625
} else {
626
// with Stack, there are five nodes: two react-text comment nodes
627
// without any text between them, and the text node foo surrounded
@@ -614,9 +636,14 @@ describe('ReactDOMServerIntegration', () => {
636
const e = await render(<div>foo{''}</div>);
637
if (ReactDOMFeatureFlags.useFiber) {
638
// with Fiber, there are just two text nodes.
617
- expect(e.childNodes.length).toBe(2);
618
- expectTextNode(e.childNodes[0], 'foo');
619
- expectTextNode(e.childNodes[1], '');
639
+ if (render === serverRender) {
640
+ expect(e.childNodes.length).toBe(5);
641
+ expectTextNode(e.childNodes[1], 'foo');
642
+ } else {
643
+ expect(e.childNodes.length).toBe(2);
644
+ expectTextNode(e.childNodes[0], 'foo');
645
+ expectTextNode(e.childNodes[1], '');
646
+ }
647
} else {
648
// with Stack, there are five nodes: the text node foo surrounded
649
// by react-text comment nodes, and two react-text comment nodes
@@ -631,9 +658,15 @@ describe('ReactDOMServerIntegration', () => {
658
const e = await render(<div>{'foo'}{'bar'}</div>);
659
if (ReactDOMFeatureFlags.useFiber) {
660
// with Fiber, there are just two text nodes.
634
- expect(e.childNodes.length).toBe(2);
635
- expectTextNode(e.childNodes[0], 'foo');
636
- expectTextNode(e.childNodes[1], 'bar');
661
+ if (render === serverRender) {
662
+ expect(e.childNodes.length).toBe(6);
663
+ expectTextNode(e.childNodes[1], 'foo');
664
+ expectTextNode(e.childNodes[4], 'bar');
665
+ } else {
666
+ expect(e.childNodes.length).toBe(2);
667
+ expectTextNode(e.childNodes[0], 'foo');
668
+ expectTextNode(e.childNodes[1], 'bar');
669
+ }
670
} else {
671
// with Stack, there are six nodes: two text nodes, each surrounded
672
// by react-text comment nodes.
@@ -660,9 +693,15 @@ describe('ReactDOMServerIntegration', () => {
693
const e = await render(<div>{'foo'}{40}</div>);
694
if (ReactDOMFeatureFlags.useFiber) {
695
// with Fiber, there are just two text nodes.
663
- expect(e.childNodes.length).toBe(2);
664
- expectTextNode(e.childNodes[0], 'foo');
665
- expectTextNode(e.childNodes[1], '40');
696
+ if (render === serverRender) {
697
+ expect(e.childNodes.length).toBe(6);
698
+ expectTextNode(e.childNodes[1], 'foo');
699
+ expectTextNode(e.childNodes[4], '40');
700
+ } else {
701
+ expect(e.childNodes.length).toBe(2);
702
+ expectTextNode(e.childNodes[0], 'foo');
703
+ expectTextNode(e.childNodes[1], '40');
704
+ }
705
} else {
706
// with Stack, there are six nodes: two text nodes, each surrounded
707
// by react-text comment nodes.
@@ -694,7 +733,12 @@ describe('ReactDOMServerIntegration', () => {
733
const e = await render(<div><NullComponent /></div>);
734
if (ReactDOMFeatureFlags.useFiber) {
735
// with Fiber, an empty component results in no markup.
697
- expect(e.childNodes.length).toBe(0);
736
+ if (render === serverRender) {
737
+ expect(e.childNodes.length).toBe(1);
738
+ expectEmptyNode(e.firstChild);
739
+ } else {
740
+ expect(e.childNodes.length).toBe(0);
741
+ }
742
} else {
743
// with Stack, an empty component results in one react-empty comment
744
// node.
@@ -707,36 +751,54 @@ describe('ReactDOMServerIntegration', () => {
751
const e = await render(<div>{null}foo</div>);
752
if (ReactDOMFeatureFlags.useFiber) {
753
// with Fiber, there is just one text node.
710
- expect(e.childNodes.length).toBe(1);
754
+ if (render === serverRender) {
755
+ expect(e.childNodes.length).toBe(3);
756
+ expectTextNode(e.childNodes[1], 'foo');
757
+ } else {
758
+ expect(e.childNodes.length).toBe(1);
759
+ expectTextNode(e.childNodes[0], 'foo');
760
+ }
761
} else {
762
// with Stack, there's a text node surronded by react-text comment nodes.
763
expect(e.childNodes.length).toBe(3);
764
+ expectTextNode(e.childNodes[0], 'foo');
765
}
715
- expectTextNode(e.childNodes[0], 'foo');
766
});
767
768
itRenders('false children as blank', async render => {
769
const e = await render(<div>{false}foo</div>);
770
if (ReactDOMFeatureFlags.useFiber) {
771
// with Fiber, there is just one text node.
722
- expect(e.childNodes.length).toBe(1);
772
+ if (render === serverRender) {
773
+ expect(e.childNodes.length).toBe(3);
774
+ expectTextNode(e.childNodes[1], 'foo');
775
+ } else {
776
+ expect(e.childNodes.length).toBe(1);
777
+ expectTextNode(e.childNodes[0], 'foo');
778
+ }
779
} else {
780
// with Stack, there's a text node surronded by react-text comment nodes.
781
expect(e.childNodes.length).toBe(3);
782
+ expectTextNode(e.childNodes[0], 'foo');
783
}
727
- expectTextNode(e.childNodes[0], 'foo');
784
});
785
786
itRenders('null and false children together as blank', async render => {
787
const e = await render(<div>{false}{null}foo{null}{false}</div>);
788
if (ReactDOMFeatureFlags.useFiber) {
789
// with Fiber, there is just one text node.
734
- expect(e.childNodes.length).toBe(1);
790
+ if (render === serverRender) {
791
+ expect(e.childNodes.length).toBe(3);
792
+ expectTextNode(e.childNodes[1], 'foo');
793
+ } else {
794
+ expect(e.childNodes.length).toBe(1);
795
+ expectTextNode(e.childNodes[0], 'foo');
796
+ }
797
} else {
798
// with Stack, there's a text node surronded by react-text comment nodes.
799
expect(e.childNodes.length).toBe(3);
800
+ expectTextNode(e.childNodes[0], 'foo');
801
}
739
- expectTextNode(e.childNodes[0], 'foo');
802
});
803
804
itRenders('only null and false children as blank', async render => {
@@ -930,10 +992,17 @@ describe('ReactDOMServerIntegration', () => {
992
if (ReactDOMFeatureFlags.useFiber) {
993
// with Fiber, there are three children: the child1 element, a
994
// single space text node, and the child2 element.
933
- expect(e.childNodes.length).toBe(3);
934
- child1 = e.childNodes[0];
935
- textNode = e.childNodes[1];
936
- child2 = e.childNodes[2];
995
+ if (render === serverRender) {
996
+ expect(e.childNodes.length).toBe(5);
997
+ child1 = e.childNodes[0];
998
+ textNode = e.childNodes[2];
999
+ child2 = e.childNodes[4];
1000
+ } else {
1001
+ expect(e.childNodes.length).toBe(3);
1002
+ child1 = e.childNodes[0];
1003
+ textNode = e.childNodes[1];
1004
+ child2 = e.childNodes[2];
1005
+ }
1006
} else {
1007
// with Stack, there are five children: the child1 element, a single
1008
// space surrounded by react-text comments, and the child2 element.
@@ -959,10 +1028,17 @@ describe('ReactDOMServerIntegration', () => {
1028
if (ReactDOMFeatureFlags.useFiber) {
1029
// with Fiber, there are three children: a one-space text node, the
1030
// child element, and a two-space text node.
962
- expect(e.childNodes.length).toBe(3);
963
- textNode1 = e.childNodes[0];
964
- child = e.childNodes[1];
965
- textNode2 = e.childNodes[2];
1031
+ if (render === serverRender) {
1032
+ expect(e.childNodes.length).toBe(7);
1033
+ textNode1 = e.childNodes[1];
1034
+ child = e.childNodes[3];
1035
+ textNode2 = e.childNodes[5];
1036
+ } else {
1037
+ expect(e.childNodes.length).toBe(3);
1038
+ textNode1 = e.childNodes[0];
1039
+ child = e.childNodes[1];
1040
+ textNode2 = e.childNodes[2];
1041
+ }
1042
} else {
1043
// with Stack, there are 7 children: a one-space text node surrounded
1044
// by react-text comments, the child element, and a two-space text node
@@ -994,9 +1070,15 @@ describe('ReactDOMServerIntegration', () => {
1070
);
1071
if (ReactDOMFeatureFlags.useFiber) {
1072
// with Fiber, there are just two text nodes.
997
- expect(e.childNodes.length).toBe(2);
998
- expectTextNode(e.childNodes[0], '<span>Text1"</span>');
999
- expectTextNode(e.childNodes[1], '<span>Text2"</span>');
1073
+ if (render === serverRender) {
1074
+ expect(e.childNodes.length).toBe(6);
1075
+ expectTextNode(e.childNodes[1], '<span>Text1"</span>');
1076
+ expectTextNode(e.childNodes[4], '<span>Text2"</span>');
1077
+ } else {
1078
+ expect(e.childNodes.length).toBe(2);
1079
+ expectTextNode(e.childNodes[0], '<span>Text1"</span>');
1080
+ expectTextNode(e.childNodes[1], '<span>Text2"</span>');
1081
+ }
1082
} else {
1083
// with Stack there are six nodes: two text nodes each surrounded by
1084
// two react-text comment nodes.
src/renderers/shared/server/ReactServerRenderer.js
renamed
+6
-10
@@ -14,9 +14,8 @@
14
var CSSPropertyOperations = require('CSSPropertyOperations');
15
var DOMPropertyOperations = require('DOMPropertyOperations');
16
var {registrationNameModules} = require('EventPluginRegistry');
17
-var React = require('React');
17
+var React = require('react');
18
var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
19
-var ReactElement = require('ReactElement');
19
var ReactMarkupChecksum = require('ReactMarkupChecksum');
20
21
var assertValidProps = require('assertValidProps');
@@ -25,7 +24,7 @@ var emptyObject = require('fbjs/lib/emptyObject');
24
var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
25
var invariant = require('fbjs/lib/invariant');
26
var omittedCloseTags = require('omittedCloseTags');
28
-var traverseAllChildren = require('traverseAllChildren');
27
+var traverseStackChildren = require('traverseStackChildren');
28
var warning = require('fbjs/lib/warning');
29
30
if (__DEV__) {
@@ -235,10 +234,7 @@ function createOpenTagMarkup(
234
function resolve(child, context) {
235
// TODO: We'll need to support Arrays (and strings) after Fiber is rolled out
236
invariant(!Array.isArray(child), 'Did not expect to receive an Array child');
238
- while (
239
- ReactElement.isValidElement(child) &&
240
- typeof child.type === 'function'
241
- ) {
237
+ while (React.isValidElement(child) && typeof child.type === 'function') {
238
var Component = child.type;
239
var publicContext = processContext(Component, context);
240
@@ -653,7 +649,7 @@ class ReactDOMServerRenderer {
649
}
650
out += innerMarkup;
651
} else {
656
- traverseAllChildren(props.children, function(ctx, child, name) {
652
+ traverseStackChildren(props.children, function(ctx, child, name) {
653
if (child != null) {
654
children.push(child);
655
}
@@ -677,7 +673,7 @@ class ReactDOMServerRenderer {
673
*/
674
function renderToString(element) {
675
invariant(
680
- ReactElement.isValidElement(element),
676
+ React.isValidElement(element),
677
'renderToString(): You must pass a valid ReactElement.',
678
);
679
var renderer = new ReactDOMServerRenderer(element, false);
@@ -693,7 +689,7 @@ function renderToString(element) {
689
*/
690
function renderToStaticMarkup(element) {
691
invariant(
696
- ReactElement.isValidElement(element),
692
+ React.isValidElement(element),
693
'renderToStaticMarkup(): You must pass a valid ReactElement.',
694
);
695
var renderer = new ReactDOMServerRenderer(element, true);