@builder.io/sdk-solid 3.0.1 → 3.0.3

package/lib/browser/dev.jsx

@@ -112,23 +112,6 @@ import {
   createSignal as createSignal5
 } from "solid-js";
 
-// src/functions/get-block-component-options.ts
-function getBlockComponentOptions(block) {
-  return {
-    ...block.component?.options,
-    ...block.options
-  };
-}
-
-// src/helpers/omit.ts
-function omit(obj, ...values) {
-  const newObject = Object.assign({}, obj);
-  for (const key of values) {
-    delete newObject[key];
-  }
-  return newObject;
-}
-
 // src/helpers/logger.ts
 var MSG_PREFIX = "[Builder.io]: ";
 var logger = {
@@ -395,6 +378,38 @@ function evaluate({
   }
 }
 
+// src/functions/get-block-component-options.ts
+function getBlockComponentOptions(block, context) {
+  return {
+    ...block.component?.options,
+    ...block.options,
+    ...evaluateTextComponentTextOption(block, context)
+  };
+}
+var 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
+      }))
+    };
+  }
+};
+
+// src/helpers/omit.ts
+function omit(obj, ...values) {
+  const newObject = Object.assign({}, obj);
+  for (const key of values) {
+    delete newObject[key];
+  }
+  return newObject;
+}
+
 // src/functions/traverse.ts
 function traverse(obj, callback, parent2 = null, key = null, visited = /* @__PURE__ */ new WeakSet()) {
   if (obj == null || typeof obj !== "object") {
@@ -559,24 +574,19 @@ var evaluateBindings = ({
 function getProcessedBlock({
   block,
   context,
-  shouldEvaluateBindings,
   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
+  });
 }
 
 // src/functions/camel-to-kebab-case.ts
@@ -1298,8 +1308,7 @@ function Block(props) {
       localState: props.context.localState,
       rootState: props.context.rootState,
       rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true
+      context: props.context.context
     });
     return blockToUse;
   });
