@builder.io/sdk-solid 4.2.1 → 4.2.2

package/lib/browser/index.js

@@ -1311,11 +1311,6 @@ var getWrapperProps = ({
 function ComponentRef(props) {
   createSignal(false);
   const [Wrapper, setWrapper] = createSignal(props.isInteractive ? interactive_element_default : props.componentRef);
-  const onUpdateFn_0_props_componentOptions = createMemo(() => props.componentOptions);
-  const onUpdateFn_0_props_blockChildren = createMemo(() => props.blockChildren);
-  function onUpdateFn_0() {
-  }
-  createEffect(on(() => [onUpdateFn_0_props_componentOptions(), onUpdateFn_0_props_blockChildren()], onUpdateFn_0));
   return createComponent(Show, {
     get when() {
       return props.componentRef;
@@ -1335,25 +1330,32 @@ function ComponentRef(props) {
           return Wrapper();
         },
         get children() {
-          return createComponent(For, {
-            get each() {
-              return props.blockChildren;
+          return createComponent(Show, {
+            get when() {
+              return props.componentRef;
             },
-            children: (child, _index) => {
-              _index();
-              return createComponent(block_default, {
-                get key() {
-                  return child.id;
-                },
-                block: child,
-                get context() {
-                  return props.context;
-                },
-                get registeredComponents() {
-                  return props.registeredComponents;
+            get children() {
+              return createComponent(For, {
+                get each() {
+                  return props.blockChildren;
                 },
-                get linkComponent() {
-                  return props.linkComponent;
+                children: (child, _index) => {
+                  _index();
+                  return createComponent(block_default, {
+                    get key() {
+                      return child.id;
+                    },
+                    block: child,
+                    get context() {
+                      return props.context;
+                    },
+                    get registeredComponents() {
+                      return props.registeredComponents;
+                    },
+                    get linkComponent() {
+                      return props.linkComponent;
+                    }
+                  });
                 }
               });
             }
@@ -1660,7 +1662,7 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-450facf4 {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-4d836538 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1709,7 +1711,7 @@ function BlocksWrapper(props) {
   createEffect(on(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-450facf4";
+      return className() + " dynamic-4d836538";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -3962,6 +3964,9 @@ function Tabs(props) {
   function activeTabContent(active) {
     return props.tabs && props.tabs[active].content;
   }
+  function getTabStyle(index) {
+    return index === activeTab() ? props.activeTabStyle : {};
+  }
   function onClick(index) {
     if (index === activeTab() && props.collapsible) {
       setActiveTab(-1);
@@ -4003,9 +4008,7 @@ function Tabs(props) {
             }
           }));
           effect((_p$) => {
-            const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = {
-              ...activeTab() === index ? props.activeTabStyle : {}
-            };
+            const _v$ = `builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`, _v$2 = getTabStyle(index);
             _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
             _p$._v$2 = style(_el$4, _v$2, _p$._v$2);
             return _p$;
@@ -4501,9 +4504,9 @@ function logFetch(url) {
 }
 
 // src/blocks/form/form/form.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-fdf23968">`);
+var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-74261216">`);
 var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-fdf23968 {
+var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-74261216 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4526,6 +4529,9 @@ function FormComponent(props) {
   function submissionState() {
     return isEditing() && props.previewState || formState();
   }
+  function errorResponse(response) {
+    return JSON.stringify(response, null, 2);
+  }
   function onSubmit(event) {
     const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
     if (props.sendSubmissionsTo === "zapier") {
@@ -4773,7 +4779,7 @@ function FormComponent(props) {
       },
       get children() {
         const _el$2 = _tmpl$15();
-        insert(_el$2, () => JSON.stringify(responseData(), null, 2));
+        insert(_el$2, () => errorResponse(responseData()));
         return _el$2;
       }
     }), null);
@@ -5489,7 +5495,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.2.1";
+var SDK_VERSION = "4.2.2";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6293,6 +6299,8 @@ var getWrapperClassName = (variationId) => {
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   createSignal(false);
+  const [prevData, setPrevData] = createSignal(null);
+  const [prevLocale, setPrevLocale] = createSignal("");
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
   const [httpReqsPending, setHttpReqsPending] = createSignal({});
@@ -6417,11 +6425,15 @@ function EnableEditor(props) {
         method: "GET"
       };
       logFetch(JSON.stringify(fetchRequestObj));
-      fetch(fetchRequestObj.url, {
+      const fetchOptions = {
         method: fetchRequestObj.method,
         headers: fetchRequestObj.headers,
         body: fetchRequestObj.body
-      }).then((response) => response.json()).then((json) => {
+      };
+      if (fetchRequestObj.method === "GET") {
+        delete fetchOptions.body;
+      }
+      fetch(fetchRequestObj.url, fetchOptions).then((response) => response.json()).then((json) => {
         mergeNewRootState({
           [key]: json
         });
@@ -6529,16 +6541,24 @@ function EnableEditor(props) {
   const onUpdateFn_2_props_data = createMemo(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
+      if (prevData() === props.data) {
+        return;
+      }
       mergeNewRootState(props.data);
+      setPrevData(props.data);
     }
   }
   createEffect(on(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
   const onUpdateFn_3_props_locale = createMemo(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
+      if (prevLocale() === props.locale) {
+        return;
+      }
       mergeNewRootState({
         locale: props.locale
       });
+      setPrevLocale(props.locale);
     }
   }
   createEffect(on(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
@@ -7088,6 +7108,9 @@ function Symbol(props) {
   const contentWrapper = createMemo(() => {
     return "div";
   });
+  const customComponents = createMemo(() => {
+    return Object.values(props.builderComponents);
+  });
   const className = createMemo(() => {
     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(" ");
   });
@@ -7136,7 +7159,7 @@ function Symbol(props) {
         };
       },
       get customComponents() {
-        return Object.values(props.builderComponents);
+        return customComponents();
       },
       get data() {
         return {

package/lib/browser/index.jsx

@@ -1193,14 +1193,7 @@ function BlockWrapper(props) {
 var Block_wrapper_default = BlockWrapper;
 
 // src/components/block/components/component-ref/component-ref.tsx
-import {
-  Show as Show4,
-  For,
-  on as on2,
-  createEffect as createEffect2,
-  createMemo as createMemo3,
-  createSignal as createSignal3
-} from "solid-js";
+import { Show as Show4, For, createSignal as createSignal3 } from "solid-js";
 import { Dynamic as Dynamic3 } from "solid-js/web";
 
 // src/components/block/components/interactive-element.tsx
@@ -1307,23 +1300,6 @@ function ComponentRef(props) {
   const [Wrapper, setWrapper] = createSignal3(
     props.isInteractive ? interactive_element_default : props.componentRef
   );
-  const onUpdateFn_0_props_componentOptions = createMemo3(
-    () => props.componentOptions
-  );
-  const onUpdateFn_0_props_blockChildren = createMemo3(
-    () => props.blockChildren
-  );
-  function onUpdateFn_0() {
-  }
-  createEffect2(
-    on2(
-      () => [
-        onUpdateFn_0_props_componentOptions(),
-        onUpdateFn_0_props_blockChildren()
-      ],
-      onUpdateFn_0
-    )
-  );
   return <><Show4 when={props.componentRef}><Dynamic3
     {...getWrapperProps({
       componentOptions: props.componentOptions,
@@ -1336,7 +1312,7 @@ function ComponentRef(props) {
       contextValue: props.context
     })}
     component={Wrapper()}
-  ><For each={props.blockChildren}>{(child, _index) => {
+  ><Show4 when={props.componentRef}><For each={props.blockChildren}>{(child, _index) => {
     const index = _index();
     return <Block_default
       key={child.id}
@@ -1345,12 +1321,12 @@ function ComponentRef(props) {
       registeredComponents={props.registeredComponents}
       linkComponent={props.linkComponent}
     />;
-  }}</For></Dynamic3></Show4></>;
+  }}</For></Show4></Dynamic3></Show4></>;
 }
 var Component_ref_default = ComponentRef;
 
 // src/components/block/components/repeated-block.tsx
-import { on as on3, createEffect as createEffect3, createMemo as createMemo4, createSignal as createSignal4 } from "solid-js";
+import { on as on2, createEffect as createEffect2, createMemo as createMemo4, createSignal as createSignal4 } from "solid-js";
 function RepeatedBlock(props) {
   const [store, setStore] = createSignal4(props.repeatContext);
   const onUpdateFn_0_props_repeatContext = createMemo4(
@@ -1359,7 +1335,7 @@ function RepeatedBlock(props) {
   function onUpdateFn_0() {
     setStore(props.repeatContext);
   }
-  createEffect3(on3(() => [onUpdateFn_0_props_repeatContext()], onUpdateFn_0));
+  createEffect2(on2(() => [onUpdateFn_0_props_repeatContext()], onUpdateFn_0));
   return <><builder_context_default.Provider value={store()}><Block_default
     block={props.block}
     context={store()}
@@ -1528,7 +1504,7 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { onMount as onMount3, on as on5, createEffect as createEffect5, createMemo as createMemo6, createSignal as createSignal6 } from "solid-js";
+import { onMount as onMount3, on as on4, createEffect as createEffect4, 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);
@@ -1581,10 +1557,10 @@ function BlocksWrapper(props) {
   const onUpdateFn_0_props_blocks = createMemo6(() => props.blocks);
   function onUpdateFn_0() {
   }
-  createEffect5(on5(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
+  createEffect4(on4(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return <>
     <Dynamic4
-      class={className() + " dynamic-450facf4"}
+      class={className() + " dynamic-4d836538"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -1596,7 +1572,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-450facf4 {
+    <style>{`.dynamic-4d836538 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1975,7 +1951,7 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo21, createSignal as createSignal21 } from "solid-js";
+import { onMount as onMount10, on as on8, createEffect as createEffect8, createMemo as createMemo21, createSignal as createSignal21 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
 import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal20, createMemo as createMemo20 } from "solid-js";
@@ -3615,6 +3591,9 @@ function Tabs(props) {
   function activeTabContent(active) {
     return props.tabs && props.tabs[active].content;
   }
+  function getTabStyle(index) {
+    return index === activeTab() ? props.activeTabStyle : {};
+  }
   function onClick(index) {
     if (index === activeTab() && props.collapsible) {
       setActiveTab(-1);
@@ -3636,9 +3615,7 @@ function Tabs(props) {
       return <span
         class={`builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`}
         key={index}
-        style={{
-          ...activeTab() === index ? props.activeTabStyle : {}
-        }}
+        style={getTabStyle(index)}
         onClick={(event) => onClick(index)}
       ><Blocks_default
         parent={props.builderBlock.id}
@@ -3724,7 +3701,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount6, on as on6, createEffect as createEffect6, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount6, on as on5, createEffect as createEffect5, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal12([]);
   const [scriptsRun, setScriptsRun] = createSignal12([]);
@@ -3774,7 +3751,7 @@ function CustomCode(props) {
       runScripts();
     }
   }
-  createEffect6(on6(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
+  createEffect5(on5(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
   return <><div
     class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
     ref={elementRef}
@@ -3802,7 +3779,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on7, createEffect as createEffect7, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on6, createEffect as createEffect6, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3844,8 +3821,8 @@ function Embed(props) {
       findAndRunScripts();
     }
   }
-  createEffect7(
-    on7(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
+  createEffect6(
+    on6(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
   );
   return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
 }
@@ -4129,6 +4106,9 @@ function FormComponent(props) {
   function submissionState() {
     return isEditing() && props.previewState || formState();
   }
+  function errorResponse(response) {
+    return JSON.stringify(response, null, 2);
+  }
   function onSubmit(event) {
     const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
     if (props.sendSubmissionsTo === "zapier") {
@@ -4343,14 +4323,14 @@ function FormComponent(props) {
         blocks={props.sendingMessage}
         context={props.builderContext}
       /></Show12>
-      <Show12 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-fdf23968">{JSON.stringify(responseData(), null, 2)}</pre></Show12>
+      <Show12 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-74261216">{errorResponse(responseData())}</pre></Show12>
       <Show12 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
       /></Show12>
     </form>
-    <style>{`.pre-fdf23968 {
+    <style>{`.pre-74261216 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4972,8 +4952,8 @@ var getUpdateVariantVisibilityScript = ({
 import {
   Show as Show14,
   onMount as onMount8,
-  on as on8,
-  createEffect as createEffect8,
+  on as on7,
+  createEffect as createEffect7,
   createMemo as createMemo17,
   createSignal as createSignal17
 } from "solid-js";
@@ -4985,7 +4965,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.2.1";
+var SDK_VERSION = "4.2.2";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5789,6 +5769,8 @@ var getWrapperClassName = (variationId) => {
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [hasExecuted, setHasExecuted] = createSignal17(false);
+  const [prevData, setPrevData] = createSignal17(null);
+  const [prevLocale, setPrevLocale] = createSignal17("");
   const [ContentWrapper, setContentWrapper] = createSignal17(
     props.contentWrapper || "div"
   );
@@ -5918,11 +5900,15 @@ function EnableEditor(props) {
           method: "GET"
         };
         logFetch(JSON.stringify(fetchRequestObj));
-        fetch(fetchRequestObj.url, {
+        const fetchOptions = {
           method: fetchRequestObj.method,
           headers: fetchRequestObj.headers,
           body: fetchRequestObj.body
-        }).then((response) => response.json()).then((json) => {
+        };
+        if (fetchRequestObj.method === "GET") {
+          delete fetchOptions.body;
+        }
+        fetch(fetchRequestObj.url, fetchOptions).then((response) => response.json()).then((json) => {
           mergeNewRootState({
             [key]: json
           });
@@ -6034,15 +6020,15 @@ function EnableEditor(props) {
       mergeNewContent(props.content);
     }
   }
-  createEffect8(on8(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  createEffect7(on7(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
   const onUpdateFn_1_props_builderContextSignal_rootState = createMemo17(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
     emitStateUpdate();
   }
-  createEffect8(
-    on8(
+  createEffect7(
+    on7(
       () => [onUpdateFn_1_props_builderContextSignal_rootState()],
       onUpdateFn_1
     )
@@ -6050,19 +6036,27 @@ function EnableEditor(props) {
   const onUpdateFn_2_props_data = createMemo17(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
+      if (prevData() === props.data) {
+        return;
+      }
       mergeNewRootState(props.data);
+      setPrevData(props.data);
     }
   }
-  createEffect8(on8(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  createEffect7(on7(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
   const onUpdateFn_3_props_locale = createMemo17(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
+      if (prevLocale() === props.locale) {
+        return;
+      }
       mergeNewRootState({
         locale: props.locale
       });
+      setPrevLocale(props.locale);
     }
   }
-  createEffect8(on8(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
+  createEffect7(on7(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
   return <><builder_context_default.Provider value={props.builderContextSignal}><Show14
     when={props.builderContextSignal.content || needsElementRefDivForEditing()}
   ><Dynamic5
@@ -6422,6 +6416,9 @@ function Symbol(props) {
   const contentWrapper = createMemo21(() => {
     return "div";
   });
+  const customComponents = createMemo21(() => {
+    return Object.values(props.builderComponents);
+  });
   const className = createMemo21(() => {
     return [
       ...[props.attributes[getClassPropName()]],
@@ -6449,7 +6446,7 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect9(on9(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect8(on8(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}
@@ -6459,7 +6456,7 @@ function Symbol(props) {
       ...props.builderContext.context,
       symbolId: props.builderBlock?.id
     }}
-    customComponents={Object.values(props.builderComponents)}
+    customComponents={customComponents()}
     data={{
       ...props.symbol?.data,
       ...props.builderContext.localState,