@myop/sdk 0.3.14 → 0.3.16

package/dist/bundled-declarations.d.ts

@@ -571,6 +571,51 @@ declare module "@myop/sdk/host/componentCore" {
         [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => Promise<R> : T[K];
     };
 }
+declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
+    import { 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";
+    /**
+     * Component wrapper for Myop Web Components that are extracted from HTML
+     * and run directly on the host document (not in an iframe).
+     *
+     * These components use the native Web Components API (Custom Elements + Shadow DOM)
+     * and communicate via direct method calls and CustomEvents instead of postMessage.
+     */
+    export class MyopExtractedWebComponent extends BaseMyopComponent {
+        container: HTMLElement;
+        private customElement;
+        private tagName;
+        private ctaCleanup?;
+        private _ctaHandler?;
+        private _ctaQueue;
+        constructor(componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, customElement: HTMLElement, tagName: string, options?: loaderOptions);
+        cleanupInspect: CleanupHandler;
+        inspect(): CleanupHandler;
+        hide(): void;
+        show(): void;
+        /**
+         * Initialize the component with data by calling myop_init_interface directly
+         */
+        initWithData(data: unknown): void;
+        /**
+         * Get current data from the component
+         */
+        getData(): unknown;
+        /**
+         * Set CTA handler - unified API with iframe components.
+         * Called via props.myop_cta_handler = handler
+         */
+        setCtaHandler(handler: (action: string, payload: unknown) => void): void;
+        /**
+         * For compatibility with message-based components.
+         * Web components don't use postMessage, so this is a no-op for most messages.
+         */
+        send: (message: BaseMyopMessage<any>) => CleanupHandler;
+        dispose: () => void;
+    }
+}
 declare module "@myop/sdk/host/myopLoader" {
     export const LOADER_GRADIENT = "linear-gradient(135deg, #FF8651 0%, #FFBEA8 50%, #A397F5 100%)";
     export const FALLBACK_GRADIENT = "linear-gradient(135deg, #9CA3AF 0%, #D1D5DB 50%, #E5E7EB 100%)";
@@ -657,6 +702,7 @@ declare module "@myop/sdk/host" {
     export { hostSDK } from "@myop/sdk/host/hostSDK";
     export type { loaderOptions } from "@myop/sdk/host/hostSDK";
     export * from "@myop/sdk/host/components/IMyopComponent";
+    export * from "@myop/sdk/host/components/myopExtractedWebComponent";
     export * from "@myop/sdk/host/loaders/IMyopLoader";
     export * from "@myop/sdk/host/componentCore";
     export * from "@myop/sdk/host/myopLoader";
@@ -1531,13 +1577,30 @@ declare module "@myop/sdk/host/embeddedSDK" {
 }
 declare module "@myop/sdk/host/loaders/HTMLComponentLoader" {
     import { MyopWebComponent } from "@myop/sdk/host/components/myopWebcomponent";
+    import { MyopExtractedWebComponent } from "@myop/sdk/host/components/myopExtractedWebComponent";
     import { BaseMyopLoader } from "@myop/sdk/host/loaders/IMyopLoader";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
     import { IComponentDefinitionConfig, ISkinConfig } from "@myop/sdk/common";
     import { MyopIframeComponent } from "@myop/sdk/host/components/myopIframeComponent";
     export class HTMLComponentLoader extends BaseMyopLoader {
         type: "HTMLLoader";
-        load: (componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, options?: loaderOptions) => Promise<MyopIframeComponent | MyopWebComponent>;
+        /**
+         * Detect if HTML is a Myop Web Component (starts with marker comment)
+         */
+        private isMyopWebComponent;
+        /**
+         * Extract the web component script content from HTML
+         */
+        private extractWebComponentScript;
+        /**
+         * Execute the web component script on the host document
+         */
+        private executeWebComponentScript;
+        /**
+         * Load a Myop Web Component (extracted and run on host document)
+         */
+        private loadExtractedWebComponent;
+        load: (componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, options?: loaderOptions) => Promise<MyopExtractedWebComponent | MyopIframeComponent | MyopWebComponent>;
     }
 }
 declare module "@myop/sdk/helpers/applyStylesheet" {

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

@@ -1156,6 +1156,114 @@ var MyopRefComponent = class extends BaseMyopComponent {
   }
 };
 
+// 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, "_ctaHandler");
+    __publicField(this, "_ctaQueue", []);
+    __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 CTA handler - unified API with iframe components.
+   * 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];
+      this._ctaQueue = [];
+      queue.forEach((item) => {
+        if (!this.markedForDisposed) {
+          handler(item.action, item.payload);
+        }
+      });
+    }
+    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);
+    };
+  }
+};
+
 // src/host/componentCore.ts
 var createDebugTitle = (text, top, componentDefinitionConfig) => {
   const titleEl = document.createElement("a");
@@ -1208,6 +1316,19 @@ var connectProps = (component, propsConfig, selectedSkin) => {
         return false;
       }
       if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (component instanceof MyopExtractedWebComponent) {
+          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) {
@@ -1242,6 +1363,18 @@ var connectProps = (component, propsConfig, selectedSkin) => {
         return false;
       }
       if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (component instanceof MyopExtractedWebComponent) {
+          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) {
@@ -1818,7 +1951,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.14";
+var myop_sdk_version_default = "0.3.16";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2148,6 +2281,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 () => {
@@ -2186,6 +2322,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) {
@@ -2270,6 +2409,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