@builder.io/sdk-svelte 0.0.1-9 → 0.0.2

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+interface Props {
+    styles: string;
+}
+declare const __propDef: {
+    props: {
+        styles: Props["styles"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderInlinedStylesProps = typeof __propDef.props;
+export declare type RenderInlinedStylesEvents = typeof __propDef.events;
+export declare type RenderInlinedStylesSlots = typeof __propDef.slots;
+export default class RenderInlinedStyles extends SvelteComponentTyped<RenderInlinedStylesProps, RenderInlinedStylesEvents, RenderInlinedStylesSlots> {
+}
+export {};

package/package/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/package/constants/builder-registered-components.js

@@ -0,0 +1,36 @@
+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';
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents = () => [
+    { component: Columns, ...columnsComponentInfo },
+    { component: Image, ...imageComponentInfo },
+    { component: Img, ...imgComponentInfo },
+    { component: Text, ...textComponentInfo },
+    { component: Video, ...videoComponentInfo },
+    { component: Symbol, ...symbolComponentInfo },
+    { component: Button, ...buttonComponentInfo },
+    { component: Section, ...sectionComponentInfo },
+    { component: Fragment, ...fragmentComponentInfo },
+    { component: embed, ...embedComponentInfo },
+];

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

@@ -0,0 +1,2 @@
+export declare type SizeName = 'large' | 'medium' | 'small';
+export declare const getMaxWidthQueryForSize: (size: SizeName) => string;

package/package/constants/device-sizes.js

@@ -0,0 +1,18 @@
+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) => `@media (max-width: ${SIZES[size].max}px)`;

package/package/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 = "svelte";

package/package/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/package/context/builder.context.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    Builder: {
+        content: null;
+        context: {};
+        state: {};
+        apiKey: null;
+        registeredComponents: {};
+    };
+    key: symbol;
+};
+export default _default;

package/package/context/builder.context.js

@@ -0,0 +1,11 @@
+const key = Symbol();
+export default {
+    Builder: {
+        content: null,
+        context: {},
+        state: {},
+        apiKey: null,
+        registeredComponents: {},
+    },
+    key,
+};

package/package/context/types.d.ts

@@ -0,0 +1,16 @@
+import { BuilderContent } from '../types/builder-content.js';
+import { ComponentInfo } from '../types/components.js';
+import { Dictionary, Nullable } from '../types/typescript.js';
+export declare type RegisteredComponent = ComponentInfo & {
+    component: any;
+};
+export declare type RegisteredComponents = Dictionary<RegisteredComponent>;
+export declare type BuilderRenderState = Record<string, unknown>;
+export declare type BuilderRenderContext = Record<string, unknown>;
+export interface BuilderContextInterface {
+    content: Nullable<BuilderContent>;
+    context: BuilderRenderContext;
+    state: BuilderRenderState;
+    apiKey: string | null;
+    registeredComponents: RegisteredComponents;
+}

package/package/context/types.js

@@ -0,0 +1,3 @@
+import '../types/builder-content.js';
+import '../types/components.js';
+import '../types/typescript.js';

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

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

package/package/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/package/functions/convert-style-object.d.ts

@@ -0,0 +1 @@
+export declare const convertStyleObject: (obj?: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration> | undefined;

package/package/functions/convert-style-object.js

@@ -0,0 +1,3 @@
+export const convertStyleObject = (obj) => {
+    return obj;
+};

package/package/functions/evaluate.d.ts

@@ -0,0 +1,5 @@
+import type { BuilderContextInterface } from '../context/types.js';
+export declare function evaluate({ code, context, state, event, }: {
+    code: string;
+    event?: Event;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): any;

package/package/functions/evaluate.js

@@ -0,0 +1,25 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function evaluate({ code, context, state, event, }) {
+    if (code === '') {
+        console.warn('Skipping evaluation of empty code block.');
+        return;
+    }
+    const builder = {
+        isEditing: isEditing(),
+        isBrowser: isBrowser(),
+        isServer: !isBrowser(),
+    };
+    // Be able to handle simple expressions like "state.foo" or "1 + 1"
+    // as well as full blocks like "var foo = "bar"; return foo"
+    const useReturn = !(code.includes(';') ||
+        code.includes(' return ') ||
+        code.trim().startsWith('return '));
+    const useCode = useReturn ? `return (${code});` : code;
+    try {
+        return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
+    }
+    catch (e) {
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+    }
+}

package/package/functions/event-handler-name.d.ts

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

package/package/functions/event-handler-name.js

@@ -0,0 +1,4 @@
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+export const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;

package/package/functions/get-block-actions.d.ts

@@ -0,0 +1,9 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import { BuilderBlock } from '../types/builder-block.js';
+declare type Actions = {
+    [index: string]: (event: Event) => any;
+};
+export declare function getBlockActions(options: {
+    block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): Actions;
+export {};

package/package/functions/get-block-actions.js

@@ -0,0 +1,21 @@
+import '../types/builder-block.js';
+import { evaluate } from './evaluate.js';
+import { getEventHandlerName } from './event-handler-name.js';
+export function getBlockActions(options) {
+    const obj = {};
+    const optionActions = options.block.actions ?? {};
+    for (const key in optionActions) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (!optionActions.hasOwnProperty(key)) {
+            continue;
+        }
+        const value = optionActions[key];
+        obj[getEventHandlerName(key)] = (event) => evaluate({
+            code: value,
+            context: options.context,
+            state: options.state,
+            event,
+        });
+    }
+    return obj;
+}

package/package/functions/get-block-component-options.d.ts

@@ -0,0 +1,2 @@
+import { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockComponentOptions(block: BuilderBlock): any;

package/package/functions/get-block-component-options.js

@@ -0,0 +1,11 @@
+import '../types/builder-block.js';
+export function getBlockComponentOptions(block) {
+    return {
+        ...block.component?.options,
+        ...block.options,
+        /**
+         * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+         */
+        builderBlock: block,
+    };
+}

package/package/functions/get-block-properties.d.ts

@@ -0,0 +1,5 @@
+import { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockProperties(block: BuilderBlock): {
+    'builder-id': string | undefined;
+    class: string;
+};

package/package/functions/get-block-properties.js

@@ -0,0 +1,10 @@
+import '../types/builder-block.js';
+export function getBlockProperties(block) {
+    return {
+        ...block.properties,
+        'builder-id': block.id,
+        class: [block.id, 'builder-block', block.class, block.properties?.class]
+            .filter(Boolean)
+            .join(' '),
+    };
+}

package/package/functions/get-block-styles.d.ts

@@ -0,0 +1,2 @@
+import { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockStyles(block: BuilderBlock): any;

package/package/functions/get-block-styles.js

@@ -0,0 +1,21 @@
+import { getMaxWidthQueryForSize } from '../constants/device-sizes.js';
+import '../types/builder-block.js';
+import { convertStyleObject } from './convert-style-object.js';
+import { sanitizeBlockStyles } from './sanitize-styles.js';
+export function getBlockStyles(block) {
+    const styles = {
+        ...convertStyleObject(block.responsiveStyles?.large),
+        /**
+         * TO-DO: remove?
+         */
+        ...block.styles,
+    };
+    if (block.responsiveStyles?.medium) {
+        styles[getMaxWidthQueryForSize('medium')] = convertStyleObject(block.responsiveStyles?.medium);
+    }
+    if (block.responsiveStyles?.small) {
+        styles[getMaxWidthQueryForSize('small')] = convertStyleObject(block.responsiveStyles?.small);
+    }
+    sanitizeBlockStyles(styles);
+    return styles;
+}

package/package/functions/get-block-tag.d.ts

@@ -0,0 +1,3 @@
+import { BuilderBlock } from '../types/builder-block.js';
+export declare type TagName = string;
+export declare function getBlockTag(block: BuilderBlock): TagName;

package/package/functions/get-block-tag.js

@@ -0,0 +1,4 @@
+import '../types/builder-block.js';
+export function getBlockTag(block) {
+    return block.tagName || 'div';
+}

package/package/functions/get-builder-search-params/fn.test.d.ts

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

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

@@ -0,0 +1,13 @@
+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-builder-search-params/index.d.ts

@@ -0,0 +1,6 @@
+declare type QueryObject = Record<string, string>;
+export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
+export declare const getBuilderSearchParams: (options: QueryObject) => QueryObject;
+export declare const getBuilderSearchParamsFromWindow: () => QueryObject;
+export declare const normalizeSearchParams: (searchParams: QueryObject | URLSearchParams) => QueryObject;
+export {};

package/package/functions/get-builder-search-params/index.js

@@ -0,0 +1,29 @@
+import { isBrowser } from '../is-browser.js';
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+export const convertSearchParamsToQueryObject = (searchParams) => {
+    const options = {};
+    searchParams.forEach((value, key) => {
+        options[key] = value;
+    });
+    return options;
+};
+export const getBuilderSearchParams = (options) => {
+    const newOptions = {};
+    Object.keys(options).forEach((key) => {
+        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+            newOptions[trimmedKey] = options[key];
+        }
+    });
+    return newOptions;
+};
+export const getBuilderSearchParamsFromWindow = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    return getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams));
+};
+export const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams
+    ? convertSearchParamsToQueryObject(searchParams)
+    : searchParams;

package/package/functions/get-content/ab-testing.d.ts

@@ -0,0 +1,3 @@
+import { GetContentOptions } from './types.js';
+import { BuilderContent } from '../../types/builder-content.js';
+export declare const handleABTesting: (item: BuilderContent, testGroups: NonNullable<GetContentOptions['testGroups']>) => void;

package/package/functions/get-content/ab-testing.js

@@ -0,0 +1,40 @@
+import './types.js';
+import '../../types/builder-content.js';
+export const handleABTesting = (item, testGroups) => {
+    if (item.variations && Object.keys(item.variations).length) {
+        const testGroup = item.id ? testGroups[item.id] : undefined;
+        const variationValue = testGroup ? item.variations[testGroup] : undefined;
+        if (testGroup && variationValue) {
+            item.data = variationValue.data;
+            item.testVariationId = variationValue.id;
+            item.testVariationName = variationValue.name;
+        }
+        else {
+            // TODO: a/b test iteration logic
+            let n = 0;
+            const random = Math.random();
+            let set = false;
+            for (const id in item.variations) {
+                const variation = item.variations[id];
+                const testRatio = variation.testRatio;
+                n += testRatio;
+                if (random < n) {
+                    const variationName = variation.name ||
+                        (variation.id === item.id ? 'Default variation' : '');
+                    set = true;
+                    Object.assign(item, {
+                        data: variation.data,
+                        testVariationId: variation.id,
+                        testVariationName: variationName,
+                    });
+                }
+            }
+            if (!set) {
+                Object.assign(item, {
+                    testVariationId: item.id,
+                    testVariationName: 'Default',
+                });
+            }
+        }
+    }
+};

package/package/functions/get-content/fn.test.d.ts

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

package/package/functions/get-content/fn.test.js

@@ -0,0 +1,31 @@
+import { generateContentUrl } from '.';
+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();
+    });
+});

