@builder.io/sdk-svelte 3.0.1 → 3.0.2

package/lib/node/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/node/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/node/components/block/block.svelte

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

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

@@ -30,10 +30,10 @@ 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 = "";
@@ -212,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);

package/lib/node/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/node/constants/sdk-version.d.ts

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

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

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/functions/get-processed-block.js

@@ -72,19 +72,14 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
     }
     return copied;
 };
-export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
+export function getProcessedBlock({ block, context, localState, rootState, rootSetState }) {
     let transformedBlock = resolveLocalizedValues(block, rootState.locale);
     transformedBlock = transformBlock(transformedBlock);
-    if (shouldEvaluateBindings) {
-        return evaluateBindings({
-            block: transformedBlock,
-            localState,
-            rootState,
-            rootSetState,
-            context
-        });
-    }
-    else {
-        return transformedBlock;
-    }
+    return evaluateBindings({
+        block: transformedBlock,
+        localState,
+        rootState,
+        rootSetState,
+        context
+    });
 }

package/lib/node/helpers/flatten.d.ts

@@ -14,3 +14,9 @@ export declare function flatten<T extends Record<string, any>>(object: T, path?:
 export declare function flattenMongoQuery(obj: any, _current?: any, _res?: any): {
     [key: string]: string;
 };
+/**
+ * Unflatten a flat object with dot-separated keys back into a nested object.
+ *
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
+ */
+export declare function unflatten(obj: any): any;

package/lib/node/helpers/flatten.js

@@ -37,3 +37,26 @@ export function flattenMongoQuery(obj, _current, _res = {}) {
     }
     return _res;
 }
+/**
+ * Unflatten a flat object with dot-separated keys back into a nested object.
+ *
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
+ */
+export function unflatten(obj) {
+    const result = {};
+    for (const key in obj) {
+        const parts = key.split('.');
+        let current = result;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            if (i === parts.length - 1) {
+                current[part] = obj[key];
+            }
+            else {
+                current[part] = current[part] || {};
+                current = current[part];
+            }
+        }
+    }
+    return result;
+}

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

@@ -15,7 +15,7 @@ export type { ContentVariantsPrps as ContentProps } from './components/content-v
 /**
  * General Builder types
  */
-export type { RegisteredComponent } from './context/types';
+export type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from './context/types';
 export type { BuilderBlock } from './types/builder-block';
 export type { BuilderContent } from './types/builder-content';
 export type { ComponentInfo } from './types/components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/text/text.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { evaluate } from "../../functions/evaluate/index";
   import type { TextProps } from "./text.types";
 
-  export let builderContext: TextProps["builderContext"];
   export let text: TextProps["text"] = undefined;
   function stringifyStyles(stylesObj) {
     let styles = "";
@@ -14,27 +12,6 @@
     }
     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,
-        }) as string
-    );
-  };
 </script>
 
 <div
@@ -43,5 +20,5 @@
   })}
   class="builder-text"
 >
-  {@html processedText()}
+  {@html text?.toString() || ""}
 </div>

package/src/components/block/block.svelte

@@ -57,7 +57,6 @@
           rootState: $context.rootState,
           rootSetState: $context.rootSetState,
           context: $context.context,
-          shouldEvaluateBindings: true,
         });
     return blockToUse;
   };
@@ -107,7 +106,7 @@
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent?.()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
+        ...getBlockComponentOptions(processedBlock(), $context),
         ...provideBuilderBlock(blockComponent(), processedBlock()),
         ...provideBuilderContext(blockComponent(), context),
         ...provideLinkComponent(blockComponent(), linkComponent),

package/src/components/content/components/enable-editor.svelte

@@ -59,10 +59,10 @@
   export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
