@builder.io/sdk-svelte 0.7.3 → 0.7.5

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/block/block.svelte

@@ -48,7 +48,7 @@
     });
   };
   $: processedBlock = () => {
-    return repeatItem()
+    return block.repeat?.collection
       ? block
       : getProcessedBlock({
           block: block,
@@ -69,6 +69,9 @@
     if ("show" in processedBlock()) {
       return processedBlock().show;
     }
+    if (block.repeat?.collection && !repeatItem?.()?.length) {
+      return false;
+    }
     return true;
   };
   $: childrenWithoutParentComponent = () => {

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.helpers.ts

@@ -8,24 +8,22 @@ export const getContextStateInitialValue = ({
   locale
 }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
   const defaultValues: BuilderRenderState = {};
+  const initialState = content?.data?.state || {};
 
   // set default values for content state inputs
   content?.data?.inputs?.forEach(input => {
-    if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+    if (input.name && input.defaultValue !== undefined) {
       defaultValues[input.name] = input.defaultValue;
     }
   });
-  const stateToUse: BuilderRenderState = {
-    ...content?.data?.state,
+  return {
+    ...defaultValues,
+    ...initialState,
     ...data,
     ...(locale ? {
       locale
     } : {})
   };
-  return {
-    ...defaultValues,
-    ...stateToUse
-  };
 };
 export const getContentInitialValue = ({
   content,

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}

package/src/components/content-variants/helpers.ts

@@ -3,12 +3,22 @@ import { isBrowser } from '../../functions/is-browser.js';
 import type { Nullable } from '../../helpers/nullable.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Target } from '../../types/targets.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: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
   ...variant,
   testVariationId: variant.id,
   id: content?.id
 }));
-export const checkShouldRunVariants = ({
+export const checkShouldRenderVariants = ({
   canTrack,
   content
 }: {
@@ -25,13 +35,14 @@ export const checkShouldRunVariants = ({
   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') return true;
+  if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte') return true;
   if (isBrowser()) return false;
   return true;
 };
@@ -39,169 +50,22 @@ type VariantData = {
   id: string;
   testRatio?: number;
 };
-
-/**
- * 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: string, variants: VariantData[], isHydrationTarget: boolean) {
-  function getAndSetVariantId(): string {
-    function setCookie(name: string, value: string, days?: number) {
-      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: string) {
-      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 as HTMLStyleElement);
-
-  /**
-   * 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: string, defaultContentId: string, isHydrationTarget: boolean) {
-  if (!navigator.cookieEnabled) {
-    return;
-  }
-  function getCookie(name: string) {
-    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) => 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: VariantData[], contentId: string) => {
-  return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
-};
-export const getRenderContentScriptString = ({
+export const getUpdateCookieAndStylesScript = (variants: VariantData[], contentId: string) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+  )`;
+export const getUpdateVariantVisibilityScript = ({
   contentId,
   variationId
 }: {
   variationId: string;
   contentId: string;
-}) => {
-  return `
-  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-}
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${variationId}", "${contentId}", ${isHydrationTarget}
+  )`

package/src/components/content-variants/inlined-fns.ts

@@ -0,0 +1,22 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+
+type VariantData = {
+  id: string;
+  testRatio?: number;
+};
+
+/**
+ * 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/src/components/inlined-script.svelte

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

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.7.3"
+export const SDK_VERSION = "0.7.5"