@builder.io/sdk-svelte 0.5.9 → 0.6.0

package/lib/edge/helpers/url.js

@@ -0,0 +1,15 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export const getTopLevelDomain = (host) => {
+    if (host === 'localhost' || host === '127.0.0.1') {
+        return host;
+    }
+    const parts = host.split('.');
+    if (parts.length > 2) {
+        return parts.slice(1).join('.');
+    }
+    return host;
+};

package/lib/edge/helpers/uuid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @credit https://stackoverflow.com/a/2117523
+ */
+export declare function uuidv4(): string;
+/**
+ * Slightly cleaner and smaller UUIDs
+ */
+export declare function uuid(): string;

package/lib/edge/helpers/uuid.js

@@ -0,0 +1,15 @@
+/**
+ * @credit https://stackoverflow.com/a/2117523
+ */
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0, v = c == 'x' ? r : r & 0x3 | 0x8;
+        return v.toString(16);
+    });
+}
+/**
+ * Slightly cleaner and smaller UUIDs
+ */
+export function uuid() {
+    return uuidv4().replace(/-/g, '');
+}

package/lib/edge/helpers/visitorId.d.ts

@@ -0,0 +1,6 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getVisitorId: ({ canTrack }: CanTrack) => string | undefined;
+export declare const createVisitorId: () => string;
+export declare const setVisitorId: ({ id, canTrack }: {
+    id: string;
+} & CanTrack) => void;

package/lib/edge/helpers/visitorId.js

@@ -0,0 +1,30 @@
+import { getLocalStorageItem, setLocalStorageItem } from './localStorage.js';
+import { checkIsDefined } from './nullable.js';
+import { uuid } from './uuid.js';
+const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
+export const getVisitorId = ({ canTrack }) => {
+    if (!canTrack) {
+        return undefined;
+    }
+    const visitorId = getLocalStorageItem({
+        key: VISITOR_LOCAL_STORAGE_KEY,
+        canTrack
+    });
+    if (checkIsDefined(visitorId)) {
+        return visitorId;
+    }
+    else {
+        const newVisitorId = createVisitorId();
+        setVisitorId({
+            id: newVisitorId,
+            canTrack
+        });
+        return newVisitorId;
+    }
+};
+export const createVisitorId = () => uuid();
+export const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack
+});

package/lib/edge/index-helpers/blocks-exports.d.ts

@@ -0,0 +1,19 @@
+export { default as Button } from '../blocks/button/button.svelte';
+export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
+export { default as Image } from '../blocks/image/image.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
+export { default as Text } from '../blocks/text/text.svelte';
+export { default as Video } from '../blocks/video/video.svelte';
+import { default as Blocks } from '../components/blocks/blocks.svelte';
+import { default as Content } from '../components/content-variants/content-variants.svelte';
+export { Blocks, Content };
+/**
+ * @deprecated Renamed to `Blocks`.
+ */
+export declare const RenderBlocks: typeof Blocks;
+/**
+ * @deprecated Renamed to `Content`.
+ */
+export declare const RenderContent: typeof Content;

package/lib/edge/index-helpers/blocks-exports.js

@@ -0,0 +1,19 @@
+export { default as Button } from '../blocks/button/button.svelte';
+export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
+export { default as Image } from '../blocks/image/image.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
+export { default as Text } from '../blocks/text/text.svelte';
+export { default as Video } from '../blocks/video/video.svelte';
+import { default as Blocks } from '../components/blocks/blocks.svelte';
+import { default as Content } from '../components/content-variants/content-variants.svelte';
+export { Blocks, Content };
+/**
+ * @deprecated Renamed to `Blocks`.
+ */
+export const RenderBlocks = Blocks;
+/**
+ * @deprecated Renamed to `Content`.
+ */
+export const RenderContent = Content;

package/lib/edge/index-helpers/top-of-file.d.ts

@@ -0,0 +1 @@
+export default undefined;

package/lib/edge/index-helpers/top-of-file.js

@@ -0,0 +1,4 @@
+// no-op
+// this file exists in case a target needs to add logic to the top of the index file in an
+// override.
+export default undefined;

package/lib/edge/index.d.ts

@@ -0,0 +1,7 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/lib/edge/index.js

@@ -0,0 +1,7 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/lib/edge/scripts/init-editing.d.ts

@@ -0,0 +1,6 @@
+export declare const registerInsertMenu: () => void;
+export declare const setupBrowserForEditing: (options?: {
+    enrich?: boolean;
+    includeRefs?: boolean;
+    locale?: string;
+}) => void;

