@builder.io/sdk-svelte 0.5.9 → 0.6.0

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

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInEdge: ({ builder, context, event, rootState, localState, rootSetState, code }: ExecutorArgs) => any;

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

@@ -0,0 +1,86 @@
+import { logger } from '../../../helpers/logger.js';
+import { set } from '../../set.js';
+import Interpreter from './acorn-interpreter.js';
+import { getFunctionArguments } from '../helpers.js';
+const processCode = (code) => {
+    return code.split('\n').map(line => {
+        const trimmed = line.trim();
+        // this async wrapper doesn't work in JS-interpreter, so we drop it.
+        if (line.includes('__awaiter'))
+            return undefined;
+        // we find all state setter expressions and append a call to setRootState afterwards
+        const isStateSetter = trimmed.startsWith('state.');
+        if (!isStateSetter)
+            return line;
+        const [lhs, rhs] = trimmed.split('=');
+        const setStr = lhs.replace('state.', '').trim();
+        const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
+        return `
+  ${line}
+  ${setExpr}
+  `;
+    }).filter(Boolean).join('\n');
+};
+const getJSONValName = (val) => val + 'JSON';
+export const runInEdge = ({ builder, context, event, rootState, localState, rootSetState, code }) => {
+    const state = {
+        ...rootState,
+        ...localState
+    };
+    const properties = getFunctionArguments({
+        builder,
+        context,
+        event,
+        state
+    });
+    /**
+     * Deserialize all properties from JSON strings to JS objects
+     */
+    const prependedCode = properties.map(([key]) => {
+        const jsonValName = getJSONValName(key);
+        return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
+    }).join('\n');
+    const cleanedCode = processCode(code);
+    if (cleanedCode === '') {
+        logger.warn('Skipping evaluation of empty code block.');
+        return;
+    }
+    const transformed = `
+function theFunction() {
+  ${prependedCode}
+
+  ${cleanedCode}
+}
+theFunction();
+`;
+    const setRootState = (prop, value) => {
+        const newState = set(state, prop, value);
+        rootSetState?.(newState);
+    };
+    const initFunc = function (interpreter, globalObject) {
+        /**
+         * serialize all function args to JSON strings
+         */
+        properties.forEach(([key, val]) => {
+            const jsonVal = JSON.stringify(val);
+            interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+        });
+        /**
+         * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
+         * state property is set. This function will update the state object.
+         */
+        interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
+    };
+    try {
+        const myInterpreter = new Interpreter(transformed, initFunc);
+        myInterpreter.run();
+        const output = myInterpreter.pseudoToNative(myInterpreter.value);
+        return output;
+    }
+    catch (e) {
+        logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
+            e
+        });
+        return;
+    }
+};

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

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js';

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

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js';

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

@@ -0,0 +1,6 @@
+import type { ExecutorArgs } from './helpers.js';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+    event?: Event;
+    isExpression?: boolean;
+};
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;

package/lib/node/functions/evaluate/evaluate.js

@@ -0,0 +1,52 @@
+import { logger } from '../../helpers/logger.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from '../track/helpers.js';
+/**
+ * THIS IS A MAGICAL IMPORT. It is aliased by the build process of every SDK configuration, so that
+ * it points to the correct runtime for that configuration, which are expected to live exactly at:
+ *  - ./browser-runtime/index.js
+ *  - ./node-runtime/index.js
+ *  - ./edge-runtime/index.js
+ *
+ * We have code in `/output-generation` that does this aliasing, and is re-used by each SDK.
+ * Also, each individual `tsconfig.json` aliases this import to the browser runtime so that the
+ * types can be resolved correctly.
+ */
+import { evaluator } from '../../../node/functions/evaluate/node-runtime/index.js';
+export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+    if (code === '') {
+        logger.warn('Skipping evaluation of empty code block.');
+        return;
+    }
+    const builder = {
+        isEditing: isEditing(),
+        isBrowser: isBrowser(),
+        isServer: !isBrowser(),
+        getUserAttributes: () => getUserAttributes()
+    };
+    // 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 = 
+    // we disable this for cases where we definitely don't want a return
+    isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
+    const useCode = useReturn ? `return (${code});` : code;
+    const args = {
+        code: useCode,
+        builder,
+        context,
+        event,
+        rootSetState,
+        rootState,
+        localState
+    };
+    try {
+        return evaluator(args);
+    }
+    catch (e) {
+        logger.error('Failed code evaluation: ' + e.message, {
+            code
+        });
+        return undefined;
+    }
+}

package/lib/node/functions/evaluate/helpers.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
+import type { getUserAttributes } from '../track/helpers.js';
+export type BuilderGlobals = {
+    isEditing: boolean | undefined;
+    isBrowser: boolean | undefined;
+    isServer: boolean | undefined;
+    getUserAttributes: typeof getUserAttributes;
+};
+export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
+    code: string;
+    builder: BuilderGlobals;
+    event: Event | undefined;
+};
+export type Executor = (args: ExecutorArgs) => any;
+export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
+export declare const getFunctionArguments: ({ builder, context, event, state }: Pick<ExecutorArgs, "context" | "builder" | "event"> & {
+    state: BuilderRenderState;
+}) => [string, Event | BuilderRenderState | import("../../context/types.js").BuilderRenderContext | BuilderGlobals | undefined][];

