@myop/sdk 0.3.32 → 0.3.33

package/dist/cjs/{_WebComponentSDK.1aa213d9.js → _WebComponentSDK.a7e660ab.js}

@@ -1168,6 +1168,19 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
     __publicField(this, "ctaCleanup");
     __publicField(this, "_ctaHandler");
     __publicField(this, "_ctaQueue", []);
+    // A single 'myop-cta' listener, attached at construction so CTAs a component
+    // dispatches during its first initWithData() render — before the host attaches
+    // a handler — are buffered (and flushed on setCtaHandler), matching the iframe
+    // path's pre-handler CTA queue.
+    __publicField(this, "_ctaListener", (e) => {
+      const detail = e.detail;
+      if (!(detail == null ? void 0 : detail.action)) return;
+      if (this._ctaHandler && !this.markedForDisposed) {
+        this._ctaHandler(detail.action, detail.payload);
+      } else if (!this._ctaHandler) {
+        this._ctaQueue.push({ action: detail.action, payload: detail.payload });
+      }
+    });
     __publicField(this, "cleanupInspect", () => {
     });
     /**
@@ -1188,6 +1201,8 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
       (_a = this.customElement.parentNode) == null ? void 0 : _a.removeChild(this.customElement);
     });
     this.element = customElement;
+    this.customElement.addEventListener("myop-cta", this._ctaListener);
+    this.ctaCleanup = () => this.customElement.removeEventListener("myop-cta", this._ctaListener);
     this.setInitiated();
   }
   inspect() {
@@ -1232,9 +1247,6 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
    * Called via props.myop_cta_handler = handler
    */
   setCtaHandler(handler) {
-    if (this.ctaCleanup) {
-      this.ctaCleanup();
-    }
     this._ctaHandler = handler;
     if (this._ctaQueue.length > 0) {
       const queue = [...this._ctaQueue];
@@ -1245,24 +1257,6 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
         }
       });
     }
-    const listener = (e) => {
-      var _a;
-      const customEvent = e;
-      if ((_a = customEvent.detail) == null ? void 0 : _a.action) {
-        if (this._ctaHandler && !this.markedForDisposed) {
-          this._ctaHandler(customEvent.detail.action, customEvent.detail.payload);
-        } else if (!this._ctaHandler) {
-          this._ctaQueue.push({
-            action: customEvent.detail.action,
-            payload: customEvent.detail.payload
-          });
-        }
-      }
-    };
-    this.customElement.addEventListener("myop-cta", listener);
-    this.ctaCleanup = () => {
-      this.customElement.removeEventListener("myop-cta", listener);
-    };
   }
 };
 
@@ -1331,6 +1325,17 @@ var connectProps = (component, propsConfig, selectedSkin) => {
           }
           return void 0;
         }
+        if (component instanceof MyopIframeComponent && component.isolated) {
+          const typedPropBehavior = propConfig.behavior;
+          const propName = typedPropBehavior.remap || prop;
+          if (propName === "myop_init_interface") {
+            return (data) => {
+              if (data === void 0) return component.getData();
+              component.initWithData(data);
+            };
+          }
+          return void 0;
+        }
         if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
           const typedLoader = selectedSkin.loader;
           if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
@@ -1377,6 +1382,18 @@ var connectProps = (component, propsConfig, selectedSkin) => {
             return true;
           }
         }
+        if (component instanceof MyopIframeComponent && component.isolated) {
+          const typedPropBehavior = propConfig.behavior;
+          const propName = typedPropBehavior.remap || prop;
+          if (propName === "myop_cta_handler") {
+            component.setCtaHandler(value);
+            return true;
+          }
+          if (propName === "myop_init_interface") {
+            component.initWithData(value);
+            return true;
+          }
+        }
         if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
           const typedLoader = selectedSkin.loader;
           if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
