@builder.io/sdk-solid 0.8.0 → 0.9.0

package/lib/browser/dev.jsx

@@ -41,7 +41,9 @@ var builder_context_default = createContext({
   apiKey: null,
   apiVersion: void 0,
   componentInfos: {},
-  inheritedStyles: {}
+  inheritedStyles: {},
+  BlocksWrapper: "div",
+  BlocksWrapperProps: {}
 });
 
 // src/context/components.context.ts
@@ -598,85 +600,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 SHOW_WARNINGS = false;
-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)) {
-      if (SHOW_WARNINGS) {
-        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
-      }
-      return acc;
-    }
-    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== "number") {
-      if (SHOW_WARNINGS) {
-        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
-      }
-      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;
 }
 
@@ -697,14 +624,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) {
@@ -994,6 +918,7 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
+import { Dynamic as Dynamic4 } from "solid-js/web";
 import { css as css2 } from "solid-styled-components";
 function BlocksWrapper(props) {
   function className() {
@@ -1027,7 +952,7 @@ function BlocksWrapper(props) {
       );
     }
   }
-  return <div
+  return <Dynamic4
     class={className() + " " + css2({
       display: "flex",
       flexDirection: "column",
@@ -1040,7 +965,9 @@ function BlocksWrapper(props) {
     onClick={(event) => onClick()}
     onMouseEnter={(event) => onMouseEnter()}
     onKeyPress={(event) => onClick()}
-  >{props.children}</div>;
+    {...props.BlocksWrapperProps}
+    component={props.BlocksWrapper}
+  >{props.children}</Dynamic4>;
 }
 var Blocks_wrapper_default = BlocksWrapper;
 
@@ -1053,6 +980,8 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
+    BlocksWrapper={props.context?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps}
   >
     <Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
       const index = _index();
@@ -2547,6 +2476,7 @@ var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
 import { Show as Show10, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
+import { Dynamic as Dynamic5 } from "solid-js/web";
 
 // src/helpers/preview-lru-cache/get.ts
 function getPreviewContent(_searchParams) {
@@ -3033,7 +2963,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 = {};
@@ -3171,6 +3101,9 @@ function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
   const [lastUpdated, setLastUpdated] = createSignal10(0);
   const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal10(false);
+  const [ContentWrapper, setContentWrapper] = createSignal10(
+    props.contentWrapper || "div"
+  );
   const [httpReqsData, setHttpReqsData] = createSignal10({});
   const [clicked, setClicked] = createSignal10(false);
   function mergeNewContent(newContent) {
@@ -3415,7 +3348,7 @@ function EnableEditor(props) {
     emitStateUpdate();
   }
   createEffect2(on2(() => [props.builderContextSignal.rootState], onUpdateFn_4));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><div
+  return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
     class={`variant-${props.content?.testVariationId || props.content?.id}`}
     {...{}}
     key={forceReRenderCount()}
@@ -3428,7 +3361,9 @@ function EnableEditor(props) {
       hidden: true,
       "aria-hidden": true
     }}
-  >{props.children}</div></Show10></builder_context_default.Provider>;
+    {...props.contentWrapperProps}
+    component={ContentWrapper()}
+  >{props.children}</Dynamic5></Show10></builder_context_default.Provider>;
 }
 var Enable_editor_default = EnableEditor;
 
@@ -3618,7 +3553,9 @@ function ContentComponent(props) {
       }),
       {}
     ),
-    inheritedStyles: {}
+    inheritedStyles: {},
+    BlocksWrapper: props.blocksWrapper || "div",
+    BlocksWrapperProps: props.blocksWrapperProps || {}
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -3641,6 +3578,8 @@ function ContentComponent(props) {
     enrich={props.enrich}
     showContent={props.showContent}
     builderContextSignal={builderContextSignal()}
+    contentWrapper={props.contentWrapper}
+    contentWrapperProps={props.contentWrapperProps}
     {...{
       setBuilderContextSignal
     }}
@@ -3719,6 +3658,10 @@ function ContentVariants(props) {
           includeRefs={props.includeRefs}
           enrich={props.enrich}
           isSsrAbTest={shouldRenderVariants()}
+          blocksWrapper={props.blocksWrapper}
+          blocksWrapperProps={props.blocksWrapperProps}
+          contentWrapper={props.contentWrapper}
+          contentWrapperProps={props.contentWrapperProps}
         />;
       }}</For5>
     </Show12>
@@ -3737,6 +3680,10 @@ function ContentVariants(props) {
       includeRefs={props.includeRefs}
       enrich={props.enrich}
       isSsrAbTest={shouldRenderVariants()}
+      blocksWrapper={props.blocksWrapper}
+      blocksWrapperProps={props.blocksWrapperProps}
+      contentWrapper={props.contentWrapper}
+      contentWrapperProps={props.contentWrapperProps}
     />
   </>;
 }