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

package/dist/bundled-declarations.d.ts

@@ -683,7 +683,7 @@ declare module "@myop/sdk/host/componentCore" {
     };
 }
 declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
-    import { BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
+    import { AutoSizeOptions, BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
     import { BaseMyopMessage } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig, ISkinConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
@@ -703,6 +703,29 @@ declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
         private _ctaQueue;
         private _ctaListener;
         constructor(componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, customElement: HTMLElement, tagName: string, options?: loaderOptions);
+        private _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.
+         */
+        observeAutoSize: (options?: AutoSizeOptions) => CleanupHandler;
         cleanupInspect: CleanupHandler;
         inspect(): CleanupHandler;
         hide(): void;
@@ -2108,7 +2131,25 @@ declare module "@myop/sdk/host/loaders/HTMLComponentLoader" {
     export class HTMLComponentLoader extends BaseMyopLoader {
         type: "HTMLLoader";
         /**
-         * 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.
          */
         private isMyopWebComponent;
         /**

package/dist/cjs/{_IframeSDK.c2e3efb9.js → _IframeSDK.3a412cd4.js}

@@ -1188,6 +1188,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", () => {
     });
     /**
@@ -2189,7 +2250,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.4.0-beta.3";
+var myop_sdk_version_default = "0.4.0-beta.4";
 
 // src/helpers/deliveryStore.ts
 var DB_NAME = "myop-delivery";
@@ -3351,14 +3412,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();
@@ -3413,10 +3474,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.
@@ -3511,7 +3591,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,
@@ -3520,7 +3599,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"));