@builder.io/sdk-svelte 0.5.9 → 0.6.0

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

@@ -0,0 +1,99 @@
+import { TARGET } from '../../constants/target.js';
+import { handleABTesting } from '../../helpers/ab-tests.js';
+import { getDefaultCanTrack } from '../../helpers/canTrack.js';
+import { logger } from '../../helpers/logger.js';
+import { getPreviewContent } from '../../helpers/preview-lru-cache/get.js';
+import { fetch } from '../get-fetch.js';
+import { isBrowser } from '../is-browser.js';
+import { generateContentUrl } from './generate-content-url.js';
+const checkContentHasResults = (content) => 'results' in content;
+/**
+ * Returns a the first entry that matches the given options.
+ */
+export async function fetchOneEntry(options) {
+    const allContent = await fetchEntries({
+        ...options,
+        limit: 1
+    });
+    if (allContent) {
+        return allContent.results[0] || null;
+    }
+    return null;
+}
+/**
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
+ *
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
+ */
+export const getContent = fetchOneEntry;
+const _fetchContent = async (options) => {
+    const url = generateContentUrl(options);
+    const res = await fetch(url.href);
+    const content = await res.json();
+    return content;
+};
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+export const _processContentResult = async (options, content, url = generateContentUrl(options)) => {
+    const canTrack = getDefaultCanTrack(options.canTrack);
+    const isPreviewing = url.search.includes(`preview=`);
+    if (TARGET === 'rsc' && isPreviewing) {
+        const newResults = [];
+        for (const item of content.results) {
+            const previewContent = getPreviewContent(url.searchParams);
+            newResults.push(previewContent || item);
+        }
+        content.results = newResults;
+    }
+    if (!canTrack)
+        return content;
+    if (!(isBrowser() || TARGET === 'reactNative'))
+        return content;
+    /**
+     * For client-side navigations, it is ideal to handle AB testing at this point instead of using our
+     * complex multi-rendering variants approach, which is only needed for SSR'd content.
+     *
+     * This is also where react-native would handle AB testing.
+     */
+    try {
+        const newResults = [];
+        for (const item of content.results) {
+            newResults.push(await handleABTesting({
+                item,
+                canTrack
+            }));
+        }
+        content.results = newResults;
+    }
+    catch (e) {
+        logger.error('Could not process A/B tests. ', e);
+    }
+    return content;
+};
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+export async function fetchEntries(options) {
+    try {
+        const url = generateContentUrl(options);
+        const content = await _fetchContent(options);
+        if (!checkContentHasResults(content)) {
+            logger.error('Error fetching data. ', {
+                url,
+                content,
+                options
+            });
+            return null;
+        }
+        return _processContentResult(options, content);
+    }
+    catch (error) {
+        logger.error('Error fetching data. ', error);
+        return null;
+    }
+}
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+export const getAllContent = fetchEntries;

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