package/lib/edge/scripts/init-editing.js

@@ -0,0 +1,110 @@
+import { SDK_VERSION } from '../constants/sdk-version.js';
+import { TARGET } from '../constants/target.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { register } from '../functions/register.js';
+export const registerInsertMenu = () => {
+    register('insertMenu', {
+        name: '_default',
+        default: true,
+        items: [{
+                name: 'Box'
+            }, {
+                name: 'Text'
+            }, {
+                name: 'Image'
+            }, {
+                name: 'Columns'
+            }, ...(TARGET === 'reactNative' ? [] : [{
+                    name: 'Core:Section'
+                }, {
+                    name: 'Core:Button'
+                }, {
+                    name: 'Embed'
+                }, {
+                    name: 'Custom Code'
+                }])]
+    });
+};
+let isSetupForEditing = false;
+export const setupBrowserForEditing = (options = {}) => {
+    if (isSetupForEditing) {
+        return;
+    }
+    isSetupForEditing = true;
+    if (isBrowser()) {
+        window.parent?.postMessage({
+            type: 'builder.sdkInfo',
+            data: {
+                target: TARGET,
+                version: SDK_VERSION,
+                supportsPatchUpdates: false,
+                // Supports builder-model="..." attribute which is needed to
+                // scope our '+ add block' button styling
+                supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true
+            }
+        }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options
+            }
+        }, '*');
+        window.addEventListener('message', ({ data }) => {
+            if (!data?.type) {
+                return;
+            }
+            switch (data.type) {
+                case 'builder.evaluate':
+                    {
+                        const text = data.data.text;
+                        const args = data.data.arguments || [];
+                        const id = data.data.id;
+                        // tslint:disable-next-line:no-function-constructor-with-string-args
+                        const fn = new Function(text);
+                        let result;
+                        let error = null;
+                        try {
+                            // eslint-disable-next-line prefer-spread
+                            result = fn.apply(null, args);
+                        }
+                        catch (err) {
+                            error = err;
+                        }
+                        if (error) {
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateError',
+                                data: {
+                                    id,
+                                    error: error.message
+                                }
+                            }, '*');
+                        }
+                        else {
+                            if (result && typeof result.then === 'function') {
+                                result.then(finalResult => {
+                                    window.parent?.postMessage({
+                                        type: 'builder.evaluateResult',
+                                        data: {
+                                            id,
+                                            result: finalResult
+                                        }
+                                    }, '*');
+                                }).catch(console.error);
+                            }
+                            else {
+                                window.parent?.postMessage({
+                                    type: 'builder.evaluateResult',
+                                    data: {
+                                        result,
+                                        id
+                                    }
+                                }, '*');
+                            }
+                        }
+                        break;
+                    }
+            }
+        });
+    }
+};

package/lib/edge/server-index.d.ts

@@ -0,0 +1,15 @@
+export * from './index-helpers/top-of-file.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export type { Settings } from './functions/set-editor-settings.js';
+export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export type { RegisteredComponent } from './context/types.js';
+export type { ComponentInfo } from './types/components.js';
+export type { ContentProps } from './components/content/content.types.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';

package/lib/edge/server-index.js

@@ -0,0 +1,10 @@
+export * from './index-helpers/top-of-file.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';

package/lib/edge/types/api-version.d.ts

@@ -0,0 +1,2 @@
+export type ApiVersion = 'v2' | 'v3';
+export declare const DEFAULT_API_VERSION: ApiVersion;

package/lib/edge/types/api-version.js

@@ -0,0 +1 @@
+export const DEFAULT_API_VERSION = 'v3';

package/lib/edge/types/builder-block.d.ts