@@ -1336,7 +1345,7 @@ function Block(props) {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
+        ...getBlockComponentOptions(processedBlock(), props.context),
         ...provideBuilderBlock(blockComponent(), processedBlock()),
         ...provideBuilderContext(blockComponent(), props.context),
         ...provideLinkComponent(blockComponent(), props.linkComponent),
@@ -1490,7 +1499,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-5b6a86b6"}
+      class={className() + " dynamic-3c4beb0c"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -1502,7 +1511,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-5b6a86b6 {
+    <style>{`.dynamic-3c4beb0c {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1667,7 +1676,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-2ac94efa"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-3e5f33a4"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1696,7 +1705,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-2ac94efa {
+    <style>{`.div-3e5f33a4 {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1808,7 +1817,7 @@ function Image(props) {
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-070d7e88"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-56e07140"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1826,22 +1835,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-070d7e88"
+        class="builder-image-sizer div-56e07140"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show8>
       <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-070d7e88-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-56e07140-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-070d7e88 {
+    <style>{`.img-56e07140 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-070d7e88 {
+}.div-56e07140 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-070d7e88-2 {
+}.div-56e07140-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1877,10 +1886,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -2074,7 +2083,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show14, createSignal as createSignal18 } from "solid-js";
+import { Show as Show14, createSignal as createSignal17 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -3119,30 +3128,10 @@ var componentInfo10 = {
 };
 
 // src/blocks/text/text.tsx
-import { createMemo as createMemo11 } from "solid-js";
 function Text(props) {
-  const processedText = createMemo11(() => {
-    const context = props.builderContext;
-    const {
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    } = context;
-    return String(props.text?.toString() || "").replace(
-      /{{([^}]+)}}/g,
-      (match, group) => evaluate({
-        code: group,
-        context: contextContext,
-        localState,
-        rootState,
-        rootSetState
-      })
-    );
-  });
   return <><div
     class="builder-text"
-    innerHTML={processedText()}
+    innerHTML={props.text?.toString() || ""}
     style={{
       outline: "none"
     }}
@@ -3176,10 +3165,10 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount5, createSignal as createSignal11 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
-  const [scriptsRun, setScriptsRun] = createSignal12([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
+  const [scriptsRun, setScriptsRun] = createSignal11([]);
   let elementRef;
   onMount5(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
@@ -3241,7 +3230,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on2, createEffect as createEffect2, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on2, createEffect as createEffect2, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3249,9 +3238,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal13([]);
-  const [scriptsRun, setScriptsRun] = createSignal13([]);
-  const [ranInitFn, setRanInitFn] = createSignal13(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
+  const [ranInitFn, setRanInitFn] = createSignal12(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -3275,8 +3264,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo13(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo13(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo12(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -3531,7 +3520,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show11, For as For7, createSignal as createSignal14 } from "solid-js";
+import { Show as Show11, For as For7, createSignal as createSignal13 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3551,9 +3540,9 @@ function logFetch(url) {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal14("unsubmitted");
-  const [responseData, setResponseData] = createSignal14(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal14("");
+  const [formState, setFormState] = createSignal13("unsubmitted");
+  const [responseData, setResponseData] = createSignal13(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3768,14 +3757,14 @@ function FormComponent(props) {
         blocks={props.sendingMessage}
         context={props.builderContext}
       /></Show11>
-      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-6210236e">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
+      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-27d18614">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
       <Show11 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
       /></Show11>
     </form>
-    <style>{`.pre-6210236e {
+    <style>{`.pre-27d18614 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4125,9 +4114,9 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show12, createMemo as createMemo15 } from "solid-js";
+import { Show as Show12, createMemo as createMemo14 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo15(() => {
+  const videoProps = createMemo14(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -4146,7 +4135,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo14(() => {
     return {
       ...videoProps()
     };
@@ -4356,8 +4345,8 @@ import {
   onMount as onMount6,
   on as on3,
   createEffect as createEffect3,
-  createMemo as createMemo16,
-  createSignal as createSignal16
+  createMemo as createMemo15,
+  createSignal as createSignal15
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4367,7 +4356,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.1";
+var SDK_VERSION = "3.0.3";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -4432,6 +4421,23 @@ function flattenMongoQuery(obj, _current, _res = {}) {
   }
   return _res;
 }
+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;
+}
 
 // src/types/api-version.ts
 var DEFAULT_API_VERSION = "v3";
@@ -4496,7 +4502,7 @@ var 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 = {
@@ -4534,11 +4540,15 @@ var 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) {
@@ -4551,6 +4561,28 @@ var generateContentUrl = (options) => {
   }
   return url;
 };
+var getUserAttributesFromQueryOptions = (queryOptions) => {
+  const newUserAttributes = {};
+  for (const key in queryOptions) {
+    if (key.startsWith("userAttributes.")) {
+      newUserAttributes[key] = queryOptions[key];
+      delete queryOptions[key];
+    }
+  }
+  return newUserAttributes;
+};
+var 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 {};
+};
 
 // src/functions/get-content/index.ts
 var checkContentHasResults = (content) => "results" in content;
@@ -5172,12 +5204,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal16(
+  const [ContentWrapper, setContentWrapper] = createSignal15(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal16({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
-  const [clicked, setClicked] = createSignal16(false);
+  const [httpReqsData, setHttpReqsData] = createSignal15({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
+  const [clicked, setClicked] = createSignal15(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -5211,7 +5243,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo15(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -5368,11 +5400,16 @@ function EnableEditor(props) {
           `builder.overrides.${searchParamPreviewModel}`
         );
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-        if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
+        if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
           fetchOneEntry({
-            model: props.model,
+            model: props.model || "",
             apiKey: props.apiKey,
-            apiVersion: props.builderContextSignal.apiVersion
+            apiVersion: props.builderContextSignal.apiVersion,
+            ...searchParamPreviewModel === "BUILDER_STUDIO" && props.context?.symbolId ? {
+              query: {
+                id: props.context.symbolId
+              }
+            } : {}
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -5382,14 +5419,14 @@ function EnableEditor(props) {
       }
     }
   });
-  const onUpdateFn_0_props_content = createMemo16(() => props.content);
+  const onUpdateFn_0_props_content = createMemo15(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect3(on3(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo15(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
@@ -5401,14 +5438,14 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_data = createMemo16(() => props.data);
+  const onUpdateFn_2_props_data = createMemo15(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect3(on3(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
-  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
+  const onUpdateFn_3_props_locale = createMemo15(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
@@ -5440,9 +5477,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal17 } from "solid-js";
+import { createSignal as createSignal16 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal17(
+  const [injectedStyles, setInjectedStyles] = createSignal16(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -5500,7 +5537,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal18(
+  const [scriptStr, setScriptStr] = createSignal17(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -5508,7 +5545,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -5523,7 +5560,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -5631,13 +5668,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo19(() => {
+  const updateCookieAndStylesScriptStr = createMemo18(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -5646,10 +5683,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo19(() => {
+  const hideVariantsStyleString = createMemo18(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo19(() => {
+  const defaultContent = createMemo18(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5761,14 +5798,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
-  const blocksWrapper = createMemo20(() => {
+  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
+  const blocksWrapper = createMemo19(() => {
     return "div";
   });
-  const contentWrapper = createMemo20(() => {
+  const contentWrapper = createMemo19(() => {
     return "div";
   });
-  const className = createMemo20(() => {
+  const className = createMemo19(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5790,7 +5827,7 @@ function Symbol(props) {
   }
   onMount8(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }