@builder.io/sdk-solid 0.8.1 → 0.10.0

package/dist/index.d.ts

@@ -77,6 +77,29 @@ interface BuilderBlock {
     show?: boolean;
 }
 
+type Nullable<T> = T | null | undefined;
+type Dictionary<T> = {
+    [key: string]: T;
+};
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+type BlocksWrapperProps = {
+    blocks: BuilderBlock[] | undefined;
+    parent: string | undefined;
+    path: string | undefined;
+    styleProp: Record<string, any> | undefined;
+    /**
+     * The element that wraps each list of blocks. Defaults to a `div` element ('ScrollView' in React Native).
+     */
+    BlocksWrapper: any;
+    /**
+     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     */
+    BlocksWrapperProps: any;
+};
+
 type ApiVersion = 'v2' | 'v3';
 
 interface Input {
@@ -201,14 +224,6 @@ interface Input {
     onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
 }
 
-type Nullable<T> = T | null | undefined;
-type Dictionary<T> = {
-    [key: string]: T;
-};
-type Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
 interface Breakpoints {
     small: number;
     medium: number;
@@ -424,7 +439,7 @@ type RegisteredComponent = ComponentInfo & {
 type RegisteredComponents = Dictionary<RegisteredComponent>;
 type BuilderRenderState = Record<string, unknown>;
 type BuilderRenderContext = Record<string, unknown>;
-interface BuilderContextInterface {
+interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'> {
     content: Nullable<BuilderContent>;
     context: BuilderRenderContext;
     /**
@@ -564,14 +579,7 @@ interface VideoProps {
 
 declare function Video(props: VideoProps): solid_js.JSX.Element;
 
-type BlocksWrapperProps = {
-    blocks: BuilderBlock[] | undefined;
-    parent: string | undefined;
-    path: string | undefined;
-    styleProp: Record<string, any> | undefined;
-};
-
-type BlocksProps = Partial<BlocksWrapperProps> & {
+type BlocksProps = Partial<Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWrapperProps">> & {
     context?: BuilderContextInterface;
     registeredComponents?: RegisteredComponents;
 };
@@ -593,6 +601,22 @@ interface ContentVariantsPrps {
     /** @deprecated use `enrich` instead **/
     includeRefs?: boolean;
     enrich?: boolean;
+    /**
+     * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
+     */
+    contentWrapper?: any;
+    /**
+     * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
+     */
+    contentWrapperProps?: any;
+    /**
+     * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
+     */
+    blocksWrapper?: any;
+    /**
+     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     */
+    blocksWrapperProps?: any;
 }
 
 type VariantsProviderProps = ContentVariantsPrps & {
@@ -805,11 +829,11 @@ type ContentResults = {
 /**
  * @internal Exported only for testing purposes. Do not use.
  */
-declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
+declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<BuilderContent[]>;
 /**
  * Returns a paginated array of entries that match the given options.
  */
-declare function fetchEntries(options: GetContentOptions): Promise<ContentResults>;
+declare function fetchEntries(options: GetContentOptions): Promise<BuilderContent[]>;
 /**
  * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
  */
@@ -871,11 +895,16 @@ type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | '
 };
 declare const track: (args: EventProperties) => Promise<void | Response>;
 
+/**
+ * Lol Typescript
+ * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
+ */
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 type OptionalFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K];
 };
 type RequiredFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K];
 };
 type Enforced<T> = {
     [K in keyof T]-?: T[K];

package/lib/browser/dev.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: {} });
 
@@ -613,85 +615,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;
 }
 
@@ -712,14 +639,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) {
@@ -1157,7 +1081,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" : "");
@@ -1184,33 +1107,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;
 
@@ -1231,6 +1156,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() {
@@ -1288,7 +1219,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 || []);
@@ -1382,7 +1313,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({
@@ -1411,7 +1342,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({
@@ -1452,10 +1383,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$;
   })();
@@ -1510,7 +1441,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) {
@@ -1557,7 +1488,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;
       }
@@ -1639,10 +1570,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 {
@@ -2136,7 +2067,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([]);
@@ -2171,7 +2102,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$) => {
@@ -2231,7 +2162,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([]);
@@ -2267,7 +2198,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);
@@ -2424,10 +2355,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 {
@@ -2548,10 +2479,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$;
@@ -2642,7 +2573,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) {
@@ -2705,7 +2636,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;
       }
@@ -2864,10 +2795,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$);
@@ -3056,7 +2987,7 @@ async function fetchOneEntry(options) {
     limit: 1
   });
   if (allContent) {
-    return allContent.results[0] || null;
+    return allContent[0] || null;
   }
   return null;
 }
@@ -3079,9 +3010,9 @@ var _processContentResult = async (options, content, url = generateContentUrl(op
     content.results = newResults;
   }
   if (!canTrack)
-    return content;
+    return content.results;
   if (!(isBrowser() || TARGET === "reactNative"))
-    return content;
+    return content.results;
   try {
     const newResults = [];
     for (const item of content.results) {
@@ -3094,7 +3025,7 @@ var _processContentResult = async (options, content, url = generateContentUrl(op
   } catch (e) {
     logger.error("Could not process A/B tests. ", e);
   }
-  return content;
+  return content.results;
 };
 async function fetchEntries(options) {
   try {
@@ -3367,7 +3298,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.8.1";
+var SDK_VERSION = "0.10.0";
 
 // src/functions/register.ts
 var registry = {};
@@ -3501,11 +3432,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) {
@@ -3738,10 +3669,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}`;
             }
@@ -3749,7 +3677,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;
             },
@@ -3759,9 +3691,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;
+            }
+          }));
         }
       });
     }
@@ -3950,7 +3887,9 @@ function ContentComponent(props) {
       ...acc,
       [info.name]: serializeComponentInfo(info)
     }), {}),
-    inheritedStyles: {}
+    inheritedStyles: {},
+    BlocksWrapper: props.blocksWrapper || "div",
+    BlocksWrapperProps: props.blocksWrapperProps || {}
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -3995,6 +3934,12 @@ function ContentComponent(props) {
         },
         get builderContextSignal() {
           return builderContextSignal();
+        },
+        get contentWrapper() {
+          return props.contentWrapper;
+        },
+        get contentWrapperProps() {
+          return props.contentWrapperProps;
         }
       }, {
         setBuilderContextSignal
@@ -4142,6 +4087,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;
             }
           });
         }
@@ -4184,6 +4141,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;
     }
   }))];
 }
@@ -4214,7 +4183,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() {
@@ -4240,7 +4209,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();