{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 0b69bf7223..862c540c3b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -351,10 +351,12 @@ describe('ReactDOMFizzServer', () => {\n await act(async () => {\n const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(\n }>\n- \n-

\n- \n- <\/div>\n+ <>\n+ \n+

\n+ \n+ <\/div>\n+ <\/>\n <\/Suspense>,\n writableA,\n {\n@@ -432,11 +434,11 @@ describe('ReactDOMFizzServer', () => {\n }\n \n function AsyncPath({id}) {\n- return {[]}<\/path>;\n+ return ;\n }\n \n function AsyncMi({id}) {\n- return {[]}<\/mi>;\n+ return ;\n }\n \n function App() {\n@@ -601,7 +603,7 @@ describe('ReactDOMFizzServer', () => {\n \/\/ @gate experimental\n it('can stream into an SVG container', async () => {\n function AsyncPath({id}) {\n- return {[]}<\/path>;\n+ return ;\n }\n \n function App() {\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 90053ceb02..3664e7ba48 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -62,6 +62,12 @@ import {\n REACT_PORTAL_TYPE,\n REACT_LAZY_TYPE,\n REACT_SUSPENSE_TYPE,\n+ REACT_LEGACY_HIDDEN_TYPE,\n+ REACT_DEBUG_TRACING_MODE_TYPE,\n+ REACT_STRICT_MODE_TYPE,\n+ REACT_PROFILER_TYPE,\n+ REACT_SUSPENSE_LIST_TYPE,\n+ REACT_FRAGMENT_TYPE,\n } from 'shared\/ReactSymbols';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {\n@@ -521,6 +527,8 @@ const didWarnAboutContextTypeOnFunctionComponent = {};\n const didWarnAboutGetDerivedStateOnFunctionComponent = {};\n let didWarnAboutReassigningProps = false;\n const didWarnAboutDefaultPropsOnFunctionComponent = {};\n+let didWarnAboutGenerators = false;\n+let didWarnAboutMaps = false;\n \n \/\/ This would typically be a function component but we still support module pattern\n \/\/ components for some reason.\n@@ -701,10 +709,67 @@ function renderElement(\n }\n } else if (typeof type === 'string') {\n renderHostElement(request, task, type, props);\n- } else if (type === REACT_SUSPENSE_TYPE) {\n- renderSuspenseBoundary(request, task, props);\n } else {\n- throw new Error('Not yet implemented element type.');\n+ switch (type) {\n+ \/\/ TODO: LegacyHidden acts the same as a fragment. This only works\n+ \/\/ because we currently assume that every instance of LegacyHidden is\n+ \/\/ accompanied by a host component wrapper. In the hidden mode, the host\n+ \/\/ component is given a `hidden` attribute, which ensures that the\n+ \/\/ initial HTML is not visible. To support the use of LegacyHidden as a\n+ \/\/ true fragment, without an extra DOM node, we would have to hide the\n+ \/\/ initial HTML in some other way.\n+ \/\/ TODO: Add REACT_OFFSCREEN_TYPE here too with the same capability.\n+ case REACT_LEGACY_HIDDEN_TYPE:\n+ case REACT_DEBUG_TRACING_MODE_TYPE:\n+ case REACT_STRICT_MODE_TYPE:\n+ case REACT_PROFILER_TYPE:\n+ case REACT_SUSPENSE_LIST_TYPE: \/\/ TODO: SuspenseList should control the boundaries.\n+ case REACT_FRAGMENT_TYPE: {\n+ renderNodeDestructive(request, task, props.children);\n+ break;\n+ }\n+ case REACT_SUSPENSE_TYPE: {\n+ renderSuspenseBoundary(request, task, props);\n+ break;\n+ }\n+ default: {\n+ throw new Error('Not yet implemented element type.');\n+ }\n+ }\n+ }\n+}\n+\n+function validateIterable(iterable, iteratorFn: Function): void {\n+ if (__DEV__) {\n+ \/\/ We don't support rendering Generators because it's a mutation.\n+ \/\/ See https:\/\/github.com\/facebook\/react\/issues\/12995\n+ if (\n+ typeof Symbol === 'function' &&\n+ \/\/ $FlowFixMe Flow doesn't know about toStringTag\n+ iterable[Symbol.toStringTag] === 'Generator'\n+ ) {\n+ if (!didWarnAboutGenerators) {\n+ console.error(\n+ 'Using Generators as children is unsupported and will likely yield ' +\n+ 'unexpected results because enumerating a generator mutates it. ' +\n+ 'You may convert it to an array with `Array.from()` or the ' +\n+ '`[...spread]` operator before rendering. Keep in mind ' +\n+ 'you might need to polyfill these features for older browsers.',\n+ );\n+ }\n+ didWarnAboutGenerators = true;\n+ }\n+\n+ \/\/ Warn about using Maps as children\n+ if ((iterable: any).entries === iteratorFn) {\n+ if (!didWarnAboutMaps) {\n+ console.error(\n+ 'Using Maps as children is not supported. ' +\n+ 'Use an array of keyed ReactElements instead.',\n+ );\n+ }\n+ didWarnAboutMaps = true;\n+ }\n }\n }\n \n@@ -756,7 +821,30 @@ function renderNodeDestructive(\n \n const iteratorFn = getIteratorFn(node);\n if (iteratorFn) {\n- throw new Error('Not yet implemented node type.');\n+ if (__DEV__) {\n+ validateIterable(node, iteratorFn());\n+ }\n+ const iterator = iteratorFn.call(node);\n+ if (iterator) {\n+ let step = iterator.next();\n+ \/\/ If there are not entries, we need to push an empty so we start by checking that.\n+ if (!step.done) {\n+ do {\n+ \/\/ Recursively render the rest. We need to use the non-destructive form\n+ \/\/ so that we can safely pop back up and render the sibling if something\n+ \/\/ suspends.\n+ renderNode(request, task, step.value);\n+ step = iterator.next();\n+ } while (!step.done);\n+ return;\n+ }\n+ }\n+ pushEmpty(\n+ task.blockedSegment.chunks,\n+ request.responseState,\n+ task.assignID,\n+ );\n+ task.assignID = null;\n }\n \n const childString = Object.prototype.toString.call(node);\n@@ -805,6 +893,7 @@ function renderNodeDestructive(\n \n \/\/ Any other type is assumed to be empty.\n pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);\n+ task.assignID = null;\n }\n \n function spawnNewSuspendedTask(\n","files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-server\/src\/ReactFizzServer.js","status":"M"}],"parents":["933880b4544a83ce54c8a47f348effe725a58843"],"body":"","commit":{"authorEmail":"sema@fb.com","shortRevision":"343710c923","authoredAt":"2021-04-10T15:50:42-04:00","authorName":"Sebastian Markbåge","subject":"[Fizz] Fragments and Iterable support (#21228)","revision":"343710c9230d643ec442acef4634e380c1f0bce9"}}

dillon1000/react

Files changed