@builder.io/sdk-svelte 3.0.0 → 3.0.2

package/lib/browser/blocks/image/component-info.js

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 export const componentInfo = {
     name: 'Image',
     static: true,
@@ -13,7 +14,7 @@ export const componentInfo = {
             name: 'image',
             type: 'file',
             bubble: true,
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+            allowedFileTypes: IMAGE_FILE_TYPES,
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
             onChange: (options) => {

package/lib/browser/blocks/image/image.svelte

@@ -29,7 +29,8 @@ $: srcSetToUse = () => {
     if (!url ||
         // We can auto add srcset for cdn.builder.io and shopify
         // images, otherwise you can supply this prop manually
-        !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
+        !(typeof url === "string" &&
+            (url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))) {
         return srcset;
     }
     if (noWebp) {

package/lib/browser/blocks/img/component-info.js

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 export const componentInfo = {
     // friendlyName?
     name: 'Raw:Img',
@@ -7,7 +8,7 @@ export const componentInfo = {
             name: 'image',
             bubble: true,
             type: 'file',
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
+            allowedFileTypes: IMAGE_FILE_TYPES,
             required: true
         }],
     noWrap: true,

package/lib/browser/blocks/text/text.svelte

@@ -1,6 +1,4 @@
-<script>import { evaluate } from "../../functions/evaluate/index";
-export let builderContext;
-export let text = undefined;
+<script>export let text = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -11,17 +9,6 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
-$: processedText = () => {
-    const context = $builderContext;
-    const { context: contextContext, localState, rootState, rootSetState, } = context;
-    return String(text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
-        code: group,
-        context: contextContext,
-        localState,
-        rootState,
-        rootSetState,
-    }));
-};
 </script>
 
 <div
@@ -30,5 +17,5 @@ $: processedText = () => {
   })}
   class="builder-text"
 >
-  {@html processedText()}
+  {@html text?.toString() || ""}
 </div>

package/lib/browser/blocks/text/text.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 import type { TextProps } from "./text.types";
 declare const __propDef: {
     props: {
-        builderContext: TextProps["builderContext"];
         text?: TextProps["text"];
     };
     events: {

package/lib/browser/blocks/video/component-info.js

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from '../../constants/file-types';
 export const componentInfo = {
     name: 'Video',
     canHaveChildren: true,
@@ -9,14 +10,14 @@ export const componentInfo = {
     inputs: [{
             name: 'video',
             type: 'file',
-            allowedFileTypes: ['mp4'],
+            allowedFileTypes: VIDEO_FILE_TYPES,
             bubble: true,
             defaultValue: 'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
             required: true
         }, {
             name: 'posterImage',
             type: 'file',
-            allowedFileTypes: ['jpeg', 'png'],
+            allowedFileTypes: IMAGE_FILE_TYPES,
             helperText: 'Image to show before the video plays'
         }, {
             name: 'autoPlay',

package/lib/browser/components/block/block.helpers.d.ts

@@ -3,9 +3,10 @@ import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
-export declare const getComponent: ({ block, registeredComponents }: {
+export declare const getComponent: ({ block, registeredComponents, model }: {
     block: BuilderBlock;
     registeredComponents: RegisteredComponents;
+    model: string;
 }) => RegisteredComponent | null | undefined;
 export declare const getRepeatItemData: ({ block, context }: {
     block: BuilderBlock;
@@ -20,8 +21,10 @@ export declare const provideLinkComponent: (block: RegisteredComponent | null |
 } | {
     builderLinkComponent?: undefined;
 };
-export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-    builderComponents: RegisteredComponents;
+export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
+    builderComponents: {
+        [k: string]: RegisteredComponent;
+    };
 } | {
     builderComponents?: undefined;
 };

package/lib/browser/components/block/block.helpers.js

@@ -1,13 +1,20 @@
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getStyle } from '../../functions/get-style';
-export const getComponent = ({ block, registeredComponents }) => {
+const checkIsComponentRestricted = (component, model) => {
+    if (!component)
+        return true;
+    if (!model)
+        return false;
+    return component.models && component.models.length > 0 && !component.models.includes(model);
+};
+export const getComponent = ({ block, registeredComponents, model }) => {
     const componentName = block.component?.name;
     if (!componentName) {
         return null;
     }
     const ref = registeredComponents[componentName];
-    if (!ref) {
+    if (!ref || checkIsComponentRestricted(ref, model)) {
         // TODO: Public doc page with more info about this message
         console.warn(`
       Could not find a registered component named "${componentName}". 
@@ -71,11 +78,15 @@ export const provideLinkComponent = (block, linkComponent) => {
         };
     return {};
 };
-export const provideRegisteredComponents = (block, registeredComponents) => {
-    if (block?.shouldReceiveBuilderProps?.builderComponents)
+export const provideRegisteredComponents = (block, registeredComponents, model) => {
+    if (block?.shouldReceiveBuilderProps?.builderComponents) {
+        const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+            return !checkIsComponentRestricted(component, model);
+        }));
         return {
-            builderComponents: registeredComponents
+            builderComponents: filteredRegisteredComponents
         };
+    }
     return {};
 };
 export const provideBuilderBlock = (block, builderBlock) => {

package/lib/browser/components/block/block.svelte

@@ -31,7 +31,6 @@ $: processedBlock = () => {
             rootState: $context.rootState,
             rootSetState: $context.rootSetState,
             context: $context.context,
-            shouldEvaluateBindings: true,
         });
     return blockToUse;
 };
@@ -39,6 +38,7 @@ $: blockComponent = () => {
     return getComponent({
         block: processedBlock(),
         registeredComponents: registeredComponents,
+        model: $context.model,
     });
 };
 $: Tag = () => {
@@ -77,11 +77,11 @@ $: componentRefProps = () => {
         blockChildren: processedBlock().children ?? [],
         componentRef: blockComponent?.()?.component,
         componentOptions: {
-            ...getBlockComponentOptions(processedBlock()),
+            ...getBlockComponentOptions(processedBlock(), $context),
             ...provideBuilderBlock(blockComponent(), processedBlock()),
             ...provideBuilderContext(blockComponent(), context),
             ...provideLinkComponent(blockComponent(), linkComponent),
-            ...provideRegisteredComponents(blockComponent(), registeredComponents),
+            ...provideRegisteredComponents(blockComponent(), registeredComponents, $context.model),
         },
         context: context,
         linkComponent: linkComponent,

package/lib/browser/components/content/components/enable-editor.helpers.d.ts

@@ -0,0 +1,11 @@
+import type { Target } from '../../../types/targets';
+/**
+ * SDKS that use the elementRef approach to enable visual editing.
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
+ */
+export declare const SDKS_USING_ELEMENT_REF_APPROACH: Target[];
+/**
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
+ * as we need to set the elementRef and allow previewing and visual editing
+ */
+export declare const needsElementRefDivForEditing: () => boolean;

package/lib/browser/components/content/components/enable-editor.helpers.js

@@ -0,0 +1,15 @@
+import { TARGET } from '../../../constants/target';
+import { isEditing } from '../../../functions/is-editing';
+import { isPreviewing } from '../../../functions/is-previewing';
+/**
+ * SDKS that use the elementRef approach to enable visual editing.
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
+ */
+export const SDKS_USING_ELEMENT_REF_APPROACH = ['svelte', 'qwik', 'vue'];
+/**
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
+ * as we need to set the elementRef and allow previewing and visual editing
+ */
+export const needsElementRefDivForEditing = () => {
+    return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+};

package/lib/browser/components/content/components/enable-editor.svelte

@@ -18,6 +18,7 @@ import { createEditorListener } from "../../../helpers/subscribe-to-editor";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing";
 import { triggerAnimation } from "../../block/animator";
 import "../../dynamic-div.svelte";
+import { needsElementRefDivForEditing } from "./enable-editor.helpers";
 import { getWrapperClassName } from "./styles.helpers";
 export let isNestedRender = undefined;
 export let builderContextSignal;
@@ -29,11 +30,21 @@ export let enrich = undefined;
 export let trustedHosts = undefined;
 export let model = undefined;
 export let content = undefined;
+export let context = undefined;
 export let data = undefined;
 export let showContent;
 export let contentWrapper = undefined;
-export let context = undefined;
 export let contentWrapperProps = undefined;
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+}
 function mergeNewRootState(newData) {
     const combinedState = {
         ...$builderContextSignal.rootState,
@@ -178,8 +189,12 @@ function elementRef_onIniteditingbldr(event) {
             : {}),
     });
     Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
-        const message = createRegisterComponentMessage(registeredComponent);
-        window.parent?.postMessage(message, "*");
+        if (!model ||
+            !registeredComponent.models?.length ||
+            registeredComponent.models.includes(model)) {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+        }
     });
     window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
 }
@@ -197,13 +212,21 @@ function elementRef_onInitpreviewingbldr(event) {
      *
      * TO-DO: should we only update the state when there is a change?
      **/
-    if (searchParamPreviewModel === model &&
-        previewApiKey === apiKey &&
-        (!content || searchParamPreviewId === content.id)) {
+    if (searchParamPreviewModel === "BUILDER_STUDIO" ||
+        (searchParamPreviewModel === model &&
+            previewApiKey === apiKey &&
+            (!content || searchParamPreviewId === content.id))) {
         fetchOneEntry({
-            model: model,
+            model: model || "",
             apiKey: apiKey,
             apiVersion: $builderContextSignal.apiVersion,
+            ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId
+                ? {
+                    query: {
+                        id: context.symbolId,
+                    },
+                }
+                : {}),
         }).then((content) => {
             if (content) {
                 mergeNewContent(content);
@@ -293,9 +316,15 @@ onDestroy(() => {
 });
 </script>
 
-{#if $builderContextSignal.content}
+{#if $builderContextSignal.content || needsElementRefDivForEditing()}
   <svelte:element
     this={ContentWrapper}
+    style={stringifyStyles({
+      display:
+        !$builderContextSignal.content && needsElementRefDivForEditing()
+          ? "none"
+          : undefined,
+    })}
     {...{}}
     bind:this={elementRef}
     on:click={(event) => {

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -19,10 +19,10 @@ declare const __propDef: {
         trustedHosts?: BuilderEditorProps["trustedHosts"];
         model?: BuilderEditorProps["model"];
         content?: BuilderEditorProps["content"];
+        context?: BuilderEditorProps["context"];
         data?: BuilderEditorProps["data"];
         showContent: BuilderEditorProps["showContent"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
-        context?: BuilderEditorProps["context"];
         contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
     };
     events: {

package/lib/browser/components/content/content.svelte

@@ -18,7 +18,6 @@ export let apiKey;
 export let context = undefined;
 export let content = undefined;
 export let customComponents = undefined;
-export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let canTrack = undefined;
@@ -26,6 +25,7 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
+export let model = undefined;
 export let apiHost = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -46,13 +46,7 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents?.filter(({ models }) => {
-        if (!models?.length)
-            return true;
-        if (!model)
-            return true;
-        return models.includes(model);
-    }) || []),
+    ...(customComponents || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -78,13 +72,7 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents?.filter(({ models }) => {
-            if (!models?.length)
-                return true;
-            if (!model)
-                return true;
-            return models.includes(model);
-        }) || []),
+        ...(customComponents || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeIncludingFunctions(info),
@@ -93,6 +81,7 @@ let builderContextSignal = writable({
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
+    model: model || "",
 });
 if (!apiKey) {
     logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");

package/lib/browser/components/content/content.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         context?: ContentProps["context"];
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
-        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         canTrack?: ContentProps["canTrack"];
@@ -14,6 +13,7 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
+        model?: ContentProps["model"];
         apiHost?: ContentProps["apiHost"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

package/lib/browser/constants/file-types.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_FILE_TYPES: string[];
+export declare const VIDEO_FILE_TYPES: string[];

package/lib/browser/constants/file-types.js

@@ -0,0 +1,2 @@
+export const IMAGE_FILE_TYPES = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif', 'jfif', 'pjpeg', 'pjp', 'apng', 'avif', 'tif', 'tiff', 'heif', 'bmp', 'eps', 'raw', 'cr2', 'nef', 'orf', 'sr2', 'psd', 'heic', 'dib', 'ai'];
+export const VIDEO_FILE_TYPES = ['mp4', 'webm', 'mkv', 'flv', 'vob', 'ogv', 'ogg', 'drc', 'gif', 'gifv', 'mng', 'avi', 'mov', 'qt', 'mts', 'm2ts', 'ts', 'wmv', 'yuv', 'rm', 'rmvb', 'viv', 'asf', 'amv', 'm4p', 'mpeg', 'mpe', 'm2v', 'm4v', 'svi', '3gp', '3g2', 'mxf', 'roq', 'nsv', 'f4v', 'f4p', 'f4a', 'f4b'];

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.0";
+export declare const SDK_VERSION = "3.0.2";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.0";
+export const SDK_VERSION = "3.0.2";

package/lib/browser/context/builder.context.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
         BlocksWrapper: string;
         BlocksWrapperProps: {};
         nonce: string;
+        model: string;
     }>;
     key: symbol;
 };

package/lib/browser/context/builder.context.js

@@ -14,6 +14,7 @@ export default {
         BlocksWrapper: "div",
         BlocksWrapperProps: {},
         nonce: "",
+        model: "",
     }),
     key,
 };

package/lib/browser/context/types.d.ts

@@ -36,5 +36,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
     componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
     nonce: string;
+    model: string;
     canTrack?: boolean;
 }

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

@@ -1,4 +1,3 @@
-import { logger } from '../../../helpers/logger';
 import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
 /**
@@ -84,10 +83,8 @@ export const runInEdge = ({ builder, context, event, rootState, localState, root
         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.');
+    if (cleanedCode === '')
         return;
-    }
     const transformed = `
 function theFunction() {
   ${prependedCode}

package/lib/browser/functions/extract-localized-values.d.ts

@@ -0,0 +1,2 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined): BuilderBlock;

package/lib/browser/functions/extract-localized-values.js

@@ -0,0 +1,37 @@
+import { traverse } from './traverse';
+function isLocalizedField(value) {
+    return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
+}
+function containsLocalizedValues(data) {
+    if (!data || !Object.getOwnPropertyNames(data).length) {
+        return false;
+    }
+    let hasLocalizedValues = false;
+    traverse(data, value => {
+        if (isLocalizedField(value)) {
+            hasLocalizedValues = true;
+            return;
+        }
+    });
+    return hasLocalizedValues;
+}
+function extractLocalizedValues(data, locale) {
+    if (!data || !Object.getOwnPropertyNames(data).length) {
+        return {};
+    }
+    traverse(data, (value, update) => {
+        if (isLocalizedField(value)) {
+            update(value[locale] ?? undefined);
+        }
+    });
+    return data;
+}
+export function resolveLocalizedValues(block, locale) {
+    if (block.component?.options && containsLocalizedValues(block.component?.options)) {
+        if (!locale) {
+            console.warn('[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization');
+        }
+        block.component.options = extractLocalizedValues(block.component.options, locale ?? 'Default');
+    }
+    return block;
+}

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

@@ -1,2 +1,3 @@
+import type { BuilderContextInterface } from '../context/types';
 import type { BuilderBlock } from '../types/builder-block';
-export declare function getBlockComponentOptions(block: BuilderBlock): any;
+export declare function getBlockComponentOptions(block: BuilderBlock, context: Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any;

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

@@ -1,6 +1,22 @@
-export function getBlockComponentOptions(block) {
+import { evaluate } from './evaluate/evaluate';
+export function getBlockComponentOptions(block, context) {
     return {
         ...block.component?.options,
-        ...block.options
+        ...block.options,
+        ...evaluateTextComponentTextOption(block, context)
     };
 }
+const evaluateTextComponentTextOption = (block, context) => {
+    if (block.component?.name === 'Text' && block.component.options?.text && typeof block.component.options.text === 'string') {
+        return {
+            ...block.component.options,
+            text: block.component.options.text.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+                code: group,
+                context,
+                localState: context.localState,
+                rootState: context.rootState,
+                rootSetState: context.rootSetState
+            }))
+        };
+    }
+};

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

@@ -1,7 +1,8 @@
-import { flatten, flattenMongoQuery } from '../../helpers/flatten';
+import { flatten, flattenMongoQuery, unflatten } from '../../helpers/flatten';
 import { normalizeSearchParams } from '../../helpers/search/search';
 import { DEFAULT_API_VERSION } from '../../types/api-version';
 import { getBuilderSearchParamsFromWindow } from '../get-builder-search-params/index';
+import { isBrowser } from '../is-browser';
 const isPositiveNumber = (thing) => typeof thing === 'number' && !isNaN(thing) && thing >= 0;
 export const generateContentUrl = (options) => {
     const { limit = 30, userAttributes, query, model, apiKey, enrich, locale, apiVersion = DEFAULT_API_VERSION, fields, omit, offset, cacheSeconds, staleCacheSeconds, sort, includeUnpublished, apiHost } = options;
@@ -20,7 +21,7 @@ export const generateContentUrl = (options) => {
     url.searchParams.set('noTraverse', String(noTraverse));
     url.searchParams.set('includeRefs', String(true));
     const finalLocale = locale || userAttributes?.locale;
-    let finalUserAttributes = userAttributes;
+    let finalUserAttributes = userAttributes || {};
     if (finalLocale) {
         url.searchParams.set('locale', finalLocale);
         finalUserAttributes = {
@@ -59,11 +60,15 @@ export const generateContentUrl = (options) => {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})
     };
+    finalUserAttributes = {
+        ...finalUserAttributes,
+        ...getUserAttributesAsJSON(queryOptions)
+    };
     const flattened = flatten(queryOptions);
     for (const key in flattened) {
         url.searchParams.set(key, String(flattened[key]));
     }
-    if (finalUserAttributes) {
+    if (Object.keys(finalUserAttributes).length > 0) {
         url.searchParams.set('userAttributes', JSON.stringify(finalUserAttributes));
     }
     if (query) {
@@ -76,3 +81,23 @@ export const generateContentUrl = (options) => {
     }
     return url;
 };
+const getUserAttributesFromQueryOptions = (queryOptions) => {
+    const newUserAttributes = {};
+    for (const key in queryOptions) {
+        if (key.startsWith('userAttributes.')) {
+            newUserAttributes[key] = queryOptions[key];
+            delete queryOptions[key];
+        }
+    }
+    return newUserAttributes;
+};
+const getUserAttributesAsJSON = (queryOptions) => {
+    if (isBrowser() && queryOptions['preview'] === 'BUILDER_STUDIO') {
+        queryOptions['userAttributes.urlPath'] = window.location.pathname;
+        queryOptions['userAttributes.host'] = window.location.host;
+        const queryOptionsForUserAttributes = getUserAttributesFromQueryOptions(queryOptions);
+        const { userAttributes } = unflatten(queryOptionsForUserAttributes);
+        return userAttributes;
+    }
+    return {};
+};

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

@@ -1,11 +1,6 @@
 import type { BuilderContextInterface } from '../context/types';
 import type { BuilderBlock } from '../types/builder-block';
 export declare function deepCloneWithConditions<T = any>(obj: T): T;
-export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }: {
+export declare function getProcessedBlock({ block, context, 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/browser/functions/get-processed-block.js

@@ -1,6 +1,7 @@
 import { TARGET } from '../constants/target';
 import { omit } from '../helpers/omit';
 import { evaluate } from './evaluate/index';
+import { resolveLocalizedValues } from './extract-localized-values';
 import { fastClone } from './fast-clone';
 import { set } from './set';
 import { transformBlock } from './transform-block';
@@ -71,18 +72,14 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
     }
     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;
-    }
+export function getProcessedBlock({ block, context, localState, rootState, rootSetState }) {
+    let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+    transformedBlock = transformBlock(transformedBlock);
+    return evaluateBindings({
+        block: transformedBlock,
+        localState,
+        rootState,
+        rootSetState,
+        context
+    });
 }