@myop/sdk 0.2.6 → 0.2.7

package/dist/cjs/{_WebComponentSDK.ba6c3d1b.js → _WebComponentSDK.4a661403.js}

@@ -1469,6 +1469,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();
@@ -1599,25 +1676,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);
     });
@@ -1728,7 +1805,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.2.6";
+var myop_sdk_version_default = "0.2.7";
 
 // src/host/loaders/HTMLComponentLoader.ts
 var seen2 = [];
@@ -1775,15 +1852,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;
@@ -1844,6 +1917,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;
@@ -1851,34 +1975,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) ============
   /**