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

package/dist/server.d.ts

@@ -0,0 +1,71 @@
+import { GetServerSideProps } from 'next';
+
+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 const getRemoteComponentsData: ({ NEXT_PUBLIC_ENVIRONMENT, }: {
+    NEXT_PUBLIC_ENVIRONMENT: string;
+}) => Promise<{
+    remoteManifest: RemoteManifest;
+}>;
+
+export declare const ImportMapScripts: ({ mmUiComponentsExports, }?: ImportMapScriptsProps) => JSX.Element;
+
+declare interface ImportMapScriptsProps {
+    /**
+     * Names of the exports to bridge from window.mmUiComponents into the
+     * '@kaena1/mm-ui-components' import map specifier.
+     * Must match what remote components import from that package.
+     *
+     * These are plain strings — safe to pass from a Server Component.
+     * Pass the actual module object to `<RemoteComponentsProvider>` instead.
+     *
+     * @example
+     * <ImportMapScripts mmUiComponentsExports={['ThemeProvider', 'ConfigProvider', 'Text', 'Link']} />
+     */
+    mmUiComponentsExports?: string[];
+}
+
+declare type RemoteComponentsEnvVars = {
+    NEXT_PUBLIC_SITE_URL: string;
+    NEXT_PUBLIC_ENVIRONMENT: string;
+    ECOMM_API_URL: string;
+    ECOMM_API_STANDALONE_DEVICE_CREDS: string;
+};
+
+export declare const RemoteLinks: ({ manifest }: RemoteLinksProps) => JSX.Element;
+
+declare interface RemoteLinksProps {
+    manifest: ComponentManifest;
+}
+
+declare interface RemoteManifest {
+    components: Record<string, ComponentManifest>;
+    version: string;
+    generatedAt: string;
+}
+
+declare interface SkeletonSpec {
+    shimmerStyle: string;
+    componentStyle: string;
+    containerClass: string;
+    minHeight: string;
+    barWidth: string;
+    barHeight: number;
+}
+
+/**
+ * HOF that composes a getServerSideProps function for fetching remote components data (manifest and component props) with an optional getServerSideProps function from the page.
+ * @param envVars All environment variables needed
+ * @param pageGSSP An optional getServerSideProps function from the page that will be composed with the remote components data fetching. If not provided, only remote components data will be fetched and returned as props.
+ * @returns A new getServerSideProps function.
+ */
+export declare function withRemoteComponentsGSSP(envVars: RemoteComponentsEnvVars, pageGSSP?: GetServerSideProps): GetServerSideProps;
+
+export { }

package/dist/server.js

@@ -0,0 +1,10 @@
+import { ImportMapScripts as e } from "./components/ImportMapScripts.js";
+import { RemoteLinks as r } from "./components/RemoteLinks.js";
+import { withRemoteComponentsGSSP as n } from "./lib/utils/withRemoteComponentsGSSP.js";
+import { getRemoteComponentsData as s } from "./lib/utils/getRemoteComponentsData.js";
+export {
+  e as ImportMapScripts,
+  r as RemoteLinks,
+  s as getRemoteComponentsData,
+  n as withRemoteComponentsGSSP
+};

package/dist/services/ImportMapService.js