package/package/functions/get-content/index.d.ts

@@ -0,0 +1,9 @@
+import { BuilderContent } from '../../types/builder-content.js';
+export declare type GetContentOptions = import('./types.js').GetContentOptions;
+export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
+export declare const generateContentUrl: (options: GetContentOptions) => URL;
+interface ContentResponse {
+    results: BuilderContent[];
+}
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse>;
+export {};

package/package/functions/get-content/index.js

@@ -0,0 +1,42 @@
+import { flatten } from '../../helpers/flatten.js';
+import '../../types/builder-content.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
+import { getFetch } from '../get-fetch.js';
+import { handleABTesting } from './ab-testing.js';
+const fetch$ = getFetch();
+export async function getContent(options) {
+    return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
+}
+export const generateContentUrl = (options) => {
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, } = options;
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+    const queryOptions = {
+        ...getBuilderSearchParamsFromWindow(),
+        ...normalizeSearchParams(options.options || {}),
+    };
+    const flattened = flatten(queryOptions);
+    for (const key in flattened) {
+        url.searchParams.set(key, String(flattened[key]));
+    }
+    if (userAttributes) {
+        url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+    }
+    if (query) {
+        const flattened = flatten({ query });
+        for (const key in flattened) {
+            url.searchParams.set(key, JSON.stringify(flattened[key]));
+        }
+    }
+    return url;
+};
+export async function getAllContent(options) {
+    const url = generateContentUrl(options);
+    const fetch = await fetch$;
+    const content = await fetch(url.href).then((res) => res.json());
+    if (options.testGroups) {
+        for (const item of content.results) {
+            handleABTesting(item, options.testGroups);
+        }
+    }
+    return content;
+}