@@ -1582,6 +1599,7 @@ var connectRefs = async (component, componentConfig, components, withoutRefCompo
 
 // src/host/components/myopIframeComponent.ts
 var MyopIframeComponent = class extends BaseMyopComponent {
+  // last reported size (for the enable race)
   constructor(componentConfig, skin, container, IframeElement, options) {
     super(componentConfig, container, options);
     this.componentConfig = componentConfig;
@@ -1590,6 +1608,17 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     __publicField(this, "_autoSizeCleanup");
     __publicField(this, "_autoSizeOptions");
     __publicField(this, "_autoSizeUpdate");
+    // ── Isolation (sandboxed cross-origin frame) — postMessage bridge, host side ──
+    __publicField(this, "isolated", false);
+    __publicField(this, "_lastData");
+    // cached last-sent data (sync getData)
+    __publicField(this, "_ctaHandler");
+    __publicField(this, "_ctaQueue", []);
+    __publicField(this, "_isoMsgHandler");
+    __publicField(this, "_isoSizeOpts");
+    __publicField(this, "_isoAutoSize", false);
+    // bridge sizing only when auto-size is on
+    __publicField(this, "_isoLastSize");
     __publicField(this, "sizeMeta");
     __publicField(this, "cleanupInspect");
     __publicField(this, "setHeightBasedOnDocumentElement", () => {
@@ -1629,6 +1658,15 @@ var MyopIframeComponent = class extends BaseMyopComponent {
      */
     __publicField(this, "observeAutoSize", (options) => {
       this._autoSizeOptions = options;
+      if (this.isolated) {
+        this._isoSizeOpts = options;
+        this._isoAutoSize = true;
+        if (this._isoLastSize) this._applyIsoSize(this._isoLastSize.height, this._isoLastSize.width);
+        return () => {
+          this._isoAutoSize = false;
+          this._isoSizeOpts = void 0;
+        };
+      }
       if (this._autoSizeCleanup && this._autoSizeUpdate) {
         this._autoSizeUpdate();
         return this._autoSizeCleanup;
@@ -1831,12 +1869,73 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         this._autoSizeCleanup();
         this._autoSizeCleanup = void 0;
       }
+      if (this._isoMsgHandler) {
+        window.removeEventListener("message", this._isoMsgHandler);
+        this._isoMsgHandler = void 0;
+      }
       if (this.cleanupInspect)
         this.cleanupInspect();
       super.dispose();
       this.IframeElement.parentNode.removeChild(this.IframeElement);
     });
     this.element = this.IframeElement;
+    this._lastData = options == null ? void 0 : options.data;
+  }
+  // ── Isolation bridge (host side) ─────────────────────────────────────────
+  /** Attach the host-side postMessage listener for a sandboxed frame. */
+  enableIsolation() {
+    this.isolated = true;
+    this.setInitiated();
+    this._isoMsgHandler = (e) => {
+      if (e.source !== this.IframeElement.contentWindow) return;
+      const d = e.data;
+      if (!d || d.__myop !== true) return;
+      if (d.type === "myop:cta") {
+        if (this._ctaHandler && !this.markedForDisposed) this._ctaHandler(d.action, d.payload);
+        else if (!this._ctaHandler) this._ctaQueue.push({ action: d.action, payload: d.payload });
+      } else if (d.type === "myop:size") {
+        this._applyIsoSize(d.height, d.width);
+      }
+    };
+    window.addEventListener("message", this._isoMsgHandler);
+  }
+  /** Data-in — unified with the extracted-WC API. Posts init over the bridge. */
+  initWithData(data) {
+    var _a, _b;
+    this._lastData = data;
+    (_b = (_a = this.IframeElement) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ __myop: true, type: "myop:init", data }, "*");
+  }
+  /** Data-in getter — returns the last data the host sent (cached, synchronous). */
+  getData() {
+    return this._lastData;
+  }
+  /** Data-out — unified with the extracted-WC API. Flushes CTAs queued pre-handler. */
+  setCtaHandler(handler) {
+    this._ctaHandler = handler;
+    if (this._ctaQueue.length > 0) {
+      const queue = [...this._ctaQueue];
+      this._ctaQueue = [];
+      queue.forEach((item) => {
+        if (!this.markedForDisposed) handler(item.action, item.payload);
+      });
+    }
+  }
+  _applyIsoSize(height, width) {
+    var _a;
+    if (!height || Number.isNaN(height)) return;
+    this._isoLastSize = { height, width };
+    if (!this._isoAutoSize) return;
+    const opts = this._isoSizeOpts;
+    const toNum = (v) => v === void 0 ? void 0 : typeof v === "number" ? v : isNaN(parseFloat(v)) ? void 0 : parseFloat(v);
+    const min = toNum(opts == null ? void 0 : opts.minHeight), max = toNum(opts == null ? void 0 : opts.maxHeight);
+    let h = height;
+    if (min !== void 0 && h < min) h = min;
+    if (max !== void 0 && h > max) h = max;
+    this.IframeElement.style.position = "relative";
+    this.IframeElement.style.inset = "auto";
+    this.IframeElement.style.height = h + "px";
+    this.IframeElement.style.width = "100%";
+    (_a = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _a.call(opts, { width: width != null ? width : this.IframeElement.clientWidth, height: h, autoSizingWidth: false, autoSizingHeight: true });
   }
   inspect() {
     if (this.cleanupInspect) {
@@ -2040,7 +2139,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.32";
+var myop_sdk_version_default = "0.3.33";
 
 // src/host/embeddedSDK.ts
 var EMBEDDED_SDK_CONTENT = "";
@@ -2088,7 +2187,15 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
     __publicField(this, "type", SkinLoaders.HTMLLoader);
     __publicField(this, "load", async (componentDefinition, skin, container, options) => {
       const loaderConfig = skin.loader;
-      if (this.isMyopWebComponent(loaderConfig.HTML)) {
+      const isWC = this.isMyopWebComponent(loaderConfig.HTML);
+      const { mode, isolate } = await this.resolveRenderMode(componentDefinition, skin, loaderConfig, isWC, options);
+      if (mode === false) {
+        throw new Error('[Myop] Rendering blocked by render policy for component "'.concat(componentDefinition.id, '"'));
+      }
+      if (isWC) {
+        if (mode !== "webComponent") {
+          throw new Error('[Myop] Web-component rendering denied by render policy for component "'.concat(componentDefinition.id, '"'));
+        }
         return this.loadExtractedWebComponent(componentDefinition, skin, container, loaderConfig.HTML, options);
       }
       let domId = "myop-comp-".concat(uuidv4());
@@ -2098,12 +2205,28 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         const domId2 = "myop-comp-".concat(uniqId);
         let IframeElement = document.createElement("iframe");
         IframeElement.id = domId2;
+        if (isolate) {
+          IframeElement.setAttribute("sandbox", "allow-scripts allow-forms allow-popups");
+        }
         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 = "";
         IframeElement = this.appendChild(container, IframeElement, options);
-        const doc = IframeElement.contentDocument || IframeElement.contentWindow.document;
-        doc.open();
+        const __srcParts = [];
+        const doc = isolate ? {
+          open() {
+          },
+          writeln(s) {
+            __srcParts.push(s);
+          },
+          close() {
+            IframeElement.srcdoc = __srcParts.join("\n");
+          }
+        } : (() => {
+          const d = IframeElement.contentDocument || IframeElement.contentWindow.document;
+          d.open();
+          return d;
+        })();
         let parsedSizeMeta = null;
         {
           const _preParser = new DOMParser();
@@ -2143,22 +2266,29 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
           const _doc = parser.parseFromString(HTML2Render, "text/html");
           const styleTag = _doc.createElement("style");
           styleTag.setAttribute("data-myop-injected", "true");
-          styleTag.textContent = options.injectCss;
+          styleTag.textContent = options.injectCss.replace(/<\s*\/\s*style/gi, "<\\/style");
           (_doc.head || _doc.documentElement).appendChild(styleTag);
           HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
         }
         doc.writeln(HTML2Render);
         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));
-        if ((options == null ? void 0 : options.data) !== void 0) {
+        if (!isolate) {
+          doc.writeln("".concat(sdkScript).concat(initScript));
+        }
+        if (!isolate && (options == null ? void 0 : options.data) !== void 0) {
           const ctaQueueScript = "<script>\n                    window.__myop_cta_queue = [];\n                    window.myop_cta_handler = function(action, payload) {\n                        window.__myop_cta_queue.push({action: action, payload: payload});\n                    };\n                <\/script>";
           const escapedData = JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script");
           const dataScript = '<script id="__myop_init_data_script">\n                    (function() {\n                        var data = '.concat(escapedData, ";\n                        var scriptEl = document.getElementById('__myop_init_data_script');\n\n                        var callInitInterface = function(fn) {\n                            var startTime = performance.now();\n                            // Mark as pre-injected data call for extension tracking\n                            window.__myop_init_preinjected = true;\n                            try {\n                                fn(data);\n                            } finally {\n                                window.__myop_init_preinjected = false;\n                            }\n                            var duration = performance.now() - startTime;\n\n                            // Notify extension via postMessage (init* = pre-injected)\n                            try {\n                                window.parent.postMessage({\n                                    type: 'MYOP_PREINJECTED_INIT',\n                                    payload: {\n                                        data: data,\n                                        duration: duration,\n                                        timestamp: Date.now()\n                                    }\n                                }, '*');\n                            } catch (e) {}\n\n                            // Cleanup: remove script tag and stored data\n                            if (scriptEl && scriptEl.parentNode) {\n                                scriptEl.parentNode.removeChild(scriptEl);\n                            }\n                            delete window.__myop_init_data;\n                        };\n\n                        if (typeof window.myop_init_interface === 'function') {\n                            // Function already exists - call immediately\n                            callInitInterface(window.myop_init_interface);\n                        } else {\n                            // Function not yet defined - store data and watch for definition\n                            window.__myop_init_data = data;\n\n                            var _original;\n                            Object.defineProperty(window, 'myop_init_interface', {\n                                configurable: true,\n                                enumerable: true,\n                                set: function(fn) {\n                                    _original = fn;\n                                    if (window.__myop_init_data !== undefined) {\n                                        var storedData = window.__myop_init_data;\n                                        delete window.__myop_init_data;\n                                        callInitInterface(fn);\n                                    }\n                                },\n                                get: function() {\n                                    return _original;\n                                }\n                            });\n                        }\n                    })();\n                <\/script>");
           doc.writeln(ctaQueueScript + dataScript);
         }
+        if (isolate) {
+          const escapedData = (options == null ? void 0 : options.data) !== void 0 ? JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script") : "undefined";
+          doc.writeln(this.buildIsolationBridge(escapedData));
+        }
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+        if (isolate) comp.enableIsolation();
         comp.sizeMeta = parsedSizeMeta;
         comp.initiated().then(() => {
           if ((options == null ? void 0 : options.autoSize) === false) {
@@ -2213,6 +2343,42 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
   isMyopWebComponent(html) {
     return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
   }
+  /**
+   * Resolve how this component should render, applying the host render policy.
+   * Precedence: options.renderPolicy (per-call) fully replaces the global
+   * hostSDK.setRenderPolicy — so an app can restrict globally and allow specifics.
+   * With no policy set, behavior is unchanged from before (marker ⇒ web component).
+   */
+  async resolveRenderMode(componentDefinition, skin, loaderConfig, isWebComponent, options) {
+    var _a, _b, _c, _d;
+    const requestedMode = isWebComponent ? "webComponent" : loaderConfig.isolation || (options == null ? void 0 : options.isolation) ? "isolatedIframe" : "iframe";
+    const policy = (_d = options == null ? void 0 : options.renderPolicy) != null ? _d : (_c = (_b = (_a = window == null ? void 0 : window.myop) == null ? void 0 : _a.hostSDK) == null ? void 0 : _b.getRenderPolicy) == null ? void 0 : _c.call(_b);
+    const mode = policy ? await policy({ componentDefinition, skin, requestedMode, isWebComponent }) : requestedMode;
+    return { mode, isolate: mode === "isolatedIframe" };
+  }
+  /**
+   * The in-frame bridge for isolated components. Runs inside the sandboxed
+   * (opaque-origin) iframe, translating the same author-facing contract to/from
+   * postMessage since the host has no same-origin access:
+   *   • data-in : parent posts {type:'myop:init'} → calls window.myop_init_interface
+   *               (plus a baked initial value for the first render)
+   *   • data-out: window.myop_cta_handler → parent.postMessage({type:'myop:cta'})
+   *   • resize  : ResizeObserver → parent.postMessage({type:'myop:size'})
+   *
+   * TODO(dev-extension): the isolated path deliberately skips the same-origin
+   * dataScript, so it never posts the `MYOP_PREINJECTED_INIT` message the Myop dev
+   * extension listens for to log the INITIAL render (`init*`). Later init updates and
+   * all CTAs are still tracked (the extension wraps `comp.props`, which our isolated
+   * connectProps branch routes through), so only the first-render payload is missing
+   * from the extension's activity log for isolated components. Closing this would be a
+   * ~1-line `parent.postMessage({type:'MYOP_PREINJECTED_INIT', payload:{data}})` inside
+   * flushInitial() below — intentionally NOT done for now to avoid adding extension-only
+   * traffic to the component runtime. Web components have the same initial-init gap
+   * (initWithData is called on the element, not via comp.props) and it predates this.
+   */
+  buildIsolationBridge(initialDataLiteral) {
+    return "<script>\n            (function () {\n                var __initial = ".concat(initialDataLiteral, ";\n                var __pending;\n                // data-out (cta)\n                window.myop_cta_handler = function (action, payload) {\n                    try { parent.postMessage({ __myop: true, type: 'myop:cta', action: action, payload: payload }, '*'); } catch (e) {}\n                };\n                function callInit(data) {\n                    if (typeof window.myop_init_interface === 'function') { window.myop_init_interface(data); return true; }\n                    return false;\n                }\n                // data-in (init updates)\n                window.addEventListener('message', function (e) {\n                    var d = e.data;\n                    if (!d || d.__myop !== true) return;\n                    if (d.type === 'myop:init') { if (!callInit(d.data)) __pending = d.data; }\n                });\n                // first render: use a pending update if one arrived, else the baked initial data\n                (function flushInitial() {\n                    var data = (__pending !== undefined) ? __pending : __initial;\n                    if (data === undefined) return;\n                    if (callInit(data)) { __pending = undefined; __initial = undefined; }\n                    else requestAnimationFrame(flushInitial);\n                })();\n                // resize (report content size)\n                function contentHeight() {\n                    // Measure the BODY (content box). documentElement.scrollHeight includes\n                    // the iframe viewport \u2014 which we're driving \u2014 so it would report the\n                    // current frame height, not the content, and never shrink.\n                    var b = document.body;\n                    if (b) return Math.max(b.scrollHeight, b.offsetHeight);\n                    return document.documentElement.scrollHeight;\n                }\n                function postSize() {\n                    try {\n                        parent.postMessage({\n                            __myop: true, type: 'myop:size',\n                            height: contentHeight(),\n                            width: document.documentElement.scrollWidth\n                        }, '*');\n                    } catch (e) {}\n                }\n                // Observe the BODY (reflows with content) \u2014 not documentElement, whose box is\n                // the iframe viewport and would feed back into a resize loop. A MutationObserver\n                // catches content swaps (e.g. innerHTML re-render) that don't change body's box.\n                if (window.ResizeObserver) {\n                    try { var __ro = new ResizeObserver(postSize); if (document.body) __ro.observe(document.body); } catch (e) {}\n                }\n                if (window.MutationObserver && document.body) {\n                    try { new MutationObserver(postSize).observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true }); } catch (e) {}\n                }\n                window.addEventListener('load', postSize);\n                postSize();\n            })();\n        <\/script>");
+  }
   /**
    * Extract the web component script content from HTML
    */
@@ -2662,6 +2828,13 @@ var HostSDK = class {
     __publicField(this, "components2init", []);
     __publicField(this, "components", []);
     __publicField(this, "componentsLoaders", []);
+    // Global render policy (allow/deny/mode gate). A per-call options.renderPolicy
+    // takes precedence over this — see HTMLComponentLoader.resolveRenderMode.
+    __publicField(this, "_renderPolicy");
+    __publicField(this, "setRenderPolicy", (policy) => {
+      this._renderPolicy = policy;
+    });
+    __publicField(this, "getRenderPolicy", () => this._renderPolicy);
     __publicField(this, "initiated", false);
     __publicField(this, "version", myop_sdk_version_default);
     __publicField(this, "type2InstanceCount", {});