@kaena1/ecomm-contained-utils 1.0.0

package/dist/client.d.ts

@@ -0,0 +1,94 @@
+import { default as default_2 } from 'react';
+
+declare interface ComponentManifest {
+    bundleUrl: string;
+    styleUrl?: string;
+}
+
+export declare class ModuleLoader {
+    private loadedModules;
+    private importMapInjected;
+    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;
+}
+
+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;
+    placeholder?: default_2.ReactNode;
+    children?: default_2.ReactNode;
+    errorFallback?: (error: string) => default_2.ReactNode;
+}
+
+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,10 @@
+"use client";
+import { useRemoteComponent as r } from "./hooks/useRemoteComponent.js";
+import { RemoteRenderer as t } from "./components/RemoteRenderer.js";
+import { ModuleLoader as n, moduleLoader as p } from "./services/moduleLoader.js";
+export {
+  n as ModuleLoader,
+  t as RemoteRenderer,
+  p as moduleLoader,
+  r as useRemoteComponent
+};

package/dist/components/ImportMapScripts.js

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

package/dist/components/RemoteLinks.js

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

package/dist/components/RemoteRenderer.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as o, Fragment as c } from "react/jsx-runtime";
+import { useRemoteComponent as d } from "../hooks/useRemoteComponent.js";
+const x = ({
+  manifest: t,
+  componentName: m,
+  componentProps: u,
+  autoLoad: i = !0,
+  placeholder: p = null,
+  children: l,
+  errorFallback: e
+}) => {
+  const {
+    component: r,
+    error: n,
+    loaded: s
+  } = d({
+    manifest: t,
+    componentName: m,
+    autoLoad: i
+  });
+  return n ? e ? e(n) : null : !s || !r ? /* @__PURE__ */ o(c, { children: p }) : /* @__PURE__ */ o(r, { ...u, children: l });
+};
+export {
+  x as RemoteRenderer
+};