+  export let context: BuilderEditorProps["context"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
-  export let context: BuilderEditorProps["context"] = undefined;
   export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
     undefined;
 
@@ -266,14 +266,22 @@
      * TO-DO: should we only update the state when there is a change?
      **/
     if (
-      searchParamPreviewModel === model &&
-      previewApiKey === apiKey &&
-      (!content || searchParamPreviewId === content.id)
+      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);

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.1"
+export const SDK_VERSION = "3.0.2"

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -1,4 +1,3 @@
-import { logger } from '../../../helpers/logger';
 import type { ExecutorArgs } from '../helpers';
 import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
@@ -95,10 +94,7 @@ export const runInEdge = ({
     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;
-  }
+  if (cleanedCode === '') return;
   const transformed = `
 function theFunction() {
   ${prependedCode}

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

@@ -1,7 +1,24 @@
+import type { BuilderContextInterface } from '../context/types';
 import type { BuilderBlock } from '../types/builder-block';
-export function getBlockComponentOptions(block: BuilderBlock) {
+import { evaluate } from './evaluate/evaluate';
+export function getBlockComponentOptions(block: BuilderBlock, context: Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>) {
   return {
     ...block.component?.options,
-    ...(block as any).options
+    ...(block as any).options,
+    ...evaluateTextComponentTextOption(block, context)
   };
+}
+const evaluateTextComponentTextOption = (block: BuilderBlock, context: Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>) => {
+  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: string, group: string) => (evaluate({
+        code: group,
+        context,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState
+      }) as string))
+    };
+  }
 }

package/src/functions/get-content/generate-content-url.ts

@@ -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';
 import type { GetContentOptions } from './types';
 const isPositiveNumber = (thing: unknown) => typeof thing === 'number' && !isNaN(thing) && thing >= 0;
 export const generateContentUrl = (options: GetContentOptions): URL => {
@@ -39,7 +40,7 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   url.searchParams.set('noTraverse', String(noTraverse));
   url.searchParams.set('includeRefs', String(true));
   const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes = userAttributes;
+  let finalUserAttributes: Record<string, any> = userAttributes || {};
   if (finalLocale) {
     url.searchParams.set('locale', finalLocale);
     finalUserAttributes = {
@@ -79,11 +80,15 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     ...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) {
@@ -95,4 +100,26 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     }
   }
   return url;
+};
+const getUserAttributesFromQueryOptions = (queryOptions: any) => {
+  const newUserAttributes: any = {};
+  for (const key in queryOptions) {
+    if (key.startsWith('userAttributes.')) {
+      newUserAttributes[key] = queryOptions[key];
+      delete queryOptions[key];
+    }
+  }
+  return newUserAttributes;
+};
+const getUserAttributesAsJSON = (queryOptions: any) => {
+  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/src/functions/get-processed-block.ts

@@ -85,29 +85,19 @@ const evaluateBindings = ({
 export 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 {
   let transformedBlock = resolveLocalizedValues(block, (rootState.locale as string | undefined));
   transformedBlock = transformBlock(transformedBlock);
-  if (shouldEvaluateBindings) {
-    return evaluateBindings({
-      block: transformedBlock,
-      localState,
-      rootState,
-      rootSetState,
-      context
-    });
-  } else {
-    return transformedBlock;
-  }
+  return evaluateBindings({
+    block: transformedBlock,
+    localState,
+    rootState,
+    rootSetState,
+    context
+  });
 }

package/src/helpers/flatten.ts

@@ -38,4 +38,27 @@ export function flattenMongoQuery(obj: any, _current?: any, _res: any = {}): {
     }
   }
   return _res;
+}
+
+/**
+ * Unflatten a flat object with dot-separated keys back into a nested object.
+ *
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
+ */
+export function unflatten(obj: any): any {
+  const result: any = {};
+  for (const key in obj) {
+    const parts = key.split('.');
+    let current = result;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (i === parts.length - 1) {
+        current[part] = obj[key];
+      } else {
+        current[part] = current[part] || {};
+        current = current[part];
+      }
+    }
+  }
+  return result;
 }

package/src/server-index.ts

@@ -17,7 +17,7 @@ export type { ContentVariantsPrps as ContentProps } from './components/content-v
 /**
  * General Builder types
  */
-export type { RegisteredComponent } from './context/types';
+export type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from './context/types';
 export type { BuilderBlock } from './types/builder-block';
 export type { BuilderContent } from './types/builder-content';
 export type { ComponentInfo } from './types/components';