@@ -0,0 +1,51 @@
+export interface GetContentOptions {
+    /** The model to get content for */
+    model: string;
+    /** Your public API key */
+    apiKey: string;
+    /** 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.
+     * @deprecated use `enrich` instead
+     */
+    noTraverse?: boolean;
+    /**
+     * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
+     * only the default variation will be returned to every user.
+     *
+     * Defaults to `true`.
+     */
+    canTrack?: boolean;
+    /**
+     * Include references in the response. Defaults to `true`.
+     * @deprecated use `enrich` instead
+     */
+    includeRefs?: boolean;
+    /**
+     * Include multilevel references in the response.
+     */
+    enrich?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
+     */
+    locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v3`.
+     */
+    apiVersion?: 'v2' | 'v3';
+}

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

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

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

@@ -0,0 +1 @@
+export declare const fetch: typeof globalThis.fetch;

package/lib/edge/functions/get-fetch.js

@@ -0,0 +1,11 @@
+import { getGlobalThis } from './get-global-this.js';
+function getFetch() {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === 'undefined') {
+        console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+        throw new Error('Builder SDK could not find a global `fetch` function');
+    }
+    return globalFetch;
+}
+export const fetch = getFetch();

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

@@ -0,0 +1,4 @@
+/// <reference types="node" />
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+export declare function getGlobalThis(): Global;
+export {};

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

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

@@ -0,0 +1,10 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }: {
+    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, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock;

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

@@ -0,0 +1,46 @@
+import { evaluate } from './evaluate/index.js';
+import { fastClone } from './fast-clone.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
+    if (!block.bindings) {
+        return block;
+    }
+    const copy = fastClone(block);
+    const copied = {
+        ...copy,
+        properties: {
+            ...copy.properties
+        },
+        actions: {
+            ...copy.actions
+        }
+    };
+    for (const binding in block.bindings) {
+        const expression = block.bindings[binding];
+        const value = evaluate({
+            code: expression,
+            localState,
+            rootState,
+            rootSetState,
+            context
+        });
+        set(copied, binding, value);
+    }
+    return copied;
+};
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
+    const transformedBlock = transformBlock(block);
+    if (shouldEvaluateBindings) {
+        return evaluateBindings({
+            block: transformedBlock,
+            localState,
+            rootState,
+            rootSetState,
+            context
+        });
+    }
+    else {
+        return transformedBlock;
+    }
+}

package/lib/edge/functions/get-react-native-block-styles.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getReactNativeBlockStyles({ block, context, blockStyles }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    blockStyles: any;
+}): CSSStyleDeclaration | Record<string, string | undefined>;

package/lib/edge/functions/get-react-native-block-styles.js

@@ -0,0 +1,17 @@
+import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
+export function getReactNativeBlockStyles({ block, context, blockStyles }) {
+    const responsiveStyles = block.responsiveStyles;
+    if (!responsiveStyles) {
+        return {};
+    }
+    const styles = {
+        // recursively apply inherited styles so that they can be passed down to children `Text` blocks
+        ...context.inheritedStyles,
+        ...(responsiveStyles.large || {}),
+        ...(responsiveStyles.medium || {}),
+        ...(responsiveStyles.small || {}),
+        ...blockStyles
+    };
+    const newStyles = sanitizeReactNativeBlockStyles(styles);
+    return newStyles;
+}

package/lib/edge/functions/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/lib/edge/functions/is-browser.js

@@ -0,0 +1,3 @@
+export function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}

package/lib/edge/functions/is-edge-runtime.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export declare function isEdgeRuntime(): boolean;

package/lib/edge/functions/is-edge-runtime.js

@@ -0,0 +1,8 @@
+import { isBrowser } from './is-browser.js';
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export function isEdgeRuntime() {
+    const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+    return !isBrowser() && !hasNode();
+}

package/lib/edge/functions/is-editing.d.ts

@@ -0,0 +1 @@
+export declare function isEditing(): boolean;

package/lib/edge/functions/is-editing.js

@@ -0,0 +1,5 @@
+import { TARGET } from '../constants/target.js';
+import { isIframe } from './is-iframe.js';
+export function isEditing() {
+    return isIframe() && (TARGET === 'reactNative' || window.location.search.indexOf('builder.frameEditing=') !== -1);
+}

package/lib/edge/functions/is-iframe.d.ts

@@ -0,0 +1 @@
+export declare function isIframe(): boolean;

package/lib/edge/functions/is-iframe.js

@@ -0,0 +1,4 @@
+import { isBrowser } from './is-browser.js';
+export function isIframe() {
+    return isBrowser() && window.self !== window.top;
+}

package/lib/edge/functions/is-previewing.d.ts

@@ -0,0 +1 @@
+export declare function isPreviewing(): boolean;

package/lib/edge/functions/is-previewing.js

@@ -0,0 +1,11 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function isPreviewing() {
+    if (!isBrowser()) {
+        return false;
+    }
+    if (isEditing()) {
+        return false;
+    }
+    return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}

package/lib/edge/functions/on-change.d.ts

@@ -0,0 +1,7 @@
+export declare const onChangeProxySymbol: unique symbol;
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export declare function onChange<T extends object = any>(obj: T, cb: () => void): T;

package/lib/edge/functions/on-change.js

@@ -0,0 +1,28 @@
+export const onChangeProxySymbol = Symbol('onChangeProxySymbol');
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export function onChange(obj, cb) {
+    return new Proxy(obj, {
+        get(target, key) {
+            if (key === onChangeProxySymbol) {
+                return true;
+            }
+            const value = Reflect.get(target, key);
+            if (value && typeof value === 'object') {
+                if (value[onChangeProxySymbol]) {
+                    return value;
+                }
+                return onChange(value, cb);
+            }
+            return value;
+        },
+        set(target, key, value) {
+            const returnValue = Reflect.set(target, key, value);
+            cb();
+            return returnValue;
+        }
+    });
+}

package/lib/edge/functions/register-component.d.ts

@@ -0,0 +1,15 @@
+import type { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo } from '../types/components.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export declare const components: RegisteredComponent[];
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export declare function registerComponent(component: any, info: ComponentInfo): void;
+export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
+    type: string;
+    data: ComponentInfo;
+};
+export declare const serializeComponentInfo: ({ inputs, ...info }: ComponentInfo) => ComponentInfo;

package/lib/edge/functions/register-component.js

@@ -0,0 +1,38 @@
+import { fastClone } from './fast-clone.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export const components = [];
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export function registerComponent(component, info) {
+    components.push({
+        component,
+        ...info
+    });
+    console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
+    return component;
+}
+export const createRegisterComponentMessage = (info) => ({
+    type: 'builder.registerComponent',
+    data: serializeComponentInfo(info)
+});
+// eslint-disable-next-line @typescript-eslint/ban-types
+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)`;
+};
+const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
+export const serializeComponentInfo = ({ inputs, ...info }) => ({
+    ...fastClone(info),
+    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value)
+    }), {}))
+});

package/lib/edge/functions/register.d.ts

@@ -0,0 +1,16 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
+export interface InsertMenuItem {
+    name: string;
+    icon?: string;
+    item: DeepPartial<BuilderBlock>;
+}
+export interface InsertMenuConfig {
+    name: string;
+    priority?: number;
+    persist?: boolean;
+    advanced?: boolean;
+    items: InsertMenuItem[];
+}
+export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
+export declare function register(type: string, info: any): void;

