@myop/sdk 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/cjs/{_hostSDK.38fcc5b4.js → _hostSDK.e9b70e44.js}

@@ -607,6 +607,7 @@ var BaseMyopComponent = class {
     setTimeout(() => {
       if (!this.isInitiated && this._whenInitiatedReject && !this._markedForDisposed) {
         this._whenInitiatedReject("timeout_".concat(timeout, " ").concat(this.id));
+        this.dispose();
       }
     }, timeout);
     this.initiated().then(() => {
@@ -690,19 +691,27 @@ var BaseMyopComponent = class {
       };
     }
   }
+  /** Runs the 'onDispose' handlers once. hostSDK registers the one that unregisters
+   *  this component, so it has to run on EVERY dispose path, initiated or not. */
+  runDisposeHandlers() {
+    const onDisposeHandlers = this.messageHandlers["onDispose"];
+    if (onDisposeHandlers) {
+      onDisposeHandlers.forEach((disposeHandler) => {
+        disposeHandler(null);
+      });
+    }
+  }
   dispose() {
     this.markedForDisposed = true;
     if (!this.isInitiated) {
+      this.runDisposeHandlers();
+      this.messageHandlers = {};
+      this.id += "_disposed";
       return;
     }
     console.log("disposing component", this.id);
     this.send(new DisposeMessage());
-    const onDisposeHandlers = this.messageHandlers["onDispose"];
-    if (onDisposeHandlers) {
-      onDisposeHandlers.forEach((disposeHandler) => {
-        disposeHandler(null);
-      });
-    }
+    this.runDisposeHandlers();
     this.messageHandlers = {};
     this.id += "_disposed";
     this.isInitiated = false;
@@ -1036,6 +1045,67 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
         this._ctaQueue.push({ action: detail.action, payload: detail.payload });
       }
     });
