@myop/sdk 0.3.13 → 0.3.15

package/dist/cjs/{_hostSDK.f8d320df.js → _hostSDK.0fb0e40a.js}

@@ -1675,7 +1675,93 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.13";
+var myop_sdk_version_default = "0.3.15";
+
+// src/host/components/myopExtractedWebComponent.ts
+var MyopExtractedWebComponent = class extends BaseMyopComponent {
+  constructor(componentDefinition, skin, container, customElement, tagName, options) {
+    super(componentDefinition, container, options);
+    this.container = container;
+    this.customElement = customElement;
+    this.tagName = tagName;
+    __publicField(this, "ctaCleanup");
+    __publicField(this, "cleanupInspect", () => {
+    });
+    /**
+     * For compatibility with message-based components.
+     * Web components don't use postMessage, so this is a no-op for most messages.
+     */
+    __publicField(this, "send", (message) => {
+      const cleanupHandler = super.send(message);
+      console.debug("[MyopExtractedWebComponent] send() called - web components use direct API instead", message);
+      return cleanupHandler;
+    });
+    __publicField(this, "dispose", () => {
+      var _a;
+      if (this.ctaCleanup) {
+        this.ctaCleanup();
+      }
+      super.dispose();
+      (_a = this.customElement.parentNode) == null ? void 0 : _a.removeChild(this.customElement);
+    });
+    this.element = customElement;
+    this.setInitiated();
+  }
+  inspect() {
+    this.cleanupInspect = setDebugStyle(this.id, "MyopExtractedWebComponent", 0, this.container, this.customElement, this.componentDefinition);
+    return this.cleanupInspect;
+  }
+  hide() {
+    this.customElement.style.opacity = "0";
+    this.customElement.style.position = "absolute";
+    this.customElement.style.pointerEvents = "none";
+    this.customElement.style.visibility = "hidden";
+    this.customElement.style.height = "0";
+    this.customElement.style.width = "0";
+  }
+  show() {
+    this.customElement.style.opacity = "1";
+    this.customElement.style.position = "unset";
+    this.customElement.style.pointerEvents = "all";
+    this.customElement.style.visibility = "visible";
+    this.customElement.style.height = "";
+    this.customElement.style.width = "";
+  }
+  /**
+   * Initialize the component with data by calling myop_init_interface directly
+   */
+  initWithData(data) {
+    if (typeof this.customElement.myop_init_interface === "function") {
+      this.customElement.myop_init_interface(data);
+    }
+  }
+  /**
+   * Get current data from the component
+   */
+  getData() {
+    if (typeof this.customElement.myop_init_interface === "function") {
+      return this.customElement.myop_init_interface();
+    }
+    return void 0;
+  }
+  /**
+   * Set up CTA handler to listen for myop-cta events
+   */
+  onCta(handler) {
+    const listener = (e) => {
+      const customEvent = e;
+      if (customEvent.detail && customEvent.detail.action) {
+        handler(customEvent.detail.action, customEvent.detail.payload);
+      }
+    };
+    this.customElement.addEventListener("myop-cta", listener);
+    const cleanup = () => {
+      this.customElement.removeEventListener("myop-cta", listener);
+    };
+    this.ctaCleanup = cleanup;
+    return cleanup;
+  }
+};
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2027,6 +2113,9 @@ var EMBEDDED_SDK_CONTENT = "";
 var HAS_EMBEDDED_SDK = false;
 
 // src/host/loaders/HTMLComponentLoader.ts
+var MYOP_WEB_COMPONENT_MARKER = "<!-- myop-web-component -->";
+var MYOP_WEB_COMPONENT_SCRIPT_ID = "myop-web-component";
+var extractedWebComponentScripts = /* @__PURE__ */ new Set();
 var seen2 = [];
 var sdk;
 var getInitiatedSdk = async () => {
@@ -2065,6 +2154,9 @@ 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)) {
+        return this.loadExtractedWebComponent(componentDefinition, skin, container, loaderConfig.HTML, options);
+      }
       let domId = "myop-comp-".concat(uuidv4());
       let element;
       if (loaderConfig.shadowRootMode === ShadowRootModeType.localFrame) {
@@ -2149,6 +2241,83 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
       return new MyopWebComponent(componentDefinition, skin, container, element, options);
     });
   }
+  /**
+   * Detect if HTML is a Myop Web Component (starts with marker comment)
+   */
+  isMyopWebComponent(html) {
+    return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
+  }
+  /**
+   * Extract the web component script content from HTML
+   */
+  extractWebComponentScript(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const script = doc.getElementById(MYOP_WEB_COMPONENT_SCRIPT_ID);
+    return (script == null ? void 0 : script.textContent) || null;
+  }
+  /**
+   * Execute the web component script on the host document
+   */
+  executeWebComponentScript(scriptContent, scriptId) {
+    if (extractedWebComponentScripts.has(scriptId)) {
+      console.log("[MyopWebComponent] Script already executed for ".concat(scriptId, ", skipping"));
+      return;
+    }
+    const script = document.createElement("script");
+    script.textContent = scriptContent;
+    script.id = "myop-extracted-".concat(scriptId);
+    document.head.appendChild(script);
+    extractedWebComponentScripts.add(scriptId);
+    console.log("[MyopWebComponent] Executed web component script: ".concat(scriptId));
+  }
+  /**
+   * Load a Myop Web Component (extracted and run on host document)
+   */
+  async loadExtractedWebComponent(componentDefinition, skin, container, html, options) {
+    const scriptContent = this.extractWebComponentScript(html);
+    if (!scriptContent) {
+      throw new Error('[MyopWebComponent] No <script id="myop-web-component"> found in HTML');
+    }
+    const scriptId = "".concat(componentDefinition.id, "-").concat(skin.id);
+    const previousTagName = window.__MYOP_TAG_NAME__;
+    this.executeWebComponentScript(scriptContent, scriptId);
+    const tagName = window.__MYOP_TAG_NAME__;
+    if (!tagName) {
+      throw new Error("[MyopWebComponent] Script did not set window.__MYOP_TAG_NAME__");
+    }
+    if (previousTagName && previousTagName !== tagName) {
+      console.warn("[MyopWebComponent] __MYOP_TAG_NAME__ changed from ".concat(previousTagName, " to ").concat(tagName));
+    }
+    const domId = "myop-comp-".concat(uuidv4());
+    const element = document.createElement(tagName);
+    element.id = domId;
+    if (options == null ? void 0 : options.hidden) {
+      element.style.opacity = "0";
+      element.style.position = "absolute";
+      element.style.height = "0";
+      element.style.width = "0";
+      element.style.pointerEvents = "none";
+      element.style.visibility = "hidden";
+    }
+    if (!container.querySelector('[id^="myop-comp-"]')) {
+      container.innerHTML = "";
+    }
+    this.appendChild(container, element, options);
+    const component = new MyopExtractedWebComponent(
+      componentDefinition,
+      skin,
+      container,
+      element,
+      tagName,
+      options
+    );
+    if ((options == null ? void 0 : options.data) !== void 0) {
+      component.initWithData(options.data);
+    }
+    console.log("[MyopWebComponent] Loaded <".concat(tagName, "> into container"));
+    return component;
+  }
 };
 
 // src/helpers/CloudRepository.ts