@builder.io/sdk-svelte 0.7.2 → 0.7.4

package/lib/node/components/content-variants/content-variants.svelte

@@ -7,7 +7,7 @@ import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import ContentComponent from "../content/content.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
-import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
+import { checkShouldRenderVariants, getScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers.js";
 export let canTrack = undefined;
 export let content = undefined;
 export let __isNestedRender = undefined;
@@ -20,8 +20,8 @@ export let customComponents = undefined;
 export let locale = undefined;
 export let includeRefs = undefined;
 export let enrich = undefined;
-$: variantScriptStr = () => {
-    return getVariantsScriptString(getVariants(content).map((value) => ({
+$: updateCookieAndStylesScriptStr = () => {
+    return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
         testRatio: value.testRatio,
     })), content?.id || "");
@@ -42,7 +42,7 @@ $: defaultContent = () => {
             canTrack: getDefaultCanTrack(canTrack),
         });
 };
-let shouldRenderVariants = checkShouldRunVariants({
+let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
@@ -50,6 +50,7 @@ onMount(() => {
     /**
      * We unmount the non-winning variants post-hydration in Vue.
      */
+    shouldRenderVariants = false;
 });
 </script>
 
@@ -63,13 +64,12 @@ onMount(() => {
     styles={hideVariantsStyleString()}
   />
 
-  <InlinedScript scriptStr={variantScriptStr()} />
+  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
       content={variant}
       showContent={false}
-      classNameProp={undefined}
       {model}
       {data}
       {context}
@@ -88,7 +88,6 @@ onMount(() => {
 <ContentComponent
   {...{}}
   content={defaultContent()}
-  classNameProp={`variant-${content?.id}`}
   showContent={true}
   {model}
   {data}

package/lib/node/components/content-variants/helpers.d.ts

@@ -24,7 +24,7 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
         breakpoints?: import("../../types/typescript.js").Nullable<import("../../types/builder-content.js").Breakpoints>;
     } | undefined;
 }[];
-export declare const checkShouldRunVariants: ({ canTrack, content }: {
+export declare const checkShouldRenderVariants: ({ canTrack, content }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
 }) => boolean;
@@ -33,8 +33,8 @@ type VariantData = {
     testRatio?: number;
 };
 export declare const getScriptString: () => string;
-export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+export declare const getUpdateCookieAndStylesScript: (variants: VariantData[], contentId: string) => string;
+export declare const getUpdateVariantVisibilityScript: ({ contentId, variationId }: {
     variationId: string;
     contentId: string;
 }) => string;

package/lib/node/components/content-variants/helpers.js

@@ -1,11 +1,20 @@
 import { TARGET } from '../../constants/target.js';
 import { isBrowser } from '../../functions/is-browser.js';
+import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } from './inlined-fns.js';
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
 export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,
     id: content?.id
 }));
-export const checkShouldRunVariants = ({ canTrack, content }) => {
+export const checkShouldRenderVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
     /**
      * We cannot SSR in React-Native.
@@ -17,173 +26,29 @@ export const checkShouldRunVariants = ({ canTrack, content }) => {
     if (!canTrack)
         return false;
     /**
-     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+     * For Vue and Svelte, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
      * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
      * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
      *
-     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     * NOTE: For Vue: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     * This isn't necessary, just a nice to have.
      */
-    if (TARGET === 'vue2' || TARGET === 'vue3')
+    if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte')
         return true;
     if (isBrowser())
         return false;
     return true;
 };
-/**
- * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
- * Make sure to write multi-line comments only.
- */
-function bldrAbTest(contentId, variants, isHydrationTarget) {
-    function getAndSetVariantId() {
-        function setCookie(name, value, days) {
-            let expires = '';
-            if (days) {
-                const date = new Date();
-                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-                expires = '; expires=' + date.toUTCString();
-            }
-            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
-        }
-        function getCookie(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 = getCookie(cookieName);
-        const availableIDs = variants.map(vr => vr.id).concat(contentId);
-        /**
-         * cookie already exists
-         */
-        if (variantInCookie && availableIDs.includes(variantInCookie)) {
-            return variantInCookie;
-        }
-        /**
-         * no cookie exists, find variant
-         */
-        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) {
-                setCookie(cookieName, variant.id);
-                return variant.id;
-            }
-        }
-        /**
-         * no variant found, assign default content
-         */
-        setCookie(cookieName, contentId);
-        return contentId;
-    }
-    const winningVariantId = getAndSetVariantId();
-    const styleEl = document.currentScript?.previousElementSibling;
-    /**
-     * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
-     */
-    if (isHydrationTarget) {
-        styleEl.remove();
-        const thisScriptEl = document.currentScript;
-        thisScriptEl?.remove();
-    }
-    else {
-        /* update styles to hide all variants except the winning variant */
-        const newStyleStr = variants.concat({
-            id: contentId
-        }).filter(variant => variant.id !== winningVariantId).map(value => {
-            return `.variant-${value.id} {  display: none; }
-        `;
-        }).join('');
-        styleEl.innerHTML = newStyleStr;
-    }
-}
-/**
- * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
- * Make sure to write multi-line comments only.
- */
-function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
-    if (!navigator.cookieEnabled) {
-        return;
-    }
-    function getCookie(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 = getCookie(cookieName);
-    const parentDiv = document.currentScript?.parentElement;
-    const variantIsDefaultContent = variantContentId === defaultContentId;
-    if (variantId === variantContentId) {
-        if (variantIsDefaultContent) {
-            /** the default content is already visible, no need to do anything */
-            return;
-        }
-        /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
-        parentDiv?.removeAttribute('hidden');
-        parentDiv?.removeAttribute('aria-hidden');
-    }
-    else {
-        if (variantIsDefaultContent) {
-            if (isHydrationTarget) {
-                /**
-                 * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
-                 * So we completely remove that node.
-                 */
-                parentDiv?.remove();
-            }
-            else {
-                /** this is not the winning variant, add `hidden` attr */
-                parentDiv?.setAttribute('hidden', 'true');
-                parentDiv?.setAttribute('aria-hidden', 'true');
-            }
-        }
-        /** This is not the winning variant, and it's not the default content.
-         * There's no need to hide it, because it's already hidden.
-         */
-        return;
-    }
-    return;
-}
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-/**
- * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
- * Some bundlers will minify the fn name, etc.
- *
- * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
- */
-const AB_TEST_FN_NAME = 'builderIoAbTest';
-const CONTENT_FN_NAME = 'builderIoRenderContent';
-export const 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}
+export const getScriptString = () => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
-};
-export const getVariantsScriptString = (variants, contentId) => {
-    return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
-};
-export const getRenderContentScriptString = ({ contentId, variationId }) => {
-    return `
-  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-};
+export const getUpdateCookieAndStylesScript = (variants, contentId) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+  )`;
+export const getUpdateVariantVisibilityScript = ({ contentId, variationId }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${variationId}", "${contentId}", ${isHydrationTarget}
+  )`;

package/lib/node/components/content-variants/inlined-fns.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+export declare const 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}";
+export declare const 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}";

package/lib/node/components/content-variants/inlined-fns.js

@@ -0,0 +1,14 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+export const 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}";
+export const 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}";

package/lib/node/components/inlined-script.svelte

@@ -4,4 +4,4 @@
 export let id = undefined;
 </script>
 
-<svelte:element this={"script"} {id}>{@html scriptStr}</svelte:element>
+{@html `<script  id=${id || ""}>${scriptStr}</script>`}

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.7.2";
+export declare const SDK_VERSION = "0.7.4";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.7.2";
+export const SDK_VERSION = "0.7.4";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "type": "module",
   "files": [
     "lib",
@@ -38,6 +38,7 @@
   "types": "./lib/browser/index.d.ts",
   "scripts": {
     "release": "npm publish",
+    "build-inline-fns": "yarn g:build-inline-fns",
     "prepare": "SDK_ENV=browser svelte-kit sync",
     "build": "nx run-many -p @builder.io/sdk-svelte -t build:node build:edge build:browser --parallel=false",
     "build:node": "SDK_ENV=node svelte-package -i src/ -o lib/node",
@@ -66,6 +67,7 @@
     "targets": {
       "prepare": {
         "dependsOn": [
+          "build-inline-fns",
           "^build:svelte",
           "^build"
         ],
@@ -73,8 +75,14 @@
           "{projectRoot}/.svelte-kit"
         ]
       },
+      "build-inline-fns": {
+        "dependsOn": [
+          "^build:svelte"
+        ]
+      },
       "build": {
         "dependsOn": [
+          "build-inline-fns",
           "^build:svelte",
           "^build",
           "prepare"

package/src/blocks/video/video.svelte

@@ -24,21 +24,30 @@
       | "bottom right";
     posterImage?: string;
     lazyLoad?: boolean;
+    children?: any;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
   }
 </script>
 
 <script lang="ts">
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
   export let autoPlay: VideoProps["autoPlay"] = undefined;
   export let muted: VideoProps["muted"] = undefined;
   export let controls: VideoProps["controls"] = undefined;
   export let loop: VideoProps["loop"] = undefined;
   export let playsInline: VideoProps["playsInline"] = undefined;
-  export let attributes: VideoProps["attributes"] = undefined;
   export let preload: VideoProps["preload"] = undefined;
+  export let attributes: VideoProps["attributes"] = undefined;
   export let fit: VideoProps["fit"] = undefined;
   export let position: VideoProps["position"] = undefined;
+  export let aspectRatio: VideoProps["aspectRatio"] = undefined;
   export let video: VideoProps["video"] = undefined;
   export let posterImage: VideoProps["posterImage"] = undefined;
+  export let lazyLoad: VideoProps["lazyLoad"] = undefined;
+  export let fitContent: VideoProps["fitContent"] = undefined;
+  export let builderBlock: VideoProps["builderBlock"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -81,25 +90,82 @@
   };
   $: spreadProps = () => {
     return {
-      ...attributes,
       ...videoProps(),
     };
   };
 </script>
 
-<video
+<div
   use:mitosis_styling={{
-    width: "100%",
-    height: "100%",
-    ...attributes?.style,
-    objectFit: fit,
-    objectPosition: position,
-    // Hack to get object fit to work as expected and
-    // not have the video overflow
-    borderRadius: 1,
+    position: "relative",
   }}
-  {...spreadProps()}
-  preload={preload || "metadata"}
-  src={video || "no-src"}
-  poster={posterImage}
-/>
+>
+  <video
+    use:mitosis_styling={{
+      width: "100%",
+      height: "100%",
+      ...attributes?.style,
+      objectFit: fit,
+      objectPosition: position,
+      // Hack to get object fit to work as expected and
+      // not have the video overflow
+      zIndex: 2,
+      borderRadius: "1px",
+      ...(aspectRatio
+        ? {
+            position: "absolute",
+          }
+        : null),
+    }}
+    class="builder-video"
+    {...spreadProps()}
+    preload={preload || "metadata"}
+    src={video || "no-src"}
+    poster={posterImage}
+  >
+    {#if !lazyLoad}
+      <source type="video/mp4" src={video} />
+    {/if}
+  </video>
+
+  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
+    <div
+      use:mitosis_styling={{
+        width: "100%",
+        paddingTop: aspectRatio * 100 + "%",
+        pointerEvents: "none",
+        fontSize: "0px",
+      }}
+    />
+  {/if}
+
+  {#if builderBlock?.children?.length && fitContent}
+    <div
+      use:mitosis_styling={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+      }}
+    >
+      <slot />
+    </div>
+  {/if}
+
+  {#if builderBlock?.children?.length && !fitContent}
+    <div
+      use:mitosis_styling={{
+        pointerEvents: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <slot />
+    </div>
+  {/if}
+</div>

package/src/components/content/components/enable-editor.svelte

@@ -49,7 +49,6 @@
   export let enrich: BuilderEditorProps["enrich"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
-  export let classNameProp: BuilderEditorProps["classNameProp"];
 
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {
@@ -362,7 +361,7 @@
           hidden: true,
           "aria-hidden": true,
         }}
-    class={classNameProp}
+    class={`variant-${content?.testVariationId || content?.id}`}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
     }}

package/src/components/content/content.svelte

@@ -17,7 +17,7 @@
   import type { ComponentInfo } from "../../types/components.js";
   import type { Dictionary } from "../../types/typescript.js";
   import Blocks from "../blocks/blocks.svelte";
-  import { getRenderContentScriptString } from "../content-variants/helpers.js";
+  import { getUpdateVariantVisibilityScript } from "../content-variants/helpers.js";
   import InlinedScript from "../inlined-script.svelte";
   import EnableEditor from "./components/enable-editor.svelte";
   import ContentStyles from "./components/styles.svelte";
@@ -39,7 +39,6 @@
   export let canTrack: ContentProps["canTrack"] = undefined;
   export let includeRefs: ContentProps["includeRefs"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
-  export let classNameProp: ContentProps["classNameProp"];
   export let showContent: ContentProps["showContent"];
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
 
@@ -47,7 +46,7 @@
     $builderContextSignal.rootState = newRootState;
   }
 
-  let scriptStr = getRenderContentScriptString({
+  let scriptStr = getUpdateVariantVisibilityScript({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     variationId: content?.testVariationId!,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
@@ -120,7 +119,6 @@
   {locale}
   {includeRefs}
   {enrich}
-  {classNameProp}
   {showContent}
   {builderContextSignal}
   {...{}}

package/src/components/content/content.types.ts

@@ -2,10 +2,6 @@ import type { BuilderRenderState } from '../../context/types.js';
 import type { EnforcePartials } from '../../types/enforced-partials.js';
 import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
 interface InternalRenderProps {
-  /**
-   * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
-   */
-  classNameProp: string | undefined;
   showContent: boolean;
   isSsrAbTest: boolean;
 }

package/src/components/content-variants/content-variants.svelte

@@ -18,10 +18,10 @@
   import InlinedStyles from "../inlined-styles.svelte";
   import type { ContentVariantsPrps } from "./content-variants.types.js";
   import {
-    checkShouldRunVariants,
+    checkShouldRenderVariants,
     getScriptString,
+    getUpdateCookieAndStylesScript,
     getVariants,
-    getVariantsScriptString,
   } from "./helpers.js";
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
@@ -39,8 +39,8 @@
   export let includeRefs: VariantsProviderProps["includeRefs"] = undefined;
   export let enrich: VariantsProviderProps["enrich"] = undefined;
 
-  $: variantScriptStr = () => {
-    return getVariantsScriptString(
+  $: updateCookieAndStylesScriptStr = () => {
+    return getUpdateCookieAndStylesScript(
       getVariants(content).map((value) => ({
         id: value.testVariationId!,
         testRatio: value.testRatio,
@@ -65,7 +65,7 @@
         });
   };
 
-  let shouldRenderVariants = checkShouldRunVariants({
+  let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
   });
@@ -74,6 +74,7 @@
     /**
      * We unmount the non-winning variants post-hydration in Vue.
      */
+    shouldRenderVariants = false;
   });
 </script>
 
@@ -87,13 +88,12 @@
     styles={hideVariantsStyleString()}
   />
 
-  <InlinedScript scriptStr={variantScriptStr()} />
+  <InlinedScript scriptStr={updateCookieAndStylesScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
     <ContentComponent
       content={variant}
       showContent={false}
-      classNameProp={undefined}
       {model}
       {data}
       {context}
@@ -112,7 +112,6 @@
 <ContentComponent
   {...{}}
   content={defaultContent()}
-  classNameProp={`variant-${content?.id}`}
   showContent={true}
   {model}
   {data}