@kaena1/ecomm-remote-utils 1.0.0-f-EC-4239.1

package/dist/client.d.ts

@@ -0,0 +1,144 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare interface ComponentManifest {
+    bundleUrl: string;
+    styleUrl?: string;
+    /** Rollup chunk files that the entry imports. Pre-declared so consumers can add
+     *  modulepreload hints before the entry is evaluated, eliminating cascade fetches. */
+    chunkUrls?: string[];
+    skeletonSpec?: SkeletonSpec;
+}
+
+export declare class ModuleLoader {
+    private loadedModules;
+    private importMapInjected;
+    private mmUiComponents;
+    /**
+     * Register the mm-ui-components module to expose on `window` before any
+     * remote component is loaded. Call this once at app startup, before the
+     * first render. Must match the `mmUiComponents` prop passed to `ImportMapScripts`.
+     */
+    configure(mmUiComponents: Record<string, unknown>): void;
+    private prepareGlobalDependencies;
+    /**
+     * 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<RemoteComponentType>;
+    /**
+     * 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;
+
+declare interface ModuleLoadOptions {
+    bundleUrl: string;
+    componentName: string;
+}
+
+/**
+ * Configures the module loader with the host app's mm-ui-components instance
+ * so remote components share the same ThemeProvider / ConfigProvider contexts.
+ *
+ * Place this once near the root of the app (e.g. in _app.tsx), at the same
+ * level as ThemeProvider and ConfigProvider. Also pass the same `mmUiComponents`
+ * object to `<ImportMapScripts>` in the document head.
+ */
+export declare const RemoteComponentsProvider: ({ mmUiComponents, children, }: RemoteComponentsProviderProps) => JSX_2.Element;
+
+declare interface RemoteComponentsProviderProps {
+    /**
+     * Pass the mm-ui-components module (or a subset of its exports) here.
+     * The provider exposes it on `window.mmUiComponents` so remote components
+     * can consume it via the import map, sharing the same React context instances
+     * as the host app.
+     *
+     * @example
+     * import { ThemeProvider, ConfigProvider } from '@kaena1/mm-ui-components';
+     * <RemoteComponentsProvider mmUiComponents={{ ThemeProvider, ConfigProvider }}>
+     *
+     * @example full namespace
+     * import * as mmUiComponents from '@kaena1/mm-ui-components';
+     * <RemoteComponentsProvider mmUiComponents={mmUiComponents}>
+     */
+    mmUiComponents: Record<string, unknown>;
+    children: ReactNode;
+}
+
+declare interface RemoteComponentState {
+    component: RemoteComponentType | null;
+    manifest: ComponentManifest | null;
+    loading: boolean;
+    error: string | null;
+    loaded: boolean;
+}
+
+declare type RemoteComponentType = React.ComponentType<any>;
+
+export declare const RemoteRenderer: default_2.FC<RemoteRendererProps>;
+
+declare interface RemoteRendererProps {
+    manifest: ComponentManifest;
+    componentName: string;
+    componentProps?: any;
+    autoLoad?: boolean;
+    children?: default_2.ReactNode;
+    errorFallback?: (error: string) => default_2.ReactNode;
+}
+
+declare interface SkeletonSpec {
+    shimmerStyle: string;
+    componentStyle: string;
+    containerClass: string;
+    minHeight: string;
+    barWidth: string;
+    barHeight: number;
+}
+
+export declare function useRemoteComponent(options: UseRemoteComponentOptions): UseRemoteComponentReturn;
+
+declare interface UseRemoteComponentOptions {
+    manifest: ComponentManifest;
+    componentName: string;
+    autoLoad?: boolean;
+}
+
+declare interface UseRemoteComponentReturn extends RemoteComponentState {
+    loadComponent: () => Promise<void>;
+    reload: () => Promise<void>;
+    clearError: () => void;
+}
+
+export { }

package/dist/client.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRemoteComponent as r } from "./hooks/useRemoteComponent.js";
+import { RemoteRenderer as t } from "./components/RemoteRenderer.js";
+import { RemoteComponentsProvider as n } from "./components/RemoteComponentsProvider.js";
+import { ModuleLoader as f, moduleLoader as u } from "./services/moduleLoader.js";
+export {
+  f as ModuleLoader,
+  n as RemoteComponentsProvider,
+  t as RemoteRenderer,
+  u as moduleLoader,
+  r as useRemoteComponent
+};

package/dist/components/ImportMapScripts.js

