@builder.io/sdk-solid 2.0.3 → 2.0.8

package/lib/browser/index.js

@@ -531,6 +531,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -1269,7 +1272,7 @@ function Block(props) {
       registeredComponents: props.registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent()?.noWrap === true,
-      isInteractive: !blockComponent()?.isRSC
+      isInteractive: !(blockComponent()?.isRSC && TARGET === "rsc")
     };
   });
   onMount(() => {
@@ -1803,16 +1806,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-e3b1053e">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-e3b1053e-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-e3b1053e {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-4512e110">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-4512e110-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-4512e110 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-e3b1053e {
+}.div-4512e110 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-e3b1053e-2 {
+}.div-4512e110-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1861,6 +1864,8 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
+  onMount(() => {
+  });
   return [[(() => {
     const _el$ = _tmpl$23(), _el$3 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
@@ -1874,7 +1879,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-4512e110", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -3244,7 +3249,8 @@ delegateEvents(["click"]);
 // src/blocks/text/component-info.ts
 var componentInfo10 = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false
+    builderBlock: TARGET === "reactNative" ? true : false,
+    builderContext: true
   },
   name: "Text",
   static: true,
@@ -3266,10 +3272,27 @@ var componentInfo10 = {
 };
 var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
+  const processedText = createMemo(() => {
+    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,
+      enableCache: false
+    }));
+  });
   return (() => {
     const _el$ = _tmpl$10();
     _el$.style.setProperty("outline", "none");
-    effect(() => _el$.innerHTML = props.text?.toString() || "");
+    effect(() => _el$.innerHTML = processedText());
     return _el$;
   })();
 }
@@ -5134,7 +5157,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.3";
+var SDK_VERSION = "2.0.8";
 
 // src/functions/register.ts
 var registry = {};
@@ -6007,7 +6030,7 @@ function ContentVariants(props) {
         },
         children: (variant, _index) => {
           _index();
-          return createComponent(content_default, {
+          return createComponent(content_default, mergeProps({
             get isNestedRender() {
               return props.isNestedRender;
             },
@@ -6067,7 +6090,7 @@ function ContentVariants(props) {
             get trustedHosts() {
               return props.trustedHosts;
             }
-          });
+          }, {}));
         }
       })];
     }

package/lib/browser/index.jsx

@@ -518,6 +518,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -1216,7 +1219,7 @@ function Block(props) {
       registeredComponents: props.registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent()?.noWrap === true,
-      isInteractive: !blockComponent()?.isRSC
+      isInteractive: !(blockComponent()?.isRSC && TARGET === "rsc")
     };
   });
   onMount(() => {
@@ -1541,7 +1544,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show7, createMemo as createMemo8 } from "solid-js";
+import { Show as Show7, onMount as onMount2, createMemo as createMemo8 } from "solid-js";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1630,12 +1633,14 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
+  onMount2(() => {
+  });
   return <>
     <>
       <picture>
         <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-4512e110"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1653,22 +1658,22 @@ function Image(props) {
       <Show7
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-e3b1053e"
+        class="builder-image-sizer div-4512e110"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show7>
       <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-e3b1053e-2">{props.children}</div></Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-4512e110-2">{props.children}</div></Show7>
     </>
-    <style>{`.img-e3b1053e {
+    <style>{`.img-4512e110 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-e3b1053e {
+}.div-4512e110 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-e3b1053e-2 {
+}.div-4512e110-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1704,10 +1709,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount6, on as on3, createEffect as createEffect3, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount5, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1901,7 +1906,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show13, createSignal as createSignal17 } from "solid-js";
+import { Show as Show13, createSignal as createSignal18 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -2914,7 +2919,8 @@ var tabs_default = Tabs;
 // src/blocks/text/component-info.ts
 var componentInfo10 = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false
+    builderBlock: TARGET === "reactNative" ? true : false,
+    builderContext: true
   },
   name: "Text",
   static: true,
@@ -2936,10 +2942,31 @@ 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,
+        enableCache: false
+      })
+    );
+  });
   return <><div
     class="builder-text"
-    innerHTML={props.text?.toString() || ""}
+    innerHTML={processedText()}
     style={{
       outline: "none"
     }}
