@builder.io/sdk-solid 0.7.3 → 0.7.4

package/lib/browser/index.js

@@ -2625,7 +2625,9 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<video>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   function videoProps() {
     return {
@@ -2648,13 +2650,13 @@ function Video(props) {
   }
   function spreadProps() {
     return {
-      ...props.attributes,
       ...videoProps()
     };
   }
   return (() => {
-    const _el$ = _tmpl$13();
-    spread(_el$, mergeProps(spreadProps, {
+    const _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
+    _el$.style.setProperty("position", "relative");
+    spread(_el$2, mergeProps(spreadProps, {
       get preload() {
         return props.preload || "metadata";
       },
@@ -2667,7 +2669,11 @@ function Video(props) {
           "object-position": props.position,
           // Hack to get object fit to work as expected and
           // not have the video overflow
-          "border-radius": 1
+          "z-index": 2,
+          "border-radius": "1px",
+          ...props.aspectRatio ? {
+            position: "absolute"
+          } : null
         };
       },
       get src() {
@@ -2676,7 +2682,62 @@ function Video(props) {
       get poster() {
         return props.posterImage;
       }
-    }), false, false);
+    }), false, true);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return !props.lazyLoad;
+      },
+      get children() {
+        const _el$3 = _tmpl$13();
+        effect(() => setAttribute(_el$3, "src", props.video));
+        return _el$3;
+      }
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
+      },
+      get children() {
+        const _el$4 = _tmpl$23();
+        _el$4.style.setProperty("width", "100%");
+        _el$4.style.setProperty("pointer-events", "none");
+        _el$4.style.setProperty("font-size", "0px");
+        effect(() => props.aspectRatio * 100 + "%" != null ? _el$4.style.setProperty("padding-top", props.aspectRatio * 100 + "%") : _el$4.style.removeProperty("padding-top"));
+        return _el$4;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.builderBlock?.children?.length && props.fitContent;
+      },
+      get children() {
+        const _el$5 = _tmpl$23();
+        _el$5.style.setProperty("display", "flex");
+        _el$5.style.setProperty("flex-direction", "column");
+        _el$5.style.setProperty("align-items", "stretch");
+        insert(_el$5, () => props.children);
+        return _el$5;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.builderBlock?.children?.length && !props.fitContent;
+      },
+      get children() {
+        const _el$6 = _tmpl$23();
+        _el$6.style.setProperty("pointer-events", "none");
+        _el$6.style.setProperty("display", "flex");
+        _el$6.style.setProperty("flex-direction", "column");
+        _el$6.style.setProperty("align-items", "stretch");
+        _el$6.style.setProperty("position", "absolute");
+        _el$6.style.setProperty("top", "0");
+        _el$6.style.setProperty("left", "0");
+        _el$6.style.setProperty("width", "100%");
+        _el$6.style.setProperty("height", "100%");
+        insert(_el$6, () => props.children);
+        return _el$6;
+      }
+    }), null);
     return _el$;
   })();
 }
@@ -2741,13 +2802,19 @@ var serializeComponentInfo = ({
   }), {}))
 });
 
+// src/components/content-variants/inlined-fns.ts
+var UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";
+
 // src/components/content-variants/helpers.ts
+var UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = "builderIoAbTest";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "builderIoRenderContent";
 var getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
   ...variant,
   testVariationId: variant.id,
   id: content?.id
 }));