+    __publicField(this, "_autoSizeOptions");
+    /**
+     * Data-out for size — the extracted counterpart of the iframe implementation.
+     *
+     * THIS EXISTED ONLY ON MyopIframeComponent, and that was invisible for as long as
+     * minification was sending every v2 component down the iframe path. Restoring v2
+     * detection moves them to this class, and `@myop/react` drives both through one
+     * wrapper: in content mode it hides its loader from the FIRST onSizeChange, so a
+     * component whose class has no observeAutoSize leaves a React host on a loader
+     * forever. Pic-Time's sizeMeta is width:100% with no height, which is exactly content
+     * mode. Caught by v2-data-contract D8 (API parity).
+     *
+     * It REPORTS rather than imposes. An iframe has no intrinsic size and must be
+     * measured inside and then set from outside; a custom element sizes itself from its
+     * own content, so the honest thing is to measure it and tell the host, and let the
+     * host decide. React then uses width:100% and the measured height.
+     *
+     * The one thing it does impose is `display: block` when the element computes to
+     * `inline`, which is the default for a custom element and measures as zero height no
+     * matter what it contains. The iframe path forces width:100% for the same reason —
+     * without it the first measurement is 0 and the host sizes the component to nothing.
+     */
+    __publicField(this, "observeAutoSize", (options) => {
+      this._autoSizeOptions = options;
+      const el = this.customElement;
+      try {
+        if (getComputedStyle(el).display === "inline") el.style.display = "block";
+      } catch (e) {
+      }
+      const parse = (v) => {
+        if (v === void 0) return void 0;
+        if (typeof v === "number") return v;
+        const n = parseFloat(v);
+        return isNaN(n) ? void 0 : n;
+      };
+      const clamp = (v, min, max) => min !== void 0 && v < min ? min : max !== void 0 && v > max ? max : v;
+      const report = () => {
+        var _a;
+        const opts = this._autoSizeOptions;
+        const rect = el.getBoundingClientRect();
+        const autoHeight = (opts == null ? void 0 : opts.explicitHeight) === void 0;
+        (_a = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _a.call(opts, {
+          width: rect.width,
+          height: autoHeight ? clamp(rect.height, parse(opts == null ? void 0 : opts.minHeight), parse(opts == null ? void 0 : opts.maxHeight)) : rect.height,
+          autoSizingWidth: false,
+          // a web component fills its container's width
+          autoSizingHeight: autoHeight
+        });
+      };
+      let ro;
+      try {
+        ro = new ResizeObserver(() => report());
+        ro.observe(el);
+      } catch (e) {
+      }
+      report();
+      return () => {
+        ro == null ? void 0 : ro.disconnect();
+        this._autoSizeOptions = void 0;
+      };
+    });
     __publicField(this, "cleanupInspect", () => {
     });
     /**
@@ -1363,8 +1433,13 @@ var createRefComponent = async (ref, componentConfig, components, options) => {
   return new Promise(async (resolve, reject) => {
     const refComponent = new MyopRefComponent(componentConfig.type, component, options);
     components.push(refComponent);
+    const unregister = () => {
+      const at = components.indexOf(refComponent);
+      if (at !== -1) components.splice(at, 1);
+    };
     await component.initiated();
     const timeout = setTimeout(() => {
+      unregister();
       reject("timeout");
     }, 5e3);
     component.send(new CreateRefComponentMessage(
@@ -1377,11 +1452,13 @@ var createRefComponent = async (ref, componentConfig, components, options) => {
       async (message) => {
         clearTimeout(timeout);
         if (message.failed) {
+          unregister();
           reject("CreateRefComponentMessage failed");
           return;
         }
         const implementationComponent = components.find((c) => c.id == refComponent.id);
-        if (implementationComponent !== refComponent) {
+        if (implementationComponent && implementationComponent !== refComponent) {
+          unregister();
           component.refs[ref.refConfig.name] = implementationComponent;
           resolve(implementationComponent);
           return;
@@ -1745,7 +1822,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       return cleanupHandler;
     });
     __publicField(this, "dispose", () => {
-      var _a;
+      var _a, _b;
       (_a = this._bridgeSizeCleanup) == null ? void 0 : _a.call(this);
       if (this._autoSizeCleanup) {
         this._autoSizeCleanup();
@@ -1758,7 +1835,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       if (this.cleanupInspect)
         this.cleanupInspect();
       super.dispose();
-      this.IframeElement.parentNode.removeChild(this.IframeElement);
+      (_b = this.IframeElement.parentNode) == null ? void 0 : _b.removeChild(this.IframeElement);
     });
     this.element = this.IframeElement;
     this._lastData = options == null ? void 0 : options.data;
@@ -2030,7 +2107,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.4.0-beta.2";
+var myop_sdk_version_default = "0.4.0-beta.4";
 
 // src/helpers/deliveryStore.ts
 var DB_NAME = "myop-delivery";
@@ -3214,14 +3291,14 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         if (!isolate) {
           doc.writeln("".concat(sdkScript).concat(initScript));
         }
-        if (!isolate && (options == null ? void 0 : options.data) !== void 0) {
+        if (!isolate && (options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null) {
           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";
+          const escapedData = (options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null ? JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script") : "undefined";
           doc.writeln(this.buildIsolationBridge(escapedData));
         }
         doc.close();
@@ -3276,10 +3353,29 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
     });
   }
   /**
-   * Detect if HTML is a Myop Web Component (starts with marker comment)
+   * Detect if HTML is a Myop Web Component.
+   *
+   * THE MARKER COMMENT ALONE IS NOT A SAFE SIGNAL, BECAUSE MINIFIERS DELETE COMMENTS.
+   *
+   * This used to be `startsWith(MYOP_WEB_COMPONENT_MARKER)` and nothing else. The
+   * delivery lane minifies with `removeComments: true` (myop-server derive.ts MIN_CFG),
+   * so the stored `min` artifact of every v2 web component loses its leading
+   * `<!-- myop-web-component -->`. Detection then returned false, the component fell
+   * back to plain iframe rendering, and the whole authored document was shown --
+   * including the v2 authoring wrapper, so Pic-Time's production dashboard displayed the
+   * preview chrome ("Web Component v2", a tag-name badge reading `loading...`, SIZE /
+   * OVERFLOW / BG controls) instead of their component. Reported 2026-10-18; the served
+   * HTML measured 328,071 bytes against 951,130 at origin, with zero `<!--` left in it.
+   *
+   * The script id is the signal that survives, and it is the one `extractWebComponentScript`
+   * already depends on: if that element is present, extraction works, so detection
+   * should agree. Checked with a regex rather than DOMParser -- this runs for every
+   * HTML component, and parsing a 300 KB document to answer a yes/no question is not
+   * worth it.
    */
   isMyopWebComponent(html) {
-    return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
+    if (html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER)) return true;
+    return new RegExp("<script[^>]*\\sid=[\"']?".concat(MYOP_WEB_COMPONENT_SCRIPT_ID, "[\"'\\s>]"), "i").test(html);
   }
   /**
    * Resolve how this component should render, applying the host render policy.
@@ -3374,7 +3470,6 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
     if (!container.querySelector('[id^="myop-comp-"]')) {
       container.innerHTML = "";
     }
-    this.appendChild(container, element, options);
     const component = new MyopExtractedWebComponent(
       componentDefinition,
       skin,
@@ -3383,7 +3478,8 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
       tagName,
       options
     );
-    if ((options == null ? void 0 : options.data) !== void 0) {
+    this.appendChild(container, element, options);
+    if ((options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null) {
       component.initWithData(options.data);
     }
     console.log("[MyopWebComponent] Loaded <".concat(tagName, "> into container"));
@@ -3508,7 +3604,12 @@ var HostSDK = class {
         }
         const myopMessage = event.data;
         if (myopMessage.messageType === MyopMessages.InitRequest) {
-          this.components2init.forEach((component2) => {
+          const fromAskingFrame = this.components2init.filter((component2) => {
+            const element = component2.element;
+            return (element == null ? void 0 : element.nodeName) === "IFRAME" && element.contentWindow === event.source;
+          });
+          const targets = fromAskingFrame.length ? fromAskingFrame : this.components2init;
+          targets.forEach((component2) => {
             component2.send(new InitMessage(component2.id));
           });
           return;
@@ -3725,7 +3826,6 @@ var HostSDK = class {
       let component = await componentLoader.load(componentConfig.type, selectedSkin, container, options);
       if (!component.isInitiated) {
         this.components2init.push(component);
-        component.send(new InitMessage(component.id));
       }
       component.bind("onDispose", () => {
         this.components = this.components.filter((c) => c !== component);
@@ -3733,6 +3833,9 @@ var HostSDK = class {
         return true;
       });
       this.components.push(component);
+      if (!component.isInitiated) {
+        component.send(new InitMessage(component.id));
+      }
       if (!options || options.connectProps !== false) {
         component = connectProps(component, componentConfig.type.props, selectedSkin);
       }