Feature/support esm import remote

packages/utilities/project.json

@@ -13,7 +13,7 @@
         "tsConfig": "packages/utilities/tsconfig.lib.json",
         "assets": ["packages/utilities/*.md"],
         "buildableProjectDepsInPackageJsonType": "dependencies",
-        "updateBuildableProjectDepsInPackageJson": true,
+        "updateBuildableProjectDepsInPackageJson": true
       }
     },
     "publish": {

packages/utilities/src/utils/importRemote.ts

@@ -26,6 +26,7 @@ export interface ImportRemoteOptions {
   module: string;
   remoteEntryFileName?: string;
   bustRemoteEntryCache?: boolean;
+  esm?: boolean;
 }
 
 /**
@@ -43,7 +44,7 @@ const REMOTE_ENTRY_FILE = 'remoteEntry.js';
  * @returns {Promise<void>} A promise that resolves when the remote is loaded
  */
 const loadRemote = (
-  url: ImportRemoteOptions['url'],
+  url: RemoteData['url'],
   scope: ImportRemoteOptions['scope'],
   bustRemoteEntryCache: ImportRemoteOptions['bustRemoteEntryCache'],
 ) =>
@@ -67,6 +68,29 @@ const loadRemote = (
     );
   });
 
+const loadEsmRemote = async (
+  url: RemoteData['url'],
+  scope: ImportRemoteOptions['scope'],
+  bustRemoteEntryCache: ImportRemoteOptions['bustRemoteEntryCache'],
+) => {
+  const timestamp = bustRemoteEntryCache ? `?t=${new Date().getTime()}` : '';
+  const module = await eval(
+    'import(/* webpackIgnore: true */ `${url}${timestamp}`)',
+  );
+
+  if (!module) {
+    throw new Error(
+      `Unable to load requested remote from ${url} with scope ${scope}`,
+    );
+  }
+
+  window[scope] = {
+    ...module,
+    __initializing: false,
+    __initialized: false,
+  } satisfies WebpackRemoteContainer;
+};
+
 /**
  * Function to initialize sharing
  * @async
@@ -114,6 +138,7 @@ export const importRemote = async <T>({
   module,
   remoteEntryFileName = REMOTE_ENTRY_FILE,
   bustRemoteEntryCache = true,
+  esm = false,
 }: ImportRemoteOptions): Promise<T> => {
   const remoteScope = scope as unknown as number;
   if (!window[remoteScope]) {
@@ -125,15 +150,14 @@ export const importRemote = async <T>({
       remoteUrl = await url();
     }
 
+    const remoteUrlWithEntryFile = `${remoteUrl}/${remoteEntryFileName}`;
+
+    const asyncContainer = !esm
+      ? loadRemote(remoteUrlWithEntryFile, scope, bustRemoteEntryCache)
+      : loadEsmRemote(remoteUrlWithEntryFile, scope, bustRemoteEntryCache);
+
     // Load the remote and initialize the share scope if it's empty
-    await Promise.all([
-      loadRemote(
-        `${remoteUrl}/${remoteEntryFileName}`,
-        scope,
-        bustRemoteEntryCache,
-      ),
-      initSharing(),
-    ]);
+    await Promise.all([asyncContainer, initSharing()]);
     if (!window[remoteScope]) {
       throw new Error(
         `Remote loaded successfully but ${scope} could not be found! Verify that the name is correct in the Webpack configuration!`,

packages/utilities/tsconfig.json

@@ -8,7 +8,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
   "files": [],
   "include": [],

packages/utilities/tsconfig.lib.json

@@ -4,7 +4,7 @@
     "jsx": "react",
     "outDir": "../../dist/out-tsc",
     "declaration": true,
-    "types": ["node"]
+    "types": ["node"],
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts", "**/*.test.js"]