@myop/sdk 0.3.18 → 0.3.20

package/dist/bundled-declarations.d.ts

@@ -1191,6 +1191,9 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         componentConfig: IComponentDefinitionConfig;
         container: HTMLElement;
         private IframeElement;
+        private _autoSizeCleanup?;
+        private _autoSizeOptions?;
+        private _autoSizeUpdate?;
         constructor(componentConfig: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, IframeElement: HTMLIFrameElement, options?: loaderOptions);
         sizeMeta?: {
             width?: string | number;
@@ -1209,6 +1212,11 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         /**
          * Observes the iframe content size and automatically syncs it to the iframe element.
          * Uses direct contentDocument access (same-origin only) for accurate measurements.
+         *
+         * Reentrant: when called again while observers already exist, updates options and
+         * re-evaluates sizing without recreating observers. Cleanup + re-call (e.g. React
+         * re-render) creates fresh observers since cleanup clears the existing ones.
+         *
          * @param options - Configuration options including size change callback and min/max constraints
          * @returns Cleanup function to stop observing
          */
@@ -1702,6 +1710,7 @@ declare module "@myop/sdk/helpers/CloudRepository" {
         private preloadedComponents;
         private userFlows;
         private _defaultEnv;
+        private _envExplicitlySet;
         constructor(_baseUrl?: string);
         /**
          * Set the default environment for this CloudRepository instance
@@ -1749,6 +1758,20 @@ declare module "@myop/sdk/helpers/CloudRepository" {
 declare module "@myop/sdk/helpers/exec" {
     export const exec: (getter: any) => Promise<any>;
 }
+declare module "@myop/sdk/helpers/cloudRepositoryHelpers" {
+    import { CloudRepository } from "@myop/sdk/helpers/CloudRepository";
+    export const getCloudRepository: () => CloudRepository;
+    export const isPreloaded: (componentId: string, env?: string, preview?: boolean) => boolean;
+    export const getPreloadedParams: (componentId: string) => {
+        env: string;
+        preview: boolean;
+    };
+    export const enableLocalDev: () => void;
+    export const setCloudRepositoryUrl: (url: string) => void;
+    export const setCloudRepository: (repository: CloudRepository) => void;
+    export const setEnvironment: (env: string) => void;
+    export const preloadComponents: (ids: string[], env?: string, preview?: boolean) => Promise<PromiseSettledResult<import("common").IComponentConfig>[]>;
+}
 declare module "@myop/sdk/helpers" {
     export * from "@myop/sdk/helpers/applyStylesheet";
     export * from "@myop/sdk/helpers/iframeSkinUrlTokenizer";
@@ -1756,6 +1779,7 @@ declare module "@myop/sdk/helpers" {
     export * from "@myop/sdk/helpers/configBuilder";
     export * from "@myop/sdk/helpers/CloudRepository";
     export * from "@myop/sdk/helpers/exec";
+    export * from "@myop/sdk/helpers/cloudRepositoryHelpers";
 }
 declare module "@myop/sdk/host/myopOverride" {
     import { IComponentConfig } from "@myop/sdk/common";

package/dist/cjs/{_IframeSDK.c1b7f57f.js → _IframeSDK.63faba1b.js}

@@ -1585,6 +1585,9 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     this.componentConfig = componentConfig;
     this.container = container;
     this.IframeElement = IframeElement;
+    __publicField(this, "_autoSizeCleanup");
+    __publicField(this, "_autoSizeOptions");
+    __publicField(this, "_autoSizeUpdate");
     __publicField(this, "sizeMeta");
     __publicField(this, "cleanupInspect");
     __publicField(this, "setHeightBasedOnDocumentElement", () => {
@@ -1614,11 +1617,20 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     /**
      * Observes the iframe content size and automatically syncs it to the iframe element.
      * Uses direct contentDocument access (same-origin only) for accurate measurements.
+     *
+     * Reentrant: when called again while observers already exist, updates options and
+     * re-evaluates sizing without recreating observers. Cleanup + re-call (e.g. React
+     * re-render) creates fresh observers since cleanup clears the existing ones.
+     *
      * @param options - Configuration options including size change callback and min/max constraints
      * @returns Cleanup function to stop observing
      */
     __publicField(this, "observeAutoSize", (options) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      this._autoSizeOptions = options;
+      if (this._autoSizeCleanup && this._autoSizeUpdate) {
+        this._autoSizeUpdate();
+        return this._autoSizeCleanup;
+      }
       const iframe = this.IframeElement;
       const doc = iframe.contentDocument;
       if (!doc) {
@@ -1637,78 +1649,88 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         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 sizeMetaFillWidth = ((_b = this.sizeMeta) == null ? void 0 : _b.width) === "100%" ? "100%" : void 0;
-      const sizeMetaFillHeight = ((_c = this.sizeMeta) == null ? void 0 : _c.height) === "100%" ? "100%" : void 0;
-      const resolvedExplicitWidth = (_e = (_d = options == null ? void 0 : options.explicitWidth) != null ? _d : sizeMetaFillWidth) != null ? _e : "100%";
-      const resolvedExplicitHeight = (_f = options == null ? void 0 : options.explicitHeight) != null ? _f : sizeMetaFillHeight;
-      const hasExplicitWidth = resolvedExplicitWidth !== void 0;
-      const hasExplicitHeight = resolvedExplicitHeight !== 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) {
-        const explicitWidthPx = typeof resolvedExplicitWidth === "number" ? resolvedExplicitWidth : void 0;
-        const explicitHeightPx = typeof resolvedExplicitHeight === "number" ? resolvedExplicitHeight : void 0;
-        if (explicitWidthPx !== void 0 || explicitHeightPx !== void 0) {
-          (_g = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _g.call(options, {
-            width: explicitWidthPx,
-            height: explicitHeightPx,
-            autoSizingWidth: false,
-            autoSizingHeight: false
-          });
-        }
-        return () => {
-        };
-      }
       const updateSize = () => {
-        var _a2;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const contentDoc = iframe.contentDocument;
-        if (contentDoc) {
-          if (shouldAutoHeight) {
-            iframe.style.height = "0px";
-          }
-          if (shouldAutoWidth) {
-            iframe.style.width = "0px";
-          }
-          const contentWidth = Math.ceil(contentDoc.documentElement.scrollWidth);
-          const contentHeight = Math.ceil(contentDoc.documentElement.scrollHeight);
-          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");
+        if (!contentDoc) return;
+        const opts = this._autoSizeOptions;
+        const minWidth = parseSize(opts == null ? void 0 : opts.minWidth);
+        const maxWidth = parseSize(opts == null ? void 0 : opts.maxWidth);
+        const minHeight = parseSize(opts == null ? void 0 : opts.minHeight);
+        const maxHeight = parseSize(opts == null ? void 0 : opts.maxHeight);
+        const loaderMinHeight = (_a = opts == null ? void 0 : opts.loaderMinHeight) != null ? _a : 50;
+        const sizeMetaFillWidth = ((_b = this.sizeMeta) == null ? void 0 : _b.width) === "100%" ? "100%" : void 0;
+        const sizeMetaFillHeight = ((_c = this.sizeMeta) == null ? void 0 : _c.height) === "100%" ? "100%" : void 0;
+        const resolvedExplicitWidth = (_e = (_d = opts == null ? void 0 : opts.explicitWidth) != null ? _d : sizeMetaFillWidth) != null ? _e : "100%";
+        const resolvedExplicitHeight = (_f = opts == null ? void 0 : opts.explicitHeight) != null ? _f : sizeMetaFillHeight;
+        const hasExplicitWidth = resolvedExplicitWidth !== void 0;
+        const hasExplicitHeight = resolvedExplicitHeight !== void 0;
+        const containerRect = this.container.getBoundingClientRect();
+        const collapsedWidth = containerRect.width === 0;
+        const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
+        const shouldAutoWidth = (opts == null ? void 0 : opts.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
+        const shouldAutoHeight = (opts == null ? void 0 : opts.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
+        if (!shouldAutoWidth && !shouldAutoHeight) {
+          iframe.style.width = typeof resolvedExplicitWidth === "number" ? "".concat(resolvedExplicitWidth, "px") : "100%";
+          iframe.style.height = typeof resolvedExplicitHeight === "number" ? "".concat(resolvedExplicitHeight, "px") : "100%";
+          const explicitWidthPx = typeof resolvedExplicitWidth === "number" ? resolvedExplicitWidth : void 0;
+          const explicitHeightPx = typeof resolvedExplicitHeight === "number" ? resolvedExplicitHeight : void 0;
+          if (explicitWidthPx !== void 0 || explicitHeightPx !== void 0) {
+            (_g = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _g.call(opts, {
+              width: explicitWidthPx,
+              height: explicitHeightPx,
+              autoSizingWidth: false,
+              autoSizingHeight: false
+            });
           }
-          const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
-          const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
-          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "";
-          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "";
-          (_a2 = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _a2.call(options, {
-            width,
-            height,
-            autoSizingWidth: shouldAutoWidth,
-            autoSizingHeight: shouldAutoHeight
-          });
+          return;
+        }
+        if (shouldAutoHeight) {
+          iframe.style.height = "0px";
+        }
+        if (shouldAutoWidth) {
+          iframe.style.width = "0px";
         }
+        const contentWidth = Math.ceil(Math.max(contentDoc.documentElement.scrollWidth, contentDoc.body.scrollWidth));
+        const contentHeight = Math.ceil(Math.max(contentDoc.documentElement.scrollHeight, contentDoc.body.scrollHeight));
+        const width = clamp(contentWidth, minWidth, maxWidth);
+        const height = clamp(contentHeight, minHeight, maxHeight);
+        if (shouldAutoWidth) {
+          iframe.style.width = "".concat(width, "px");
+        } else {
+          iframe.style.width = typeof resolvedExplicitWidth === "number" ? "".concat(resolvedExplicitWidth, "px") : "100%";
+        }
+        if (shouldAutoHeight) {
+          iframe.style.height = "".concat(height, "px");
+        } else {
+          iframe.style.height = typeof resolvedExplicitHeight === "number" ? "".concat(resolvedExplicitHeight, "px") : "100%";
+        }
+        const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
+        const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
+        contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "";
+        contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "";
+        (_h = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _h.call(opts, {
+          width,
+          height,
+          autoSizingWidth: shouldAutoWidth,
+          autoSizingHeight: shouldAutoHeight
+        });
       };
       updateSize();
+      this._autoSizeUpdate = updateSize;
       const resizeObserver = new ResizeObserver(updateSize);
       resizeObserver.observe(doc.body);
       resizeObserver.observe(doc.documentElement);
       const mutationObserver = new MutationObserver(updateSize);
       mutationObserver.observe(doc.body, { childList: true, subtree: true, characterData: true, attributes: true });
-      return () => {
+      const cleanup = () => {
         resizeObserver.disconnect();
         mutationObserver.disconnect();
+        this._autoSizeUpdate = void 0;
+        this._autoSizeCleanup = void 0;
       };
+      this._autoSizeCleanup = cleanup;
+      return cleanup;
     });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
@@ -1755,16 +1777,15 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       return cleanupHandler;
     });
     __publicField(this, "dispose", () => {
+      if (this._autoSizeCleanup) {
+        this._autoSizeCleanup();
+        this._autoSizeCleanup = void 0;
+      }
       if (this.cleanupInspect)
         this.cleanupInspect();
       super.dispose();
       this.IframeElement.parentNode.removeChild(this.IframeElement);
     });
-    if (skin.loader.autoHeight) {
-      this.initiated().then(() => {
-        this.setHeightBasedOnScrollHeight();
-      });
-    }
     this.element = this.IframeElement;
   }
   inspect() {
@@ -1974,7 +1995,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.18";
+var myop_sdk_version_default = "0.3.19";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2408,11 +2429,12 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
         comp.sizeMeta = parsedSizeMeta;
-        if (loaderConfig.autoHeight) {
-          IframeElement.onload = () => {
-            comp.observeSizeBasedOnDocumentElement();
-          };
-        }
+        comp.initiated().then(() => {
+          comp.observeAutoSize({ forceAutoSize: true });
+          if (!(options == null ? void 0 : options.hidden)) {
+            comp.show();
+          }
+        });
         return comp;
       }
       if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {
@@ -2605,6 +2627,7 @@ var _CloudRepository = class _CloudRepository {
     // v1 cache
     __publicField(this, "userFlows", {});
     __publicField(this, "_defaultEnv", "production");
+    __publicField(this, "_envExplicitlySet", false);
   }
   static get Main() {
     const globalMain = getGlobalMain();
@@ -2622,6 +2645,7 @@ var _CloudRepository = class _CloudRepository {
    */
   setEnvironment(env) {
     this._defaultEnv = env;
+    this._envExplicitlySet = true;
   }
   /**
    * Get the current default environment
@@ -2662,7 +2686,8 @@ var _CloudRepository = class _CloudRepository {
       usePreview = preloaded.preview;
     } else {
       env = environmentIdentifier || this._defaultEnv;
-      usePreview = preview === true ? true : preview === false ? false : !environmentIdentifier;
+      const hasEffectiveEnv = environmentIdentifier || this._envExplicitlySet;
+      usePreview = preview === true ? true : preview === false ? false : !hasEffectiveEnv;
     }
     const cacheKey = "".concat(componentId, ":").concat(env, ":").concat(usePreview ? "preview" : "live");
     console.log("[CloudRepository] fetchComponentV2", {
@@ -2765,6 +2790,9 @@ var _CloudRepository = class _CloudRepository {
 __publicField(_CloudRepository, "_main", null);
 var CloudRepository = _CloudRepository;
 
+// src/helpers/cloudRepositoryHelpers.ts
+var _cloudRepository = CloudRepository.Main;
+
 // src/host/myopOverride.ts
 var checkMyopOverride = async (componentConfig) => {
   try {