package/package/functions/get-content/types.d.ts

@@ -0,0 +1,26 @@
+export interface GetContentOptions {
+    /** The model to get content for */
+    model: string;
+    /** Your public API key */
+    apiKey: string;
+    /** A/B test groups the current visitor is in. Key is the content ID, value is the variation ID */
+    testGroups?: Record<string, string> | null;
+    /** Number of items to fetch. Default is 1 */
+    limit?: number;
+    /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+    userAttributes?: (Record<string, string> & {
+        urlPath?: string;
+    }) | null;
+    /** Custom query */
+    query?: Record<string, any>;
+    /**
+     * Any other API options.
+     * Accepts both a key/value object or a `URLSearchParams` instance
+     * */
+    options?: Record<string, any> | URLSearchParams;
+    /**
+     * If set to `true`, it will lazy load symbols/references.
+     * If set to `false`, it will render the entire content tree eagerly.
+     */
+    noTraverse?: boolean;
+}

package/package/functions/get-content/types.js

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

package/package/functions/get-fetch.d.ts

@@ -0,0 +1 @@
+export declare function getFetch(): Promise<typeof global.fetch>;

package/package/functions/get-fetch.js

@@ -0,0 +1,9 @@
+import { getGlobalThis } from './get-global-this.js';
+export async function getFetch() {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === 'undefined' && typeof global !== 'undefined') {
+        const nodeFetch = import('node-fetch').then((d) => d.default);
+        return nodeFetch.default || nodeFetch;
+    }
+    return globalFetch.default || globalFetch;
+}

