{"commit":{"authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2019-04-16T16:57:08+01:00","subject":"Fix the remaining issue when primary child is null","shortRevision":"b1dea26251","revision":"b1dea262517b1bad173c658cf2c8bba37ed5d5c0"},"body":"This lets us unlock the rest of the Suspense test.","files":[{"path":"src\/__tests__\/store-test.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"}],"parents":["fe21ee7ca0f143d05b09ac43914db0d744380e08"],"patch":"diff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nindex a457dd57e3..f060f9c282 100644\n--- a\/src\/__tests__\/store-test.js\n+++ b\/src\/__tests__\/store-test.js\n@@ -637,144 +637,146 @@ describe('Store', () => {\n }\n }\n \n- \/\/ TODO: fix the bugs\n \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n- \/\/ for (let i = 0; i < steps.length; i++) {\n- \/\/ for (let j = 0; j < steps.length; j++) {\n- \/\/ \/\/ Always start with a fresh container and steps[i].\n- \/\/ container = document.createElement('div');\n- \/\/ act(() => ReactDOM.render(\n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ <\/React.Suspense>\n- \/\/ \n- \/\/ <\/Root>,\n- \/\/ container\n- \/\/ ));\n- \/\/ expect(print(store)).toEqual(snapshots[i]);\n- \/\/ \/\/ Re-render with steps[j].\n- \/\/ act(() => ReactDOM.render(\n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ {steps[j]}\n- \/\/ <\/React.Suspense>\n- \/\/ \n- \/\/ <\/Root>,\n- \/\/ container\n- \/\/ ));\n- \/\/ \/\/ Verify the successful transition to steps[j].\n- \/\/ expect(print(store)).toEqual(snapshots[j]);\n- \/\/ \/\/ Clean up after every iteration.\n- \/\/ act(() => ReactDOM.unmountComponentAtNode(container));\n- \/\/ expect(print(store)).toBe('');\n- \/\/ }\n- \/\/ }\n-\n- \/\/ TODO: fix the bugs\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[j]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n- \/\/ for (let i = 0; i < steps.length; i++) {\n- \/\/ for (let j = 0; j < steps.length; j++) {\n- \/\/ \/\/ Always start with a fresh container and steps[i].\n- \/\/ container = document.createElement('div');\n- \/\/ act(() => ReactDOM.render(\n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ {steps[i]}\n- \/\/ <\/React.Suspense>\n- \/\/ \n- \/\/ <\/Root>,\n- \/\/ container\n- \/\/ ));\n-\n- \/\/ \/\/ We get ID from the index in the tree above:\n- \/\/ \/\/ Root, X, Suspense, ...\n- \/\/ \/\/ ^ (index is 2)\n- \/\/ const suspenseID = store.getElementIDAtIndex(2);\n-\n- \/\/ \/\/ Force fallback.\n- \/\/ expect(print(store)).toEqual(snapshots[i]);\n- \/\/ act(() => {\n- \/\/ const suspenseID = store.getElementIDAtIndex(2);\n- \/\/ bridge.send('overrideSuspense', {\n- \/\/ id: suspenseID,\n- \/\/ rendererID: store.getRendererIDForElement(suspenseID),\n- \/\/ forceFallback: true\n- \/\/ });\n- \/\/ })\n- \/\/ expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ \/\/ Stop forcing fallback.\n- \/\/ act(() => {\n- \/\/ bridge.send('overrideSuspense', {\n- \/\/ id: suspenseID,\n- \/\/ rendererID: store.getRendererIDForElement(suspenseID),\n- \/\/ forceFallback: false\n- \/\/ });\n- \/\/ })\n- \/\/ expect(print(store)).toEqual(snapshots[i]);\n-\n- \/\/ \/\/ Trigger actual fallback.\n- \/\/ act(() => ReactDOM.render(\n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ <\/React.Suspense>\n- \/\/ \n- \/\/ <\/Root>,\n- \/\/ container\n- \/\/ ));\n- \/\/ expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ \/\/ Force fallback while we're in fallback mode.\n- \/\/ act(() => {\n- \/\/ bridge.send('overrideSuspense', {\n- \/\/ id: suspenseID,\n- \/\/ rendererID: store.getRendererIDForElement(suspenseID),\n- \/\/ forceFallback: true\n- \/\/ });\n- \/\/ })\n- \/\/ \/\/ Keep seeing fallback content.\n- \/\/ expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ \/\/ Switch to primary mode.\n- \/\/ act(() => ReactDOM.render(\n- \/\/ \n- \/\/ \n- \/\/ \n- \/\/ {steps[i]}\n- \/\/ <\/React.Suspense>\n- \/\/ \n- \/\/ <\/Root>,\n- \/\/ container\n- \/\/ ));\n- \/\/ \/\/ Fallback is still forced though.\n- \/\/ expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ \/\/ Stop forcing fallback. This reverts to primary content.\n- \/\/ act(() => {\n- \/\/ bridge.send('overrideSuspense', {\n- \/\/ id: suspenseID,\n- \/\/ rendererID: store.getRendererIDForElement(suspenseID),\n- \/\/ forceFallback: false\n- \/\/ });\n- \/\/ })\n- \/\/ \/\/ Now we see primary content.\n- \/\/ expect(print(store)).toEqual(snapshots[i]);\n-\n- \/\/ \/\/ Clean up after every iteration.\n- \/\/ act(() => ReactDOM.unmountComponentAtNode(container));\n- \/\/ expect(print(store)).toBe('');\n- \/\/ }\n- \/\/ }\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n \n \/\/ TODO:\n \/\/ Test Concurrent Mode\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 9895adafb6..ac79265d04 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -947,7 +947,9 @@ export function attach(\n \/\/ Note: don't emulate fallback unmount because React actually did it.\n \/\/ 2. Mount primary set\n const nextPrimaryChildSet = nextFiber.child;\n- mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);\n+ if (nextPrimaryChildSet !== null) {\n+ mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);\n+ }\n shouldResetChildren = true;\n } else if (!prevDidTimeout && nextDidTimeOut) {\n \/\/ Primary -> Fallback:\n"}

dillon1000/react

Files changed