-var checkShouldRunVariants = ({
+var checkShouldRenderVariants = ({
   canTrack,
   content
 }) => {
@@ -2758,139 +2825,34 @@ var checkShouldRunVariants = ({
     return false;
   if (!canTrack)
     return false;
-  if (TARGET === "vue2" || TARGET === "vue3")
+  if (TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte")
     return true;
   if (isBrowser())
     return false;
   return true;
 };
-function bldrAbTest(contentId, variants, isHydrationTarget2) {
-  function getAndSetVariantId2() {
-    function setCookie2(name, value, days) {
-      let expires = "";
-      if (days) {
-        const date = /* @__PURE__ */ new Date();
-        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
-        expires = "; expires=" + date.toUTCString();
-      }
-      document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
-    }
-    function getCookie2(name) {
-      const nameEQ = name + "=";
-      const ca = document.cookie.split(";");
-      for (let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) === " ")
-          c = c.substring(1, c.length);
-        if (c.indexOf(nameEQ) === 0)
-          return c.substring(nameEQ.length, c.length);
-      }
-      return null;
-    }
-    const cookieName = `builder.tests.${contentId}`;
-    const variantInCookie = getCookie2(cookieName);
-    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
-    if (variantInCookie && availableIDs.includes(variantInCookie)) {
-      return variantInCookie;
-    }
-    let n = 0;
-    const random = Math.random();
-    for (let i = 0; i < variants.length; i++) {
-      const variant = variants[i];
-      const testRatio = variant.testRatio;
-      n += testRatio;
-      if (random < n) {
-        setCookie2(cookieName, variant.id);
-        return variant.id;
-      }
-    }
-    setCookie2(cookieName, contentId);
-    return contentId;
-  }
-  const winningVariantId = getAndSetVariantId2();
-  const styleEl = document.currentScript?.previousElementSibling;
-  if (isHydrationTarget2) {
-    styleEl.remove();
-    const thisScriptEl = document.currentScript;
-    thisScriptEl?.remove();
-  } else {
-    const newStyleStr = variants.concat({
-      id: contentId
-    }).filter((variant) => variant.id !== winningVariantId).map((value) => {
-      return `.variant-${value.id} {  display: none; }
-        `;
-    }).join("");
-    styleEl.innerHTML = newStyleStr;
-  }
-}
-function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
-  if (!navigator.cookieEnabled) {
-    return;
-  }
-  function getCookie2(name) {
-    const nameEQ = name + "=";
-    const ca = document.cookie.split(";");
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === " ")
-        c = c.substring(1, c.length);
-      if (c.indexOf(nameEQ) === 0)
-        return c.substring(nameEQ.length, c.length);
-    }
-    return null;
-  }
-  const cookieName = `builder.tests.${defaultContentId}`;
-  const variantId = getCookie2(cookieName);
-  const parentDiv = document.currentScript?.parentElement;
-  const variantIsDefaultContent = variantContentId === defaultContentId;
-  if (variantId === variantContentId) {
-    if (variantIsDefaultContent) {
-      return;
-    }
-    parentDiv?.removeAttribute("hidden");
-    parentDiv?.removeAttribute("aria-hidden");
-  } else {
-    if (variantIsDefaultContent) {
-      if (isHydrationTarget2) {
-        parentDiv?.remove();
-      } else {
-        parentDiv?.setAttribute("hidden", "true");
-        parentDiv?.setAttribute("aria-hidden", "true");
-      }
-    }
-    return;
-  }
-  return;
-}
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isHydrationTarget = getIsHydrationTarget(TARGET);
-var AB_TEST_FN_NAME = "builderIoAbTest";
-var CONTENT_FN_NAME = "builderIoRenderContent";
-var getScriptString = () => {
-  const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
-  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
-  return `
-  window.${AB_TEST_FN_NAME} = ${fnStr}
-  window.${CONTENT_FN_NAME} = ${fnStr2}
+var getScriptString = () => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
-};
-var getVariantsScriptString = (variants, contentId) => {
-  return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
-};
-var getRenderContentScriptString = ({
+var getUpdateCookieAndStylesScript = (variants, contentId) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+  )`;
+var getUpdateVariantVisibilityScript = ({
   contentId,
   variationId
-}) => {
-  return `
-  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-};
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${variationId}", "${contentId}", ${isHydrationTarget}
+  )`;
 var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
     const _el$ = _tmpl$14();
     effect((_p$) => {
-      const _v$ = props.scriptStr, _v$2 = props.id;
+      const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
       return _p$;
@@ -3383,7 +3345,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.7.3";
+var SDK_VERSION = "0.7.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3757,7 +3719,7 @@ function EnableEditor(props) {
           typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
           spread(_el$, mergeProps({
             get ["class"]() {
-              return props.classNameProp;
+              return `variant-${props.content?.testVariationId || props.content?.id}`;
             }
           }, {}, {
             get key() {
@@ -3910,7 +3872,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal(getRenderContentScriptString({
+  const [scriptStr, setScriptStr] = createSignal(getUpdateVariantVisibilityScript({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     variationId: props.content?.testVariationId,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
@@ -4006,9 +3968,6 @@ function ContentComponent(props) {
         get enrich() {
           return props.enrich;
         },
-        get classNameProp() {
-          return props.classNameProp;
-        },
         get showContent() {
           return props.showContent;
         },
@@ -4065,12 +4024,12 @@ var content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRunVariants({
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(props.canTrack),
     content: props.content
   }));
-  function variantScriptStr() {
-    return getVariantsScriptString(getVariants(props.content).map((value) => ({
+  function updateCookieAndStylesScriptStr() {
+    return getUpdateCookieAndStylesScript(getVariants(props.content).map((value) => ({
       id: value.testVariationId,
       testRatio: value.testRatio
     })), props.content?.id || "");
@@ -4115,7 +4074,7 @@ function ContentVariants(props) {
         }
       }), createComponent(inlined_script_default, {
         get scriptStr() {
-          return variantScriptStr();
+          return updateCookieAndStylesScriptStr();
         }
       }), createComponent(For, {
         get each() {
@@ -4129,7 +4088,6 @@ function ContentVariants(props) {
             },
             content: variant,
             showContent: false,
-            classNameProp: void 0,
             get model() {
               return props.model;
             },
@@ -4171,9 +4129,6 @@ function ContentVariants(props) {
     get content() {
       return defaultContent();
     },
-    get classNameProp() {
-      return `variant-${props.content?.id}`;
-    },
     showContent: true,
     get model() {
       return props.model;