@builder.io/sdk-svelte 0.5.9 → 0.6.0

package/lib/edge/components/content/index.js

@@ -0,0 +1 @@
+export { default } from './content.svelte';

package/lib/edge/components/content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

package/lib/edge/components/content/wrap-component-ref.js

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

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

@@ -0,0 +1,104 @@
+<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 = undefined;
+export let content = undefined;
+export let __isNestedRender = undefined;
+export let model = undefined;
+export let data = undefined;
+export let context = undefined;
+export let apiKey;
+export let apiVersion = undefined;
+export let customComponents = undefined;
+export let locale = undefined;
+export let includeRefs = undefined;
+export let enrich = undefined;
+$: 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("");
+};
+$: defaultContent = () => {
+    return shouldRenderVariants
+        ? {
+            ...content,
+            testVariationId: content?.id,
+        }
+        : handleABTestingSync({
+            item: content,
+            canTrack: getDefaultCanTrack(canTrack),
+        });
+};
+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={defaultContent()}
+  classNameProp={`variant-${content?.id}`}
+  showContent={true}
+  {model}
+  {data}
+  {context}
+  {apiKey}
+  {apiVersion}
+  {customComponents}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
+  isSsrAbTest={shouldRenderVariants}
+/>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+type VariantsProviderProps = ContentVariantsPrps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsPrps } 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 SvelteComponent<ContentVariantsProps, ContentVariantsEvents, ContentVariantsSlots> {
+}
+export {};

package/lib/edge/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 ContentVariantsPrps {
+    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/lib/edge/components/content-variants/content-variants.types.js

@@ -0,0 +1 @@
+export {};

package/lib/edge/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/lib/edge/components/content-variants/helpers.js

@@ -0,0 +1,189 @@
+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;
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
+        return false;
+    if (!hasVariants)
+        return false;
+    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;
+};
+/**
+ * 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 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})`;
+};

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

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

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } 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 SvelteComponent<InlinedScriptProps, InlinedScriptEvents, InlinedScriptSlots> {
+}
+export {};

package/lib/edge/components/inlined-styles.svelte

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

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } 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 SvelteComponent<InlinedStylesProps, InlinedStylesEvents, InlinedStylesSlots> {
+}
+export {};

package/lib/edge/constants/builder-registered-components.d.ts

@@ -0,0 +1,6 @@
+import type { RegisteredComponent } from '../context/types.js';
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export declare const getDefaultRegisteredComponents: () => RegisteredComponent[];

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

@@ -0,0 +1,60 @@
+import { default as Button } from '../blocks/button/button.svelte';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns.svelte';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment.svelte';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image.svelte';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol.svelte';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text.svelte';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.svelte';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.svelte';
+import { default as Img } from '../blocks/img/img.svelte';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+/**
+ * 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
+    }];

package/lib/edge/constants/device-sizes.d.ts

@@ -0,0 +1,13 @@
+export type SizeName = 'large' | 'medium' | 'small';
+interface Size {
+    min: number;
+    default: number;
+    max: number;
+}
+export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
+interface Breakpoints {
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export {};

package/lib/edge/constants/device-sizes.js

@@ -0,0 +1,45 @@
+import { fastClone } from '../functions/fast-clone.js';
+const SIZES = {
+    small: {
+        min: 320,
+        default: 321,
+        max: 640
+    },
+    medium: {
+        min: 641,
+        default: 642,
+        max: 991
+    },
+    large: {
+        min: 990,
+        default: 991,
+        max: 1200
+    }
+};
+export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+export const getSizesForBreakpoints = ({ small, medium }) => {
+    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!small || !medium) {
+        return newSizes;
+    }
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2000,
+        // TODO: decide upper limit
+        min: largeMin,
+        default: largeMin + 1
+    };
+    return newSizes;
+};

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

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.6.0";

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

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.6.0";

package/lib/edge/constants/target.d.ts

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

package/lib/edge/constants/target.js

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'svelte';

package/lib/edge/context/builder.context.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+declare const _default: {
+    Builder: import("svelte/store").Writable<{
+        content: null;
+        context: {};
+        localState: undefined;
+        rootSetState(): void;
+        rootState: {};
+        apiKey: null;
+        apiVersion: undefined;
+        componentInfos: {};
+        inheritedStyles: {};
+    }>;
+    key: symbol;
+};
+export default _default;

package/lib/edge/context/builder.context.js

@@ -0,0 +1,16 @@
+const key = Symbol();
+import { writable } from "svelte/store";
+export default {
+    Builder: writable({
+        content: null,
+        context: {},
+        localState: undefined,
+        rootSetState() { },
+        rootState: {},
+        apiKey: null,
+        apiVersion: undefined,
+        componentInfos: {},
+        inheritedStyles: {},
+    }),
+    key,
+};

package/lib/edge/context/components.context.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    Components: {
+        registeredComponents: {};
+    };
+    key: symbol;
+};
+export default _default;

package/lib/edge/context/components.context.js

@@ -0,0 +1,5 @@
+const key = Symbol();
+export default {
+    Components: { registeredComponents: {} },
+    key,
+};