@@ -0,0 +1,49 @@
+const a = () => `data:text/javascript;charset=utf-8,
+const React = window.React;
+export default React;
+export const {
+  Children, Component, PureComponent, createContext, useContext, useState, useEffect,
+  useCallback, useMemo, useReducer, useRef, useImperativeHandle, forwardRef, createElement,
+  createRef, Fragment, memo, lazy, Suspense, useLayoutEffect, useInsertionEffect, useId,
+  isValidElement, cloneElement
+} = React;`, n = () => `data:text/javascript;charset=utf-8,
+const ReactDOM = window.ReactDOM;
+export default ReactDOM;
+export const { createPortal, flushSync, findDOMNode, unmountComponentAtNode } = ReactDOM;`, c = () => `data:text/javascript;charset=utf-8,
+const ReactDOM = window.ReactDOM;
+export const { createRoot, hydrateRoot } = ReactDOM;`, 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]));
+}`, s = "@kaena1/mm-ui-components", u = "mmUiComponents", i = (t) => `data:text/javascript;charset=utf-8,const m = window.${u};export default m;export const { ${t.join(", ")} } = m;`, d = (t = {}, e) => {
+  const r = o();
+  return {
+    imports: {
+      react: a(),
+      "react/jsx-runtime": r,
+      "react/jsx-dev-runtime": r,
+      // Some bundlers emit ".js" suffixed bare specifiers; map those too
+      "react/jsx-runtime.js": r,
+      "react/jsx-dev-runtime.js": r,
+      // Use window.ReactDOM (set by the host app) to avoid a CDN fetch on
+      // first load, which was causing intermittent timeout errors.
+      "react-dom": n(),
+      "react-dom/client": c(),
+      ...(e == null ? void 0 : e.length) && {
+        [s]: i(
+          e
+        )
+      }
+    }
+  };
+}, p = (t, e) => JSON.stringify(d(t, e));
+export {
+  d as generateImportMap,
+  p 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,139 @@
+var l = Object.defineProperty;
+var u = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var d = (r, e, t) => u(r, typeof e != "symbol" ? e + "" : e, t);
+import p from "react";
+import m from "react-dom";
+import { getModulePreloadKey as w } from "../lib/utils/getModulePreloadKey.js";
+typeof window < "u" && (window.React || (window.React = p), window.ReactDOM || (window.ReactDOM = m));
+class h {
+  constructor() {
+    d(this, "loadedModules", /* @__PURE__ */ new Map());
+    d(this, "importMapInjected", !1);
+    d(this, "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(e) {
+    this.mmUiComponents = e;
+  }
+  prepareGlobalDependencies() {
+    window.React || (window.React = p), window.ReactDOM || (window.ReactDOM = m), this.mmUiComponents && !window.mmUiComponents && (window.mmUiComponents = this.mmUiComponents);
+  }
+  /**
+   * 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: i } = e;
+    if (this.loadedModules.has(t)) {
+      const o = this.loadedModules.get(t), n = (o == null ? void 0 : o[i]) || (o == null ? void 0 : o.default);
+      if (n) return n;
+    }
+    this.prepareGlobalDependencies(), this.ensureImportMap();
+    try {
+      const o = await this.loadModuleViaScript(t), n = o[i] || o.default;
+      if (!n)
+        throw new Error(`Component ${i} 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, i) => {
+      const o = w(e);
+      if (window[o]) {
+        t(window[o]);
+        return;
+      }
+      const n = document.createElement("script"), a = () => {
+        try {
+          delete window[o];
+        } catch {
+        }
+        n.parentNode && document.head.removeChild(n);
+      };
+      Object.defineProperty(window, o, {
+        set(s) {
+          a(), t(s);
+        },
+        configurable: !0
+      });
+      const c = `
+        import * as loadedModule from '${e}';
+        window['${o}'] = loadedModule;
+      `;
+      n.type = "module-shim", n.textContent = c, n.onerror = (s) => {
+        a(), i(new Error(`Failed to load module from ${e}`));
+      }, document.head.appendChild(n);
+    });
+  }
+  /**
+   * 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 h();
+export {
+  h as ModuleLoader,
+  g as moduleLoader
+};

package/dist/types/environment.js

@@ -0,0 +1,7 @@
+const o = ["develop", "development", "staging", "qa1"], t = ["production"], N = [...o, ...t];
+function e(n) {
+  return !!n && N.includes(n);
+}
+export {
+  e as isEnvironment
+};

package/dist/types.d.ts

@@ -0,0 +1,68 @@
+export 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 type Environment = (typeof ENVIRONMENTS)[number];
+
+declare const ENVIRONMENTS: readonly ["develop", "development", "staging", "qa1", "production"];
+
+export declare interface ImportMapConfig {
+    reactVersion?: string;
+    reactDomVersion?: string;
+}
+
+export declare interface ModuleLoadOptions {
+    bundleUrl: string;
+    componentName: string;
+}
+
+export declare type RemoteComponentsEnvVars = {
+    NEXT_PUBLIC_SITE_URL: string;
+    NEXT_PUBLIC_ENVIRONMENT: string;
+    ECOMM_API_URL: string;
+    ECOMM_API_STANDALONE_DEVICE_CREDS: 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 interface RemoteManifest {
+    components: Record<string, ComponentManifest>;
+    version: string;
+    generatedAt: string;
+}
+
+declare interface SkeletonSpec {
+    shimmerStyle: string;
+    componentStyle: string;
+    containerClass: string;
+    minHeight: string;
+    barWidth: string;
+    barHeight: number;
+}
+
+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/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@kaena1/ecomm-remote-utils",
+  "version": "1.0.0-f-EC-4239.1",
+  "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
+  "type": "module",
+  "exports": {
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./dist/styles.css": "./dist/styles.css"
+  },
+  "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",
+    "ecomm-remote-utils"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "next": "^15.3.3 || ^16.1.6",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.0",
+    "@semantic-release/release-notes-generator": "^14.0.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "eslint": "^9.39.2",
+    "next": "^15.5.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "read-pkg-up": "^11.0.0",
+    "rollup-preserve-directives": "^1.1.3",
+    "semantic-release": "^24.2.9",
+    "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"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "es-module-shims": "^2.8.0",
+    "just-debounce-it": "^3.2.0",
+    "just-throttle": "^4.2.0"
+  }
+}