diff --git a/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js b/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js index 2e5ed24da2fd1..48560ae65350d 100644 --- a/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js +++ b/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js @@ -22,6 +22,7 @@ export type ClientReference = { $$id: string, $$name: string, $$bundles: Array, + $$importMap?: ?{[string]: string}, }; const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference'); @@ -39,12 +40,14 @@ export function createClientReference( id: string, exportName: string, bundles: Array, + importMap?: ?{[string]: string}, ): ClientReference { return { $$typeof: CLIENT_REFERENCE_TAG, $$id: id, $$name: exportName, $$bundles: bundles, + $$importMap: importMap, }; } diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js index 128ef9f5e15ed..1d380a3059108 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js +++ b/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( export function preloadModule( metadata: ClientReference, ): null | Thenable { + 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))); } diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js b/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js index 60bdf1612519c..ebcfec1badcf9 100644 --- a/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js +++ b/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js @@ -37,6 +37,15 @@ export function resolveClientReferenceMetadata( config: ClientManifest, clientReference: ClientReference, ): ClientReferenceMetadata { + if (clientReference.$$importMap) { + return [ + clientReference.$$id, + clientReference.$$name, + clientReference.$$bundles, + clientReference.$$importMap, + ]; + } + return [ clientReference.$$id, clientReference.$$name, diff --git a/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js index 4e329edf27251..d91f5d825c22b 100644 --- a/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js +++ b/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, + // eslint does not understand Flow tuple syntax. + /* eslint-disable */ + id: string, + name: string, + bundles: Array, + importMap?: {[string]: string}, + /* eslint-enable */ ]; export const ID = 0; export const NAME = 1; export const BUNDLES = 2; +export const IMPORT_MAP = 3; diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js index 1d4e6dbd9c7f1..37ca6fe4dc223 100644 --- a/scripts/flow/environment.js +++ b/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, + extendImportMap: (importMap: {[string]: string}) => void, meta: { publicUrl: string, },