@builder.io/sdk-svelte 0.5.9 → 0.6.0

package/lib/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/constants/sdk-version.d.ts

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

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

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

package/lib/node/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/node/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/node/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/node/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/node/context/components.context.d.ts

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

package/lib/node/context/components.context.js

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

package/lib/node/context/types.d.ts

@@ -0,0 +1,35 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
+export type RegisteredComponent = ComponentInfo & {
+    component: any;
+};
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+export type BuilderRenderState = Record<string, unknown>;
+export type BuilderRenderContext = Record<string, unknown>;
+export interface BuilderContextInterface {
+    content: Nullable<BuilderContent>;
+    context: BuilderRenderContext;
+    /**
+     * The state of the application.
+     *
+     * NOTE: see `localState` below to understand how it is different from `rootState`.
+     */
+    rootState: BuilderRenderState;
+    /**
+     * Some frameworks have a `setState` function which needs to be invoked to notify
+     * the framework of state change. (other frameworks don't in which case it is `undefined')
+     */
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+    /**
+     * The local state of the current component. This is different from `rootState` in that
+     * it can be a child state created by a repeater containing local state.
+     * The `rootState` is where all of the state mutations are actually stored.
+     */
+    localState: BuilderRenderState | undefined;
+    apiKey: string | null;
+    apiVersion: ApiVersion | undefined;
+    componentInfos: Dictionary<ComponentInfo>;
+    inheritedStyles: Record<string, unknown>;
+}

package/lib/node/context/types.js

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

package/lib/node/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/lib/node/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;
+};

package/lib/node/functions/camel-to-kebab-case.d.ts

@@ -0,0 +1 @@
+export declare const camelToKebabCase: (string: string) => string;

package/lib/node/functions/camel-to-kebab-case.js

@@ -0,0 +1 @@
+export const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/lib/node/functions/deopt.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export declare function deoptSignal<T>(value: T): T;

package/lib/node/functions/deopt.js

@@ -0,0 +1,6 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export function deoptSignal(value) {
+    return value;
+}

package/lib/node/functions/evaluate/browser-runtime/browser.d.ts

@@ -0,0 +1,4 @@
+import type { BuilderRenderState } from '../../../context/types.js';
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInBrowser: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

package/lib/node/functions/evaluate/browser-runtime/browser.js

@@ -0,0 +1,31 @@
+import { getFunctionArguments } from '../helpers.js';
+export const runInBrowser = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
+    const functionArgs = getFunctionArguments({
+        builder,
+        context,
+        event,
+        state: flattenState(rootState, localState, rootSetState)
+    });
+    return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+export function flattenState(rootState, localState, rootSetState) {
+    if (rootState === localState) {
+        throw new Error('rootState === localState');
+    }
+    return new Proxy(rootState, {
+        get: (_, prop) => {
+            if (localState && prop in localState) {
+                return localState[prop];
+            }
+            return rootState[prop];
+        },
+        set: (_, prop, value) => {
+            if (localState && prop in localState) {
+                throw new Error('Writing to local state is not allowed as it is read-only.');
+            }
+            rootState[prop] = value;
+            rootSetState?.(rootState);
+            return true;
+        }
+    });
+}

package/lib/node/functions/evaluate/browser-runtime/index.d.ts

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js';

package/lib/node/functions/evaluate/browser-runtime/index.js

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js';

package/lib/node/functions/evaluate/edge-runtime/acorn-interpreter.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Class;
+export default _default;