package/lib/node/functions/evaluate/helpers.js

@@ -0,0 +1,10 @@
+export const getFunctionArguments = ({ builder, context, event, state }) => {
+    return Object.entries({
+        state,
+        Builder: builder,
+        // legacy
+        builder,
+        context,
+        event
+    });
+};

package/lib/node/functions/evaluate/index.d.ts

@@ -0,0 +1 @@
+export { evaluate } from './evaluate.js';

package/lib/node/functions/evaluate/index.js

@@ -0,0 +1 @@
+export { evaluate } from './evaluate.js';

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from './helpers.js';
+export declare const evaluator: (_args: ExecutorArgs) => never;

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

@@ -0,0 +1,3 @@
+export const evaluator = (_args) => {
+    throw new Error('Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.');
+};

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

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

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

@@ -0,0 +1 @@
+export const getEventHandlerName = (key) => `on:${key.toLowerCase()}`;

package/lib/node/functions/extract-text-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export declare const extractTextStyles: (styles: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration>;

package/lib/node/functions/extract-text-styles.js

@@ -0,0 +1,22 @@
+const TEXT_STYLE_KEYS = ['color', 'whiteSpace', 'direction', 'hyphens', 'overflowWrap'];
+/**
+ * Check if the key represent a CSS style property that applies to text
+ * See MDN docs for refrence of what properties apply to text.
+ * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
+ */
+const isTextStyle = (key) => {
+    return TEXT_STYLE_KEYS.includes(key) || key.startsWith('font') || key.startsWith('text') || key.startsWith('letter') || key.startsWith('line') || key.startsWith('word') || key.startsWith('writing');
+};
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export const extractTextStyles = (styles) => {
+    const textStyles = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Object.entries(styles).forEach(([key, value]) => {
+        if (isTextStyle(key)) {
+            textStyles[key] = value;
+        }
+    });
+    return textStyles;
+};

package/lib/node/functions/fast-clone.d.ts

@@ -0,0 +1,4 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export declare const fastClone: <T extends object>(obj: T) => T;

package/lib/node/functions/fast-clone.js

@@ -0,0 +1,4 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export const fastClone = (obj) => JSON.parse(JSON.stringify(obj));

package/lib/node/functions/fetch-builder-props.d.ts

@@ -0,0 +1,40 @@
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
+import type { Dictionary } from '../types/typescript.js';
+import type { GetContentOptions } from './get-content/types.js';
+type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
+    model?: string;
+}) & ({
+    /**
+     * The current URL path. Used to determine the `urlPath` for targeting content.
+     *
+     * Cannot be used with `url`.
+     */
+    path: string;
+    /**
+     * The current URL search params. Used to parse the `searchParams` for targeting content.
+     *
+     * Cannot be used with `url`.
+     */
+    searchParams?: URLSearchParams | Dictionary<string | string[]>;
+    url?: undefined;
+} | {
+    /**
+     * The current URL. Used to determine the `urlPath` for targeting content and
+     * to parse the `searchParams` for targeting content.
+     *
+     * Cannot be used with `path` or `searchParams`.
+     */
+    url: URL;
+    path?: undefined;
+    searchParams?: undefined;
+} | {
+    url?: undefined;
+    path?: undefined;
+    searchParams?: undefined;
+});
+/**
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
+ */
+export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
+export {};

package/lib/node/functions/fetch-builder-props.js

@@ -0,0 +1,26 @@
+import { getBuilderSearchParams } from './get-builder-search-params/index.js';
+import { fetchOneEntry } from './get-content/index.js';
+/**
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
+ */
+export const fetchBuilderProps = async (_args) => {
+    const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;
+    const getContentArgs = {
+        ..._args,
+        apiKey: _args.apiKey,
+        model: _args.model || 'page',
+        userAttributes: {
+            ..._args.userAttributes,
+            ...(urlPath ? {
+                urlPath
+            } : {})
+        },
+        options: getBuilderSearchParams(_args.searchParams || _args.url?.searchParams || _args.options)
+    };
+    return {
+        apiKey: getContentArgs.apiKey,
+        model: getContentArgs.model,
+        content: await fetchOneEntry(getContentArgs)
+    };
+};

package/lib/node/functions/get-block-actions-handler.d.ts

@@ -0,0 +1,8 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+type Options = {
+    block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>;
+type EventHandler = (event: Event) => any;
+export declare const createEventHandler: (value: string, options: Options) => EventHandler;
+export {};

package/lib/node/functions/get-block-actions-handler.js

@@ -0,0 +1,10 @@
+import { evaluate } from './evaluate/index.js';
+export const createEventHandler = (value, options) => event => evaluate({
+    code: value,
+    context: options.context,
+    localState: options.localState,
+    rootState: options.rootState,
+    rootSetState: options.rootSetState,
+    event,
+    isExpression: false
+});

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

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

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

@@ -0,0 +1,28 @@
+import { TARGET } from '../constants/target.js';
+import { getEventHandlerName } from './event-handler-name.js';
+import { createEventHandler } from './get-block-actions-handler.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];
+        let eventHandlerName = getEventHandlerName(key);
+        if (options.stripPrefix) {
+            switch (TARGET) {
+                case 'vue2':
+                case 'vue3':
+                    eventHandlerName = eventHandlerName.replace('v-on:', '');
+                    break;
+                case 'svelte':
+                    eventHandlerName = eventHandlerName.replace('on:', '');
+                    break;
+            }
+        }
+        obj[eventHandlerName] = createEventHandler(value, options);
+    }
+    return obj;
+}

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

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

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

