@kaena1/mm-ui-shared-utils 1.25.0-f-poc-EC-3301.1 → 1.25.0-f-poc-EC-3301.3

package/dist/services/fetchManifest.js

@@ -0,0 +1,31 @@
+async function fetchManifest(manifestUrl) {
+  try {
+    const response = await fetch(manifestUrl, {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch manifest: ${response.status} ${response.statusText}`
+      );
+    }
+    const data = await response.json();
+    if (!data || typeof data !== "object" || !data.components || typeof data.components !== "object") {
+      throw new Error("Invalid manifest: missing 'components' object");
+    }
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(
+        `Manifest loading failed from ${manifestUrl}: ${error.message}`
+      );
+    }
+    throw new Error(
+      `Manifest loading failed from ${manifestUrl}: Unknown error`
+    );
+  }
+}
+export {
+  fetchManifest
+};

package/dist/services/moduleLoader.js

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import React from "react";
+import ReactDOM from "react-dom";
+class ModuleLoader {
+  constructor() {
+    __publicField(this, "loadedModules", /* @__PURE__ */ new Map());
+    __publicField(this, "importMapInjected", false);
+  }
+  prepareGlobalDependencies() {
+    if (!window.React) {
+      window.React = React;
+    }
+    if (!window.ReactDOM) {
+      window.ReactDOM = ReactDOM;
+    }
+  }
+  /**
+   * Ensure import map is injected before loading any modules
+   * Import maps MUST be added before any module scripts
+   */
+  ensureImportMap() {
+    if (typeof window === "undefined") return;
+    if (this.importMapInjected) return;
+    const existingImportMap = document.querySelector(
+      'script[type="importmap"], script[type="importmap-shim"]'
+    );
+    if (existingImportMap) {
+      this.importMapInjected = true;
+      return;
+    }
+    console.warn(
+      `Import map not found. Ensure an import map is included early in:
+
+      - pages router: the document head (e.g. in pages/_document.tsx).
+
+      - app router: the root layout head (e.g. in app/layout.tsx).`
+    );
+    this.importMapInjected = true;
+  }
+  /**
+   * Load remote React component from ES module URL
+   *
+   * @param options - Configuration object with bundleUrl and componentName
+   * @returns Promise that resolves to the loaded React component
+   * @throws Error if component loading fails or times out (10s)
+   */
+  async loadComponent(options) {
+    const { bundleUrl, componentName } = options;
+    if (this.loadedModules.has(bundleUrl)) {
+      const cachedModule = this.loadedModules.get(bundleUrl);
+      const component = (cachedModule == null ? void 0 : cachedModule[componentName]) || (cachedModule == null ? void 0 : cachedModule.default);
+      if (component) return component;
+    }
+    this.prepareGlobalDependencies();
+    this.ensureImportMap();
+    try {
+      const esm = await this.loadModuleViaScript(bundleUrl);
+      const component = esm[componentName] || esm.default;
+      if (!component) {
+        throw new Error(`Component ${componentName} not found in module`);
+      }
+      this.loadedModules.set(bundleUrl, esm);
+      return component;
+    } catch (error) {
+      console.error("🔍 LOADER: Failed to load component:", error);
+      throw error;
+    }
+  }
+  /**
+   * Load ES module from external URL using dynamic script injection
+   * This bypasses Webpack's module resolution and works with import maps
+   */
+  loadModuleViaScript(url) {
+    return new Promise((resolve, reject) => {
+      const callbackName = `__moduleCallback_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const checkInterval = 50;
+      const maxAttempts = 200;
+      let attempts = 0;
+      const scriptContent = `
+        import * as loadedModule from '${url}';
+        window.${callbackName} = loadedModule;
+      `;
+      const script = document.createElement("script");
+      script.type = "module-shim";
+      script.textContent = scriptContent;
+      const pollForModule = setInterval(() => {
+        attempts++;
+        if (window[callbackName]) {
+          clearInterval(pollForModule);
+          const loadedModule = window[callbackName];
+          delete window[callbackName];
+          if (script.parentNode) {
+            document.head.removeChild(script);
+          }
+          resolve(loadedModule);
+        } else if (attempts >= maxAttempts) {
+          clearInterval(pollForModule);
+          delete window[callbackName];
+          if (script.parentNode) {
+            document.head.removeChild(script);
+          }
+          reject(new Error(`Timeout loading module from ${url}`));
+        }
+      }, checkInterval);
+      script.onerror = (_err) => {
+        clearInterval(pollForModule);
+        delete window[callbackName];
+        if (script.parentNode) {
+          document.head.removeChild(script);
+        }
+        reject(new Error(`Failed to load module from ${url}`));
+      };
+      document.head.appendChild(script);
+    });
+  }
+  /**
+   * Preload a module without extracting components
+   * Useful for warming up cache
+   *
+   * @param bundleUrl - URL of the module to preload
+   */
+  async preloadModule(bundleUrl) {
+    if (this.loadedModules.has(bundleUrl)) return;
+    this.ensureImportMap();
+    try {
+      const esm = await this.loadModuleViaScript(bundleUrl);
+      this.loadedModules.set(bundleUrl, esm);
+    } catch (error) {
+      console.error(`Failed to preload module ${bundleUrl}:`, error);
+    }
+  }
+  /**
+   * Check if a module has already been loaded
+   *
+   * @param bundleUrl - URL of the module to check
+   * @returns true if module is already loaded, false otherwise
+   */
+  isLoaded(bundleUrl) {
+    return this.loadedModules.has(bundleUrl);
+  }
+  /**
+   * Clear all loaded modules from cache
+   * Useful for development/testing
+   */
+  clearCache() {
+    this.loadedModules.clear();
+  }
+}
+const moduleLoader = new ModuleLoader();
+export {
+  ModuleLoader,
+  moduleLoader
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaena1/mm-ui-shared-utils",
-  "version": "1.25.0-f-poc-EC-3301.1",
+  "version": "1.25.0-f-poc-EC-3301.3",
   "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,6 +35,10 @@
   ],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -54,6 +58,7 @@
     "eslint": "^9.39.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "read-pkg-up": "^11.0.0",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^23.0.0",
     "semantic-release-slack-bot": "^4.0.2",