package/dist/hooks/useRemoteComponent.js

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

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+
+import { default as default_2 } from 'react';
+
+export declare interface ComponentManifest {
+    bundleUrl: string;
+    styleUrl?: string;
+}
+
+export declare function fetchManifest(manifestUrl: string): Promise<RemoteManifest>;
+
+/**
+ * Generate complete import map object for remote components
+ *
+ * @param config - Optional configuration to override default settings
+ * @returns Import map object ready for browser consumption
+ */
+export declare const generateImportMap: (config?: ImportMapConfig) => object;
+
+export declare const generateImportMapJson: (config?: ImportMapConfig) => string;
+
+export declare interface ImportMapConfig {
+    reactVersion?: string;
+    reactDomVersion?: string;
+}
+
+export declare const ImportMapScripts: () => JSX.Element;
+
+export declare class ModuleLoader {
+    private loadedModules;
+    private importMapInjected;
+    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;
+
+export declare interface ModuleLoadOptions {
+    bundleUrl: string;
+    componentName: string;
+}
+
+export declare interface RemoteComponentState {
+    component: RemoteComponentType | null;
+    manifest: ComponentManifest | null;
+    loading: boolean;
+    error: string | null;
+    loaded: boolean;
+}
+
+export declare type RemoteComponentType = React.ComponentType<any>;
+
+export declare const RemoteLinks: ({ manifest }: RemoteLinksProps) => JSX.Element;
+
+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: ComponentManifest;
+    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,18 @@
+import { fetchManifest as r } from "./services/fetchManifest.js";
+import { ModuleLoader as m, moduleLoader as p } from "./services/moduleLoader.js";
+import { generateImportMap as a, generateImportMapJson as n } from "./services/ImportMapService.js";
+import { useRemoteComponent as d } from "./hooks/useRemoteComponent.js";
+import { RemoteRenderer as M } from "./components/RemoteRenderer.js";
+import { RemoteLinks as i } from "./components/RemoteLinks.js";
+import { ImportMapScripts as I } from "./components/ImportMapScripts.js";
+export {
+  I as ImportMapScripts,
+  m as ModuleLoader,
+  i as RemoteLinks,
+  M as RemoteRenderer,
+  r as fetchManifest,
+  a as generateImportMap,
+  n as generateImportMapJson,
+  p as moduleLoader,
+  d as useRemoteComponent
+};

package/dist/package.json.js

@@ -0,0 +1,10 @@
+const e = {
+  react: "^18.3.1",
+  "react-dom": "^18.3.1"
+}, c = {
+  peerDependencies: e
+};
+export {
+  c as default,
+  e as peerDependencies
+};

package/dist/server.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+
+export declare interface ComponentManifest {
+    bundleUrl: string;
+    styleUrl?: string;
+}
+
+export declare function fetchManifest(manifestUrl: string): Promise<RemoteManifest>;
+
+/**
+ * Generate complete import map object for remote components
+ *
+ * @param config - Optional configuration to override default settings
+ * @returns Import map object ready for browser consumption
+ */
+export declare const generateImportMap: (config?: ImportMapConfig) => object;
+
+export declare const generateImportMapJson: (config?: ImportMapConfig) => string;
+
+export declare interface ImportMapConfig {
+    reactVersion?: string;
+    reactDomVersion?: string;
+}
+
+export declare const ImportMapScripts: () => JSX.Element;
+
+export declare interface ModuleLoadOptions {
+    bundleUrl: string;
+    componentName: string;
+}
+
+export declare interface RemoteComponentState {
+    component: RemoteComponentType | null;
+    manifest: ComponentManifest | null;
+    loading: boolean;
+    error: string | null;
+    loaded: boolean;
+}
+
+export declare type RemoteComponentType = React.ComponentType<any>;
+
+export declare const RemoteLinks: ({ manifest }: RemoteLinksProps) => JSX.Element;
+
+declare interface RemoteLinksProps {
+    manifest: ComponentManifest;
+}
+
+export declare interface RemoteManifest {
+    components: Record<string, ComponentManifest>;
+    version: string;
+    generatedAt: string;
+}
+
+export declare interface UseRemoteComponentOptions {
+    manifest: ComponentManifest;
+    componentName: string;
+    autoLoad?: boolean;
+}
+
+export declare interface UseRemoteComponentReturn extends RemoteComponentState {
+    loadComponent: () => Promise<void>;
+    reload: () => Promise<void>;
+    clearError: () => void;
+}
+
+export { }

package/dist/server.js

@@ -0,0 +1,11 @@
+import { fetchManifest as o } from "./services/fetchManifest.js";
+import { generateImportMap as p, generateImportMapJson as m } from "./services/ImportMapService.js";
+import { ImportMapScripts as f } from "./components/ImportMapScripts.js";
+import { RemoteLinks as s } from "./components/RemoteLinks.js";
+export {
+  f as ImportMapScripts,
+  s as RemoteLinks,
+  o as fetchManifest,
+  p as generateImportMap,
+  m as generateImportMapJson
+};

package/dist/services/ImportMapService.js

@@ -0,0 +1,40 @@
+import n from "../package.json.js";
+const s = (e) => e.replace(/^[\^~]/, ""), a = {
+  reactVersion: s(n.peerDependencies.react),
+  reactDomVersion: s(n.peerDependencies["react-dom"])
+}, c = () => `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
+} = React;`, o = () => `data:text/javascript;charset=utf-8,
+const React = window.React;
+export const Fragment = React.Fragment;
+export function jsx(type, props, key) {
+  const { children, ...restProps } = props || {};
+  return React.createElement(type, key !== undefined ? { ...restProps, key } : restProps, children);
+}
+export function jsxs(type, props, key) {
+  const { children, ...restProps } = props || {};
+  return React.createElement(type, key !== undefined ? { ...restProps, key } : restProps, ...(Array.isArray(children) ? children : [children]));
+}`, p = (e = {}) => {
+  const r = { ...a, ...e }, t = o();
+  return {
+    imports: {
+      react: c(),
+      "react/jsx-runtime": t,
+      "react/jsx-dev-runtime": t,
+      // Some bundlers emit ".js" suffixed bare specifiers; map those too
+      "react/jsx-runtime.js": t,
+      "react/jsx-dev-runtime.js": t,
+      "react-dom": `https://esm.sh/react-dom@${r.reactDomVersion}`,
+      "react-dom/client": `https://esm.sh/react-dom@${r.reactDomVersion}/client`
+    }
+  };
+}, m = (e) => JSON.stringify(p(e));
+export {
+  p as generateImportMap,
+  m as generateImportMapJson
+};

package/dist/services/fetchManifest.js

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

package/dist/services/moduleLoader.js

@@ -0,0 +1,120 @@
+var u = Object.defineProperty;
+var h = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var s = (a, e, t) => h(a, typeof e != "symbol" ? e + "" : e, t);
+import w from "react";
+import M from "react-dom";
+class f {
+  constructor() {
+    s(this, "loadedModules", /* @__PURE__ */ new Map());
+    s(this, "importMapInjected", !1);
+  }
+  prepareGlobalDependencies() {
+    window.React || (window.React = w), window.ReactDOM || (window.ReactDOM = M);
+  }
+  /**
+   * 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: d } = e;
+    if (this.loadedModules.has(t)) {
+      const o = this.loadedModules.get(t), n = (o == null ? void 0 : o[d]) || (o == null ? void 0 : o.default);
+      if (n) return n;
+    }
+    this.prepareGlobalDependencies(), this.ensureImportMap();
+    try {
+      const o = await this.loadModuleViaScript(t), n = o[d] || o.default;
+      if (!n)
+        throw new Error(`Component ${d} not found in module`);
+      return this.loadedModules.set(t, o), n;
+    } catch (o) {
+      throw console.error("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, d) => {
+      const o = `__moduleCallback_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, n = 50, c = 200;
+      let l = 0;
+      const m = `
+        import * as loadedModule from '${e}';
+        window.${o} = loadedModule;
+      `, r = document.createElement("script");
+      r.type = "module-shim", r.textContent = m;
+      const i = setInterval(() => {
+        if (l++, window[o]) {
+          clearInterval(i);
+          const p = window[o];
+          delete window[o], r.parentNode && document.head.removeChild(r), t(p);
+        } else l >= c && (clearInterval(i), delete window[o], r.parentNode && document.head.removeChild(r), d(new Error(`Timeout loading module from ${e}`)));
+      }, n);
+      r.onerror = (p) => {
+        clearInterval(i), delete window[o], r.parentNode && document.head.removeChild(r), d(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 g = new f();
+export {
+  f as ModuleLoader,
+  g as moduleLoader
+};