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

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import { default as default_2 } from 'react';
+
+export declare interface ComponentManifest {
+    bundleUrl: string;
+    styleUrl?: string;
+}
+
+export declare function fetchManifest(manifestUrl: string): Promise<RemoteManifest>;
+
+/**
+ * Generates an import map JSON string for ES module dependency resolution
+ * This allows remote modules to use bare specifiers like 'react' instead of full CDN URLs
+ */
+export declare function generateImportMapJson(): string;
+
+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.
+     */
+    /**
+     * Ensure import map is injected before loading any modules
+     * Import maps MUST be added before any module scripts
+     */
+    private ensureImportMap;
+    /**
+     * 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)
+     */
+    loadComponent(options: ModuleLoadOptions): Promise<any>;
+    /**
+     * Load ES module from external URL using dynamic script injection
+     * This bypasses Webpack's module resolution and works with import maps
+     */
+    private loadModuleViaScript;
+    /**
+     * Preload a module without extracting components
+     * Useful for warming up cache
+     *
+     * @param bundleUrl - URL of the module to preload
+     */
+    preloadModule(bundleUrl: string): Promise<void>;
+    /**
+     * 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: string): boolean;
+    /**
+     * Clear all loaded modules from cache
+     * Useful for development/testing
+     */
+    clearCache(): void;
+}
+
+export declare const moduleLoader: ModuleLoader;
+
+export declare interface ModuleLoadOptions {
+    bundleUrl: string;
+    componentName: string;
+}
+
+export declare interface RemoteComponentState {
+    component: any;
+    manifest: any;
+    loading: boolean;
+    error: string | null;
+    loaded: boolean;
+}
+
+export declare const RemoteLinks: default_2.FC<RemoteLinksProps>;
+
+declare interface RemoteLinksProps {
+    manifest: ComponentManifest;
+}
+
+export declare interface RemoteManifest {
+    components: Record<string, ComponentManifest>;
+    version: string;
+    generatedAt: string;
+}
+
+export declare const RemoteRenderer: default_2.FC<RemoteRendererProps>;
+
+declare interface RemoteRendererProps {
+    manifest: ComponentManifest;
+    componentName: string;
+    componentProps?: any;
+    autoLoad?: boolean;
+    placeholder?: default_2.ReactNode;
+    children?: default_2.ReactNode;
+    errorFallback?: (error: string) => default_2.ReactNode;
+}
+
+export declare function useRemoteComponent(options: UseRemoteComponentOptions): UseRemoteComponentReturn;
+
+export declare interface UseRemoteComponentOptions {
+    manifest: any;
+    componentName: string;
+    autoLoad?: boolean;
+}
+
+export declare interface UseRemoteComponentReturn extends RemoteComponentState {
+    loadComponent: () => Promise<void>;
+    reload: () => Promise<void>;
+    clearError: () => void;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,299 @@
+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() }
+    }
+  )
+] });
+export {
+  L as ImportMapScripts,
+  R as ModuleLoader,
+  b as RemoteLinks,
+  k as RemoteRenderer,
+  $ as fetchManifest,
+  I as generateImportMapJson,
+  j as moduleLoader,
+  C as useRemoteComponent
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@kaena1/mm-ui-shared-utils",
+  "version": "1.25.0-f-poc-EC-3301.1",
+  "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "build:debug": "vite build --debug",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint ./src",
+    "release": "semantic-release -e ./release.config.cjs"
+  },
+  "keywords": [
+    "mint",
+    "remote-components",
+    "microfrontends",
+    "shared-utils"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^11.0.0",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^12.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "conventional-changelog-conventionalcommits": "^7.0.2",
+    "eslint": "^9.39.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "semantic-release": "^23.0.0",
+    "semantic-release-slack-bot": "^4.0.2",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.14",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-externalize-deps": "^0.9.0"
+  }
+}