@myop/sdk 0.3.16 → 0.3.18

package/dist/bundled-declarations.d.ts

@@ -359,10 +359,23 @@ declare module "@myop/sdk/common" {
         updatedOn?: string;
         updatedBy?: string;
     }
+    export interface ComponentAccess {
+        visibility: 'private' | 'unlisted' | 'public';
+        unlisted?: {
+            slug: string;
+        };
+        marketplace?: {
+            status: 'draft' | 'submitted' | 'claimed' | 'closed';
+            description: string;
+            contactEmail: string;
+            deadline: string;
+        };
+    }
     export interface v2_IComponentDefinitionConfig extends v2_IMyopStoredObject {
         variants_ids: string[];
         DTOs: v2_IDTO[];
         tags: string[];
+        access?: ComponentAccess;
         variants_names: string[];
         variants_data: {
             name: string;
@@ -1108,6 +1121,19 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
          * @returns Cleanup function to stop observing
          */
         observeAutoSize?: (options?: AutoSizeOptions) => CleanupHandler;
+        /**
+         * Parsed myop:size meta tag from the component HTML.
+         * Set by HTMLComponentLoader before iframe creation.
+         * Used by the React host to determine sizing mode (fill vs content).
+         */
+        sizeMeta?: {
+            width?: string | number;
+            height?: string | number;
+            minWidth?: number;
+            maxWidth?: number;
+            minHeight?: number;
+            maxHeight?: number;
+        } | null;
         parent?: IMyopComponent;
         props: P;
         refs: R;
@@ -1166,6 +1192,14 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         container: HTMLElement;
         private IframeElement;
         constructor(componentConfig: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, IframeElement: HTMLIFrameElement, options?: loaderOptions);
+        sizeMeta?: {
+            width?: string | number;
+            height?: string | number;
+            minWidth?: number;
+            maxWidth?: number;
+            minHeight?: number;
+            maxHeight?: number;
+        } | null;
         cleanupInspect?: CleanupHandler;
         inspect(): CleanupHandler;
         hide(): void;

package/dist/cjs/{_IframeSDK.0e315746.js → _IframeSDK.c1b7f57f.js}

@@ -1585,6 +1585,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     this.componentConfig = componentConfig;
     this.container = container;
     this.IframeElement = IframeElement;
+    __publicField(this, "sizeMeta");
     __publicField(this, "cleanupInspect");
     __publicField(this, "setHeightBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
@@ -1617,7 +1618,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
      * @returns Cleanup function to stop observing
      */
     __publicField(this, "observeAutoSize", (options) => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f, _g;
       const iframe = this.IframeElement;
       const doc = iframe.contentDocument;
       if (!doc) {
@@ -1641,14 +1642,28 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       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 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 () => {
         };
       }
@@ -1656,9 +1671,14 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         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);
+          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) {
@@ -1669,8 +1689,8 @@ var MyopIframeComponent = class extends BaseMyopComponent {
           }
           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";
+          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,
@@ -1683,8 +1703,11 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       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 () => {
         resizeObserver.disconnect();
+        mutationObserver.disconnect();
       };
     });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
@@ -1951,7 +1974,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.16";
+var myop_sdk_version_default = "0.3.18";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2338,6 +2361,18 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         IframeElement = this.appendChild(container, IframeElement, options);
         const doc = IframeElement.contentDocument || IframeElement.contentWindow.document;
         doc.open();
+        let parsedSizeMeta = null;
+        {
+          const _preParser = new DOMParser();
+          const _preDoc = _preParser.parseFromString(loaderConfig.HTML, "text/html");
+          const sizeMeta = _preDoc.querySelector('meta[name="myop:size"]');
+          if (sizeMeta) {
+            try {
+              parsedSizeMeta = JSON.parse(sizeMeta.getAttribute("content") || "{}");
+            } catch (e) {
+            }
+          }
+        }
         let HTML2Render = loaderConfig.HTML;
         if (options == null ? void 0 : options._inspection) {
           const parser = new DOMParser();
@@ -2351,7 +2386,7 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
             _doc.head.insertBefore(_doc.importNode(node, true), _doc.head.firstChild);
           }
           HTML2Render = _doc.documentElement.outerHTML;
-        } else {
+        } else if ((options == null ? void 0 : options.data) !== void 0) {
           const parser = new DOMParser();
           const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
           const myop_preview_script = _doc.getElementById("myop_preview");
@@ -2372,6 +2407,7 @@ 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();
@@ -3144,10 +3180,10 @@ var observeDOM = (obj, callback) => {
     console.log("n");
     return;
   }
-  let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+  let MutationObserver2 = window.MutationObserver || window.WebKitMutationObserver;
   if (!obj || obj.nodeType !== 1) return;
-  if (MutationObserver) {
-    const mutationObserver = new MutationObserver(callback);
+  if (MutationObserver2) {
+    const mutationObserver = new MutationObserver2(callback);
     const config = { attributes: true, childList: true, subtree: true };
     mutationObserver.observe(obj, config);
     return mutationObserver;