@builder.io/sdk-solid 0.8.0 → 0.9.0

package/lib/browser/index.js

@@ -55,7 +55,9 @@ var builder_context_default = createContext({
   apiKey: null,
   apiVersion: void 0,
   componentInfos: {},
-  inheritedStyles: {}
+  inheritedStyles: {},
+  BlocksWrapper: "div",
+  BlocksWrapperProps: {}
 });
 var components_context_default = createContext({ registeredComponents: {} });
 
@@ -608,78 +610,10 @@ function getBlockActions(options) {
   return obj;
 }
 
-// src/functions/sanitize-react-native-block-styles.ts
-var propertiesThatMustBeNumber = /* @__PURE__ */ new Set(["lineHeight"]);
-var displayValues = /* @__PURE__ */ new Set(["flex", "none"]);
-var normalizeNumber = (value) => {
-  if (Number.isNaN(value)) {
-    return void 0;
-  } else if (value < 0) {
-    return 0;
-  } else {
-    return value;
-  }
-};
-var sanitizeReactNativeBlockStyles = (styles) => {
-  return Object.keys(styles).reduce((acc, key) => {
-    const propertyValue = styles[key];
-    if (key === "display" && !displayValues.has(propertyValue)) {
-      return acc;
-    }
-    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== "number") {
-      return acc;
-    }
-    if (typeof propertyValue === "string") {
-      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
-      if (isPixelUnit) {
-        const newValue = parseFloat(propertyValue);
-        const normalizedValue = normalizeNumber(newValue);
-        if (normalizedValue) {
-          return {
-            ...acc,
-            [key]: normalizedValue
-          };
-        } else {
-          return acc;
-        }
-      } else if (propertyValue === "0") {
-        return {
-          ...acc,
-          [key]: 0
-        };
-      }
-    }
-    return {
-      ...acc,
-      [key]: propertyValue
-    };
-  }, {});
-};
-
-// src/functions/get-react-native-block-styles.ts
-function getReactNativeBlockStyles({
-  block,
-  context,
-  blockStyles
-}) {
-  const responsiveStyles = block.responsiveStyles;
-  if (!responsiveStyles) {
-    return {};
-  }
-  const styles = {
-    // recursively apply inherited styles so that they can be passed down to children `Text` blocks
-    ...context.inheritedStyles,
-    ...responsiveStyles.large || {},
-    ...responsiveStyles.medium || {},
-    ...responsiveStyles.small || {},
-    ...blockStyles
-  };
-  const newStyles = sanitizeReactNativeBlockStyles(styles);
-  return newStyles;
-}
-
 // src/functions/transform-block-properties.ts
-function transformBlockProperties(properties) {
+function transformBlockProperties({
+  properties
+}) {
   return properties;
 }
 
@@ -700,14 +634,11 @@ function getBlockProperties({
     style: block.style ? getStyleAttribute(block.style) : void 0,
     class: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
   };
-  if (TARGET === "reactNative") {
-    properties.style = getReactNativeBlockStyles({
-      block,
-      context,
-      blockStyles: properties.style
-    });
-  }
-  return transformBlockProperties(properties);
+  return transformBlockProperties({
+    properties,
+    context,
+    block
+  });
 }
 function getStyleAttribute(style) {
   switch (TARGET) {
@@ -1145,7 +1076,6 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
 function BlocksWrapper(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -1172,33 +1102,35 @@ function BlocksWrapper(props) {
       }, "*");
     }
   }
-  return (() => {
-    const _el$ = _tmpl$4();
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return className() + " " + css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch"
-        });
-      },
-      get ["builder-path"]() {
-        return props.path;
-      },
-      get ["builder-parent-id"]() {
-        return props.parent;
-      }
-    }, {}, {
-      get style() {
-        return props.styleProp;
-      },
-      "onClick": (event) => onClick(),
-      "onMouseEnter": (event) => onMouseEnter(),
-      "onKeyPress": (event) => onClick()
-    }), false, true);
-    insert(_el$, () => props.children);
-    return _el$;
-  })();
+  return createComponent(Dynamic, mergeProps({
+    get ["class"]() {
+      return className() + " " + css({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch"
+      });
+    },
+    get ["builder-path"]() {
+      return props.path;
+    },
+    get ["builder-parent-id"]() {
+      return props.parent;
+    }
+  }, {}, {
+    get style() {
+      return props.styleProp;
+    },
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
+    onKeyPress: (event) => onClick()
+  }, () => props.BlocksWrapperProps, {
+    get component() {
+      return props.BlocksWrapper;
+    },
+    get children() {
+      return props.children;
+    }
+  }));
 }
 var blocks_wrapper_default = BlocksWrapper;
 