package/package/functions/get-global-this.d.ts

@@ -0,0 +1 @@
+export declare function getGlobalThis(): any;

package/package/functions/get-global-this.js

@@ -0,0 +1,15 @@
+export function getGlobalThis() {
+    if (typeof globalThis !== 'undefined') {
+        return globalThis;
+    }
+    if (typeof window !== 'undefined') {
+        return window;
+    }
+    if (typeof global !== 'undefined') {
+        return global;
+    }
+    if (typeof self !== 'undefined') {
+        return self;
+    }
+    return null;
+}

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

@@ -0,0 +1,10 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import { BuilderBlock } from '../types/builder-block.js';
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }: {
+    block: BuilderBlock;
+    /**
+     * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
+     * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
+     */
+    shouldEvaluateBindings: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock;

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

@@ -0,0 +1,29 @@
+import '../types/builder-block.js';
+import { evaluate } from './evaluate.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+const evaluateBindings = ({ block, context, state, }) => {
+    if (!block.bindings) {
+        return block;
+    }
+    const copied = {
+        ...block,
+        properties: { ...block.properties },
+        actions: { ...block.actions },
+    };
+    for (const binding in block.bindings) {
+        const expression = block.bindings[binding];
+        const value = evaluate({ code: expression, state, context });
+        set(copied, binding, value);
+    }
+    return copied;
+};
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }) {
+    const transformedBlock = transformBlock(block);
+    if (shouldEvaluateBindings) {
+        return evaluateBindings({ block: transformedBlock, state, context });
+    }
+    else {
+        return transformedBlock;
+    }
+}

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

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