@builder.io/sdk-solid 2.0.2 → 2.0.5

package/lib/node/index.jsx

@@ -690,6 +690,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -1630,6 +1633,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1637,7 +1641,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -1649,7 +1653,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -1668,7 +1672,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-3ff242de"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1697,7 +1701,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-5b8fb3ac {
+    <style>{`.div-3ff242de {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1712,7 +1716,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) {
@@ -1801,12 +1805,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}
@@ -1824,22 +1830,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;
@@ -1875,10 +1881,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) => {
@@ -2072,7 +2078,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 = {
@@ -3085,7 +3091,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,
@@ -3107,10 +3114,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"
     }}
@@ -3144,12 +3172,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;
     }
@@ -3208,7 +3236,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"];
@@ -3216,9 +3244,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;
@@ -3241,8 +3269,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);
@@ -3497,7 +3525,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"];
@@ -3514,9 +3542,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,
@@ -4089,9 +4117,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
@@ -4110,7 +4138,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo14(() => {
+  const spreadProps = createMemo15(() => {
     return {
       ...videoProps()
     };
@@ -4248,17 +4276,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
@@ -4319,11 +4344,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";
 
@@ -4821,7 +4846,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.2";
+var SDK_VERSION = "2.0.5";
 
 // src/functions/register.ts
 var registry = {};
@@ -5098,12 +5123,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,
@@ -5137,7 +5162,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo15(() => {
+  const showContentProps = createMemo16(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -5256,7 +5281,7 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount3(() => {
+  onMount4(() => {
     if (isBrowser()) {
       if (isEditing()) {
         window.addEventListener("message", processMessage);
@@ -5317,7 +5342,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."
@@ -5327,14 +5352,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();
   }
@@ -5344,7 +5369,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();
   }
@@ -5356,7 +5381,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() {
@@ -5368,14 +5393,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({
@@ -5402,9 +5427,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,
@@ -5462,7 +5487,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,
@@ -5470,7 +5495,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal17(
+  const [registeredComponents, setRegisteredComponents] = createSignal18(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents?.filter(({ models }) => {
@@ -5491,7 +5516,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -5581,13 +5606,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,
@@ -5596,10 +5621,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
@@ -5608,7 +5633,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount4(() => {
+  onMount5(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -5708,14 +5733,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",
@@ -5735,9 +5760,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();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "description": "",
   "files": [
     "dist",