@@ -0,0 +1,66 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+interface JSONObject {
+    [x: string]: JSONValue;
+}
+interface JSONArray extends Array<JSONValue> {
+}
+/** @todo typedoc this */
+export interface BuilderBlock {
+    '@type': '@builder.io/sdk:Element';
+    '@version'?: number;
+    id?: string;
+    tagName?: string;
+    layerName?: string;
+    groupLocked?: boolean;
+    layerLocked?: boolean;
+    /** @todo make alias for properties.class */
+    class?: string;
+    children?: BuilderBlock[];
+    responsiveStyles?: {
+        large?: Partial<CSSStyleDeclaration>;
+        medium?: Partial<CSSStyleDeclaration>;
+        small?: Partial<CSSStyleDeclaration>;
+        /** @deprecated */
+        xsmall?: Partial<CSSStyleDeclaration>;
+    };
+    component?: {
+        name: string;
+        options?: any;
+        tag?: string;
+    };
+    bindings?: {
+        [key: string]: string;
+    };
+    meta?: {
+        [key: string]: JSONValue;
+    };
+    actions?: {
+        [key: string]: string;
+    };
+    properties?: {
+        [key: string]: string;
+    };
+    code?: {
+        bindings?: {
+            [key: string]: string;
+        };
+        actions?: {
+            [key: string]: string;
+        };
+    };
+    repeat?: {
+        collection: string;
+        itemName?: string;
+    } | null;
+    animations?: any[];
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * generated by the "Hide If" binding
+     */
+    hide?: boolean;
+    /**
+     * generated by the "Show If" binding
+     */
+    show?: boolean;
+}
+export {};

package/lib/edge/types/builder-block.js

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

package/lib/edge/types/builder-content.d.ts

@@ -0,0 +1,44 @@
+import type { BuilderBlock } from './builder-block.js';
+import type { Input } from './input.js';
+import type { Nullable } from './typescript.js';
+export interface Breakpoints {
+    small: number;
+    medium: number;
+}
+export interface BuilderContentVariation {
+    data?: {
+        title?: string;
+        blocks?: BuilderBlock[];
+        inputs?: Input[];
+        state?: {
+            [key: string]: any;
+        };
+        jsCode?: string;
+        tsCode?: string;
+        httpRequests?: {
+            [key: string]: string;
+        };
+        [key: string]: any;
+    };
+    name?: string;
+    testRatio?: number;
+    id?: string;
+    meta?: {
+        breakpoints?: Nullable<Breakpoints>;
+        [key: string]: any;
+    };
+}
+export interface BuilderContent extends BuilderContentVariation {
+    '@version'?: number;
+    published?: 'published' | 'draft' | 'archived';
+    modelId?: string;
+    priority?: number;
+    lastUpdated?: number;
+    startDate?: number;
+    endDate?: number;
+    variations?: {
+        [id: string]: BuilderContentVariation;
+    };
+    testVariationId?: string;
+    testVariationName?: string;
+}

package/lib/edge/types/builder-content.js

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

package/lib/edge/types/builder-props.d.ts

@@ -0,0 +1,10 @@
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../context/types.js';
+import type { BuilderBlock } from './builder-block.js';
+export type PropsWithBuilderData<T> = T & {
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+};
+export type BuilderComponentsProp = {
+    builderComponents: RegisteredComponents;
+};

package/lib/edge/types/builder-props.js

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

package/lib/edge/types/can-track.d.ts

@@ -0,0 +1,3 @@
+export type CanTrack = {
+    canTrack: boolean;
+};

package/lib/edge/types/can-track.js

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

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

