@builder.io/sdk-solid 4.0.6 → 4.0.8

package/lib/browser/dev.js

@@ -1,5 +1,5 @@
 import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, use, Dynamic, memo } from 'solid-js/web';
-import { createContext, useContext, Show, For, createMemo, createSignal, onMount, createEffect, on } from 'solid-js';
+import { createContext, useContext, Show, For, createMemo, onMount, createSignal, createEffect, on } from 'solid-js';
 
 // src/blocks/button/button.tsx
 
@@ -936,6 +936,9 @@ var provideBuilderContext = (block, context) => {
     };
   return {};
 };
+var generateKey = (index) => {
+  return index.toString();
+};
 
 // src/constants/device-sizes.ts
 var SIZES = {
@@ -1215,6 +1218,7 @@ var awaiter_default = Awaiter;
 
 // src/components/block/components/interactive-element.tsx
 function InteractiveElement(props) {
+  createSignal(0);
   const attributes = createMemo(() => {
     return props.includeBlockProps ? {
       ...getBlockProperties({
@@ -1230,9 +1234,17 @@ function InteractiveElement(props) {
       })
     } : {};
   });
+  const targetWrapperProps = createMemo(() => {
+    return props.wrapperProps;
+  });
+  const onUpdateFn_0_props_wrapperProps = createMemo(() => props.wrapperProps);
+  const onUpdateFn_0_props_block__component__options = createMemo(() => props.block?.component?.options);
+  function onUpdateFn_0() {
+  }
+  createEffect(on(() => [onUpdateFn_0_props_wrapperProps(), onUpdateFn_0_props_block__component__options()], onUpdateFn_0));
   return createComponent(Show, {
     get fallback() {
-      return createComponent(Dynamic, mergeProps(() => props.wrapperProps, {
+      return createComponent(Dynamic, mergeProps(targetWrapperProps, {
         get attributes() {
           return attributes();
         },
@@ -1362,6 +1374,11 @@ function ComponentRef(props) {
 var component_ref_default = ComponentRef;
 function RepeatedBlock(props) {
   const [store, setStore] = createSignal(props.repeatContext);
+  const onUpdateFn_0_props_repeatContext = createMemo(() => props.repeatContext);
+  function onUpdateFn_0() {
+    setStore(props.repeatContext);
+  }
+  createEffect(on(() => [onUpdateFn_0_props_repeatContext()], onUpdateFn_0));
   return createComponent(builder_context_default.Provider, {
     get value() {
       return store();
@@ -1488,7 +1505,9 @@ function Block(props) {
                 children: (data, _index) => {
                   const index = _index();
                   return createComponent(repeated_block_default, {
-                    key: index,
+                    get key() {
+                      return generateKey(index);
+                    },
                     get repeatContext() {
                       return data.context;
                     },
@@ -1554,7 +1573,9 @@ function Block(props) {
                 children: (data, _index) => {
                   const index = _index();
                   return createComponent(repeated_block_default, {
-                    key: index,
+                    get key() {
+                      return generateKey(index);
+                    },
                     get repeatContext() {
                       return data.context;
                     },
@@ -2050,16 +2071,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-040e729e">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-040e729e-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-040e729e {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-5f381e78">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-5f381e78-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-5f381e78 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-040e729e {
+}.div-5f381e78 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-040e729e-2 {
+}.div-5f381e78-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2109,6 +2130,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, {
@@ -2122,7 +2145,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-040e729e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.title, _v$6 = props.altText ? void 0 : "presentation", _v$7 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-5f381e78", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.title, _v$6 = props.altText ? void 0 : "presentation", _v$7 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -3958,10 +3981,10 @@ delegateEvents(["click"]);
 
 // src/blocks/text/component-info.ts
 var componentInfo11 = {
-  shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false,
+  shouldReceiveBuilderProps: TARGET === "reactNative" ? {
+    builderBlock: true,
     builderContext: true
-  },
+  } : {},
   name: "Text",
   static: true,
   isRSC: true,
@@ -5359,7 +5382,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.6";
+var SDK_VERSION = "4.0.8";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6981,6 +7004,7 @@ var fetchSymbolContent = async ({
 var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
+  const [symbolEntry, setSymbolEntry] = createSignal(props.symbol?.entry);
   const blocksWrapper = createMemo(() => {
     return "div";
   });
@@ -6991,7 +7015,7 @@ function Symbol(props) {
     return [...[props.attributes[getClassPropName()]], "builder-symbol", props.symbol?.inline ? "builder-inline-symbol" : void 0, props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0].filter(Boolean).join(" ");
   });
   function setContent() {
-    if (contentToUse())
+    if (contentToUse() && symbolEntry() === props.symbol?.entry)
       return;
     fetchSymbolContent({
       symbol: props.symbol,
@@ -6999,6 +7023,7 @@ function Symbol(props) {
     }).then((newContent) => {
       if (newContent) {
         setContentToUse(newContent);
+        setSymbolEntry(props.symbol?.entry);
       }
     });
   }

package/lib/browser/dev.jsx

@@ -929,6 +929,9 @@ var provideBuilderContext = (block, context) => {
     };
   return {};
 };
+var generateKey = (index) => {
+  return index.toString();
+};
 
 // src/components/block/components/block-styles.tsx
 import { Show as Show2, createMemo } from "solid-js";
@@ -1199,15 +1202,15 @@ var Block_wrapper_default = BlockWrapper;
 import {
   Show as Show4,
   For,
-  on,
-  createEffect,
+  on as on2,
+  createEffect as createEffect2,
   createMemo as createMemo3,
   createSignal as createSignal3
 } from "solid-js";
 import { Dynamic as Dynamic3 } from "solid-js/web";
 
 // src/components/block/components/interactive-element.tsx
-import { Show as Show3, createMemo as createMemo2 } from "solid-js";
+import { Show as Show3, on, createEffect, createMemo as createMemo2, createSignal as createSignal2 } from "solid-js";
 import { Dynamic as Dynamic2 } from "solid-js/web";
 
 // src/components/awaiter.tsx
@@ -1221,6 +1224,7 @@ var Awaiter_default = Awaiter;
 
 // src/components/block/components/interactive-element.tsx
 function InteractiveElement(props) {
+  const [forceRenderCount, setForceRenderCount] = createSignal2(0);
   const attributes = createMemo2(() => {
     return props.includeBlockProps ? {
       ...getBlockProperties({
@@ -1236,9 +1240,27 @@ function InteractiveElement(props) {
       })
     } : {};
   });
+  const targetWrapperProps = createMemo2(() => {
+    return props.wrapperProps;
+  });
+  const onUpdateFn_0_props_wrapperProps = createMemo2(() => props.wrapperProps);
+  const onUpdateFn_0_props_block__component__options = createMemo2(
+    () => props.block?.component?.options
+  );
+  function onUpdateFn_0() {
+  }
+  createEffect(
+    on(
+      () => [
+        onUpdateFn_0_props_wrapperProps(),
+        onUpdateFn_0_props_block__component__options()
+      ],
+      onUpdateFn_0
+    )
+  );
   return <><Show3
     fallback={<Dynamic2
-      {...props.wrapperProps}
+      {...targetWrapperProps()}
       attributes={attributes()}
       component={props.Wrapper}
     >{props.children}</Dynamic2>}
@@ -1299,8 +1321,8 @@ function ComponentRef(props) {
   );
   function onUpdateFn_0() {
   }
-  createEffect(
-    on(
+  createEffect2(
+    on2(
       () => [
         onUpdateFn_0_props_componentOptions(),
         onUpdateFn_0_props_blockChildren()
@@ -1334,9 +1356,16 @@ function ComponentRef(props) {
 var Component_ref_default = ComponentRef;
 
 // src/components/block/components/repeated-block.tsx
-import { createSignal as createSignal4 } from "solid-js";
+import { on as on3, createEffect as createEffect3, createMemo as createMemo4, createSignal as createSignal4 } from "solid-js";
 function RepeatedBlock(props) {
   const [store, setStore] = createSignal4(props.repeatContext);
+  const onUpdateFn_0_props_repeatContext = createMemo4(
+    () => props.repeatContext
+  );
+  function onUpdateFn_0() {
+    setStore(props.repeatContext);
+  }
+  createEffect3(on3(() => [onUpdateFn_0_props_repeatContext()], onUpdateFn_0));
   return <><builder_context_default.Provider value={store()}><Block_default
     block={props.block}
     context={store()}
@@ -1441,7 +1470,7 @@ function Block(props) {
         fallback={<For2 each={repeatItem()}>{(data, _index) => {
           const index = _index();
           return <Repeated_block_default
-            key={index}
+            key={generateKey(index)}
             repeatContext={data.context}
             block={data.block}
             registeredComponents={props.registeredComponents}
@@ -1465,7 +1494,7 @@ function Block(props) {
       fallback={<For2 each={repeatItem()}>{(data, _index) => {
         const index = _index();
         return <Repeated_block_default
-          key={index}
+          key={generateKey(index)}
           repeatContext={data.context}
           block={data.block}
           registeredComponents={props.registeredComponents}
@@ -1505,7 +1534,7 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { onMount as onMount3, on as on3, createEffect as createEffect3, createMemo as createMemo6, createSignal as createSignal6 } from "solid-js";
+import { onMount as onMount3, on as on5, createEffect as createEffect5, createMemo as createMemo6, createSignal as createSignal6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const [shouldUpdate, setShouldUpdate] = createSignal6(false);
@@ -1558,7 +1587,7 @@ function BlocksWrapper(props) {
   const onUpdateFn_0_props_blocks = createMemo6(() => props.blocks);
   function onUpdateFn_0() {
   }
-  createEffect3(on3(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
+  createEffect5(on5(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return <>
     <Dynamic4
       class={className() + " dynamic-023c60f2"}
@@ -1783,7 +1812,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show8, createMemo as createMemo8 } from "solid-js";
+import { Show as Show8, onMount as onMount4, createMemo as createMemo8 } from "solid-js";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1873,12 +1902,14 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
+  onMount4(() => {
+  });
   return <>
     <>
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-040e729e"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-5f381e78"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1897,22 +1928,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-040e729e"
+        class="builder-image-sizer div-5f381e78"
         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-040e729e-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-5f381e78-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-040e729e {
+    <style>{`.img-5f381e78 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-040e729e {
+}.div-5f381e78 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-040e729e-2 {
+}.div-5f381e78-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1948,10 +1979,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount9, on as on7, createEffect as createEffect7, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show16, For as For9, onMount as onMount8, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -2933,7 +2964,7 @@ var componentInfo6 = {
 };
 
 // src/blocks/personalization-container/personalization-container.tsx
-import { Show as Show10, For as For6, onMount as onMount4, createSignal as createSignal10, createMemo as createMemo10 } from "solid-js";
+import { Show as Show10, For as For6, onMount as onMount5, createSignal as createSignal10, createMemo as createMemo10 } from "solid-js";
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
@@ -3198,7 +3229,7 @@ function PersonalizationContainer(props) {
     ).join("");
   });
   let rootRef;
-  onMount4(() => {
+  onMount5(() => {
     setIsHydrated(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
@@ -3600,10 +3631,10 @@ var tabs_default = Tabs;
 
 // src/blocks/text/component-info.ts
 var componentInfo11 = {
-  shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false,
+  shouldReceiveBuilderProps: TARGET === "reactNative" ? {
+    builderBlock: true,
     builderContext: true
-  },
+  } : {},
   name: "Text",
   static: true,
   isRSC: true,
@@ -3661,7 +3692,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, on as on4, createEffect as createEffect4, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount6, on as on6, createEffect as createEffect6, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal12([]);
   const [scriptsRun, setScriptsRun] = createSignal12([]);
@@ -3702,7 +3733,7 @@ function CustomCode(props) {
     }
   }
   let elementRef;
-  onMount5(() => {
+  onMount6(() => {
     runScripts();
   });
   const onUpdateFn_0_props_code = createMemo12(() => props.code);
@@ -3711,7 +3742,7 @@ function CustomCode(props) {
       runScripts();
     }
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
+  createEffect6(on6(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
   return <><div
     class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
     ref={elementRef}
@@ -3739,7 +3770,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on5, createEffect as createEffect5, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on7, createEffect as createEffect7, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3781,8 +3812,8 @@ function Embed(props) {
       findAndRunScripts();
     }
   }
-  createEffect5(
-    on5(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
+  createEffect7(
+    on7(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
   );
   return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
 }
@@ -4614,7 +4645,7 @@ var componentInfo20 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show13, onMount as onMount6, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
+import { Show as Show13, onMount as onMount7, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
   const [lazyVideoObserver, setLazyVideoObserver] = createSignal15(void 0);
   const videoProps = createMemo15(() => {
@@ -4642,7 +4673,7 @@ function Video(props) {
     };
   });
   let videoRef;
-  onMount6(() => {
+  onMount7(() => {
     if (props.lazyLoad) {
       const oberver = new IntersectionObserver(function(entries) {
         entries.forEach(function(entry) {
@@ -4873,9 +4904,9 @@ var getUpdateVariantVisibilityScript = ({
 // src/components/content/components/enable-editor.tsx
 import {
   Show as Show14,
-  onMount as onMount7,
-  on as on6,
-  createEffect as createEffect6,
+  onMount as onMount8,
+  on as on8,
+  createEffect as createEffect8,
   createMemo as createMemo16,
   createSignal as createSignal16
 } from "solid-js";
@@ -4887,7 +4918,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.6";
+var SDK_VERSION = "4.0.8";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5898,7 +5929,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount7(() => {
+  onMount8(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5979,15 +6010,15 @@ function EnableEditor(props) {
       mergeNewContent(props.content);
     }
   }
-  createEffect6(on6(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  createEffect8(on8(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
   const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
     emitStateUpdate();
   }
-  createEffect6(
-    on6(
+  createEffect8(
+    on8(
       () => [onUpdateFn_1_props_builderContextSignal_rootState()],
       onUpdateFn_1
     )
@@ -5998,7 +6029,7 @@ function EnableEditor(props) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect6(on6(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  createEffect8(on8(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
   const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
@@ -6007,7 +6038,7 @@ function EnableEditor(props) {
       });
     }
   }
-  createEffect6(on6(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
+  createEffect8(on8(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
   return <><builder_context_default.Provider value={props.builderContextSignal}><Show14
     when={props.builderContextSignal.content || needsElementRefDivForEditing()}
   ><Dynamic5
@@ -6249,7 +6280,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount8(() => {
+  onMount9(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6353,6 +6384,7 @@ var fetchSymbolContent = async ({
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
+  const [symbolEntry, setSymbolEntry] = createSignal20(props.symbol?.entry);
   const blocksWrapper = createMemo20(() => {
     return "div";
   });
@@ -6368,7 +6400,7 @@ function Symbol(props) {
     ].filter(Boolean).join(" ");
   });
   function setContent() {
-    if (contentToUse())
+    if (contentToUse() && symbolEntry() === props.symbol?.entry)
       return;
     fetchSymbolContent({
       symbol: props.symbol,
@@ -6376,16 +6408,17 @@ function Symbol(props) {
     }).then((newContent) => {
       if (newContent) {
         setContentToUse(newContent);
+        setSymbolEntry(props.symbol?.entry);
       }
     });
   }
-  onMount9(() => {
+  onMount10(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect7(on7(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect9(on9(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}