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

package/dist/components/ImportMapScripts.js

@@ -0,0 +1,35 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import "react-dom";
+import { generateImportMapJson } from "../services/generateImportMap.js";
+const ImportMapScripts = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "script",
+    {
+      defer: true,
+      src: "https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js",
+      crossOrigin: "anonymous"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "link",
+    {
+      rel: "preconnect",
+      href: "https://assets-qa.mintmobile.com",
+      crossOrigin: "anonymous"
+    }
+  ),
+  /* @__PURE__ */ jsx("link", { rel: "dns-prefetch", href: "https://assets-qa.mintmobile.com" }),
+  /* @__PURE__ */ jsx("link", { rel: "preconnect", href: "https://esm.sh", crossOrigin: "anonymous" }),
+  /* @__PURE__ */ jsx("link", { rel: "dns-prefetch", href: "https://esm.sh" }),
+  /* @__PURE__ */ jsx(
+    "script",
+    {
+      type: "importmap-shim",
+      dangerouslySetInnerHTML: { __html: generateImportMapJson() }
+    }
+  )
+] });
+export {
+  ImportMapScripts
+};

package/dist/components/RemoteLinks.js

@@ -0,0 +1,10 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const RemoteLinks = ({ manifest }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    manifest.styleUrl && /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: manifest.styleUrl }),
+    /* @__PURE__ */ jsx("link", { rel: "modulepreload", href: manifest.bundleUrl })
+  ] });
+};
+export {
+  RemoteLinks
+};

package/dist/components/RemoteRenderer.js

@@ -0,0 +1,27 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRemoteComponent } from "../hooks/useRemoteComponent.js";
+const RemoteRenderer = ({
+  manifest,
+  componentName,
+  componentProps,
+  autoLoad = true,
+  placeholder = null,
+  children,
+  errorFallback
+}) => {
+  const {
+    component: Comp,
+    error,
+    loaded
+  } = useRemoteComponent({
+    manifest,
+    componentName,
+    autoLoad
+  });
+  if (error) return errorFallback ? errorFallback(error) : null;
+  if (!loaded || !Comp) return /* @__PURE__ */ jsx(Fragment, { children: placeholder });
+  return /* @__PURE__ */ jsx(Comp, { ...componentProps, children });
+};
+export {
+  RemoteRenderer
+};

package/dist/hooks/useRemoteComponent.js

@@ -0,0 +1,67 @@
+import { useState, useCallback, useEffect } from "react";
+import { moduleLoader } from "../services/moduleLoader.js";
+function useRemoteComponent(options) {
+  const {
+    manifest: manifestFromProps,
+    componentName,
+    autoLoad = true
+  } = options;
+  const [state, setState] = useState({
+    component: null,
+    manifest: null,
+    loading: false,
+    error: null,
+    loaded: false
+  });
+  const loadComponent = useCallback(async () => {
+    try {
+      setState((prev) => ({
+        ...prev,
+        loading: true,
+        error: null,
+        manifest: manifestFromProps
+      }));
+      const loadOptions = {
+        bundleUrl: manifestFromProps.bundleUrl,
+        componentName
+      };
+      const component = await moduleLoader.loadComponent(loadOptions);
+      setState((prev) => ({
+        ...prev,
+        component,
+        loading: false,
+        loaded: true
+      }));
+    } catch (err) {
+      console.error("Error loading remote component:", err);
+      setState((prev) => ({
+        ...prev,
+        error: err.message,
+        loading: false,
+        loaded: false
+      }));
+    }
+  }, [manifestFromProps, componentName]);
+  const reload = useCallback(async () => {
+    await loadComponent();
+  }, [loadComponent]);
+  const clearError = useCallback(() => {
+    setState((prev) => ({ ...prev, error: null }));
+  }, []);
+  useEffect(() => {
+    if (autoLoad) {
+      loadComponent().then(() => {
+        setState((prev) => ({ ...prev, loaded: true }));
+      });
+    }
+  }, [autoLoad, loadComponent]);
+  return {
+    ...state,
+    loadComponent,
+    reload,
+    clearError
+  };
+}
+export {
+  useRemoteComponent
+};

package/dist/index.d.ts

