reset

Author: salazarm

packages/react-client/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 './src/ReactFlightClient';

packages/react-client/npm/flight-hooks.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-client-flight-hooks.production.min.js');
+} else {
+  module.exports = require('./cjs/react-client-flight-hooks.development.js');
+}

packages/react-client/package.json

@@ -13,8 +13,14 @@
     "LICENSE",
     "README.md",
     "flight.js",
+    "flight-hooks.js",
     "cjs/"
   ],
+  "exports": {
+    ".": "./flight.js",
+    "./flight": "./flight.js",
+    "./flight-hooks": "./flight-hooks.js"
+  },
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",

packages/react-client/src/ReactFlightClient.js

@@ -7,26 +7,34 @@
  * @flow
  */
 
-import type {Wakeable} from 'shared/ReactTypes';
+import type {Wakeable, ReactProviderType} from 'shared/ReactTypes';
 import type {LazyComponent} from 'react/src/ReactLazy';
+import type {
+  ReactServerContext,
+  ServerContextJSONValue,
+} from 'shared/ReactTypes';
 
 import type {
   ModuleReference,
   ModuleMetaData,
   UninitializedModel,
   Response,
 } from './ReactFlightClientHostConfig';
-
 import {
   resolveModuleReference,
   preloadModule,
   requireModule,
   parseModel,
 } from './ReactFlightClientHostConfig';
 
-import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-
 import {getOrCreateServerContext} from 'shared/ReactServerContextRegistry';
+import {
+  REACT_LAZY_TYPE,
+  REACT_ELEMENT_TYPE,
+  REACT_PROVIDER_TYPE,
+} from 'shared/ReactSymbols';
+
+import {useContext, useMemo, createContext} from 'react';
 
 export type JSONValue =
   | number
@@ -331,6 +339,12 @@ export function parseModelTuple(
   const tuple: [mixed, mixed, mixed, mixed] = (value: any);
 
   if (tuple[0] === REACT_ELEMENT_TYPE) {
+    if ((tuple[1]: any).$$typeof === REACT_PROVIDER_TYPE) {
+      return createElement(ServerContextWrapper, null, {
+        ServerContext: ((tuple[1]: any): ReactProviderType<any>)._context,
+        ...tuple[3],
+      });
+    }
     // TODO: Consider having React just directly accept these arrays as elements.
     // Or even change the ReactElement type to be an array.
     return createElement(tuple[1], tuple[2], tuple[3]);
@@ -434,3 +448,42 @@ export function close(response: Response): void {
   // ref count of pending chunks.
   reportGlobalError(response, new Error('Connection closed.'));
 }
+
+const ServerContextContext = createContext(null);
+
+type ServerContextNodeType = {
+  parent: null | ServerContextNodeType,
+  name: string,
+  value: any,
+};
+
+type Props = {
+  ServerContext: ReactServerContext<any>,
+  value: ServerContextJSONValue,
+  children: any,
+};
+
+function ServerContextWrapper({ServerContext, value, children}: Props) {
+  const parent = useContext(ServerContextContext);
+
+  const context = useMemo(() => {
+    const ctx = {
+      parent: parent,
+      name: ServerContext._globalName,
+      value: value,
+    };
+    if (__DEV__) {
+      return Object.freeze(ctx);
+    }
+    return ctx;
+  }, [parent, value]);
+
+  return createElement(ServerContextContext.Provider, null, {
+    value: context,
+    children: createElement(ServerContext.Provider, null, {value, children}),
+  });
+}
+
+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 =
@@ -653,5 +656,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/flight-hooks';

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer-flight-hooks.production.min.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-flight-hooks.development.js');
+}

packages/react-noop-renderer/package.json

@@ -27,6 +27,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/ReactFlightClient';

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": {
@@ -60,4 +62,4 @@
       "loose-envify"
     ]
   }
-}
+}