@@ -1219,6 +1151,12 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get BlocksWrapper() {
+      return props.context?.BlocksWrapper;
+    },
+    get BlocksWrapperProps() {
+      return props.context?.BlocksWrapperProps;
+    },
     get children() {
       return [createComponent(Show, {
         get when() {
@@ -1276,7 +1214,7 @@ function Blocks(props) {
 var blocks_default = Blocks;
 
 // src/blocks/columns/columns.tsx
-var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
 function Columns(props) {
   const [gutterSize, setGutterSize] = createSignal(typeof props.space === "number" ? props.space || 0 : 20);
   const [cols, setCols] = createSignal(props.columns || []);
@@ -1370,7 +1308,7 @@ function Columns(props) {
       `;
   }
   return (() => {
-    const _el$ = _tmpl$5();
+    const _el$ = _tmpl$4();
     spread(_el$, mergeProps({
       get ["class"]() {
         return `builder-columns ${props.builderBlock.id}-breakpoints ` + css({
@@ -1399,7 +1337,7 @@ function Columns(props) {
       children: (column, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$5();
+          const _el$2 = _tmpl$4();
           spread(_el$2, mergeProps({
             get ["class"]() {
               return "builder-column " + css({
@@ -1440,10 +1378,10 @@ function Columns(props) {
   })();
 }
 var columns_default = Columns;
-var _tmpl$6 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span>`);
 function FragmentComponent(props) {
   return (() => {
-    const _el$ = _tmpl$6();
+    const _el$ = _tmpl$5();
     insert(_el$, () => props.children);
     return _el$;
   })();
@@ -1498,7 +1436,7 @@ function getSrcSet(url) {
 }
 
 // src/blocks/image/image.tsx
-var _tmpl$7 = /* @__PURE__ */ template(`<source type=image/webp>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$22 = /* @__PURE__ */ template(`<picture><img loading=lazy>`);
 var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
 function Image(props) {
@@ -1544,7 +1482,7 @@ function Image(props) {
         return webpSrcSet();
       },
       get children() {
-        const _el$2 = _tmpl$7();
+        const _el$2 = _tmpl$6();
         effect(() => setAttribute(_el$2, "srcset", webpSrcSet()));
         return _el$2;
       }
@@ -1626,10 +1564,10 @@ function Image(props) {
   })];
 }
 var image_default = Image;
-var _tmpl$8 = /* @__PURE__ */ template(`<section>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<section>`);
 function SectionComponent(props) {
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$7();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get style() {
         return {
@@ -2123,7 +2061,7 @@ var componentInfo3 = {
     advanced: true
   }]
 };
-var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2157,7 +2095,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$9();
+    const _el$ = _tmpl$8();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -2217,7 +2155,7 @@ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "applicati
 var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
-var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -2252,7 +2190,7 @@ function Embed(props) {
   }
   createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$10();
+    const _el$ = _tmpl$9();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -2408,10 +2346,10 @@ var componentInfo7 = {
   noWrap: true,
   static: true
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$10();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -2532,10 +2470,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$11();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2626,7 +2564,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<source type=video/mp4>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
@@ -2689,7 +2627,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$13();
+        const _el$3 = _tmpl$12();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -2848,10 +2786,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$13();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -3346,7 +3284,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.8.0";
+var SDK_VERSION = "0.9.0";
 
 // src/functions/register.ts
 var registry = {};
@@ -3479,11 +3417,11 @@ var setupBrowserForEditing = (options = {}) => {
 };
 
 // src/components/content/components/enable-editor.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<div>`);
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
   createSignal(0);
   const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
+  const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
   const [clicked, setClicked] = createSignal(false);
   function mergeNewContent(newContent) {
@@ -3715,10 +3653,7 @@ function EnableEditor(props) {
           return props.builderContextSignal.content;
         },
         get children() {
-          const _el$ = _tmpl$15();
-          const _ref$ = elementRef;
-          typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
-          spread(_el$, mergeProps({
+          return createComponent(Dynamic, mergeProps({
             get ["class"]() {
               return `variant-${props.content?.testVariationId || props.content?.id}`;
             }
@@ -3726,7 +3661,11 @@ function EnableEditor(props) {
             get key() {
               return forceReRenderCount();
             },
-            "onClick": (event) => onClick(event),
+            ref(r$) {
+              const _ref$ = elementRef;
+              typeof _ref$ === "function" ? _ref$(r$) : elementRef = r$;
+            },
+            onClick: (event) => onClick(event),
             get ["builder-content-id"]() {
               return props.builderContextSignal.content?.id;
             },
@@ -3736,9 +3675,14 @@ function EnableEditor(props) {
           }, {}, () => props.showContent ? {} : {
             hidden: true,
             "aria-hidden": true
-          }), false, true);
-          insert(_el$, () => props.children);
-          return _el$;
+          }, () => props.contentWrapperProps, {
+            get component() {
+              return ContentWrapper();
+            },
+            get children() {
+              return props.children;
+            }
+          }));
         }
       });
     }
@@ -3927,7 +3871,9 @@ function ContentComponent(props) {
       ...acc,
       [info.name]: serializeComponentInfo(info)
     }), {}),
-    inheritedStyles: {}
+    inheritedStyles: {},
+    BlocksWrapper: props.blocksWrapper || "div",
+    BlocksWrapperProps: props.blocksWrapperProps || {}
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -3972,6 +3918,12 @@ function ContentComponent(props) {
         },
         get builderContextSignal() {
           return builderContextSignal();
+        },
+        get contentWrapper() {
+          return props.contentWrapper;
+        },
+        get contentWrapperProps() {
+          return props.contentWrapperProps;
         }
       }, {
         setBuilderContextSignal
@@ -4119,6 +4071,18 @@ function ContentVariants(props) {
             },
             get isSsrAbTest() {
               return shouldRenderVariants();
+            },
+            get blocksWrapper() {
+              return props.blocksWrapper;
+            },
+            get blocksWrapperProps() {
+              return props.blocksWrapperProps;
+            },
+            get contentWrapper() {
+              return props.contentWrapper;
+            },
+            get contentWrapperProps() {
+              return props.contentWrapperProps;
             }
           });
         }
@@ -4161,6 +4125,18 @@ function ContentVariants(props) {
     },
     get isSsrAbTest() {
       return shouldRenderVariants();
+    },
+    get blocksWrapper() {
+      return props.blocksWrapper;
+    },
+    get blocksWrapperProps() {
+      return props.blocksWrapperProps;
+    },
+    get contentWrapper() {
+      return props.contentWrapper;
+    },
+    get contentWrapperProps() {
+      return props.contentWrapperProps;
     }
   }))];
 }
@@ -4191,7 +4167,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$16 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
@@ -4217,7 +4193,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$16();
+    const _el$ = _tmpl$14();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();