@builder.io/sdk-svelte 0.4.5 → 0.5.1

package/package/blocks/util.js

@@ -1,13 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const serializeFn = (fnValue) => {
-    const fnStr = fnValue.toString().trim();
-    // we need to account for a few different fn syntaxes:
-    // 1. `function name(args) => {code}`
-    // 2. `name(args) => {code}`
-    // 3. `(args) => {}`
-    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
-    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
-};

package/package/components/render-block/render-block.helpers.d.ts

@@ -1,12 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types';
-import type { BuilderBlock } from '../../types/builder-block';
-import type { RepeatData } from './types';
-export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
-export declare const getComponent: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => import("../../context/types").RegisteredComponent | null | undefined;
-export declare const getRepeatItemData: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => RepeatData[] | undefined;

package/package/components/render-block/render-block.svelte

@@ -1,152 +0,0 @@
-<script context="module"></script>
-
-<script>import { writable } from "svelte/store";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.svelte";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.svelte";
-import { TARGET } from "../../constants/target.js";
-import "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.svelte";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-        update(attrs = {}) {
-            const attrKeys = Object.keys(attrs);
-            attrKeys.map(teardown);
-            attrKeys.map(setup);
-        },
-        destroy() {
-            attrKeys.map(teardown);
-        },
-    };
-};
-export let block;
-export let context;
-$: repeatItem = () => {
-    return getRepeatItemData({
-        block: block,
-        context: $context,
-    });
-};
-$: useBlock = () => {
-    return repeatItem()
-        ? block
-        : getProcessedBlock({
-            block: block,
-            localState: $context.localState,
-            rootState: $context.rootState,
-            rootSetState: $context.rootSetState,
-            context: $context.context,
-            shouldEvaluateBindings: true,
-        });
-};
-$: canShowBlock = () => {
-    if ("hide" in useBlock()) {
-        return !useBlock().hide;
-    }
-    if ("show" in useBlock()) {
-        return useBlock().show;
-    }
-    return true;
-};
-$: actions = () => {
-    return getBlockActions({
-        block: useBlock(),
-        rootState: $context.rootState,
-        rootSetState: $context.rootSetState,
-        localState: $context.localState,
-        context: $context.context,
-    });
-};
-$: attributes = () => {
-    const blockProperties = getBlockProperties(useBlock());
-    return {
-        ...blockProperties,
-        ...(TARGET === "reactNative"
-            ? {
-                style: getReactNativeBlockStyles({
-                    block: useBlock(),
-                    context: $context,
-                    blockStyles: blockProperties.style,
-                }),
-            }
-            : {}),
-    };
-};
-$: childrenWithoutParentComponent = () => {
-    /**
-     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-     * we render them outside of `componentRef`.
-     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
-     * blocks, and the children will be repeated within those blocks.
-     */
-    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
-    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
-};
-$: renderComponentProps = () => {
-    return {
-        blockChildren: useBlock().children ?? [],
-        componentRef: component?.component,
-        componentOptions: {
-            ...getBlockComponentOptions(useBlock()),
-            /**
-             * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-             * they are provided to the component itself directly.
-             */
-            ...(!component?.noWrap
-                ? {}
-                : {
-                    attributes: {
-                        ...attributes(),
-                        ...actions(),
-                    },
-                }),
-        },
-        context: childrenContext,
-    };
-};
-let component = getComponent({
-    block: block,
-    context: $context,
-});
-let Tag = block.tagName || "div";
-let childrenContext = writable($context);
-</script>
-
-{#if canShowBlock()}
-  {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(Tag)}
-      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()} />
-    {/if}
-
-    {#if !isEmptyHtmlElement(Tag) && repeatItem()}
-      {#each repeatItem() as data, index (index)}
-        <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
-      {/each}
-    {/if}
-
-    {#if !isEmptyHtmlElement(Tag) && !repeatItem()}
-      <svelte:element this={Tag} {...attributes()} use:setAttrs={actions()}>
-        <RenderComponent {...renderComponentProps()} />
-
-        {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-          <svelte:self block={child} context={childrenContext} />
-        {/each}
-
-        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-          <BlockStyles block={child} context={$childrenContext} />
-        {/each}
-      </svelte:element>
-    {/if}
-  {:else}
-    <RenderComponent {...renderComponentProps()} />
-  {/if}
-{/if}

package/package/components/render-block/render-block.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export type RenderBlockProps = {
-    block: BuilderBlock;
-    context: Writable<BuilderContextInterface>;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { Writable } from "svelte/store";
-declare const __propDef: {
-    props: {
-        block: RenderBlockProps["block"];
-        context: RenderBlockProps["context"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenderBlockProps = typeof __propDef.props;
-export type RenderBlockEvents = typeof __propDef.events;
-export type RenderBlockSlots = typeof __propDef.slots;
-export default class RenderBlock extends SvelteComponentTyped<RenderBlockProps, RenderBlockEvents, RenderBlockSlots> {
-}
-export {};

package/package/components/render-block/render-component.svelte

@@ -1,21 +0,0 @@
-<script context="module"></script>
-
-<script>import BlockStyles from "./block-styles.svelte";
-import RenderBlock from "./render-block.svelte";
-export let componentRef;
-export let componentOptions;
-export let blockChildren;
-export let context;
-</script>
-
-{#if componentRef}
-  <svelte:component this={componentRef} {...componentOptions}>
-    {#each blockChildren as child ("render-block-" + child.id)}
-      <RenderBlock block={child} {context} />
-    {/each}
-
-    {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} context={$context} />
-    {/each}
-  </svelte:component>
-{/if}

package/package/components/render-block/render-component.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-type ComponentOptions = {
-    [index: string]: any;
-    attributes?: {
-        [index: string]: any;
-    };
-};
-export interface RenderComponentProps {
-    componentRef: any;
-    componentOptions: ComponentOptions;
-    blockChildren: BuilderBlock[];
-    context: Writable<BuilderContextInterface>;
-}
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { Writable } from "svelte/store";
-declare const __propDef: {
-    props: {
-        componentRef: RenderComponentProps["componentRef"];
-        componentOptions: RenderComponentProps["componentOptions"];
-        blockChildren: RenderComponentProps["blockChildren"];
-        context: RenderComponentProps["context"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenderComponentProps = typeof __propDef.props;
-export type RenderComponentEvents = typeof __propDef.events;
-export type RenderComponentSlots = typeof __propDef.slots;
-export default class RenderComponent extends SvelteComponentTyped<RenderComponentProps, RenderComponentEvents, RenderComponentSlots> {
-}
-export {};

package/package/components/render-block/render-repeated-block.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-type Props = {
-    block: BuilderBlock;
-    repeatContext: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block";
-declare const __propDef: {
-    props: {
-        repeatContext: Props["repeatContext"];
-        block: Props["block"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenderRepeatedBlockProps = typeof __propDef.props;
-export type RenderRepeatedBlockEvents = typeof __propDef.events;
-export type RenderRepeatedBlockSlots = typeof __propDef.slots;
-export default class RenderRepeatedBlock extends SvelteComponentTyped<RenderRepeatedBlockProps, RenderRepeatedBlockEvents, RenderRepeatedBlockSlots> {
-}
-export {};

package/package/components/render-blocks.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export type RenderBlockProps = {
-    blocks?: BuilderBlock[];
-    parent?: string;
-    path?: string;
-    styleProp?: Record<string, any>;
-};
-import type { BuilderBlock } from "../types/builder-block.js";
-declare const __propDef: {
-    props: {
-        blocks: RenderBlockProps["blocks"];
-        parent: RenderBlockProps["parent"];
-        path: RenderBlockProps["path"];
-        styleProp: RenderBlockProps["styleProp"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenderBlocksProps = typeof __propDef.props;
-export type RenderBlocksEvents = typeof __propDef.events;
-export type RenderBlocksSlots = typeof __propDef.slots;
-export default class RenderBlocks extends SvelteComponentTyped<RenderBlocksProps, RenderBlocksEvents, RenderBlocksSlots> {
-}
-export {};

package/package/components/render-content/builder-editing.svelte

@@ -1,4 +0,0 @@
-<script>"use strict";
-</script>
-
-<div />

package/package/components/render-content/builder-editing.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BuilderEditingProps = typeof __propDef.props;
-export type BuilderEditingEvents = typeof __propDef.events;
-export type BuilderEditingSlots = typeof __propDef.slots;
-export default class BuilderEditing extends SvelteComponentTyped<BuilderEditingProps, BuilderEditingEvents, BuilderEditingSlots> {
-}
-export {};

package/package/components/render-content/index.d.ts

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

package/package/components/render-content/index.js

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

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

@@ -1,7 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { RenderContentProps } from './render-content.types';
-export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
-    [x: string]: unknown;
-};
-export declare const getContentInitialValue: ({ content, data, }: Pick<RenderContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/package/components/render-content/render-content.helpers.js

@@ -1,30 +0,0 @@
-export const getContextStateInitialValue = ({ content, data, locale, }) => {
-    const defaultValues = {};
-    // 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) {
-            defaultValues[input.name] = input.defaultValue;
-        }
-    });
-    const stateToUse = {
-        ...content?.data?.state,
-        ...data,
-        ...(locale ? { locale } : {}),
-    };
-    return { ...defaultValues, ...stateToUse };
-};
-export const getContentInitialValue = ({ content, data, }) => {
-    return !content
-        ? undefined
-        : {
-            ...content,
-            data: {
-                ...content?.data,
-                ...data,
-            },
-            meta: content?.meta,
-        };
-};

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

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { RenderContentProps } from "./render-content.types.js";
-declare const __propDef: {
-    props: {
-        canTrack: RenderContentProps["canTrack"];
-        model: RenderContentProps["model"];
-        context: RenderContentProps["context"];
-        apiKey: RenderContentProps["apiKey"];
-        content: RenderContentProps["content"];
-        data: RenderContentProps["data"];
-        locale: RenderContentProps["locale"];
-        apiVersion: RenderContentProps["apiVersion"];
-        customComponents: RenderContentProps["customComponents"];
-        showContent: RenderContentProps["showContent"];
-        classNameProp: RenderContentProps["classNameProp"];
-        isSsrAbTest: RenderContentProps["isSsrAbTest"];
-        includeRefs: RenderContentProps["includeRefs"];
-        enrich: RenderContentProps["enrich"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenderContentProps = typeof __propDef.props;
-export type RenderContentEvents = typeof __propDef.events;
-export type RenderContentSlots = typeof __propDef.slots;
-export default class RenderContent extends SvelteComponentTyped<RenderContentProps, RenderContentEvents, RenderContentSlots> {
-}
-export {};

package/package/functions/evaluate.test.js

@@ -1,17 +0,0 @@
-import { flattenState } from './evaluate';
-describe('flatten state', () => {
-    it('should behave normally when no PROTO_STATE', () => {
-        const localState = {};
-        const rootState = { foo: 'bar' };
-        const flattened = flattenState(rootState, localState, undefined);
-        expect(flattened.foo).toEqual('bar');
-        flattened.foo = 'baz';
-        expect(rootState.foo).toEqual('baz');
-    });
-    it('should shadow write ', () => {
-        const rootState = { foo: 'foo' };
-        const localState = { foo: 'baz' };
-        const flattened = flattenState(rootState, localState, undefined);
-        expect(() => (flattened.foo = 'bar')).toThrow('Writing to local state is not allowed as it is read-only.');
-    });
-});

package/package/functions/get-builder-search-params/fn.test.js

@@ -1,13 +0,0 @@
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '.';
-const querystring = 'someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017';
-const url = new URL(`localhost:3000/about-us?${querystring}`);
-describe('Get Builder SearchParams', () => {
-    test('correctly converts URLSearchParams to object', () => {
-        const output = convertSearchParamsToQueryObject(url.searchParams);
-        expect(output).toMatchSnapshot();
-    });
-    test('correctly extracts all builder params from a query object', () => {
-        const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
-        expect(output).toMatchSnapshot();
-    });
-});

package/package/functions/get-content/generate-content-url.test.d.ts

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

package/package/functions/get-content/generate-content-url.test.js

@@ -1,97 +0,0 @@
-import { generateContentUrl } from './generate-content-url';
-const testKey = 'YJIGb4i01jvw0SRdL5Bt';
-const testModel = 'page';
-const testId = 'c1b81bab59704599b997574eb0736def';
-const options = {
-    cachebust: 'true',
-    noCache: 'true',
-    'overrides.037948e52eaf4743afed464f02c70da4': '037948e52eaf4743afed464f02c70da4',
-    'overrides.page': '037948e52eaf4743afed464f02c70da4',
-    'overrides.page:/': '037948e52eaf4743afed464f02c70da4',
-    preview: 'page',
-};
-describe('Generate Content URL', () => {
-    test('generates the proper value for a simple query', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            query: { id: testId },
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('Handles overrides correctly', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            query: { id: testId },
-            options,
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('generate content url with apiVersion as default', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            query: { id: testId },
-            options,
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('generate content url with apiVersion as v2', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            query: { id: testId },
-            options,
-            apiVersion: 'v2',
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('generate content url with apiVersion as v3', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            query: { id: testId },
-            options,
-            apiVersion: 'v3',
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('throw error when trying to generate content url with apiVersion as v1', () => {
-        expect(() => {
-            generateContentUrl({
-                apiKey: testKey,
-                model: testModel,
-                query: { id: testId },
-                options,
-                apiVersion: 'v1',
-            });
-        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
-    });
-    test('throw error when trying to generate content url with an invalid apiVersion value', () => {
-        expect(() => {
-            generateContentUrl({
-                apiKey: testKey,
-                model: testModel,
-                query: { id: testId },
-                options,
-                apiVersion: 'INVALID_API_VERSION',
-            });
-        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
-    });
-    test('generate content url with enrich option true', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-            enrich: true,
-        });
-        expect(output).toMatchSnapshot();
-    });
-    test('generate content url with enrich option not present', () => {
-        const output = generateContentUrl({
-            apiKey: testKey,
-            model: testModel,
-        });
-        expect(output).toMatchSnapshot();
-    });
-});

package/package/functions/get-processed-block.test.d.ts

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

package/package/functions/get-processed-block.test.js

@@ -1,33 +0,0 @@
-import { getProcessedBlock } from './get-processed-block.js';
-test('Can process bindings', () => {
-    const block = {
-        '@type': '@builder.io/sdk:Element',
-        properties: {
-            foo: 'bar',
-        },
-        bindings: {
-            'properties.foo': '"baz"',
-            'responsiveStyles.large.zIndex': '1 + 1',
-            'properties.test': 'state.test',
-            'properties.block': `
-        const foo = 'bar';
-        return foo;
-      `,
-            'properties.isEditing': 'builder.isEditing',
-        },
-    };
-    const processed = getProcessedBlock({
-        block,
-        context: {},
-        rootState: { test: 'hello' },
-        rootSetState: undefined,
-        localState: undefined,
-        shouldEvaluateBindings: true,
-    });
-    expect(processed).not.toEqual(block);
-    expect(processed.properties?.foo).toEqual('baz');
-    expect(processed.properties?.test).toEqual('hello');
-    expect(processed.properties?.block).toEqual('bar');
-    expect(processed.properties?.isEditing).toEqual(false);
-    expect(processed.responsiveStyles?.large?.zIndex).toEqual(2);
-});

package/package/functions/on-change.test.d.ts

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

package/package/functions/on-change.test.js

@@ -1,20 +0,0 @@
-import { onChange } from './on-change.js';
-test('onChange can observe a shallow change', () => {
-    let changeHappend = false;
-    const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
-    obj.foo = 'yo';
-    expect(changeHappend).toBe(true);
-});
-test('onChange can observe a deep change', () => {
-    let changeHappend = false;
-    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
-    obj.foo.bar = 'yo';
-    expect(changeHappend).toBe(true);
-});
-test('Smoke test: callback is not fired if no properties updated', () => {
-    let changeHappend = false;
-    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
-    // Access some properties
-    obj.foo.bar;
-    expect(changeHappend).toBe(false);
-});

package/package/functions/set.test.d.ts

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

package/package/functions/set.test.js

@@ -1,16 +0,0 @@
-import { set } from './set.js';
-test('can shallow set a property', () => {
-    const obj = { foo: 'bar' };
-    set(obj, 'foo', 'baz');
-    expect(obj.foo).toBe('baz');
-});
-test('can deeply set a property', () => {
-    const obj = { foo: 'bar' };
-    set(obj, 'foo.bar', 'baz');
-    expect(obj.foo.bar).toBe('baz');
-});
-test('can deeply create arrays', () => {
-    const obj = { foo: 'bar' };
-    set(obj, 'foo.bar.0', 'hi');
-    expect(obj.foo.bar).toEqual(['hi']);
-});

package/package/helpers/url.test.d.ts

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

package/package/helpers/url.test.js

@@ -1,21 +0,0 @@
-import { getTopLevelDomain } from './url.js';
-describe('getTopLevelDomain', () => {
-    test('handles root domain', () => {
-        const output = getTopLevelDomain('example.com');
-        expect(output).toBe('example.com');
-    });
-    test('handles subdomain', () => {
-        const output = getTopLevelDomain('wwww.example.com');
-        expect(output).toBe('example.com');
-    });
-    test('handles subdomain with long suffix', () => {
-        const output = getTopLevelDomain('www.example.co.uk');
-        expect(output).toBe('example.co.uk');
-    });
-    test('handles localhost', () => {
-        const output = getTopLevelDomain('localhost');
-        expect(output).toBe('localhost');
-        const output2 = getTopLevelDomain('127.0.0.1');
-        expect(output2).toBe('127.0.0.1');
-    });
-});