@@ -2973,12 +3000,12 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount2, createSignal as createSignal11 } from "solid-js";
+import { onMount as onMount3, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
-  const [scriptsRun, setScriptsRun] = createSignal11([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
   let elementRef;
-  onMount2(() => {
+  onMount3(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -3037,7 +3064,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on, createEffect, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { on, createEffect, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3045,9 +3072,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
-  const [scriptsRun, setScriptsRun] = createSignal12([]);
-  const [ranInitFn, setRanInitFn] = createSignal12(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal13([]);
+  const [scriptsRun, setScriptsRun] = createSignal13([]);
+  const [ranInitFn, setRanInitFn] = createSignal13(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -3070,8 +3097,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo12(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo13(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo13(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -3326,7 +3353,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
+import { Show as Show10, For as For7, createSignal as createSignal14 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3343,9 +3370,9 @@ var get = (obj, path, defaultValue) => {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal13("unsubmitted");
-  const [responseData, setResponseData] = createSignal13(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
+  const [formState, setFormState] = createSignal14("unsubmitted");
+  const [responseData, setResponseData] = createSignal14(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal14("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3918,9 +3945,9 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show11, createMemo as createMemo14 } from "solid-js";
+import { Show as Show11, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo14(() => {
+  const videoProps = createMemo15(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3939,7 +3966,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo14(() => {
+  const spreadProps = createMemo15(() => {
     return {
       ...videoProps()
     };
@@ -4145,11 +4172,11 @@ var Inlined_script_default = InlinedScript;
 // src/components/content/components/enable-editor.tsx
 import {
   Show as Show12,
-  onMount as onMount3,
+  onMount as onMount4,
   on as on2,
   createEffect as createEffect2,
-  createMemo as createMemo15,
-  createSignal as createSignal15
+  createMemo as createMemo16,
+  createSignal as createSignal16
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4647,7 +4674,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.3";
+var SDK_VERSION = "2.0.8";
 
 // src/functions/register.ts
 var registry = {};
@@ -4924,12 +4951,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal15(
+  const [ContentWrapper, setContentWrapper] = createSignal16(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal15({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
-  const [clicked, setClicked] = createSignal15(false);
+  const [httpReqsData, setHttpReqsData] = createSignal16({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
+  const [clicked, setClicked] = createSignal16(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -4963,7 +4990,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo15(() => {
+  const showContentProps = createMemo16(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -5082,7 +5109,7 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount3(() => {
+  onMount4(() => {
     if (isBrowser()) {
       if (isEditing()) {
         window.addEventListener("message", processMessage);
@@ -5143,7 +5170,7 @@ function EnableEditor(props) {
       }
     }
   });
-  onMount3(() => {
+  onMount4(() => {
     if (!props.apiKey) {
       logger.error(
         "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
@@ -5153,14 +5180,14 @@ function EnableEditor(props) {
     runHttpRequests();
     emitStateUpdate();
   });
-  const onUpdateFn_0_props_content = createMemo15(() => props.content);
+  const onUpdateFn_0_props_content = createMemo16(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect2(on2(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo15(() => props.builderContextSignal.content?.data?.jsCode);
+  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo16(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_1() {
     evaluateJsCode();
   }
@@ -5170,7 +5197,7 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo15(() => props.builderContextSignal.content?.data?.httpRequests);
+  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo16(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_2() {
     runHttpRequests();
   }
@@ -5182,7 +5209,7 @@ function EnableEditor(props) {
       onUpdateFn_2
     )
   );
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo15(
+  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_3() {
@@ -5194,14 +5221,14 @@ function EnableEditor(props) {
       onUpdateFn_3
     )
   );
-  const onUpdateFn_4_props_data = createMemo15(() => props.data);
+  const onUpdateFn_4_props_data = createMemo16(() => props.data);
   function onUpdateFn_4() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect2(on2(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo15(() => props.locale);
+  const onUpdateFn_5_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_5() {
     if (props.locale) {
       mergeNewRootState({
@@ -5228,9 +5255,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal16 } from "solid-js";
+import { createSignal as createSignal17 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal16(
+  const [injectedStyles, setInjectedStyles] = createSignal17(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -5288,7 +5315,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal17(
+  const [scriptStr, setScriptStr] = createSignal18(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -5296,7 +5323,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal17(
+  const [registeredComponents, setRegisteredComponents] = createSignal18(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents?.filter(({ models }) => {
@@ -5317,7 +5344,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -5407,13 +5434,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo18(() => {
+  const updateCookieAndStylesScriptStr = createMemo19(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -5422,10 +5449,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo18(() => {
+  const hideVariantsStyleString = createMemo19(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo18(() => {
+  const defaultContent = createMemo19(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5434,7 +5461,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount4(() => {
+  onMount5(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -5478,6 +5505,7 @@ function ContentVariants(props) {
           contentWrapper={props.contentWrapper}
           contentWrapperProps={props.contentWrapperProps}
           trustedHosts={props.trustedHosts}
+          {...{}}
         />;
       }}</For9>
     </Show14>
@@ -5534,14 +5562,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
-  const blocksWrapper = createMemo19(() => {
+  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
+  const blocksWrapper = createMemo20(() => {
     return "div";
   });
-  const contentWrapper = createMemo19(() => {
+  const contentWrapper = createMemo20(() => {
     return "div";
   });
-  const className = createMemo19(() => {
+  const className = createMemo20(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5561,9 +5589,9 @@ function Symbol(props) {
       }
     });
   }
-  onMount5(() => {
+  onMount6(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }