@builder.io/sdk-solid 2.0.2 → 2.0.5

package/dist/index.d.ts

@@ -558,6 +558,7 @@ interface FragmentProps {
 declare function FragmentComponent(props: FragmentProps): solid_js.JSX.Element;
 
 interface ImageProps {
+    attributes?: string;
     highPriority?: boolean;
     className?: string;
     image: string;
@@ -570,6 +571,7 @@ interface ImageProps {
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
+    lockAspectRatio?: boolean;
     children?: any;
     fitContent?: boolean;
     builderBlock?: BuilderBlock;
@@ -602,6 +604,7 @@ interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, BuilderLi
     dynamic?: boolean;
     attributes?: any;
     inheritState?: boolean;
+    renderToLiquid?: boolean;
 }
 
 declare function Symbol(props: SymbolProps): solid_js.JSX.Element;
@@ -748,7 +751,7 @@ declare function isPreviewing(_search?: Search): boolean;
 
 declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
-    data: ComponentInfo;
+    data: any;
 };
 
 type DeepPartial<T> = {

package/lib/browser/dev.js

@@ -533,6 +533,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -1563,7 +1566,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-5b8fb3ac {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3ff242de {
   display: flex;
   line-height: normal;
 }`);
@@ -1643,6 +1646,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 {
@@ -1650,7 +1654,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;
           }
@@ -1662,7 +1666,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;
           }
@@ -1683,7 +1687,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac";
+        return getColumnsClass(props.builderBlock?.id) + " div-3ff242de";
       },
       get style() {
         return columnsCssVars();
@@ -1808,16 +1812,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;
@@ -1867,6 +1871,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, {
@@ -1880,7 +1886,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()
@@ -3251,7 +3257,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,
@@ -3273,10 +3280,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$;
   })();
 }
@@ -4575,17 +4599,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}";
@@ -5151,7 +5172,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 = {};