@builder.io/sdk-solid 3.0.3 → 3.0.5

package/dist/index.d.ts

@@ -465,7 +465,7 @@ interface ComponentInfo {
         /**
          * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderBlock?: boolean;
         /**
@@ -473,7 +473,7 @@ interface ComponentInfo {
          * The Builder Context contains a lot of data relevant to the current `Content` render.
          * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderContext?: boolean;
         /**

package/lib/browser/dev.js

@@ -1,5 +1,5 @@
 import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
-import { createContext, useContext, Show, For, createMemo, onMount, createSignal, createEffect, on } from 'solid-js';
+import { createContext, useContext, Show, For, createMemo, createSignal, onMount, createEffect, on } from 'solid-js';
 
 // src/blocks/button/button.tsx
 
@@ -1758,7 +1758,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3e5f33a4 {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-6331dfc5 {
   display: flex;
   line-height: normal;
 }`);
@@ -1887,7 +1887,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-3e5f33a4";
+        return getColumnsClass(props.builderBlock?.id) + " div-6331dfc5";
       },
       get style() {
         return columnsCssVars();
@@ -1928,9 +1928,6 @@ function Columns(props) {
               get parent() {
                 return props.builderBlock.id;
               },
-              styleProp: {
-                flexGrow: "1"
-              },
               get context() {
                 return props.builderContext;
               },
@@ -1942,6 +1939,9 @@ function Columns(props) {
               },
               get blocks() {
                 return column.blocks;
+              },
+              styleProp: {
+                "flex-grow": "1"
               }
             });
           }
@@ -2012,16 +2012,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-56e07140">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-56e07140-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-56e07140 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-dc6700b4">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-dc6700b4-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-dc6700b4 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-56e07140 {
+}.div-dc6700b4 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-56e07140-2 {
+}.div-dc6700b4-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2071,8 +2071,6 @@ 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, {
@@ -2086,7 +2084,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-56e07140", _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-dc6700b4", _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()
@@ -3902,9 +3900,9 @@ function logFetch(url) {
 }
 
 // src/blocks/form/form/form.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-27d18614">`);
+var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
 var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-27d18614 {
+var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-04a43b72 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4114,34 +4112,7 @@ function FormComponent(props) {
         return props.name;
       }
     }, {}, {}, () => props.attributes), false, true);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.builderBlock && props.builderBlock.children;
-      },
-      get children() {
-        return createComponent(For, {
-          get each() {
-            return props.builderBlock?.children;
-          },
-          children: (block, _index) => {
-            const idx = _index();
-            return createComponent(block_default, {
-              key: `form-block-${idx}`,
-              block,
-              get context() {
-                return props.builderContext;
-              },
-              get registeredComponents() {
-                return props.builderComponents;
-              },
-              get linkComponent() {
-                return props.builderLinkComponent;
-              }
-            });
-          }
-        });
-      }
-    }), null);
+    insert(_el$, () => props.children, null);
     insert(_el$, createComponent(Show, {
       get when() {
         return submissionState() === "error";
@@ -4650,7 +4621,6 @@ function Video(props) {
           "object-position": props.position,
           // Hack to get object fit to work as expected and
           // not have the video overflow
-          "z-index": 2,
           "border-radius": "1px",
           ...props.aspectRatio ? {
             position: "absolute"
@@ -4878,7 +4848,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.3";
+var SDK_VERSION = "3.0.5";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/browser/dev.jsx

@@ -1676,7 +1676,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-3e5f33a4"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-6331dfc5"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1695,17 +1695,17 @@ function Columns(props) {
         ><Blocks_default
           path={`columns.${index}.blocks`}
           parent={props.builderBlock.id}
-          styleProp={{
-            flexGrow: "1"
-          }}
           context={props.builderContext}
           registeredComponents={props.builderComponents}
           linkComponent={props.builderLinkComponent}
           blocks={column.blocks}
+          styleProp={{
+            "flex-grow": "1"
+          }}
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-3e5f33a4 {
+    <style>{`.div-6331dfc5 {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1720,7 +1720,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show8, onMount as onMount4, createMemo as createMemo8 } from "solid-js";
+import { Show as Show8, createMemo as createMemo8 } from "solid-js";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1810,14 +1810,12 @@ 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-56e07140"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-dc6700b4"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1835,22 +1833,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-56e07140"
+        class="builder-image-sizer div-dc6700b4"
         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-56e07140-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-dc6700b4-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-56e07140 {
+    <style>{`.img-dc6700b4 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-56e07140 {
+}.div-dc6700b4 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-56e07140-2 {
+}.div-dc6700b4-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1886,10 +1884,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount7, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
+import { Show as Show15, For as For8, onMount as onMount6, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -3165,12 +3163,12 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, createSignal as createSignal11 } from "solid-js";
+import { onMount as onMount4, createSignal as createSignal11 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal11([]);
   const [scriptsRun, setScriptsRun] = createSignal11([]);
   let elementRef;
-  onMount5(() => {
+  onMount4(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -3520,7 +3518,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show11, For as For7, createSignal as createSignal13 } from "solid-js";
+import { Show as Show11, createSignal as createSignal13 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3737,16 +3735,7 @@ function FormComponent(props) {
       {...{}}
       {...props.attributes}
     >
-      <Show11 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
-        const idx = _index();
-        return <Block_default
-          key={`form-block-${idx}`}
-          block={block}
-          context={props.builderContext}
-          registeredComponents={props.builderComponents}
-          linkComponent={props.builderLinkComponent}
-        />;
-      }}</For7></Show11>
+      {props.children}
       <Show11 when={submissionState() === "error"}><Blocks_default
         path="errorMessage"
         blocks={props.errorMessage}
@@ -3757,14 +3746,14 @@ function FormComponent(props) {
         blocks={props.sendingMessage}
         context={props.builderContext}
       /></Show11>
-      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-27d18614">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
+      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-04a43b72">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
       <Show11 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
       /></Show11>
     </form>
-    <style>{`.pre-27d18614 {
+    <style>{`.pre-04a43b72 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -3889,7 +3878,7 @@ var componentInfo15 = {
 };
 
 // src/blocks/form/select/select.tsx
-import { For as For8 } from "solid-js";
+import { For as For7 } from "solid-js";
 function SelectComponent(props) {
   return <><select
     {...{}}
@@ -3899,10 +3888,10 @@ function SelectComponent(props) {
     defaultValue={props.defaultValue}
     name={props.name}
     required={props.required}
-  ><For8 each={props.options}>{(option, _index) => {
+  ><For7 each={props.options}>{(option, _index) => {
     const index = _index();
     return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
-  }}</For8></select></>;
+  }}</For7></select></>;
 }
 var select_default = SelectComponent;
 
@@ -4157,7 +4146,6 @@ function Video(props) {
         "object-position": props.position,
         // Hack to get object fit to work as expected and
         // not have the video overflow
-        "z-index": 2,
         "border-radius": "1px",
         ...props.aspectRatio ? {
           position: "absolute"
@@ -4342,7 +4330,7 @@ var Inlined_script_default = InlinedScript;
 // src/components/content/components/enable-editor.tsx
 import {
   Show as Show13,
-  onMount as onMount6,
+  onMount as onMount5,
   on as on3,
   createEffect as createEffect3,
   createMemo as createMemo15,
@@ -4356,7 +4344,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.3";
+var SDK_VERSION = "3.0.5";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5350,7 +5338,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount5(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5695,7 +5683,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount6(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -5715,7 +5703,7 @@ function ContentVariants(props) {
         scriptStr={updateCookieAndStylesScriptStr()}
         nonce={props.nonce || ""}
       />
-      <For9 each={getVariants(props.content)}>{(variant, _index) => {
+      <For8 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           apiHost={props.apiHost}
@@ -5742,7 +5730,7 @@ function ContentVariants(props) {
           trustedHosts={props.trustedHosts}
           {...{}}
         />;
-      }}</For9>
+      }}</For8>
     </Show15>
     <Content_default
       apiHost={props.apiHost}
@@ -5825,7 +5813,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount7(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
   function onUpdateFn_0() {

package/lib/browser/index.js

@@ -1,5 +1,5 @@
 import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
-import { createContext, useContext, Show, For, createMemo, onMount, createSignal, createEffect, on } from 'solid-js';
+import { createContext, useContext, Show, For, createMemo, createSignal, onMount, createEffect, on } from 'solid-js';
 
 // src/blocks/button/button.tsx
 
@@ -1749,7 +1749,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3e5f33a4 {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-6331dfc5 {
   display: flex;
   line-height: normal;
 }`);
@@ -1878,7 +1878,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-3e5f33a4";
+        return getColumnsClass(props.builderBlock?.id) + " div-6331dfc5";
       },
       get style() {
         return columnsCssVars();
@@ -1919,9 +1919,6 @@ function Columns(props) {
               get parent() {
                 return props.builderBlock.id;
               },
-              styleProp: {
-                flexGrow: "1"
-              },
               get context() {
                 return props.builderContext;
               },
@@ -1933,6 +1930,9 @@ function Columns(props) {
               },
               get blocks() {
                 return column.blocks;
+              },
+              styleProp: {
+                "flex-grow": "1"
               }
             });
           }
@@ -2003,16 +2003,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-56e07140">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-56e07140-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-56e07140 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-dc6700b4">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-dc6700b4-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-dc6700b4 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-56e07140 {
+}.div-dc6700b4 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-56e07140-2 {
+}.div-dc6700b4-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2061,8 +2061,6 @@ 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, {
@@ -2076,7 +2074,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-56e07140", _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-dc6700b4", _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()
@@ -3889,9 +3887,9 @@ function logFetch(url) {
 }
 
 // src/blocks/form/form/form.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-27d18614">`);
+var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
 var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-27d18614 {
+var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-04a43b72 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4101,34 +4099,7 @@ function FormComponent(props) {
         return props.name;
       }
     }, {}, {}, () => props.attributes), false, true);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.builderBlock && props.builderBlock.children;
-      },
-      get children() {
-        return createComponent(For, {
-          get each() {
-            return props.builderBlock?.children;
-          },
-          children: (block, _index) => {
-            const idx = _index();
-            return createComponent(block_default, {
-              key: `form-block-${idx}`,
-              block,
-              get context() {
-                return props.builderContext;
-              },
-              get registeredComponents() {
-                return props.builderComponents;
-              },
-              get linkComponent() {
-                return props.builderLinkComponent;
-              }
-            });
-          }
-        });
-      }
-    }), null);
+    insert(_el$, () => props.children, null);
     insert(_el$, createComponent(Show, {
       get when() {
         return submissionState() === "error";
@@ -4637,7 +4608,6 @@ function Video(props) {
           "object-position": props.position,
           // Hack to get object fit to work as expected and
           // not have the video overflow
-          "z-index": 2,
           "border-radius": "1px",
           ...props.aspectRatio ? {
             position: "absolute"
@@ -4865,7 +4835,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.3";
+var SDK_VERSION = "3.0.5";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({