@@ -0,0 +1,51 @@
+import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
+import n from "../node_modules/es-module-shims/dist/es-module-shims.js";
+import { generateImportMapJson as o } from "../services/ImportMapService.js";
+const l = ({
+  mmUiComponentsExports: s
+} = {}) => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ e(
+    "script",
+    {
+      type: "esms-options",
+      dangerouslySetInnerHTML: { __html: JSON.stringify({ shimMode: !0 }) }
+    }
+  ),
+  /* @__PURE__ */ e(
+    "script",
+    {
+      suppressHydrationWarning: !0,
+      dangerouslySetInnerHTML: { __html: n }
+    }
+  ),
+  /* @__PURE__ */ e(
+    "link",
+    {
+      rel: "preconnect",
+      href: "https://assets-qa.mintmobile.com",
+      crossOrigin: "anonymous"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "link",
+    {
+      rel: "preconnect",
+      href: "https://assets.mintmobile.com",
+      crossOrigin: "anonymous"
+    }
+  ),
+  /* @__PURE__ */ e("link", { rel: "dns-prefetch", href: "https://assets-qa.mintmobile.com" }),
+  /* @__PURE__ */ e("link", { rel: "dns-prefetch", href: "https://assets.mintmobile.com" }),
+  /* @__PURE__ */ e(
+    "script",
+    {
+      type: "importmap-shim",
+      dangerouslySetInnerHTML: {
+        __html: o(void 0, s)
+      }
+    }
+  )
+] });
+export {
+  l as ImportMapScripts
+};

package/dist/components/RemoteComponentsProvider.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as t, Fragment as f } from "react/jsx-runtime";
+import { useEffect as u } from "react";
+import { moduleLoader as e } from "../services/moduleLoader.js";
+const n = ({
+  mmUiComponents: r,
+  children: o
+}) => (e.configure(r), u(() => {
+  e.configure(r);
+}, [r]), /* @__PURE__ */ t(f, { children: o }));
+export {
+  n as RemoteComponentsProvider
+};

package/dist/components/RemoteLinks.js

@@ -0,0 +1,24 @@
+import { jsxs as s, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { Fragment as m } from "react";
+const h = ({ manifest: r }) => {
+  var o;
+  return /* @__PURE__ */ s(n, { children: [
+    r.styleUrl && /* @__PURE__ */ e("link", { rel: "stylesheet", href: r.styleUrl }),
+    /* @__PURE__ */ e("link", { rel: "modulepreload-shim", href: r.bundleUrl }),
+    (o = r.chunkUrls) == null ? void 0 : o.map((l) => /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ e(
+        "link",
+        {
+          rel: "preload",
+          as: "fetch",
+          crossOrigin: "anonymous",
+          href: l
+        }
+      ),
+      /* @__PURE__ */ e("link", { rel: "modulepreload-shim", href: l })
+    ] }, l))
+  ] });
+};
+export {
+  h as RemoteLinks
+};

package/dist/components/RemoteRenderer.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as t, Fragment as l, jsxs as c } from "react/jsx-runtime";
+import { useRemoteComponent as _ } from "../hooks/useRemoteComponent.js";
+import { useState as k, useEffect as C, useRef as g, useLayoutEffect as v } from "react";
+import { createPortal as N } from "react-dom";
+function R({ node: e }) {
+  const n = g(null);
+  return v(() => {
+    const o = n.current;
+    if (o)
+      return o.appendChild(e), () => {
+        e.parentNode === o && e.remove();
+      };
+  }, [e]), /* @__PURE__ */ t("div", { style: { display: "contents" }, ref: n });
+}
+function x(e) {
+  const n = e.containerClass.replace(/[^a-zA-Z0-9-_]/g, "") || "__mm-component-skeleton";
+  return /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ t("style", { id: "__mm-skeleton", children: e.shimmerStyle }),
+    /* @__PURE__ */ t("style", { id: `__mm-${n}-skeleton`, children: e.componentStyle }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: e.containerClass,
+        style: { minHeight: e.minHeight },
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: "__mm-skel",
+            style: { width: e.barWidth, height: e.barHeight }
+          }
+        )
+      }
+    )
+  ] });
+}
+const w = ({
+  manifest: e,
+  componentName: n,
+  componentProps: o,
+  autoLoad: p = !0,
+  children: i,
+  errorFallback: m
+}) => {
+  const {
+    component: r,
+    error: d,
+    loaded: u
+  } = _({
+    manifest: e,
+    componentName: n,
+    autoLoad: p
+  }), [s, y] = k(null);
+  if (C(() => {
+    const h = document.createElement("div");
+    h.style.display = "contents", y(h);
+  }, []), d) return m ? m(d) : null;
+  const a = e.skeletonSpec ? x(e.skeletonSpec) : null;
+  if (!s)
+    return !u || !r ? /* @__PURE__ */ t(l, { children: a ?? i ?? null }) : /* @__PURE__ */ t(r, { ...o, children: i });
+  const f = /* @__PURE__ */ t(R, { node: s }), S = N(i, s);
+  return !u || !r ? /* @__PURE__ */ c(l, { children: [
+    a,
+    f
+  ] }) : /* @__PURE__ */ c(l, { children: [
+    S,
+    /* @__PURE__ */ t(r, { ...o, children: f })
+  ] });
+};
+export {
+  w as RemoteRenderer
+};

package/dist/hooks/useRemoteComponent.js

@@ -0,0 +1,59 @@
+"use client";
+import { useState as f, useCallback as l, useEffect as p } from "react";
+import { moduleLoader as g } from "../services/moduleLoader.js";
+function b(m) {
+  const {
+    manifest: t,
+    componentName: s,
+    autoLoad: c = !0
+  } = m, [d, r] = f({
+    component: null,
+    manifest: null,
+    loading: !1,
+    error: null,
+    loaded: !1
+  }), e = l(async () => {
+    try {
+      r((n) => ({
+        ...n,
+        loading: !0,
+        error: null,
+        manifest: t
+      }));
+      const o = {
+        bundleUrl: t.bundleUrl,
+        componentName: s
+      }, a = await g.loadComponent(o);
+      r((n) => ({
+        ...n,
+        component: a,
+        loading: !1,
+        loaded: !0
+      }));
+    } catch (o) {
+      console.error("Error loading remote component:", o);
+      const a = o instanceof Error ? o.message : "Unknown error loading component";
+      r((n) => ({
+        ...n,
+        error: a,
+        loading: !1,
+        loaded: !1
+      }));
+    }
+  }, [t, s]), i = l(async () => {
+    await e();
+  }, [e]), u = l(() => {
+    r((o) => ({ ...o, error: null }));
+  }, []);
+  return p(() => {
+    c && e();
+  }, [c, e]), {
+    ...d,
+    loadComponent: e,
+    reload: i,
+    clearError: u
+  };
+}
+export {
+  b as useRemoteComponent
+};

package/dist/lib/api/server/getRemoteManifest/getRemoteManifest.js

@@ -0,0 +1,25 @@
+"use server";
+import { fetchManifest as t } from "../../../../services/fetchManifest.js";
+import "../../../../services/moduleLoader.js";
+import { isEnvironment as i } from "../../../../types/environment.js";
+import { mapManifestUrl as o } from "../../../mappers/mapManifestUrl.js";
+async function f(r, n) {
+  try {
+    let e = "production";
+    i(r) ? e = r : console.warn(
+      `Invalid environment "${r}" specified in environment variables. Defaulting to "production".`
+    );
+    try {
+      return await t(o(e, n));
+    } catch {
+      return await t(o("production", void 0));
+    }
+  } catch (e) {
+    return console.warn(
+      `Failed to fetch remote manifest from all sources. Returning empty manifest. Error: ${e instanceof Error ? e.message : e}`
+    ), { components: {}, version: "", generatedAt: "" };
+  }
+}
+export {
+  f as getRemoteManifest
+};

package/dist/lib/mappers/mapManifestUrl.js

@@ -0,0 +1,27 @@
+const a = "manifest.json", n = "https://assets.mintmobile.com", c = "https://assets-qa.mintmobile.com", m = (e, t) => {
+  const s = r(e), o = p(e, t);
+  return `${s}/remote-components/manifest-poc/${o}/${a}?_ts=${Date.now()}`;
+}, r = (e) => {
+  switch (e) {
+    case "production":
+      return n;
+    case "develop":
+    case "development":
+    case "staging":
+    case "qa1":
+      return c;
+  }
+}, p = (e, t) => {
+  switch (e) {
+    case "production":
+      return t || "f-poc-live-update";
+    case "develop":
+    case "development":
+    case "staging":
+    case "qa1":
+      return t || "f-poc-live-update";
+  }
+};
+export {
+  m as mapManifestUrl
+};

package/dist/lib/utils/getModulePreloadKey.js

@@ -0,0 +1,9 @@
+const r = (t) => {
+  let e = 5381;
+  for (let o = 0; o < t.length; o++)
+    e = ((e << 5) + e ^ t.charCodeAt(o)) >>> 0;
+  return e.toString(36);
+}, h = (t) => `__rm_${r(t)}`;
+export {
+  h as getModulePreloadKey
+};

package/dist/lib/utils/getRemoteComponentsData.js

@@ -0,0 +1,17 @@
+import { cookies as n } from "next/headers.js";
+import { getRemoteManifest as a } from "../api/server/getRemoteManifest/getRemoteManifest.js";
+const s = async ({
+  NEXT_PUBLIC_ENVIRONMENT: t
+}) => {
+  var o;
+  const e = (o = (await n()).get("cont-comp")) == null ? void 0 : o.value;
+  return {
+    remoteManifest: await a(
+      t,
+      e
+    )
+  };
+};
+export {
+  s as getRemoteComponentsData
+};

package/dist/lib/utils/withRemoteComponentsGSSP.js

@@ -0,0 +1,20 @@
+import { getRemoteManifest as p } from "../api/server/getRemoteManifest/getRemoteManifest.js";
+function u(n, t) {
+  return async (e) => {
+    const { NEXT_PUBLIC_ENVIRONMENT: r } = n, { req: s } = e, c = s.cookies["cont-comp"], i = {
+      remoteManifest: await p(
+        r,
+        c
+      )
+    }, o = t ? await t(e) : { props: {} };
+    return "props" in o ? {
+      props: {
+        ...i,
+        ...o.props
+      }
+    } : o;
+  };
+}
+export {
+  u as withRemoteComponentsGSSP
+};