@builder.io/sdk-svelte 0.4.4 → 0.5.0

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

@@ -0,0 +1,98 @@
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
+import ContentComponent from "../content/content.svelte";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
+import InlinedStyles from "../inlined-styles.svelte";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
+import InlinedScript from "../inlined-script.svelte";
+import { TARGET } from "../../constants/target.js";
+export let canTrack;
+export let content;
+export let __isNestedRender;
+export let model;
+export let data;
+export let context;
+export let apiKey;
+export let apiVersion;
+export let customComponents;
+export let locale;
+export let includeRefs;
+export let enrich;
+$: variantScriptStr = () => {
+    return getVariantsScriptString(getVariants(content).map((value) => ({
+        id: value.testVariationId,
+        testRatio: value.testRatio,
+    })), content?.id || "");
+};
+$: hideVariantsStyleString = () => {
+    return getVariants(content)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+        .join("");
+};
+let shouldRenderVariants = checkShouldRunVariants({
+    canTrack: getDefaultCanTrack(canTrack),
+    content: content,
+});
+onMount(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+});
+</script>
+
+{#if !__isNestedRender && TARGET !== "reactNative"}
+  <InlinedScript scriptStr={getScriptString()} />
+{/if}
+
+{#if shouldRenderVariants}
+  <InlinedStyles
+    id={`variants-styles-${content?.id}`}
+    styles={hideVariantsStyleString()}
+  />
+
+  <InlinedScript scriptStr={variantScriptStr()} />
+
+  {#each getVariants(content) as variant (variant.testVariationId)}
+    <ContentComponent
+      content={variant}
+      showContent={false}
+      classNameProp={undefined}
+      {model}
+      {data}
+      {context}
+      {apiKey}
+      {apiVersion}
+      {customComponents}
+      {canTrack}
+      {locale}
+      {includeRefs}
+      {enrich}
+      isSsrAbTest={shouldRenderVariants}
+    />
+  {/each}
+{/if}
+
+<ContentComponent
+  {...{}}
+  content={shouldRenderVariants
+    ? content
+    : handleABTestingSync({
+        item: content,
+        canTrack: getDefaultCanTrack(canTrack),
+      })}
+  classNameProp={`variant-${content?.id}`}
+  showContent={true}
+  {model}
+  {data}
+  {context}
+  {apiKey}
+  {apiVersion}
+  {customComponents}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
+  isSsrAbTest={shouldRenderVariants}
+/>

package/package/components/content-variants/content-variants.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+type VariantsProviderProps = ContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsProps } from "./content-variants.types.js";
+declare const __propDef: {
+    props: {
+        canTrack: VariantsProviderProps["canTrack"];
+        content: VariantsProviderProps["content"];
+        __isNestedRender: VariantsProviderProps["__isNestedRender"];
+        model: VariantsProviderProps["model"];
+        data: VariantsProviderProps["data"];
+        context: VariantsProviderProps["context"];
+        apiKey: VariantsProviderProps["apiKey"];
+        apiVersion: VariantsProviderProps["apiVersion"];
+        customComponents: VariantsProviderProps["customComponents"];
+        locale: VariantsProviderProps["locale"];
+        includeRefs: VariantsProviderProps["includeRefs"];
+        enrich: VariantsProviderProps["enrich"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContentVariantsProps = typeof __propDef.props;
+export type ContentVariantsEvents = typeof __propDef.events;
+export type ContentVariantsSlots = typeof __propDef.slots;
+export default class ContentVariants extends SvelteComponentTyped<ContentVariantsProps, ContentVariantsEvents, ContentVariantsSlots> {
+}
+export {};

package/package/components/content-variants/content-variants.types.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsProps {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+}

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

@@ -0,0 +1,41 @@
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export declare const getVariants: (content: Nullable<BuilderContent>) => {
+    testVariationId: string | undefined;
+    id: string | undefined;
+    data?: {
+        [key: string]: any;
+        title?: string | undefined;
+        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        inputs?: import("../../types/input.js").Input[] | undefined;
+        state?: {
+            [key: string]: any;
+        } | undefined;
+        jsCode?: string | undefined;
+        tsCode?: string | undefined;
+        httpRequests?: {
+            [key: string]: string;
+        } | undefined;
+    } | undefined;
+    name?: string | undefined;
+    testRatio?: number | undefined;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/typescript.js").Nullable<import("../../types/builder-content.js").Breakpoints>;
+    } | undefined;
+}[];
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getScriptString: () => string;
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+    variationId: string;
+    contentId: string;
+}) => string;
+export {};

package/package/components/{render-content-variants → content-variants}/helpers.js

@@ -1,17 +1,32 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {});
-export const checkShouldRunVariants = ({ canTrack, content, }) => {
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
+    ...variant,
+    testVariationId: variant.id,
+    id: content?.id
+}));
+export const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if (isBrowser()) {
+    if (!canTrack)
+        return false;
+    /**
+     * For Vue 2 and Vue 3, 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.
+     */
+    if (TARGET === 'vue2' || TARGET === 'vue3')
+        return true;
+    if (isBrowser())
         return false;
-    }
     return true;
 };
 /**
@@ -27,13 +42,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
                 date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
                 expires = '; expires=' + date.toUTCString();
             }
-            document.cookie =
-                name +
-                    '=' +
-                    (value || '') +
-                    expires +
-                    '; path=/' +
-                    '; Secure; SameSite=None';
+            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
         }
         function getCookie(name) {
             const nameEQ = name + '=';
@@ -49,7 +58,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         }
         const cookieName = `builder.tests.${contentId}`;
         const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        const availableIDs = variants.map(vr => vr.id).concat(contentId);
         /**
          * cookie already exists
          */
