@builder.io/sdk-solid 0.7.2 → 0.7.4

package/lib/browser/dev.jsx

@@ -1375,10 +1375,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount4, on as on3, createEffect as createEffect3, createSignal as createSignal13 } from "solid-js";
+import { onMount as onMount4, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show11, For as For5, onMount as onMount3, createSignal as createSignal12 } from "solid-js";
+import { Show as Show12, For as For5, onMount as onMount3, createSignal as createSignal13 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1572,7 +1572,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show10, createSignal as createSignal11 } from "solid-js";
+import { Show as Show11, createSignal as createSignal12 } from "solid-js";
 
 // src/blocks/button/component-info.ts
 var componentInfo = {
@@ -2347,6 +2347,7 @@ var componentInfo11 = {
 };
 
 // src/blocks/video/video.tsx
+import { Show as Show9 } from "solid-js";
 function Video(props) {
   function videoProps() {
     return {
@@ -2369,26 +2370,66 @@ function Video(props) {
   }
   function spreadProps() {
     return {
-      ...props.attributes,
       ...videoProps()
     };
   }
-  return <video
-    {...spreadProps()}
-    preload={props.preload || "metadata"}
+  return <div
     style={{
-      width: "100%",
-      height: "100%",
-      ...props.attributes?.style,
-      "object-fit": props.fit,
-      "object-position": props.position,
-      // Hack to get object fit to work as expected and
-      // not have the video overflow
-      "border-radius": 1
+      position: "relative"
     }}
-    src={props.video || "no-src"}
-    poster={props.posterImage}
-  />;
+  >
+    <video
+      class="builder-video"
+      {...spreadProps()}
+      preload={props.preload || "metadata"}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        "object-fit": props.fit,
+        "object-position": props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        "z-index": 2,
+        "border-radius": "1px",
+        ...props.aspectRatio ? {
+          position: "absolute"
+        } : null
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    ><Show9 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show9></video>
+    <Show9
+      when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
+    ><div
+      style={{
+        width: "100%",
+        "padding-top": props.aspectRatio * 100 + "%",
+        "pointer-events": "none",
+        "font-size": "0px"
+      }}
+    /></Show9>
+    <Show9 when={props.builderBlock?.children?.length && props.fitContent}><div
+      style={{
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "stretch"
+      }}
+    >{props.children}</div></Show9>
+    <Show9 when={props.builderBlock?.children?.length && !props.fitContent}><div
+      style={{
+        "pointer-events": "none",
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "stretch",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%"
+      }}
+    >{props.children}</div></Show9>
+  </div>;
 }
 var video_default = Video;
 
@@ -2451,13 +2492,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
 }) => {
@@ -2468,142 +2515,37 @@ 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}
+  )`;
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
-  return <script innerHTML={props.scriptStr} id={props.id} />;
+  return <script innerHTML={props.scriptStr} id={props.id || ""} />;
 }
 var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
-import { Show as Show9, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal9 } from "solid-js";
+import { Show as Show10, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
 
 // src/helpers/preview-lru-cache/get.ts
 function getPreviewContent(_searchParams) {
@@ -3090,7 +3032,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.7.2";
+var SDK_VERSION = "0.7.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3225,11 +3167,11 @@ var setupBrowserForEditing = (options = {}) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [forceReRenderCount, setForceReRenderCount] = createSignal9(0);
-  const [lastUpdated, setLastUpdated] = createSignal9(0);
-  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal9(false);
-  const [httpReqsData, setHttpReqsData] = createSignal9({});
-  const [clicked, setClicked] = createSignal9(false);
+  const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
+  const [lastUpdated, setLastUpdated] = createSignal10(0);
+  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal10(false);
+  const [httpReqsData, setHttpReqsData] = createSignal10({});
+  const [clicked, setClicked] = createSignal10(false);
   function mergeNewContent(newContent) {
     const newContentValue = {
       ...props.builderContextSignal.content,
@@ -3472,8 +3414,8 @@ function EnableEditor(props) {
     emitStateUpdate();
   }
   createEffect2(on2(() => [props.builderContextSignal.rootState], onUpdateFn_4));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show9 when={props.builderContextSignal.content}><div
-    class={props.classNameProp}
+  return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><div
+    class={`variant-${props.content?.testVariationId || props.content?.id}`}
     {...{}}
     key={forceReRenderCount()}
     ref={elementRef}
@@ -3485,12 +3427,12 @@ function EnableEditor(props) {
       hidden: true,
       "aria-hidden": true
     }}
-  >{props.children}</div></Show9></builder_context_default.Provider>;
+  >{props.children}</div></Show10></builder_context_default.Provider>;
 }
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal10 } from "solid-js";
+import { createSignal as createSignal11 } from "solid-js";
 
 // src/components/content/components/styles.helpers.ts
 var getCssFromFont = (font) => {
@@ -3549,7 +3491,7 @@ var getCss = ({
 
 // src/components/content/components/styles.tsx
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal10(
+  const [injectedStyles, setInjectedStyles] = createSignal11(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -3617,15 +3559,15 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal11(
-    getRenderContentScriptString({
+  const [scriptStr, setScriptStr] = createSignal12(
+    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
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal11(
+  const [registeredComponents, setRegisteredComponents] = createSignal12(
     [
       ...getDefaultRegisteredComponents(),
       // While this `components` object is deprecated, we must maintain support for it.
@@ -3646,7 +3588,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal11({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal12({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -3698,19 +3640,18 @@ function ContentComponent(props) {
     locale={props.locale}
     includeRefs={props.includeRefs}
     enrich={props.enrich}
-    classNameProp={props.classNameProp}
     showContent={props.showContent}
     builderContextSignal={builderContextSignal()}
     {...{
       setBuilderContextSignal
     }}
   >
-    <Show10 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show10>
-    <Show10 when={TARGET !== "reactNative"}><Styles_default
+    <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
+    <Show11 when={TARGET !== "reactNative"}><Styles_default
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show10>
+    /></Show11>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
@@ -3722,14 +3663,14 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal12(
-    checkShouldRunVariants({
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal13(
+    checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  function variantScriptStr() {
-    return getVariantsScriptString(
+  function updateCookieAndStylesScriptStr() {
+    return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
         testRatio: value.testRatio
@@ -3753,20 +3694,21 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show11 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show11>
-    <Show11 when={shouldRenderVariants()}>
+    <Show12 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
+    <Show12 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id={`variants-styles-${props.content?.id}`}
         styles={hideVariantsStyleString()}
       />
-      <Inlined_script_default scriptStr={variantScriptStr()} />
+      <Inlined_script_default
+        scriptStr={updateCookieAndStylesScriptStr()}
+      />
       <For5 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           key={variant.testVariationId}
           content={variant}
           showContent={false}
-          classNameProp={void 0}
           model={props.model}
           data={props.data}
           context={props.context}
@@ -3780,11 +3722,10 @@ function ContentVariants(props) {
           isSsrAbTest={shouldRenderVariants()}
         />;
       }}</For5>
-    </Show11>
+    </Show12>
     <Content_default
       {...{}}
       content={defaultContent()}
-      classNameProp={`variant-${props.content?.id}`}
       showContent={true}
       model={props.model}
       data={props.data}
@@ -3828,7 +3769,7 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal13(props.symbol?.content);
+  const [contentToUse, setContentToUse] = createSignal14(props.symbol?.content);
   function className() {
     return [
       ...[props.attributes.class],