@@ -18,10 +18,7 @@ export declare const ImportMapScripts: default_2.FC;
 export declare class ModuleLoader {
     private loadedModules;
     private importMapInjected;
-    /**
-     * Ensure React and ReactDOM are available globally
-     * Remote components may expect these to be on window object.
-     */
+    private prepareGlobalDependencies;
     /**
      * Ensure import map is injected before loading any modules
      * Import maps MUST be added before any module scripts

package/dist/index.js

@@ -1,299 +1,17 @@
-var M = Object.defineProperty;
-var y = (n, e, t) => e in n ? M(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var u = (n, e, t) => y(n, typeof e != "symbol" ? e + "" : e, t);
-import { useState as x, useEffect as w, useCallback as f } from "react";
-import { jsx as l, Fragment as h, jsxs as g } from "react/jsx-runtime";
-async function $(n) {
-  try {
-    const e = await fetch(n, {
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    if (!e.ok)
-      throw new Error(
-        `Failed to fetch manifest: ${e.status} ${e.statusText}`
-      );
-    const t = await e.json();
-    if (!t || typeof t != "object" || !t.components || typeof t.components != "object")
-      throw new Error("Invalid manifest: missing 'components' object");
-    return t;
-  } catch (e) {
-    throw e instanceof Error ? new Error(
-      `Manifest loading failed from ${n}: ${e.message}`
-    ) : new Error(
-      `Manifest loading failed from ${n}: Unknown error`
-    );
-  }
-}
-class R {
-  constructor() {
-    u(this, "loadedModules", /* @__PURE__ */ new Map());
-    u(this, "importMapInjected", !1);
-  }
-  /**
-   * Ensure React and ReactDOM are available globally
-   * Remote components may expect these to be on window object.
-   */
-  // private prepareGlobalDependencies(): void {
-  //   if (typeof window === 'undefined') return;
-  //   if (!(window as any).React) {
-  //     (window as any).React = require('react');
-  //   }
-  //   if (!(window as any).ReactDOM) {
-  //     (window as any).ReactDOM = require('react-dom');
-  //   }
-  // }
-  /**
-   * Ensure import map is injected before loading any modules
-   * Import maps MUST be added before any module scripts
-   */
-  ensureImportMap() {
-    if (typeof window > "u" || this.importMapInjected) return;
-    if (document.querySelector(
-      'script[type="importmap"], script[type="importmap-shim"]'
-    )) {
-      this.importMapInjected = !0;
-      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 = !0;
-  }
-  /**
-   * 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(e) {
-    const { bundleUrl: t, componentName: a } = e;
-    if (this.loadedModules.has(t)) {
-      console.log(
-        `%c📦 LOADER: Returning module from INTERNAL cache for ${t}`,
-        "color: green; font-weight: bold;"
-      );
-      const o = this.loadedModules.get(t), s = (o == null ? void 0 : o[a]) || (o == null ? void 0 : o.default);
-      if (s) return s;
-    }
-    this.ensureImportMap();
-    try {
-      const o = await this.loadModuleViaScript(t), s = o[a] || o.default;
-      if (!s)
-        throw new Error(`Component ${a} not found in module`);
-      return this.loadedModules.set(t, o), s;
-    } catch (o) {
-      throw console.error("🔍 LOADER: Failed to load component:", o), o;
-    }
-  }
-  /**
-   * Load ES module from external URL using dynamic script injection
-   * This bypasses Webpack's module resolution and works with import maps
-   */
-  loadModuleViaScript(e) {
-    return new Promise((t, a) => {
-      const o = `__moduleCallback_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, s = 50, i = 200;
-      let c = 0;
-      const m = `
-        import * as loadedModule from '${e}';
-        window.${o} = loadedModule;
-      `, r = document.createElement("script");
-      r.type = "module-shim", r.textContent = m;
-      const d = setInterval(() => {
-        if (c++, window[o]) {
-          clearInterval(d);
-          const p = window[o];
-          delete window[o], r.parentNode && document.head.removeChild(r), t(p);
-        } else c >= i && (clearInterval(d), delete window[o], r.parentNode && document.head.removeChild(r), a(new Error(`Timeout loading module from ${e}`)));
-      }, s);
-      r.onerror = (p) => {
-        clearInterval(d), delete window[o], r.parentNode && document.head.removeChild(r), a(new Error(`Failed to load module from ${e}`));
-      }, document.head.appendChild(r);
-    });
-  }
-  /**
-   * Preload a module without extracting components
-   * Useful for warming up cache
-   *
-   * @param bundleUrl - URL of the module to preload
-   */
-  async preloadModule(e) {
-    if (!this.loadedModules.has(e)) {
-      this.ensureImportMap();
-      try {
-        const t = await this.loadModuleViaScript(e);
-        this.loadedModules.set(e, t);
-      } catch (t) {
-        console.error(`Failed to preload module ${e}:`, t);
-      }
-    }
-  }
-  /**
-   * 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(e) {
-    return this.loadedModules.has(e);
-  }
-  /**
-   * Clear all loaded modules from cache
-   * Useful for development/testing
-   */
-  clearCache() {
-    this.loadedModules.clear();
-  }
-}
-const j = new R();
-function I() {
-  const n = `data:text/javascript;charset=utf-8,
-  const React = window.React;
-  export default React;
-  export const {
-    Component, PureComponent, createContext, useContext, useState, useEffect,
-    useCallback, useMemo, useRef, forwardRef, createElement, Fragment, memo, lazy, Suspense,
-    useLayoutEffect, useId, useReducer, useImperativeHandle
-  } = React;`, e = `data:text/javascript;charset=utf-8,
-  const React = window.React;
-  export const jsx = React.createElement;
-  export const jsxs = React.createElement;
-  export const Fragment = React.Fragment;`;
-  return JSON.stringify({
-    imports: {
-      react: n,
-      "react/jsx-runtime": e,
-      "react/jsx-dev-runtime": e,
-      "react/jsx-runtime.js": e,
-      "react/jsx-dev-runtime.js": e,
-      "react-dom": "https://esm.sh/react-dom@18.3.1",
-      "react-dom/client": "https://esm.sh/react-dom@18.3.1/client"
-    }
-  });
-}
-function C(n) {
-  const {
-    manifest: e,
-    componentName: t,
-    autoLoad: a = !0
-  } = n, [o, s] = x({
-    component: null,
-    manifest: null,
-    loading: !1,
-    error: null,
-    loaded: !1
-  });
-  w(() => {
-    var r;
-    typeof window < "u" && console.log("🧩 Remote sees React:", {
-      react: window.React,
-      useState: (r = window.React) == null ? void 0 : r.useState
-    });
-  }, []);
-  const i = f(async () => {
-    try {
-      s((p) => ({
-        ...p,
-        loading: !0,
-        error: null,
-        manifest: e
-      }));
-      const r = {
-        bundleUrl: e.bundleUrl,
-        componentName: t
-      }, d = await j.loadComponent(r);
-      s((p) => ({
-        ...p,
-        component: d,
-        loading: !1,
-        loaded: !0
-      }));
-    } catch (r) {
-      console.error("Error loading remote component:", r), s((d) => ({
-        ...d,
-        error: r.message,
-        loading: !1,
-        loaded: !1
-      }));
-    }
-  }, [e, t]), c = f(async () => {
-    await i();
-  }, [i]), m = f(() => {
-    s((r) => ({ ...r, error: null }));
-  }, []);
-  return w(() => {
-    a && i().then(() => {
-      s((r) => ({ ...r, loaded: !0 }));
-    });
-  }, [a, i]), {
-    ...o,
-    loadComponent: i,
-    reload: c,
-    clearError: m
-  };
-}
-const k = ({
-  manifest: n,
-  componentName: e,
-  componentProps: t,
-  autoLoad: a = !0,
-  placeholder: o = null,
-  children: s,
-  errorFallback: i
-}) => {
-  const {
-    component: c,
-    error: m,
-    loaded: r
-  } = C({
-    manifest: n,
-    componentName: e,
-    autoLoad: a
-  });
-  return m ? i ? i(m) : null : !r || !c ? /* @__PURE__ */ l(h, { children: o }) : /* @__PURE__ */ l(c, { ...t, children: s });
-}, b = ({ manifest: n }) => /* @__PURE__ */ g(h, { children: [
-  n.styleUrl && /* @__PURE__ */ l("link", { rel: "stylesheet", href: n.styleUrl }),
-  /* @__PURE__ */ l("link", { rel: "modulepreload", href: n.bundleUrl })
-] }), L = () => /* @__PURE__ */ g(h, { children: [
-  /* @__PURE__ */ l(
-    "script",
-    {
-      defer: !0,
-      src: "https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js",
-      crossOrigin: "anonymous"
-    }
-  ),
-  /* @__PURE__ */ l(
-    "link",
-    {
-      rel: "preconnect",
-      href: "https://assets-qa.mintmobile.com",
-      crossOrigin: "anonymous"
-    }
-  ),
-  /* @__PURE__ */ l("link", { rel: "dns-prefetch", href: "https://assets-qa.mintmobile.com" }),
-  /* @__PURE__ */ l("link", { rel: "preconnect", href: "https://esm.sh", crossOrigin: "anonymous" }),
-  /* @__PURE__ */ l("link", { rel: "dns-prefetch", href: "https://esm.sh" }),
-  /* @__PURE__ */ l(
-    "script",
-    {
-      type: "importmap-shim",
-      dangerouslySetInnerHTML: { __html: I() }
-    }
-  )
-] });
+import { fetchManifest } from "./services/fetchManifest.js";
+import { ModuleLoader, moduleLoader } from "./services/moduleLoader.js";
+import { generateImportMapJson } from "./services/generateImportMap.js";
+import { useRemoteComponent } from "./hooks/useRemoteComponent.js";
+import { RemoteRenderer } from "./components/RemoteRenderer.js";
+import { RemoteLinks } from "./components/RemoteLinks.js";
+import { ImportMapScripts } from "./components/ImportMapScripts.js";
 export {
-  L as ImportMapScripts,
-  R as ModuleLoader,
-  b as RemoteLinks,
-  k as RemoteRenderer,
-  $ as fetchManifest,
-  I as generateImportMapJson,
-  j as moduleLoader,
-  C as useRemoteComponent
+  ImportMapScripts,
+  ModuleLoader,
+  RemoteLinks,
+  RemoteRenderer,
+  fetchManifest,
+  generateImportMapJson,
+  moduleLoader,
+  useRemoteComponent
 };

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/generateImportMap.js

@@ -0,0 +1,14 @@
+function generateImportMapJson() {
+  const importMap = {
+    imports: {
+      react: "react",
+      "react-dom": "react-dom",
+      "react/jsx-runtime": "react/jsx-runtime",
+      "react/jsx-dev-runtime": "react/jsx-dev-runtime"
+    }
+  };
+  return JSON.stringify(importMap);
+}
+export {
+  generateImportMapJson
+};

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.2",
   "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,6 +54,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",