@@ -77,26 +86,23 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    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.getElementById(`variants-script-${contentId}`);
+        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) => {
+        const newStyleStr = variants.concat({
+            id: contentId
+        }).filter(variant => variant.id !== winningVariantId).map(value => {
             return `.variant-${value.id} {  display: none; }
         `;
-        })
-            .join('');
-        /* TO-DO: check if this actually updates the style */
+        }).join('');
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -122,8 +128,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    /** get parent div by searching on `builder-content-id` attr */
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = document.currentScript?.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -156,10 +161,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === 'react' ||
-    target === 'reactNative' ||
-    target === 'vue3' ||
-    target === 'vue2';
+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.
@@ -167,18 +169,21 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  *
  * 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 = 'bldrAbTest';
-const CONTENT_FN_NAME = 'bldrCntntScrpt';
-export const getVariantsScriptString = (variants, contentId) => {
+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 `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+export const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

package/package/components/inlined-script.svelte

@@ -0,0 +1,7 @@
+<script context="module"></script>
+
+<script>export let scriptStr;
+export let id;
+</script>
+
+<svelte:element this={"script"} {id}>{@html scriptStr}</svelte:element>

package/package/components/inlined-script.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+interface Props {
+    scriptStr: string;
+    id?: string;
+}
+declare const __propDef: {
+    props: {
+        scriptStr: Props["scriptStr"];
+        id: Props["id"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlinedScriptProps = typeof __propDef.props;
+export type InlinedScriptEvents = typeof __propDef.events;
+export type InlinedScriptSlots = typeof __propDef.slots;
+export default class InlinedScript extends SvelteComponentTyped<InlinedScriptProps, InlinedScriptEvents, InlinedScriptSlots> {
+}
+export {};

package/package/components/inlined-styles.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+interface Props {
+    styles: string;
+    id?: string;
+}
+declare const __propDef: {
+    props: {
+        styles: Props["styles"];
+        id: Props["id"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlinedStylesProps = typeof __propDef.props;
+export type InlinedStylesEvents = typeof __propDef.events;
+export type InlinedStylesSlots = typeof __propDef.slots;
+export default class InlinedStyles extends SvelteComponentTyped<InlinedStylesProps, InlinedStylesEvents, InlinedStylesSlots> {
+}
+export {};

package/package/constants/builder-registered-components.js

@@ -24,16 +24,37 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
-export const getDefaultRegisteredComponents = () => [
-    { component: Button, ...buttonComponentInfo },
-    { component: Columns, ...columnsComponentInfo },
-    { component: customCode, ...customCodeInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: Image, ...imageComponentInfo },
-    { component: Img, ...imgComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Text, ...textComponentInfo },
-    { component: Video, ...videoComponentInfo },
-];
+export const getDefaultRegisteredComponents = () => [{
+        component: Button,
+        ...buttonComponentInfo
+    }, {
+        component: Columns,
+        ...columnsComponentInfo
+    }, {
+        component: customCode,
+        ...customCodeInfo
+    }, {
+        component: embed,
+        ...embedComponentInfo
+    }, {
+        component: Fragment,
+        ...fragmentComponentInfo
+    }, {
+        component: Image,
+        ...imageComponentInfo
+    }, {
+        component: Img,
+        ...imgComponentInfo
+    }, {
+        component: Section,
+        ...sectionComponentInfo
+    }, {
+        component: Symbol,
+        ...symbolComponentInfo
+    }, {
+        component: Text,
+        ...textComponentInfo
+    }, {
+        component: Video,
+        ...videoComponentInfo
+    }];

package/package/constants/device-sizes.js

@@ -1,20 +1,20 @@
-import { fastClone } from '../functions/fast-clone';
+import { fastClone } from '../functions/fast-clone.js';
 const SIZES = {
     small: {
         min: 320,
         default: 321,
-        max: 640,
+        max: 640
     },
     medium: {
         min: 641,
         default: 642,
-        max: 991,
+        max: 991
     },
     large: {
         min: 990,
         default: 991,
-        max: 1200,
-    },
+        max: 1200
+    }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 export const getSizesForBreakpoints = ({ small, medium }) => {
@@ -26,19 +26,20 @@ export const getSizesForBreakpoints = ({ small, medium }) => {
     newSizes.small = {
         max: small,
         min: smallMin,
-        default: smallMin + 1,
+        default: smallMin + 1
     };
     const mediumMin = newSizes.small.max + 1;
     newSizes.medium = {
         max: medium,
         min: mediumMin,
-        default: mediumMin + 1,
+        default: mediumMin + 1
     };
     const largeMin = newSizes.medium.max + 1;
     newSizes.large = {
         max: 2000,
+        // TODO: decide upper limit
         min: largeMin,
-        default: largeMin + 1,
+        default: largeMin + 1
     };
     return newSizes;
 };

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.4";
+export declare const SDK_VERSION = "0.5.0";

package/package/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.4";
+export const SDK_VERSION = "0.5.0";

package/package/constants/target.d.ts

@@ -1,2 +1,2 @@
 /** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
-export declare const TARGET = "svelte";
+export declare const TARGET: import("../types/targets").Target;

package/package/context/builder.context.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
         rootState: {};
         apiKey: null;
         apiVersion: undefined;
-        registeredComponents: {};
+        componentInfos: {};
         inheritedStyles: {};
     }>;
     key: symbol;

package/package/context/builder.context.js

@@ -9,7 +9,7 @@ export default {
         rootState: {},
         apiKey: null,
         apiVersion: undefined,
-        registeredComponents: {},
+        componentInfos: {},
         inheritedStyles: {},
     }),
     key,

package/package/context/types.d.ts

@@ -30,6 +30,6 @@ export interface BuilderContextInterface {
     localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
-    registeredComponents: RegisteredComponents;
+    componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
 }

package/package/functions/apply-patch-with-mutation.d.ts

@@ -0,0 +1,10 @@
+export type Patch = {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+};
+export declare const applyPatchWithMinimalMutationChain: <T extends object>(obj: T, patch: {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+}, preserveRoot?: boolean) => T;

package/package/functions/apply-patch-with-mutation.js

@@ -0,0 +1,54 @@
+export const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const { path, op, value } = patch;
+    const pathArr = path.split(/\//);
+    if (pathArr[0] === '') {
+        pathArr.shift();
+    }
+    const newObj = preserveRoot ? obj : {
+        ...obj
+    };
+    let objPart = newObj;
+    for (let i = 0; i < pathArr.length; i++) {
+        const isLast = i === pathArr.length - 1;
+        const property = pathArr[i];
+        if (isLast) {
+            if (op === 'replace') {
+                objPart[property] = value;
+            }
+            else if (op === 'add') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    if (property === '-') {
+                        objPart.push(value);
+                    }
+                    else {
+                        objPart.splice(index, 0, value);
+                    }
+                }
+                else {
+                    objPart[property] = value;
+                }
+            }
+            else if (op === 'remove') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    objPart.splice(index, 1);
+                }
+                else {
+                    delete objPart[property];
+                }
+            }
+        }
+        else {
+            const nextProperty = pathArr[i + 1];
+            const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+            objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : {
+                ...newPart
+            };
+        }
+    }
+    return newObj;
+};