Implement lazy elements / nodes

sebmarkbage · sebmarkbage · commit 2626e3e1550d · 2021-04-26T20:45:08.000-04:00
This is used by Flight to encode not yet resolved nodes of any kind.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -339,6 +339,98 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([theError]);
   });
 
+  // @gate experimental
+  it('should asynchronously load a lazy element', async () => {
+    let resolveElement;
+    const lazyElement = React.lazy(() => {
+      return new Promise(r => {
+        resolveElement = r;
+      });
+    });
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {lazyElement}
+          </Suspense>
+        </div>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    await act(async () => {
+      resolveElement({default: <Text text="Hello" />});
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  // @gate experimental
+  it('should client render a boundary if a lazy element rejects', async () => {
+    let rejectElement;
+    const element = <Text text="Hello" />;
+    const lazyElement = React.lazy(() => {
+      return new Promise((resolve, reject) => {
+        rejectElement = reject;
+      });
+    });
+
+    const loggedErrors = [];
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? element : lazyElement}
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App isClient={false} />,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    expect(loggedErrors).toEqual([]);
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App isClient={true} />);
+    Scheduler.unstable_flushAll();
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    const theError = new Error('Test');
+    await act(async () => {
+      rejectElement(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // We haven't ran the client hydration yet.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    Scheduler.unstable_flushAll();
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
   // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
@@ -102,6 +102,7 @@ import {
   disableModulePatternComponents,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
+  enableLazyElements,
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -1023,8 +1024,16 @@ function renderNodeDestructive(
             'Render them conditionally so that they only appear on the client render.',
         );
       // eslint-disable-next-line-no-fallthrough
-      case REACT_LAZY_TYPE:
-        throw new Error('Not yet implemented node type.');
+      case REACT_LAZY_TYPE: {
+        if (enableLazyElements) {
+          const lazyNode: LazyComponentType<any, any> = (node: any);
+          const payload = lazyNode._payload;
+          const init = lazyNode._init;
+          const resolvedNode = init(payload);
+          renderNodeDestructive(request, task, resolvedNode);
+          return;
+        }
+      }
     }
 
     if (isArray(node)) {
