[Flight Parcel] Pass import maps through client references

Author: devongovett

packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js

@@ -22,6 +22,7 @@ export type ClientReference<T> = {
   $$id: string,
   $$name: string,
   $$bundles: Array<string>,
+  $$importMap?: ?{[string]: string},
 };
 
 const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
@@ -39,12 +40,14 @@ export function createClientReference<T>(
   id: string,
   exportName: string,
   bundles: Array<string>,
+  importMap?: ?{[string]: string},
 ): ClientReference<T> {
   return {
     $$typeof: CLIENT_REFERENCE_TAG,
     $$id: id,
     $$name: exportName,
     $$bundles: bundles,
+    $$importMap: importMap,
   };
 }
 

packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js

@@ -11,7 +11,12 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
 
-import {ID, NAME, BUNDLES} from '../shared/ReactFlightImportMetadata';
+import {
+  ID,
+  NAME,
+  BUNDLES,
+  IMPORT_MAP,
+} from '../shared/ReactFlightImportMetadata';
 import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
 
 export type ServerManifest = {
@@ -60,9 +65,14 @@ export function resolveServerReference<T>(
 export function preloadModule<T>(
   metadata: ClientReference<T>,
 ): null | Thenable<any> {
+  if (metadata[IMPORT_MAP]) {
+    parcelRequire.extendImportMap(metadata[IMPORT_MAP]);
+  }
+
   if (metadata[BUNDLES].length === 0) {
     return null;
   }
+
   return Promise.all(metadata[BUNDLES].map(url => parcelRequire.load(url)));
 }
 

packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js

@@ -37,6 +37,15 @@ export function resolveClientReferenceMetadata<T>(
   config: ClientManifest,
   clientReference: ClientReference<T>,
 ): ClientReferenceMetadata {
+  if (clientReference.$$importMap) {
+    return [
+      clientReference.$$id,
+      clientReference.$$name,
+      clientReference.$$bundles,
+      clientReference.$$importMap,
+    ];
+  }
+
   return [
     clientReference.$$id,
     clientReference.$$name,

packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js

@@ -10,11 +10,16 @@
 // This is the parsed shape of the wire format which is why it is
 // condensed to only the essentialy information
 export type ImportMetadata = [
-  /* id */ string,
-  /* name */ string,
-  /* bundles */ Array<string>,
+  // eslint does not understand Flow tuple syntax.
+  /* eslint-disable */
+  id: string,
+  name: string,
+  bundles: Array<string>,
+  importMap?: {[string]: string},
+  /* eslint-enable */
 ];
 
 export const ID = 0;
 export const NAME = 1;
 export const BUNDLES = 2;
+export const IMPORT_MAP = 3;

scripts/flow/environment.js

@@ -106,6 +106,7 @@ declare const __turbopack_require__: ((id: string) => any) & {
 declare var parcelRequire: {
   (id: string): any,
   load: (url: string) => Promise<mixed>,
+  extendImportMap: (importMap: {[string]: string}) => void,
   meta: {
     publicUrl: string,
   },