RFC, useServerContextsForRefetch

Author: salazarm

packages/react-client/src/ReactFlightClient.js

@@ -25,6 +25,7 @@ import {
 } from './ReactFlightClientHostConfig';
 
 import {getOrCreateServerContext} from './ReactServerContext';
+import {ServerContextWrapper} from './ReactFlightClientContext';
 
 import {
   REACT_LAZY_TYPE,
@@ -345,11 +346,10 @@ export function parseModelTuple(
       // Or even change the ReactElement type to be an array.
       return createElement(tuple[1], tuple[2], tuple[3]);
     case REACT_PROVIDER_TYPE:
-      return createElement(
-        getOrCreateServerContext((tuple[1]: any)).Provider,
-        tuple[2],
-        tuple[3],
-      );
+      return createElement(ServerContextWrapper, tuple[2], {
+        ...tuple[3],
+        ServerContext: getOrCreateServerContext((tuple[1]: any)),
+      });
   }
   return value;
 }

packages/react-client/src/ReactFlightClientContext.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+const {useContext, useMemo, createContext} = React;
+
+const ServerContextContext = createContext(null);
+
+type ServerContextNodeType = {
+  parent: null | ServerContextNodeType,
+  name: string,
+  value: any,
+};
+
+export function ServerContextWrapper({ServerContext, value, children}) {
+  const parent = useContext(ServerContextContext);
+  const context = useMemo(() => {
+    const ctx = {
+      parent: parent,
+      name: ServerContext.displayName,
+      value: value,
+    };
+    if (__DEV__) {
+      return Object.freeze(ctx);
+    }
+    return ctx;
+  }, [parent, value]);
+  return (
+    <ServerContextContext.Provider value={context}>
+      <ServerContext.Provider value={value}>{children}</ServerContext.Provider>
+    </ServerContextContext.Provider>
+  );
+}
+
+export function useServerContextsForRefetch() {
+  return useContext(ServerContextContext);
+}

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -15,6 +15,7 @@ let React;
 let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
+let ReactNoopFlightHooks;
 let ErrorBoundary;
 let NoErrorExpected;
 let Scheduler;
@@ -28,6 +29,8 @@ describe('ReactFlight', () => {
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    ReactNoopFlightHooks = require('react-noop-renderer/flight-hooks');
+
     act = require('jest-react').act;
     Scheduler = require('scheduler');
     const ReactSharedInternals =
@@ -651,5 +654,88 @@ describe('ReactFlight', () => {
         </>,
       );
     });
+
+    // @gate enableServerContext
+    it('supports useServerContextsForRefetch', () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+
+      function Foo() {
+        return (
+          <>
+            <ServerContext.Provider value="hi this is server outer">
+              <ServerContext.Provider value="hi this is server">
+                <Bar value="" />
+              </ServerContext.Provider>
+              <ServerContext.Provider value="hi this is server2">
+                <Bar value="2" />
+              </ServerContext.Provider>
+              <Bar value="outer" />
+            </ServerContext.Provider>
+            <ServerContext.Provider value="hi this is server outer2">
+              <Bar value="outer2" />
+            </ServerContext.Provider>
+            <Bar value="default" />
+          </>
+        );
+      }
+      const contextsForRefetch = [];
+      function ClientBaz() {
+        const context = React.useContext(ServerContext);
+        contextsForRefetch.push(
+          ReactNoopFlightHooks.useServerContextsForRefetch(),
+        );
+        return <span>{context}</span>;
+      }
+      function ClientBar({value}) {
+        return (
+          <ServerContext.Provider
+            value={'hi this is client' + (value ? ' ' + value : '')}>
+            <ClientBaz />
+          </ServerContext.Provider>
+        );
+      }
+      const Bar = moduleReference(ClientBar);
+
+      const transport = ReactNoopFlightServer.render(<Foo />);
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span>hi this is client</span>
+          <span>hi this is client 2</span>
+          <span>hi this is client outer</span>
+          <span>hi this is client outer2</span>
+          <span>hi this is client default</span>
+        </>,
+      );
+      const outer = {
+        parent: null,
+        name: 'ServerContext',
+        value: 'hi this is server outer',
+      };
+      expect(contextsForRefetch[0]).toEqual({
+        parent: outer,
+        name: 'ServerContext',
+        value: 'hi this is server',
+      });
+      expect(contextsForRefetch[1]).toEqual({
+        parent: outer,
+        name: 'ServerContext',
+        value: 'hi this is server2',
+      });
+      expect(contextsForRefetch[2]).toEqual(outer);
+      expect(contextsForRefetch[3]).toEqual({
+        parent: null,
+        name: 'ServerContext',
+        value: 'hi this is server outer2',
+      });
+      expect(contextsForRefetch[4]).toEqual(null);
+    });
   });
 });

packages/react-noop-renderer/flight-hooks.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {useServerContextsForRefetch} from 'react-client/src/ReactFlightClientContext';

packages/react-noop-renderer/package.json

@@ -28,6 +28,7 @@
     "flight-client.js",
     "flight-modules.js",
     "flight-server.js",
+    "flight-hooks.js",
     "cjs/"
   ]
 }

packages/react-server-dom-webpack/flight-hooks.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {useServerContextsForRefetch} from 'react-client/src/ReactFlightClientContext';

packages/react-server-dom-webpack/package.json

@@ -17,6 +17,7 @@
     "writer.browser.server.js",
     "writer.node.server.js",
     "node-register.js",
+    "flight-hooks.js",
     "cjs/",
     "umd/",
     "esm/"
@@ -35,7 +36,8 @@
     "./writer.browser.server": "./writer.browser.server.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
     "./node-register": "./node-register.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./flight-hooks": "./flight-hooks.js"
   },
   "main": "index.js",
   "repository": {