@@ -0,0 +1,10 @@
+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/lib/node/functions/get-block-properties.d.ts

@@ -0,0 +1,11 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockProperties({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}): {
+    'builder-id': string | undefined;
+    style: string | Partial<CSSStyleDeclaration> | undefined;
+    class: string;
+    href: any;
+};

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

@@ -0,0 +1,72 @@
+import { TARGET } from '../constants/target.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
+import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block) => {
+    // currently we are only spreading the `href` property
+    // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+    // const {
+    //   '@type': _type,
+    //   '@version': _version,
+    //   id: _id,
+    //   tagName: _tagName,
+    //   layerName: _layerName,
+    //   groupLocked: _groupLocked,
+    //   layerLocked: _layerLocked,
+    //   class: _class,
+    //   children: _children,
+    //   responsiveStyles: _responsiveStyles,
+    //   component: _component,
+    //   bindings: _bindings,
+    //   meta: _meta,
+    //   actions: _actions,
+    //   properties: _properties,
+    //   code: _code,
+    //   repeat: _repeat,
+    //   animations: _animations,
+    //   style: _style,
+    //   hide: _hide,
+    //   show: _show,
+    //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+    //   ...remainingBlockProperties
+    // } = block;
+    return {
+        href: block.href
+    };
+};
+export function getBlockProperties({ block, context }) {
+    const properties = {
+        ...extractRelevantRootBlockProperties(block),
+        ...block.properties,
+        'builder-id': block.id,
+        style: block.style ? getStyleAttribute(block.style) : undefined,
+        class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
+    };
+    if (TARGET === 'reactNative') {
+        properties.style = getReactNativeBlockStyles({
+            block,
+            context,
+            blockStyles: properties.style
+        });
+    }
+    return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+function getStyleAttribute(style) {
+    switch (TARGET) {
+        case 'svelte':
+        case 'vue2':
+        case 'vue3':
+        case 'solid':
+            return convertStyleMapToCSSArray(style).join(' ');
+        case 'qwik':
+        case 'reactNative':
+        case 'react':
+        case 'rsc':
+            return style;
+    }
+}

package/lib/node/functions/get-builder-search-params/index.d.ts

@@ -0,0 +1,12 @@
+type QueryObject = Record<string, string | string[]>;
+export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
+export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
+export declare const getBuilderSearchParamsFromWindow: () => QueryObject;
+export declare const normalizeSearchParams: (searchParams: QueryObject | URLSearchParams) => QueryObject;
+export {};

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

@@ -0,0 +1,38 @@
+import { isBrowser } from '../is-browser.js';
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
+export const convertSearchParamsToQueryObject = (searchParams) => {
+    const options = {};
+    searchParams.forEach((value, key) => {
+        options[key] = value;
+    });
+    return options;
+};
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
+export const getBuilderSearchParams = (_options) => {
+    if (!_options) {
+        return {};
+    }
+    const options = normalizeSearchParams(_options);
+    const newOptions = {};
+    Object.keys(options).forEach(key => {
+        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
+            newOptions[trimmedKey] = options[key];
+        }
+    });
+    return newOptions;
+};
+export const getBuilderSearchParamsFromWindow = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    return getBuilderSearchParams(searchParams);
+};
+export const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;

package/lib/node/functions/get-content/generate-content-url.d.ts

@@ -0,0 +1,2 @@
+import type { GetContentOptions } from './types.js';
+export declare const generateContentUrl: (options: GetContentOptions) => URL;

package/lib/node/functions/get-content/generate-content-url.js

@@ -0,0 +1,33 @@
+import { flatten } from '../../helpers/flatten.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from '../get-builder-search-params/index.js';
+import { DEFAULT_API_VERSION } from '../../types/api-version.js';
+export const generateContentUrl = (options) => {
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION } = options;
+    if (!apiKey) {
+        throw new Error('Missing API key');
+    }
+    if (!['v2', 'v3'].includes(apiVersion)) {
+        throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+    }
+    const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}${enrich ? `&enrich=${enrich}` : ''}`);
+    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;
+};

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

@@ -0,0 +1,28 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { GetContentOptions } from './types.js';
+/**
+ * Returns a the first entry that matches the given options.
+ */
+export declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | 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 declare const getContent: typeof fetchOneEntry;
+type ContentResults = {
+    results: BuilderContent[];
+};
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+export declare function fetchEntries(options: GetContentOptions): Promise<ContentResults | null>;
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+export declare const getAllContent: typeof fetchEntries;
+export {};