@@ -0,0 +1,111 @@
+import type { BuilderElement } from './element.js';
+import type { Input } from './input.js';
+export interface ComponentInfo {
+    /**
+     * Name your component something unique, e.g. 'MyButton'. You can override built-in components
+     * by registering a component with the same name, e.g. 'Text', to replace the built-in text component
+     */
+    name: string;
+    description?: string;
+    /**
+     * Link to a documentation page for this component
+     */
+    docsLink?: string;
+    image?: string;
+    /**
+     * Input schema for your component for users to fill in the options
+     */
+    inputs?: Input[];
+    class?: any;
+    type?: 'angular' | 'webcomponent' | 'react' | 'vue';
+    defaultStyles?: {
+        [key: string]: string;
+    };
+    /**
+     * Turn on if your component can accept children. Be sure to use in combination with
+     * withChildren(YourComponent) like here
+     * github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/components/HeroWithChildren/HeroWithChildren.builder.js#L5
+     */
+    canHaveChildren?: boolean;
+    fragment?: boolean;
+    /**
+     * Do not wrap a component in a dom element. Be sure to use {...props.attributes} with this option
+     * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
+     */
+    noWrap?: boolean;
+    /**
+     * TO-DO: make this optional only for RSC SDK.
+     *
+     * Set this to `true` if your component is a React Server Component (RSC).
+     */
+    isRSC?: boolean;
+    /**
+     * Default children
+     */
+    defaultChildren?: BuilderElement[];
+    defaults?: Partial<BuilderElement>;
+    hooks?: {
+        [key: string]: string | Function;
+    };
+    /**
+     * Hide your component in editor, useful for gradually deprecating components
+     */
+    hideFromInsertMenu?: boolean;
+    tag?: string;
+    static?: boolean;
+    /**
+     * Passing a list of model names will restrict using the component to only the models listed here, otherwise it'll be available for all models
+     */
+    models?: string[];
+    /**
+     * Specify restrictions direct children must match
+     */
+    childRequirements?: {
+        /** Message to show when this doesn't match, e.g. "Children of 'Columns' must be a 'Column'" */
+        message: string;
+        /** Simple way to say children must be a specific component name */
+        component?: string;
+        /**
+         * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
+         * of what the children objects should match, e.g.
+         *
+         * @example
+         *  query: {
+         *    // Child of this element must be a 'Button' or 'Text' component
+         *    'component.name': { $in: ['Button', 'Text'] }
+         *  }
+         */
+        query?: any;
+    };
+    /**
+     * Specify restrictions any parent must match
+     */
+    requiresParent?: {
+        /** Message to show when this doesn't match, e.g. "'Add to cart' buttons must be within a 'Product box'" */
+        message: string;
+        /** Simple way to say a parent must be a specific component name, e.g. 'Product box' */
+        component?: string;
+        /**
+         * More advanced - specify a MongoDB-style query (using sift.js github.com/crcn/sift.js)
+         * of what at least one parent in the parents hierarchy should match, e.g.
+         *
+         * @example
+         *  query: {
+         *    // Thils element must be somewhere inside either a 'Product box' or 'Collection' component
+         *    'component.name': { $in: ['Product Box', 'Collection'] }
+         *  }
+         */
+        query?: any;
+    };
+    /** not yet implemented */
+    friendlyName?: string;
+    /**
+     * Use to restrict access to your component based on a the current user permissions
+     * By default components will show to all users
+     * for more information on permissions in builder check https://www.builder.io/c/docs/guides/roles-and-permissions
+     */
+    requiredPermissions?: Array<Permission>;
+    hidden?: boolean;
+}
+type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create';
+export {};

package/lib/edge/types/components.js

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

package/lib/edge/types/deep-partial.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};

package/lib/edge/types/deep-partial.js

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

package/lib/edge/types/element.d.ts

@@ -0,0 +1,59 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+interface JSONObject {
+    [x: string]: JSONValue;
+}
+interface JSONArray extends Array<JSONValue> {
+}
+/** @todo typedoc this */
+export interface BuilderElement {
+    '@type': '@builder.io/sdk:Element';
+    '@version'?: number;
+    id?: string;
+    tagName?: string;
+    layerName?: string;
+    groupLocked?: boolean;
+    layerLocked?: boolean;
+    /** @todo make alias for properties.class */
+    class?: string;
+    children?: BuilderElement[];
+    responsiveStyles?: {
+        large?: Partial<CSSStyleDeclaration>;
+        medium?: Partial<CSSStyleDeclaration>;
+        small?: Partial<CSSStyleDeclaration>;
+        /** @deprecated */
+        xsmall?: Partial<CSSStyleDeclaration>;
+    };
+    component?: {
+        name: string;
+        options?: any;
+        tag?: string;
+    };
+    bindings?: {
+        [key: string]: string;
+    };
+    meta?: {
+        [key: string]: JSONValue;
+    };
+    actions?: {
+        [key: string]: string;
+    };
+    properties?: {
+        [key: string]: string;
+    };
+    code?: {
+        bindings?: {
+            [key: string]: string;
+        };
+        actions?: {
+            [key: string]: string;
+        };
+    };
+    repeat?: {
+        collection: string;
+        itemName?: string;
+    } | null;
+    animations?: Animation[];
+}
+interface Animation {
+}
+export {};

package/lib/edge/types/element.js

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

package/lib/edge/types/enforced-partials.d.ts

@@ -0,0 +1,21 @@
+import type { Prettify } from './typescript.js';
+type OptionalFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+};
+type RequiredFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+};
+type Enforced<T> = {
+    [K in keyof T]-?: T[K];
+};
+type AndUndefined<T> = {
+    [K in keyof T]: T[K] | undefined;
+};
+/**
+ * Enforce that all optional fields are undefined
+ * @example
+ * type Foo = { a: string, b?: number }
+ * type Bar = EnforcePartials<Foo> // { a: string, b: number | undefined }
+ */
+export type EnforcePartials<From> = Prettify<AndUndefined<Enforced<OptionalFieldsOnly<From>>> & RequiredFieldsOnly<From>>;
+export {};

package/lib/edge/types/enforced-partials.js

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