@myop/sdk 0.1.43 → 0.1.44

package/dist/bundled-declarations.d.ts

@@ -182,6 +182,7 @@ declare module "@myop/sdk/common" {
         type: "HTMLLoader";
         HTML: string;
         shadowRootMode?: keyof typeof ShadowRootModeType;
+        autoHeight?: boolean;
         height?: string;
         width?: string;
     }
@@ -448,11 +449,11 @@ declare module "@myop/sdk/host/components/myopRefComponent" {
 declare module "@myop/sdk/host/componentCore" {
     import { IMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
     import { Ref } from "@myop/sdk/messages";
-    import { CleanupHandler, IComponentConfig, type IComponentDefinitionConfig, IPropConfig } from "@myop/sdk/common";
+    import { CleanupHandler, IComponentConfig, type IComponentDefinitionConfig, IPropConfig, ISkinConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
     type componentDefinitionProps = IComponentDefinitionConfig['props'];
     export const setDebugStyle: (id: string, type: string, top: number, container: HTMLElement, componentElement: HTMLElement, componentDefinitionConfig: IComponentDefinitionConfig) => CleanupHandler;
-    export const connectProps: <T extends componentDefinitionProps>(component: IMyopComponent, propsConfig: IPropConfig[]) => (Omit<IMyopComponent, "props"> & {
+    export const connectProps: <T extends componentDefinitionProps>(component: IMyopComponent, propsConfig: IPropConfig[], selectedSkin: ISkinConfig) => (Omit<IMyopComponent, "props"> & {
         props: propTypes<T>;
     });
     export const createRefProxy: (target: Ref, component: IMyopComponent) => Ref;
@@ -895,7 +896,7 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         hide(): void;
         show(): void;
         setHeightBasedOnDocumentElement: () => void;
-        observeSizeBasedOnDocumentElement: () => void;
+        observeSizeBasedOnDocumentElement: () => CleanupHandler;
         setSizeBasedOnDocumentElement: () => void;
         setHeightBasedOnScrollHeight: () => void;
         send: (message: BaseMyopMessage) => CleanupHandler;

package/dist/cjs/{_IframeSDK.d40f5d05.js → _IframeSDK.dd7fa267.js}

@@ -684,6 +684,10 @@ var ShadowRootModeType = {
   "none": "none",
   "localFrame": "localFrame"
 };
+var PropConfigBehaviorTypes = {
+  "message": "message",
+  "code": "code"
+};
 var RefBehaviorType = class {
 };
 __publicField(RefBehaviorType, "code", "code");
@@ -1175,7 +1179,22 @@ var setDebugStyle = (id, type, top, container, componentElement, componentDefini
     container.removeChild(topText);
   };
 };
-var connectProps = (component, propsConfig) => {
+var reportError = (propConfig, propName, component) => {
+  if (!propConfig) {
+    console.error(
+      // throw new Error(
+      "Error: Undefined Prop\n\nIt looks like you've tried to use a prop that hasn't been defined.\nPlease check the prop name for any typos or ensure that it is properly defined in the component's prop list.\n\n" + "Prop Name: ".concat(propName, "\n") + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(component.componentDefinition.id, " or consult the developer guide.")
+    );
+    return true;
+  }
+  return false;
+};
+var reportUnsupported = (propConfig, propName, component) => {
+  console.error(
+    "Error: Code Prop Not Supported\n\nCurrently, code props are only supported in local frame components.\n\u26A0\uFE0F This is a work in progress feature \u2014 code props will be supported in upcoming versions.\n\nIn the meantime, you can use message props.\n\n" + "Prop Name: ".concat(propName, "\n") + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(component.componentDefinition.id, " or consult the developer guide.")
+  );
+};
+var connectProps = (component, propsConfig, selectedSkin) => {
   const propsMap = propsConfig.reduce((previousValue, currentValue) => {
     return __spreadProps(__spreadValues({}, previousValue), {
       [currentValue.name]: __spreadValues({}, currentValue)
@@ -1184,6 +1203,20 @@ var connectProps = (component, propsConfig) => {
   const propsHandler = {
     get: (_, prop) => {
       const propConfig = propsMap[prop];
+      if (reportError(propConfig, prop, component)) {
+        return false;
+      }
+      if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
+          const typedLoader = selectedSkin.loader;
+          if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
+            const typedPropBehavior = propConfig.behavior;
+            return component.element.contentWindow[typedPropBehavior.remap || prop];
+          }
+        }
+        reportUnsupported(propConfig, prop, component);
+        return false;
+      }
       if (propConfig.mode === "output") {
         return new Promise((resolve) => {
           const messageParams = [];
@@ -1204,29 +1237,40 @@ var connectProps = (component, propsConfig) => {
     },
     set: (_, prop, value) => {
       const propConfig = propsMap[prop];
-      if (!propConfig) {
-        throw new Error(
-          "Error: Undefined Prop\n\nIt looks like you've tried to use a prop that hasn't been defined.\nPlease check the prop name for any typos or ensure that it is properly defined in the component's prop list.\n\n" + "Prop Name: ".concat(prop, "\n") + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(component.componentDefinition.id, " or consult the developer guide.")
-        );
+      if (reportError(propConfig, prop, component)) {
+        return false;
       }
-      if (propConfig.mode === "input") {
-        if (propConfig.behavior.type === "message") {
-          const messageParams = [];
-          if (propConfig.behavior.ref) {
-            messageParams.push(Ref.create(propConfig.behavior.ref));
+      if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
+          const typedLoader = selectedSkin.loader;
+          if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
+            const typedPropBehavior = propConfig.behavior;
+            component.element.contentWindow[typedPropBehavior.remap || prop] = value;
+            return true;
           }
-          messageParams.push(value);
-          if (propConfig.behavior.params) {
-            messageParams.push(...propConfig.behavior.params);
+        }
+        reportUnsupported(propConfig, prop, component);
+        return false;
+      } else {
+        if (propConfig.mode === "input") {
+          if (propConfig.behavior.type === "message") {
+            const messageParams = [];
+            if (propConfig.behavior.ref) {
+              messageParams.push(Ref.create(propConfig.behavior.ref));
+            }
+            messageParams.push(value);
+            if (propConfig.behavior.params) {
+              messageParams.push(...propConfig.behavior.params);
+            }
+            const messageCtor = messages_exports[propConfig.behavior.message];
+            component.send(new messageCtor(...messageParams));
+            return true;
+          } else {
+            throw new Error(
+              "Error: Unsupported Behavior\n\nThe 'behavior' field provided is not supported.\n" + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "Prop Name: ".concat(prop, "\n") + "Behavior Field: ".concat(propConfig.behavior.type, "\n\n") + "Check the documentation for valid behavior options."
+            );
+            return false;
           }
-          const messageCtor = messages_exports[propConfig.behavior.message];
-          component.send(new messageCtor(...messageParams));
-          return true;
-        } else {
-          throw new Error(
-            "Error: Unsupported Behavior\n\nThe 'behavior' field provided is not supported.\n" + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "Prop Name: ".concat(prop, "\n") + "Behavior Field: ".concat(propConfig.behavior.type, "\n\n") + "Check the documentation for valid behavior options."
-          );
-          return false;
         }
       }
       return false;
@@ -1420,6 +1464,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         this.IframeElement.style.width = "".concat(ret.content.width, "px");
         this.IframeElement.style.height = "".concat(ret.content.height, "px");
       }));
+      return cleanupHandler;
     });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
@@ -1685,7 +1730,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.1.43";
+var myop_sdk_version_default = "0.1.44";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2085,9 +2130,11 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         ), "};\n                        const init = async () => {\n                            const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                            const sdk = new IframeSDK()\n                            sdk.init();\n                        }\n                        init().then();\n              <\/script>"));
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
-        IframeElement.onload = () => {
-          comp.observeSizeBasedOnDocumentElement();
-        };
+        if (loaderConfig.autoHeight) {
+          IframeElement.onload = () => {
+            comp.observeSizeBasedOnDocumentElement();
+          };
+        }
         return comp;
       }
       if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {
@@ -2185,24 +2232,50 @@ var checkMyopOverride = async (componentConfig) => {
     const params = new URLSearchParams(url.search);
     const myopOverride = params.get("myopOverride");
     if (myopOverride) {
-      const [flowId, experimentId] = decompressUUIDs(myopOverride);
-      const flow = await CloudRepository.Main.fetchFlow(flowId);
-      const componentToOverride = flow.components.find((c) => c.type.id === componentConfig.type.id);
-      if (componentToOverride) {
-        if (componentToOverride.instance.skinSelector.type === SkinSelectorTypes.Segmented) {
-          if (componentToOverride.instance.resolvedExperiences) {
-            const resolvedExperience = componentToOverride.instance.resolvedExperiences.find((e) => e.id === experimentId);
-            if ((resolvedExperience == null ? void 0 : resolvedExperience.type) === ExperienceTypes.Segment) {
-              const typedResolvedExperience = resolvedExperience;
-              const typedSkinSelector = componentToOverride.instance.skinSelector;
-              const segment = typedSkinSelector.segments.find((s) => s.segmentId === typedResolvedExperience.segment.id);
-              if (segment) {
-                componentToOverride.instance.skinSelector = segment == null ? void 0 : segment.skinSelector;
+      const [source, ...uuids] = decompressUUIDs(myopOverride);
+      switch (source) {
+        case "component":
+          {
+            const [componentId, skinId] = uuids;
+            const componentToOverride = await CloudRepository.Main.fetchComponent(componentId);
+            if (componentToOverride) {
+              const skin = componentToOverride.type.skins.find((skin2) => skin2.id === skinId);
+              if (skin) {
+                componentToOverride.instance.skinSelector = {
+                  type: SkinSelectorTypes.Dedicated,
+                  skin: {
+                    id: skinId
+                  }
+                };
                 return componentToOverride;
               }
             }
           }
-        }
+          break;
+        //    case 'flow': {
+        default:
+          {
+            const [flowId, experimentId] = decompressUUIDs(myopOverride);
+            const flow = await CloudRepository.Main.fetchFlow(flowId);
+            const componentToOverride = flow.components.find((c) => c.type.id === componentConfig.type.id);
+            if (componentToOverride) {
+              if (componentToOverride.instance.skinSelector.type === SkinSelectorTypes.Segmented) {
+                if (componentToOverride.instance.resolvedExperiences) {
+                  const resolvedExperience = componentToOverride.instance.resolvedExperiences.find((e) => e.id === experimentId);
+                  if ((resolvedExperience == null ? void 0 : resolvedExperience.type) === ExperienceTypes.Segment) {
+                    const typedResolvedExperience = resolvedExperience;
+                    const typedSkinSelector = componentToOverride.instance.skinSelector;
+                    const segment = typedSkinSelector.segments.find((s) => s.segmentId === typedResolvedExperience.segment.id);
+                    if (segment) {
+                      componentToOverride.instance.skinSelector = segment == null ? void 0 : segment.skinSelector;
+                      return componentToOverride;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          break;
       }
     }
   } finally {
@@ -2406,7 +2479,7 @@ var HostSDK = class {
     });
     __publicField(this, "loaderHooks");
     __publicField(this, "loadComponent", async (componentConfig, container, options) => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d;
       if (!container) {
         debugger;
         throw new Error("no container was found for this component");
@@ -2415,13 +2488,13 @@ var HostSDK = class {
       if (overriddenConfig) {
         componentConfig = overriddenConfig;
       }
+      const hooks = __spreadValues(__spreadValues({}, (_a = this.loaderHooks) != null ? _a : {}), (_b = options == null ? void 0 : options.hooks) != null ? _b : {});
       const ref = container;
       if (ref.myop) {
         if (ref.component) {
           componentConfig = __spreadValues({}, componentConfig);
           componentConfig.instance = __spreadValues({}, componentConfig.instance);
-          const hooks2 = __spreadValues(__spreadValues({}, (_a = this.loaderHooks) != null ? _a : {}), (_b = options == null ? void 0 : options.hooks) != null ? _b : {});
-          let selectedSkin2 = await this.runSkinSelector(componentConfig, hooks2);
+          let selectedSkin2 = await this.runSkinSelector(componentConfig, hooks);
           if (!selectedSkin2) {
             throw new Error("runSkinSelector failed to choose skin, check the provided config");
           }
@@ -2444,12 +2517,11 @@ var HostSDK = class {
         }
       }
       container = container;
-      const hooks = __spreadValues(__spreadValues({}, (_d = this.loaderHooks) != null ? _d : {}), (_e = options == null ? void 0 : options.hooks) != null ? _e : {});
       let selectedSkin = await this.runSkinSelector(componentConfig, hooks);
       if (!selectedSkin) {
         throw new Error("runSkinSelector failed to choose skin, check the provided config");
       }
-      if ((_f = options == null ? void 0 : options.hooks) == null ? void 0 : _f.afterSkinSelected) {
+      if ((_d = options == null ? void 0 : options.hooks) == null ? void 0 : _d.afterSkinSelected) {
         selectedSkin = await options.hooks.afterSkinSelected(__spreadValues({}, selectedSkin));
       }
       const componentLoader = this.componentsLoaders.find((loader) => loader.type === selectedSkin.loader.type);
@@ -2466,8 +2538,8 @@ var HostSDK = class {
         return true;
       });
       this.components.push(component);
-      if (options == null ? void 0 : options.connectProps) {
-        component = connectProps(component, componentConfig.type.props);
+      if (!options || options.connectProps !== false) {
+        component = connectProps(component, componentConfig.type.props, selectedSkin);
       }
       try {
         await connectRefs(component, componentConfig, this.components);