Follow ups to bundler configs

Follow ups from #18334 I also introduced the concept of a module reference on the client too. We don't need this for webpack so that gets compiled out but we need it for www. Similarly I also need a difference between preload and load.
facebook · Mar 20, 2020 · cc06d74 · cc06d74
1 parent 31e6756
commit cc06d74
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 19 deletions.
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -9,10 +9,15 @@
 
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
-// import type {ModuleMetaData} from './ReactFlightClientHostConfig';
+// import type {
+//   ModuleReference,
+//   ModuleMetaData,
+// } from './ReactFlightClientHostConfig';
 
 // import {
+//   resolveModuleReference,
 //   preloadModule,
+//   loadModule,
 //   requireModule,
 // } from './ReactFlightClientHostConfig';
 

diff --git a/packages/react-flight-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-flight-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -8,8 +8,13 @@
  */
 
 export {
+  resolveModuleReference,
   preloadModule,
+  loadModule,
   requireModule,
 } from 'ReactFlightDOMRelayClientIntegration';
 
-export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
+export type {
+  ModuleReference,
+  ModuleMetaData,
+} from 'ReactFlightDOMRelayClientIntegration';
diff --git a/packages/react-flight-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-flight-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -20,7 +20,7 @@ import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 import {
   emitModel,
   emitError,
-  resolveResourceMetaData,
+  resolveModuleMetaData as resolveModuleMetaDataImpl,
 } from 'ReactFlightDOMRelayServerIntegration';
 
 export type {
@@ -35,7 +35,7 @@ export function resolveModuleMetaData(
   config: BundlerConfig,
   resource: ModuleReference,
 ): ModuleMetaData {
-  return resolveResourceMetaData(resource);
+  return resolveModuleMetaDataImpl(resource);
 }
 
 type JSONValue =

diff --git a/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js b/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
@@ -14,10 +14,14 @@ function getFakeModule() {
 }
 
 const ReactFlightDOMRelayClientIntegration = {
-  preloadModule(jsResource) {
+  resolveModuleReference(moduleData) {
+    return moduleData;
+  },
+  preloadModule(moduleReference) {},
+  loadModule(moduleReference) {
     return null;
   },
-  requireModule(jsResource) {
+  requireModule(moduleReference) {
     return getFakeModule();
   },
 };

diff --git a/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
@@ -23,7 +23,7 @@ const ReactFlightDOMRelayServerIntegration = {
     });
   },
   close(destination) {},
-  resolveResourceMetaData(resource) {
+  resolveModuleMetaDataImpl(resource) {
     return resource;
   },
 };

diff --git a/packages/react-flight-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-flight-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -10,8 +10,18 @@
 export type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
+  name: string,
 };
 
+// eslint-disable-next-line no-unused-vars
+export type ModuleReference<T> = ModuleMetaData;
+
+export function resolveModuleReference<T>(
+  moduleData: ModuleMetaData,
+): ModuleReference<T> {
+  return moduleData;
+}
+
 type Thenable = {
   then(resolve: () => mixed, reject: (mixed) => mixed): mixed,
   ...
@@ -26,12 +36,11 @@ const chunkCache: Map<string, null | Thenable> = new Map();
 // Returning null means that all dependencies are fulfilled and we
 // can synchronously require the module now. A thenable is returned
 // that when resolved, means we can try again.
-export function preloadModule(moduleData: ModuleMetaData): null | Thenable {
-  let moduleEntry = require.cache[moduleData.id];
-  if (moduleEntry) {
-    // Fast exit if this module has already been loaded.
-    return null;
-  }
+export function preloadModule<T>(moduleData: ModuleReference<T>): void {
+  loadModule(moduleData);
+}
+
+export function loadModule<T>(moduleData: ModuleReference<T>): null | Thenable {
   let chunks = moduleData.chunks;
   let anyRemainingThenable = null;
   for (let i = 0; i < chunks.length; i++) {
@@ -48,6 +57,6 @@ export function preloadModule(moduleData: ModuleMetaData): null | Thenable {
   return anyRemainingThenable;
 }
 
-export function requireModule<T>(moduleData: ModuleMetaData): T {
-  return __webpack_require__(moduleData.id).default;
+export function requireModule<T>(moduleData: ModuleReference<T>): T {
+  return __webpack_require__(moduleData.id)[moduleData.name];
 }
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
@@ -37,15 +37,24 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
 
   declare export opaque type ModuleReference;
   declare export opaque type ModuleMetaData;
-  declare export function resolveResourceMetaData(
-    resource: ModuleReference,
+  declare export function resolveModuleMetaData(
+    resourceReference: ModuleReference,
   ): ModuleMetaData;
 }
 
 declare module 'ReactFlightDOMRelayClientIntegration' {
+  declare export opaque type ModuleReference;
   declare export opaque type ModuleMetaData;
-  declare export function preloadModule(
+  declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,
+  ): ModuleReference<T>;
+  declare export function preloadModule<T>(
+    moduleReference: ModuleReference<T>,
+  ): void;
+  declare export function loadModule<T>(
+    moduleReference: ModuleReference<T>,
   ): null | Thenable;
-  declare export function requireModule<T>(moduleData: ModuleMetaData): T;
+  declare export function requireModule<T>(
+    moduleReference: ModuleReference<T>,
+  ): T;
 }