Follow ups to bundler configs (#18352)
Follow ups from https://github.com/facebook/react/pull/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.
Sebastian Markbåge committed
Mar 19, 2020 at 17:49 UTC
fc91508c1ffd7a00c261a567536b169989e5fab4
7 files changed
+51
-19
packages/react-client/src/ReactFlightClient.js
+6
-1
@@ -9,10 +9,15 @@
9
10
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
11
12
-// import type {ModuleMetaData} from './ReactFlightClientHostConfig';
12
+// import type {
13
+// ModuleReference,
14
+// ModuleMetaData,
15
+// } from './ReactFlightClientHostConfig';
16
17
// import {
18
+// resolveModuleReference,
19
// preloadModule,
20
+// loadModule,
21
// requireModule,
22
// } from './ReactFlightClientHostConfig';
23
packages/react-flight-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+6
-1
@@ -8,8 +8,13 @@
8
*/
9
10
export {
11
+ resolveModuleReference,
12
preloadModule,
13
+ loadModule,
14
requireModule,
15
} from 'ReactFlightDOMRelayClientIntegration';
16
15
-export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
17
+export type {
18
+ ModuleReference,
19
+ ModuleMetaData,
20
+} from 'ReactFlightDOMRelayClientIntegration';
packages/react-flight-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+2
-2
@@ -20,7 +20,7 @@ import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
20
import {
21
emitModel,
22
emitError,
23
- resolveResourceMetaData,
23
+ resolveModuleMetaData as resolveModuleMetaDataImpl,
24
} from 'ReactFlightDOMRelayServerIntegration';
25
26
export type {
@@ -35,7 +35,7 @@ export function resolveModuleMetaData(
35
config: BundlerConfig,
36
resource: ModuleReference,
37
): ModuleMetaData {
38
- return resolveResourceMetaData(resource);
38
+ return resolveModuleMetaDataImpl(resource);
39
}
40
41
type JSONValue =
packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
+6
-2
@@ -14,10 +14,14 @@ function getFakeModule() {
14
}
15
16
const ReactFlightDOMRelayClientIntegration = {
17
- preloadModule(jsResource) {
17
+ resolveModuleReference(moduleData) {
18
+ return moduleData;
19
+ },
20
+ preloadModule(moduleReference) {},
21
+ loadModule(moduleReference) {
22
return null;
23
},
20
- requireModule(jsResource) {
24
+ requireModule(moduleReference) {
25
return getFakeModule();
26
},
27
};
packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
+1
-1
@@ -23,7 +23,7 @@ const ReactFlightDOMRelayServerIntegration = {
23
});
24
},
25
close(destination) {},
26
- resolveResourceMetaData(resource) {
26
+ resolveModuleMetaDataImpl(resource) {
27
return resource;
28
},
29
};
packages/react-flight-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+17
-8
@@ -10,8 +10,18 @@
10
export type ModuleMetaData = {
11
id: string,
12
chunks: Array<string>,
13
+ name: string,
14
};
15
16
+// eslint-disable-next-line no-unused-vars
17
+export type ModuleReference<T> = ModuleMetaData;
18
+
19
+export function resolveModuleReference<T>(
20
+ moduleData: ModuleMetaData,
21
+): ModuleReference<T> {
22
+ return moduleData;
23
+}
24
+
25
type Thenable = {
26
then(resolve: () => mixed, reject: (mixed) => mixed): mixed,
27
...
@@ -26,12 +36,11 @@ const chunkCache: Map<string, null | Thenable> = new Map();
36
// Returning null means that all dependencies are fulfilled and we
37
// can synchronously require the module now. A thenable is returned
38
// that when resolved, means we can try again.
29
-export function preloadModule(moduleData: ModuleMetaData): null | Thenable {
30
- let moduleEntry = require.cache[moduleData.id];
31
- if (moduleEntry) {
32
- // Fast exit if this module has already been loaded.
33
- return null;
34
- }
39
+export function preloadModule<T>(moduleData: ModuleReference<T>): void {
40
+ loadModule(moduleData);
41
+}
42
+
43
+export function loadModule<T>(moduleData: ModuleReference<T>): null | Thenable {
44
let chunks = moduleData.chunks;
45
let anyRemainingThenable = null;
46
for (let i = 0; i < chunks.length; i++) {
@@ -48,6 +57,6 @@ export function preloadModule(moduleData: ModuleMetaData): null | Thenable {
57
return anyRemainingThenable;
58
}
59
51
-export function requireModule<T>(moduleData: ModuleMetaData): T {
52
- return __webpack_require__(moduleData.id).default;
60
+export function requireModule<T>(moduleData: ModuleReference<T>): T {
61
+ return __webpack_require__(moduleData.id)[moduleData.name];
62
}
scripts/flow/react-relay-hooks.js
+13
-4
@@ -37,15 +37,24 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
37
38
declare export opaque type ModuleReference;
39
declare export opaque type ModuleMetaData;
40
- declare export function resolveResourceMetaData(
41
- resource: ModuleReference,
40
+ declare export function resolveModuleMetaData(
41
+ resourceReference: ModuleReference,
42
): ModuleMetaData;
43
}
44
45
declare module 'ReactFlightDOMRelayClientIntegration' {
46
+ declare export opaque type ModuleReference;
47
declare export opaque type ModuleMetaData;
47
- declare export function preloadModule(
48
+ declare export function resolveModuleReference<T>(
49
moduleData: ModuleMetaData,
50
+ ): ModuleReference<T>;
51
+ declare export function preloadModule<T>(
52
+ moduleReference: ModuleReference<T>,
53
+ ): void;
54
+ declare export function loadModule<T>(
55
+ moduleReference: ModuleReference<T>,
56
): null | Thenable;
50
- declare export function requireModule<T>(moduleData: ModuleMetaData): T;
57
+ declare export function requireModule<T>(
58
+ moduleReference: ModuleReference<T>,
59
+ ): T;
60
}