@myop/sdk 0.2.6 → 0.3.8

package/README.md

@@ -11,9 +11,9 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/v/@myop/sdk.svg?style=flat-square" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/dm/@myop/sdk.svg?style=flat-square" alt="npm downloads"></a>
-  <a href="https://myop.dev/discord"><img src="https://img.shields.io/badge/Discord-Join%20Us-7289da?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
+  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/v/@myop/sdk.svg?style=flat-square" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/dm/@myop/sdk.svg?style=flat-square" alt="npm downloads" /></a>
+  <a href="https://myop.dev/discord"><img src="https://img.shields.io/badge/Discord-Join%20Us-7289da?style=flat-square&logo=discord&logoColor=white" alt="Discord" /></a>
 </p>
 
 <p align="center">

package/dist/bundled-declarations.d.ts

@@ -576,6 +576,7 @@ declare module "@myop/sdk/host" {
     export * from "@myop/sdk/host/components/IMyopComponent";
     export * from "@myop/sdk/host/loaders/IMyopLoader";
     export * from "@myop/sdk/host/componentCore";
+    export type { CleanupHandler } from "@myop/sdk/common";
 }
 declare module "@myop/sdk/messages/BaseMessage" {
     import { MyopMessageKey } from "@myop/sdk/common/MyopMessages";
@@ -914,6 +915,42 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
     import { BaseMyopMessage, Ref } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
+    /**
+     * Result returned by observeAutoSize callback
+     */
+    export interface AutoSizeResult {
+        /** Current width (from content) */
+        width: number;
+        /** Current height (from content) */
+        height: number;
+        /** Whether width is being auto-sized */
+        autoSizingWidth: boolean;
+        /** Whether height is being auto-sized */
+        autoSizingHeight: boolean;
+    }
+    /**
+     * Options for observeAutoSize method
+     */
+    export interface AutoSizeOptions {
+        /** Callback called with size info whenever size changes */
+        onSizeChange?: (result: AutoSizeResult) => void;
+        /** Minimum width constraint */
+        minWidth?: number | string;
+        /** Maximum width constraint */
+        maxWidth?: number | string;
+        /** Minimum height constraint */
+        minHeight?: number | string;
+        /** Maximum height constraint */
+        maxHeight?: number | string;
+        /** Explicit width set by host - if defined, don't auto-size width */
+        explicitWidth?: string | number;
+        /** Explicit height set by host - if defined, don't auto-size height */
+        explicitHeight?: string | number;
+        /** Force auto-size even if container has dimensions */
+        forceAutoSize?: boolean;
+        /** Min height used by loader to detect collapse (default: 50) */
+        loaderMinHeight?: number;
+    }
     type RefTypes = {
         [key: string]: IMyopComponent | Ref;
     };
@@ -934,6 +971,13 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
         hide(): void;
         show(): void;
         inspect(): void;
+        /**
+         * Observes the iframe content size and automatically syncs it to the iframe element.
+         * Only available for iframe-based components. Uses direct contentDocument access.
+         * @param options - Configuration options including size change callback and min/max constraints
+         * @returns Cleanup function to stop observing
+         */
+        observeAutoSize?: (options?: AutoSizeOptions) => CleanupHandler;
         parent?: IMyopComponent;
         props: P;
         refs: R;
@@ -983,7 +1027,7 @@ declare module "@myop/sdk/host/loaders/IMyopLoader" {
     }
 }
 declare module "@myop/sdk/host/components/myopIframeComponent" {
-    import { BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
+    import { AutoSizeOptions, BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
     import { BaseMyopMessage } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig, ISkinConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
@@ -998,6 +1042,13 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         show(): void;
         setHeightBasedOnDocumentElement: () => void;
         observeSizeBasedOnDocumentElement: () => CleanupHandler;
+        /**
+         * Observes the iframe content size and automatically syncs it to the iframe element.
+         * Uses direct contentDocument access (same-origin only) for accurate measurements.
+         * @param options - Configuration options including size change callback and min/max constraints
+         * @returns Cleanup function to stop observing
+         */
+        observeAutoSize: (options?: AutoSizeOptions) => CleanupHandler;
         setSizeBasedOnDocumentElement: () => void;
         setHeightBasedOnScrollHeight: () => void;
         send: (message: BaseMyopMessage) => CleanupHandler;
@@ -1369,6 +1420,31 @@ declare module "@myop/sdk/webcomponent/WebComponentSDK" {
 declare module "@myop/sdk/webcomponent" {
     export * from "@myop/sdk/webcomponent/WebComponentSDK";
 }
+declare module "@myop/sdk/host/embeddedSDK" {
+    /**
+     * Embedded SDK Content Module
+     *
+     * This module provides the embedded SDK content for npm package users.
+     * The actual content is generated at build time by scripts/build-embedded-sdk.js
+     *
+     * For development, this file exports placeholders.
+     * After build, the dist/module/embeddedSDK.js will contain the actual SDK content.
+     *
+     * Usage in HTMLComponentLoader:
+     * - If HAS_EMBEDDED_SDK is true, inject SDK inline: <script>${EMBEDDED_SDK_CONTENT}</script>
+     * - If HAS_EMBEDDED_SDK is false, fall back to CDN: <script src="${url}"></script>
+     */
+    /**
+     * The embedded SDK content as a minified JavaScript string.
+     * This placeholder will be replaced with actual content in the build output.
+     */
+    export const EMBEDDED_SDK_CONTENT: string;
+    /**
+     * Flag indicating whether embedded SDK content is available.
+     * This is false in development, true in the built module.
+     */
+    export const HAS_EMBEDDED_SDK: boolean;
+}
 declare module "@myop/sdk/host/loaders/HTMLComponentLoader" {
     import { MyopWebComponent } from "@myop/sdk/host/components/myopWebcomponent";
     import { BaseMyopLoader } from "@myop/sdk/host/loaders/IMyopLoader";
@@ -1436,7 +1512,7 @@ declare module "@myop/sdk/helpers/configBuilder" {
     }
 }
 declare module "@myop/sdk/helpers/CloudRepository" {
-    import { IUserFlow, v2_IVariantConfig } from "@myop/sdk/common";
+    import { IComponentConfig, IUserFlow } from "@myop/sdk/common";
     /**
      * CloudRepository - Unified cloud data access layer for Myop components
      *
@@ -1449,26 +1525,35 @@ declare module "@myop/sdk/helpers/CloudRepository" {
         static Main: CloudRepository;
         private variants;
         private userFlows;
+        private _defaultEnv;
         constructor(_baseUrl?: string);
+        /**
+         * Set the default environment for this CloudRepository instance
+         */
+        setEnvironment(env: string): void;
+        /**
+         * Get the current default environment
+         */
+        getDefaultEnvironment(): string;
         /**
          * Check if a component is already cached/preloaded (v2)
          */
-        isPreloaded(componentId: string): boolean;
+        isPreloaded(componentId: string, env?: string, preview?: boolean): boolean;
         /**
-         * Fetch a v2 component variant
+         * Fetch a v2 component config
          */
-        fetchComponentV2(componentId: string, environmentIdentifier?: string): Promise<v2_IVariantConfig>;
+        fetchComponentV2(componentId: string, environmentIdentifier?: string, preview?: boolean): Promise<IComponentConfig>;
         /**
          * Fetch a v1 component from a flow
          */
-        fetchComponentV1(componentId: string, flowId?: string): Promise<import("common").IComponentConfig>;
+        fetchComponentV1(componentId: string, flowId?: string): Promise<IComponentConfig>;
         fetchAutoFlow(componentId: string): Promise<IUserFlow>;
         fetchFlow(flowId: string): Promise<IUserFlow>;
         /**
          * @deprecated Use fetchComponentV2 or fetchComponentV1 explicitly
          * Defaults to v1 behavior for backward compatibility with existing code
          */
-        fetchComponent(componentId: string, flowId?: string): Promise<import("common").IComponentConfig>;
+        fetchComponent(componentId: string, flowId?: string): Promise<IComponentConfig>;
     }
     /**
      * @deprecated Use CloudRepository instead

package/dist/cjs/{_IframeSDK.2793f0c2.js → _IframeSDK.3a01f95a.js}

@@ -1467,6 +1467,83 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       }));
       return cleanupHandler;
     });
+    /**
+     * Observes the iframe content size and automatically syncs it to the iframe element.
+     * Uses direct contentDocument access (same-origin only) for accurate measurements.
+     * @param options - Configuration options including size change callback and min/max constraints
+     * @returns Cleanup function to stop observing
+     */
+    __publicField(this, "observeAutoSize", (options) => {
+      var _a;
+      const iframe = this.IframeElement;
+      const doc = iframe.contentDocument;
+      if (!doc) {
+        console.warn("[MyopIframeComponent] Cannot observe auto size: contentDocument not accessible");
+        return () => {
+        };
+      }
+      const clamp = (value, min, max) => {
+        if (min !== void 0 && value < min) return min;
+        if (max !== void 0 && value > max) return max;
+        return value;
+      };
+      const parseSize = (value) => {
+        if (value === void 0) return void 0;
+        if (typeof value === "number") return value;
+        const parsed = parseFloat(value);
+        return isNaN(parsed) ? void 0 : parsed;
+      };
+      const minWidth = parseSize(options == null ? void 0 : options.minWidth);
+      const maxWidth = parseSize(options == null ? void 0 : options.maxWidth);
+      const minHeight = parseSize(options == null ? void 0 : options.minHeight);
+      const maxHeight = parseSize(options == null ? void 0 : options.maxHeight);
+      const loaderMinHeight = (_a = options == null ? void 0 : options.loaderMinHeight) != null ? _a : 50;
+      const hasExplicitWidth = (options == null ? void 0 : options.explicitWidth) !== void 0;
+      const hasExplicitHeight = (options == null ? void 0 : options.explicitHeight) !== void 0;
+      const containerRect = this.container.getBoundingClientRect();
+      const collapsedWidth = containerRect.width === 0;
+      const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
+      const shouldAutoWidth = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
+      const shouldAutoHeight = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
+      if (!shouldAutoWidth && !shouldAutoHeight) {
+        return () => {
+        };
+      }
+      const updateSize = () => {
+        var _a2;
+        const contentDoc = iframe.contentDocument;
+        if (contentDoc) {
+          const rect = contentDoc.documentElement.getBoundingClientRect();
+          const contentWidth = Math.ceil(rect.width);
+          const contentHeight = Math.ceil(rect.height);
+          const width = clamp(contentWidth, minWidth, maxWidth);
+          const height = clamp(contentHeight, minHeight, maxHeight);
+          if (shouldAutoWidth) {
+            iframe.style.width = "".concat(width, "px");
+          }
+          if (shouldAutoHeight) {
+            iframe.style.height = "".concat(height, "px");
+          }
+          const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
+          const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
+          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "hidden";
+          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "hidden";
+          (_a2 = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _a2.call(options, {
+            width,
+            height,
+            autoSizingWidth: shouldAutoWidth,
+            autoSizingHeight: shouldAutoHeight
+          });
+        }
+      };
+      updateSize();
+      const resizeObserver = new ResizeObserver(updateSize);
+      resizeObserver.observe(doc.body);
+      resizeObserver.observe(doc.documentElement);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
         const { height, width } = document.documentElement.getBoundingClientRect();
@@ -1597,25 +1674,25 @@ var MyopIframeLoader = class extends BaseMyopLoader {
         const uniqId = uuidv4();
         const domId = "myop-comp-".concat(uniqId);
         IframeElement = document.createElement("iframe");
-        if (!container.querySelector('[id^="myop-comp-"]'))
-          container.innerHTML = "";
-        if (options == null ? void 0 : options.hidden) {
-          IframeElement.style.visibility = "hidden";
+        IframeElement.id = domId;
+        const iframeStyles = "\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                height: ".concat(typedLoaderConfig.autoHeight || !typedLoaderConfig.height ? "100%" : typedLoaderConfig.height, ";\n                width: 100%;\n                overflow: hidden;\n                border: none;\n                opacity: ").concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
+        IframeElement.style.cssText = iframeStyles;
+        if (options == null ? void 0 : options.elementAttributes) {
+          Object.entries(options.elementAttributes).forEach(([key, value]) => {
+            if (value === "" || value === null || value === void 0) {
+              IframeElement.setAttribute(key, "");
+            } else {
+              IframeElement.setAttribute(key, String(value));
+            }
+          });
         }
-        IframeElement = this.appendChild(container, IframeElement, options);
         let url2load = skin.loader.url;
         if (options == null ? void 0 : options._hasParent)
           url2load = addQueryParam(url2load, "_myop-comp", uniqId);
-        let elementAttributesString = "";
-        if (options == null ? void 0 : options.elementAttributes)
-          elementAttributesString = Object.entries(options == null ? void 0 : options.elementAttributes).map(([key, value]) => {
-            if (value === "" || value === null || value === void 0) {
-              return key;
-            }
-            return "".concat(key, '="').concat(String(value), '"');
-          }).join(" ");
-        IframeElement.outerHTML = '<iframe \n               id="'.concat(domId, '"\n               style="\n                   padding: 0;\n                   margin: 0;\n                   height: ').concat(typedLoaderConfig.autoHeight || !typedLoaderConfig.height ? "" : typedLoaderConfig.height, ";    \n                   width : 100%;\n                   overflow: hidden;\n                   border: none;\n                   opacity: ").concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                   position: ").concat((options == null ? void 0 : options.hidden) ? "absolute" : "static", ";\n                   pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ';\n               "\n            src="').concat(url2load, '"\n            ').concat(elementAttributesString, "\n            ></iframe>");
-        IframeElement = container.querySelector("#".concat(domId));
+        IframeElement.src = url2load;
+        if (!container.querySelector('[id^="myop-comp-"]'))
+          container.innerHTML = "";
+        IframeElement = this.appendChild(container, IframeElement, options);
       }
       return new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
     });
@@ -1731,7 +1808,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.2.6";
+var myop_sdk_version_default = "0.3.8";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2056,6 +2133,10 @@ var WebComponentSDK = class extends BaseMyopSDK {
 };
 defineDynamicImport("WebComponentSDK", WebComponentSDK);
 
+// src/host/embeddedSDK.ts
+var EMBEDDED_SDK_CONTENT = "";
+var HAS_EMBEDDED_SDK = false;
+
 // src/host/loaders/HTMLComponentLoader.ts
 var seen2 = [];
 var sdk;
@@ -2101,15 +2182,11 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         const uniqId = uuidv4();
         const domId2 = "myop-comp-".concat(uniqId);
         let IframeElement = document.createElement("iframe");
+        IframeElement.id = domId2;
+        IframeElement.style.cssText = "\n                display: block;\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                overflow: hidden;\n                border: none;\n                opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                width: 100%;\n                height: 100%;\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
         if (!container.querySelector('[id^="myop-comp-"]'))
           container.innerHTML = "";
-        if (options == null ? void 0 : options.hidden) {
-          IframeElement.style.visibility = "hidden";
-        }
         IframeElement = this.appendChild(container, IframeElement, options);
-        IframeElement.id = domId2;
-        IframeElement.setAttribute("style", "\n                   display: block;\n                   padding: 0;\n                   margin: 0;\n                   overflow: hidden;\n                   border: none;\n                   opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                   width: 100%;\n                   height: 100%;\n                   position: ").concat((options == null ? void 0 : options.hidden) ? "absolute" : "static", ";\n                   pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n               "));
-        container.appendChild(IframeElement);
         const doc = IframeElement.contentDocument || IframeElement.contentWindow.document;
         doc.open();
         let HTML2Render = loaderConfig.HTML;
@@ -2127,7 +2204,9 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
           HTML2Render = _doc.documentElement.outerHTML;
         }
         doc.writeln(HTML2Render);
-        doc.writeln('<script src="'.concat(window.myop.__ROOT_SDK_PUBLIC_URL__, '"><\/script>\n                    <script>\n                  \n                   window.__federation__.__public_path__ =  window.__federation__.__public_path__;\n                  \n                   const __myop_init = async () => {\n                        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                        const sdk = new IframeSDK()\n                        sdk.init();\n                   }\n                    \n                   __myop_init().then();\n                    \n              <\/script>'));
+        const sdkScript = HAS_EMBEDDED_SDK ? "<script>".concat(EMBEDDED_SDK_CONTENT, "<\/script>") : '<script src="'.concat(window.myop.__ROOT_SDK_PUBLIC_URL__, '"><\/script>');
+        const initScript = HAS_EMBEDDED_SDK ? "<script>\n                   const __myop_init = async () => {\n                        const iframeModule = await MyopSDK.getIframeModule();\n                        const IframeSDK = iframeModule.IframeSDK;\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>" : "<script>\n                   window.__federation__.__public_path__ = window.__federation__.__public_path__;\n                   const __myop_init = async () => {\n                        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>";
+        doc.writeln("".concat(sdkScript).concat(initScript));
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
         if (loaderConfig.autoHeight) {
@@ -2170,6 +2249,57 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
 };
 
 // src/helpers/CloudRepository.ts
+var convertV2VariantToComponentConfig = (config) => {
+  return {
+    instance: {
+      id: "auto",
+      componentId: config.componentId,
+      componentName: config.name,
+      skinSelector: {
+        type: "Dedicated",
+        skin: {
+          id: "skin_auto_v2_converted"
+        }
+      }
+    },
+    type: {
+      id: config.id,
+      name: config.name,
+      description: config.description,
+      props: [
+        {
+          id: "in_auto_v2_converted",
+          name: "myop_init_interface",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
+          }
+        },
+        {
+          id: "out_auto_v2_converted",
+          name: "myop_cta_handler",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
+          }
+        }
+      ],
+      refs: [],
+      skins: [
+        {
+          id: "skin_auto_v2_converted",
+          name: "auto_v2_converted",
+          description: "",
+          //TODO : handle empty :
+          // @ts-ignore
+          loader: config.consume_variant[0].loader
+        }
+      ],
+      defaultSkin: 0
+    },
+    name: config.name
+  };
+};
 var _CloudRepository = class _CloudRepository {
   constructor(_baseUrl = "https://cloud.myop.dev") {
     this._baseUrl = _baseUrl;
@@ -2177,34 +2307,62 @@ var _CloudRepository = class _CloudRepository {
     __publicField(this, "variants", {});
     // v1 cache
     __publicField(this, "userFlows", {});
+    __publicField(this, "_defaultEnv", "production");
+  }
+  /**
+   * Set the default environment for this CloudRepository instance
+   */
+  setEnvironment(env) {
+    this._defaultEnv = env;
+  }
+  /**
+   * Get the current default environment
+   */
+  getDefaultEnvironment() {
+    return this._defaultEnv;
   }
   // ============ V2 Methods (Default) ============
   /**
    * Check if a component is already cached/preloaded (v2)
    */
-  isPreloaded(componentId) {
-    return componentId in this.variants;
+  isPreloaded(componentId, env, preview) {
+    const cacheKey = "".concat(componentId, ":").concat(env || this._defaultEnv, ":").concat(preview ? "preview" : "live");
+    return cacheKey in this.variants;
   }
   /**
-   * Fetch a v2 component variant
+   * Fetch a v2 component config
    */
-  async fetchComponentV2(componentId, environmentIdentifier) {
-    if (!this.variants[componentId]) {
-      this.variants[componentId] = new Promise(
+  async fetchComponentV2(componentId, environmentIdentifier, preview) {
+    const env = environmentIdentifier || this._defaultEnv;
+    const cacheKey = "".concat(componentId, ":").concat(env, ":").concat(preview ? "preview" : "live");
+    if (!this.variants[cacheKey]) {
+      this.variants[cacheKey] = new Promise(
         async (resolve, reject) => {
           try {
-            const res = await fetch(
-              "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(environmentIdentifier)
-            );
+            let url = "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(env);
+            if (preview) {
+              url += "&preview=true";
+            }
+            const res = await fetch(url);
             const json = await res.json();
-            resolve(json.item);
+            const variant = json.item;
+            if (!variant) {
+              reject(new Error('Component "'.concat(componentId, '" not found')));
+              return;
+            }
+            if (!variant.consume_variant || !variant.consume_variant.length) {
+              reject(new Error('Component "'.concat(componentId, '" has no implementation for environment "').concat(env, '"')));
+              return;
+            }
+            const componentConfig = convertV2VariantToComponentConfig(variant);
+            resolve(componentConfig);
           } catch (e) {
             reject(e);
           }
         }
       );
     }
-    return await this.variants[componentId];
+    return await this.variants[cacheKey];
   }
   // ============ V1 Methods (Legacy) ============
   /**