Unify JSResourceReference Interfaces (#24507)

packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js

@@ -9,7 +9,7 @@
 
 import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
-import type JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 

packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -11,7 +11,8 @@ import type {RowEncoding, JSONValue} from './ReactFlightDOMRelayProtocol';
 
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
-import JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
 import isArray from 'shared/isArray';
@@ -39,7 +40,7 @@ export type {
 } from 'ReactFlightDOMRelayServerIntegration';
 
 export function isModuleReference(reference: Object): boolean {
-  return reference instanceof JSResourceReference;
+  return reference instanceof JSResourceReferenceImpl;
 }
 
 export type ModuleKey = ModuleReference<any>;

packages/react-server-dom-relay/src/__mocks__/JSResourceReferenceImpl.js

@@ -7,13 +7,13 @@
 
 'use strict';
 
-class JSResourceReference {
+class JSResourceReferenceImpl {
-  constructor(exportedValue) {
+  constructor(moduleId) {
-    this._moduleId = exportedValue;
+    this._moduleId = moduleId;
   }
   getModuleId() {
     return this._moduleId;
   }
 }
 
-module.exports = JSResourceReference;
+module.exports = JSResourceReferenceImpl;

packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js

@@ -7,11 +7,11 @@
 
 'use strict';
 
-import JSResourceReference from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 const ReactFlightDOMRelayClientIntegration = {
   resolveModuleReference(moduleData) {
-    return new JSResourceReference(moduleData);
+    return new JSResourceReferenceImpl(moduleData);
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {

packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

@@ -10,7 +10,7 @@
 let act;
 let React;
 let ReactDOMClient;
-let JSResourceReference;
+let JSResourceReferenceImpl;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
 let SuspenseList;
@@ -24,7 +24,7 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMClient = require('react-dom/client');
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
-    JSResourceReference = require('JSResourceReference');
+    JSResourceReferenceImpl = require('JSResourceReferenceImpl');
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
     }
@@ -84,7 +84,7 @@ describe('ReactFlightDOMRelay', () => {
         </span>
       );
     }
-    const User = new JSResourceReference(UserClient);
+    const User = new JSResourceReferenceImpl(UserClient);
 
     function Greeting({firstName, lastName}) {
       return <User greeting="Hello" name={firstName + ' ' + lastName} />;

packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js

@@ -9,7 +9,7 @@
 
 import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
-import type JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 

packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js

@@ -11,9 +11,10 @@ import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import isArray from 'shared/isArray';
+import type {JSResourceReference} from 'JSResourceReference';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
-export type ModuleReference<T> = JSResourceReferenceImpl<T>;
+export type ModuleReference<T> = JSResourceReference<T>;
 
 import type {
   Destination,

packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js

@@ -8,8 +8,8 @@
 'use strict';
 
 class JSResourceReferenceImpl {
-  constructor(exportedValue) {
+  constructor(moduleId) {
-    this._moduleId = exportedValue;
+    this._moduleId = moduleId;
   }
   getModuleId() {
     return this._moduleId;

packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js

@@ -7,11 +7,11 @@
 
 'use strict';
 
-import JSResourceReference from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 const ReactFlightNativeRelayClientIntegration = {
   resolveModuleReference(moduleData) {
-    return new JSResourceReference(moduleData);
+    return new JSResourceReferenceImpl(moduleData);
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {

scripts/flow/react-relay-hooks.js

@@ -15,24 +15,29 @@ type JSONValue =
   | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
-declare class JSResourceReference<T> {
-  _moduleId: T;
-  getModuleId(): string;
-}
-
-// Haste
 declare module 'JSResourceReference' {
-  declare export default typeof JSResourceReference;
+  declare export interface JSResourceReference<T> {
+    getModuleId(): string;
+    getModuleIdAsRef(): $Flow$ModuleRef<T>;
+    getModuleIfRequired(): ?T;
+    load(): Promise<T>;
+    preload(): void;
+  }
 }
 
-// Metro
 declare module 'JSResourceReferenceImpl' {
-  declare export default class JSResourceReferenceImpl<
+  declare export default class JSResourceReferenceImpl<T> {
-    T,
+    getModuleId(): string;
-  > extends JSResourceReference<T> {}
+    getModuleIdAsRef(): $Flow$ModuleRef<T>;
+    getModuleIfRequired(): ?T;
+    load(): Promise<T>;
+    preload(): void;
+  }
 }
 
 declare module 'ReactFlightDOMRelayServerIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
   declare export function emitRow(
@@ -49,6 +54,8 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
 }
 
 declare module 'ReactFlightDOMRelayClientIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type ModuleMetaData;
   declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,
@@ -62,6 +69,8 @@ declare module 'ReactFlightDOMRelayClientIntegration' {
 }
 
 declare module 'ReactFlightNativeRelayServerIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
   declare export function emitRow(
@@ -78,6 +87,8 @@ declare module 'ReactFlightNativeRelayServerIntegration' {
 }
 
 declare module 'ReactFlightNativeRelayClientIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type ModuleMetaData;
   declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,

scripts/rollup/bundles.js

@@ -405,7 +405,7 @@ const bundles = [
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
-      'JSResourceReference',
+      'JSResourceReferenceImpl',
     ],
   },
 
@@ -420,7 +420,7 @@ const bundles = [
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
-      'JSResourceReference',
+      'JSResourceReferenceImpl',
     ],
   },
 

yarn.lock

@@ -13629,7 +13629,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.8.1, "react-is@npm:react-is":
+react-is@^16.8.1, react-is@^17.0.1, "react-is@npm:react-is":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==