package/lib/edge/functions/register.js

@@ -0,0 +1,27 @@
+import { isBrowser } from './is-browser.js';
+const registry = {};
+export function register(type, info) {
+    let typeList = registry[type];
+    if (!typeList) {
+        typeList = registry[type] = [];
+    }
+    typeList.push(info);
+    if (isBrowser()) {
+        const message = {
+            type: 'builder.register',
+            data: {
+                type,
+                info
+            }
+        };
+        try {
+            parent.postMessage(message, '*');
+            if (parent !== window) {
+                window.postMessage(message, '*');
+            }
+        }
+        catch (err) {
+            console.debug('Could not postmessage', err);
+        }
+    }
+}

package/lib/edge/functions/sanitize-react-native-block-styles.d.ts

@@ -0,0 +1,3 @@
+type Styles = Record<string, string | number>;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export {};

package/lib/edge/functions/sanitize-react-native-block-styles.js

@@ -0,0 +1,61 @@
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+const SHOW_WARNINGS = false;
+const normalizeNumber = (value) => {
+    if (Number.isNaN(value)) {
+        return undefined;
+    }
+    else if (value < 0) {
+        // TODO: why are negative values not allowed?
+        return 0;
+    }
+    else {
+        return value;
+    }
+};
+export const sanitizeReactNativeBlockStyles = (styles) => {
+    return Object.keys(styles).reduce((acc, key) => {
+        const propertyValue = styles[key];
+        if (key === 'display' && !displayValues.has(propertyValue)) {
+            if (SHOW_WARNINGS) {
+                console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+            }
+            return acc;
+        }
+        if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
+            if (SHOW_WARNINGS) {
+                console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+            }
+            return acc;
+        }
+        if (typeof propertyValue === 'string') {
+            // `px` units need to be stripped and replaced with numbers
+            // https://regexr.com/6ualn
+            const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+            if (isPixelUnit) {
+                const newValue = parseFloat(propertyValue);
+                const normalizedValue = normalizeNumber(newValue);
+                if (normalizedValue) {
+                    return {
+                        ...acc,
+                        [key]: normalizedValue
+                    };
+                }
+                else {
+                    return acc;
+                }
+            }
+            else if (propertyValue === '0') {
+                // 0 edge case needs to be handled
+                return {
+                    ...acc,
+                    [key]: 0
+                };
+            }
+        }
+        return {
+            ...acc,
+            [key]: propertyValue
+        };
+    }, {});
+};

package/lib/edge/functions/set-editor-settings.d.ts

@@ -0,0 +1,4 @@
+export type Settings = {
+    customInsertMenu?: boolean;
+};
+export declare function setEditorSettings(newSettings: Settings): void;

package/lib/edge/functions/set-editor-settings.js

@@ -0,0 +1,12 @@
+import { isBrowser } from './is-browser.js';
+const settings = {};
+export function setEditorSettings(newSettings) {
+    if (isBrowser()) {
+        Object.assign(settings, newSettings);
+        const message = {
+            type: 'builder.settingsChange',
+            data: settings
+        };
+        parent.postMessage(message, '*');
+    }
+}

package/lib/edge/functions/set.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export declare const set: (obj: any, _path: string | string[], value: any) => any;

package/lib/edge/functions/set.js

@@ -0,0 +1,14 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export const set = (obj, _path, value) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+    path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+    return obj;
+};

package/lib/edge/functions/track/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const getUserAttributes: () => {
+    urlPath: string | undefined;
+    host: string | undefined;
+    device: string;
+};

package/lib/edge/functions/track/helpers.js

@@ -0,0 +1,51 @@
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../is-browser.js';
+const getLocation = () => {
+    if (TARGET === 'reactNative') {
+        return null;
+    }
+    else if (isBrowser()) {
+        const parsedLocation = new URL(location.href);
+        // IE11 bug with parsed path being empty string
+        // causes issues with our user targeting
+        if (parsedLocation.pathname === '') {
+            parsedLocation.pathname = '/';
+        }
+        return parsedLocation;
+    }
+    else {
+        console.warn('Cannot get location for tracking in non-browser environment');
+        return null;
+    }
+};
+const getUserAgent = () => typeof navigator === 'object' && navigator.userAgent || '';
+export const getUserAttributes = () => {
+    const userAgent = getUserAgent();
+    const isMobile = {
+        Android() {
+            return userAgent.match(/Android/i);
+        },
+        BlackBerry() {
+            return userAgent.match(/BlackBerry/i);
+        },
+        iOS() {
+            return userAgent.match(/iPhone|iPod/i);
+        },
+        Opera() {
+            return userAgent.match(/Opera Mini/i);
+        },
+        Windows() {
+            return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+        },
+        any() {
+            return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === 'reactNative';
+        }
+    };
+    const isTablet = userAgent.match(/Tablet|iPad/i);
+    const url = getLocation();
+    return {
+        urlPath: url?.pathname,
+        host: url?.host || url?.hostname,
+        device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop'
+    };
+};