@builder.io/sdk-solid 3.0.6 → 4.0.0

package/dist/index.d.ts

@@ -39,7 +39,6 @@ interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {
@@ -243,6 +242,7 @@ type Dictionary<T> = {
 };
 
 interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }
@@ -683,11 +683,11 @@ interface ContentVariantsPrps extends ExtraFrameworkProps {
     /**
      * The Builder content JSON to render (required).
      */
-    content?: Nullable<BuilderContent>;
+    content: Nullable<BuilderContent>;
     /**
      * The Builder content `model` to render (required).
      */
-    model?: string;
+    model: string;
     /**
      * Additional data to inject into your Builder content (optional).
      */
@@ -876,19 +876,19 @@ type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | '
 };
 declare const track: (args: EventProperties) => Promise<void | Response>;
 
-type SubscribeToEditor = (
-/**
- * The Builder `model` to subscribe to
- */
-model: string, 
-/**
- * The callback function to call when the content is updated.
- */
-callback: (updatedContent: BuilderContent) => void, 
-/**
- * Extra options for the listener.
- */
-options?: {
+type SubscribeToEditor = ({ model, apiKey, callback, trustedHosts }: {
+    /**
+     * The Builder `model` to subscribe to
+     */
+    model: string;
+    /**
+     * Builder API Key to use for the editor.
+     */
+    apiKey: string;
+    /**
+     * The callback function to call when the content is updated.
+     */
+    callback: (updatedContent: BuilderContent) => void;
     /**
      * List of hosts to allow editing content from.
      */

package/lib/browser/dev.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
+import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, use, Dynamic, memo } from 'solid-js/web';
 import { createContext, useContext, Show, For, createMemo, createSignal, onMount, createEffect, on } from 'solid-js';
 
 // src/blocks/button/button.tsx
@@ -939,8 +939,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -956,15 +961,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1022,9 +1040,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1043,6 +1063,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1056,7 +1081,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5028,10 +5053,10 @@ var componentInfo20 = {
     builderBlock: true
   }
 };
-var _tmpl$21 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div><video class=builder-video><source type=video/mp4>`);
 function Video(props) {
+  const [lazyVideoObserver, setLazyVideoObserver] = createSignal(void 0);
   const videoProps = createMemo(() => {
     return {
       ...props.autoPlay === true ? {
@@ -5056,12 +5081,42 @@ function Video(props) {
       ...videoProps()
     };
   });
+  let videoRef;
+  onMount(() => {
+    if (props.lazyLoad) {
+      const oberver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting)
+            return;
+          const videoElement = entry.target;
+          try {
+            Array.from(videoElement.children).filter((child) => child instanceof HTMLElement && child.tagName === "SOURCE").forEach((source) => {
+              const src = source.dataset.src;
+              if (src) {
+                source.src = src;
+              }
+            });
+            videoElement.load();
+            oberver.unobserve(videoElement);
+          } catch (error) {
+            console.error("Error loading lazy video:", error);
+          }
+        });
+      });
+      if (videoRef) {
+        oberver.observe(videoRef);
+      }
+      setLazyVideoObserver(oberver);
+    }
+  });
   return (() => {
-    const _el$ = _tmpl$35(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
     _el$.style.setProperty("position", "relative");
+    const _ref$ = videoRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : videoRef = _el$2;
     spread(_el$2, mergeProps(spreadProps, {
       get preload() {
-        return props.preload || "metadata";
+        return props.lazyLoad ? "none" : props.preload || "metadata";
       },
       get style() {
         return {
@@ -5078,29 +5133,21 @@ function Video(props) {
           } : null
         };
       },
-      get src() {
-        return props.video || "no-src";
-      },
       get poster() {
         return props.posterImage;
       }
     }), false, true);
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return !props.lazyLoad;
-      },
-      get children() {
-        const _el$3 = _tmpl$21();
-        effect(() => setAttribute(_el$3, "src", props.video));
-        return _el$3;
-      }
-    }));
+    spread(_el$3, mergeProps(() => props.lazyLoad ? {
+      "data-src": props.video
+    } : {
+      src: props.video
+    }), false, false);
     insert(_el$, createComponent(Show, {
       get when() {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$29();
+        const _el$4 = _tmpl$21();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -5113,7 +5160,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$29();
+        const _el$5 = _tmpl$21();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -5126,7 +5173,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$29();
+        const _el$6 = _tmpl$21();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -5283,7 +5330,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "4.0.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5891,7 +5938,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5907,6 +5954,9 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");
@@ -6011,13 +6061,21 @@ var createEditorListener = ({
     }
   };
 };
-var subscribeToEditor = (model, callback, options) => {
+var subscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}) => {
   if (!isBrowser) {
     logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server.");
     return () => {
     };
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -6027,7 +6085,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -6273,10 +6331,12 @@ function EnableEditor(props) {
           } : {},
           ...props.trustedHosts ? {
             trustedHosts: props.trustedHosts
-          } : {}
+          } : {},
+          modelName: props.model ?? "",
+          apiKey: props.apiKey
         });
         Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-          if (!props.model || !registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
+          if (!registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
           }
@@ -6304,7 +6364,7 @@ function EnableEditor(props) {
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
         if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
           fetchOneEntry({
-            model: props.model || "",
+            model: props.model,
             apiKey: props.apiKey,
             apiVersion: props.builderContextSignal.apiVersion,
             ...searchParamPreviewModel === "BUILDER_STUDIO" && props.context?.symbolId ? {
@@ -6498,7 +6558,7 @@ function ContentComponent(props) {
     BlocksWrapper: props.blocksWrapper || "div",
     BlocksWrapperProps: props.blocksWrapperProps || {},
     nonce: props.nonce || "",
-    model: props.model || ""
+    model: props.model
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -6939,7 +6999,7 @@ function Symbol(props) {
         return props.builderContext.canTrack;
       },
       get model() {
-        return props.symbol?.model;
+        return props.symbol?.model ?? "";
       },
       get content() {
         return contentToUse();

package/lib/browser/dev.jsx

@@ -935,8 +935,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -952,15 +957,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1011,9 +1029,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1038,6 +1060,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1057,6 +1087,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -1885,10 +1916,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 createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount9, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show16, For as For9, onMount as onMount7, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show16, For as For9, onMount as onMount8, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -4534,8 +4565,9 @@ var componentInfo20 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show13, createMemo as createMemo15 } from "solid-js";
+import { Show as Show13, onMount as onMount6, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
+  const [lazyVideoObserver, setLazyVideoObserver] = createSignal15(void 0);
   const videoProps = createMemo15(() => {
     return {
       ...props.autoPlay === true ? {
@@ -4560,6 +4592,36 @@ function Video(props) {
       ...videoProps()
     };
   });
+  let videoRef;
+  onMount6(() => {
+    if (props.lazyLoad) {
+      const oberver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting)
+            return;
+          const videoElement = entry.target;
+          try {
+            Array.from(videoElement.children).filter(
+              (child) => child instanceof HTMLElement && child.tagName === "SOURCE"
+            ).forEach((source) => {
+              const src = source.dataset.src;
+              if (src) {
+                source.src = src;
+              }
+            });
+            videoElement.load();
+            oberver.unobserve(videoElement);
+          } catch (error) {
+            console.error("Error loading lazy video:", error);
+          }
+        });
+      });
+      if (videoRef) {
+        oberver.observe(videoRef);
+      }
+      setLazyVideoObserver(oberver);
+    }
+  });
   return <><div
     style={{
       position: "relative"
@@ -4568,7 +4630,8 @@ function Video(props) {
     <video
       class="builder-video"
       {...spreadProps()}
-      preload={props.preload || "metadata"}
+      ref={videoRef}
+      preload={props.lazyLoad ? "none" : props.preload || "metadata"}
       style={{
         width: "100%",
         height: "100%",
@@ -4582,9 +4645,15 @@ function Video(props) {
           position: "absolute"
         } : null
       }}
-      src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show13 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show13></video>
+    ><source
+      type="video/mp4"
+      {...props.lazyLoad ? {
+        "data-src": props.video
+      } : {
+        src: props.video
+      }}
+    /></video>
     <Show13
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
@@ -4754,7 +4823,7 @@ var getUpdateVariantVisibilityScript = ({
 // src/components/content/components/enable-editor.tsx
 import {
   Show as Show14,
-  onMount as onMount6,
+  onMount as onMount7,
   on as on3,
   createEffect as createEffect3,
   createMemo as createMemo16,
@@ -4768,7 +4837,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "4.0.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5376,7 +5445,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5392,6 +5461,9 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");
@@ -5496,13 +5568,21 @@ var createEditorListener = ({
     }
   };
 };
-var subscribeToEditor = (model, callback, options) => {
+var subscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}) => {
   if (!isBrowser) {
     logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server.");
     return () => {
     };
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -5512,7 +5592,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -5753,7 +5833,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount7(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5767,12 +5847,14 @@ function EnableEditor(props) {
           } : {},
           ...props.trustedHosts ? {
             trustedHosts: props.trustedHosts
-          } : {}
+          } : {},
+          modelName: props.model ?? "",
+          apiKey: props.apiKey
         });
         Object.values(
           props.builderContextSignal.componentInfos
         ).forEach((registeredComponent) => {
-          if (!props.model || !registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
+          if (!registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
           }
@@ -5805,7 +5887,7 @@ function EnableEditor(props) {
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
         if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
           fetchOneEntry({
-            model: props.model || "",
+            model: props.model,
             apiKey: props.apiKey,
             apiVersion: props.builderContextSignal.apiVersion,
             ...searchParamPreviewModel === "BUILDER_STUDIO" && props.context?.symbolId ? {
@@ -5993,7 +6075,7 @@ function ContentComponent(props) {
     BlocksWrapper: props.blocksWrapper || "div",
     BlocksWrapperProps: props.blocksWrapperProps || {},
     nonce: props.nonce || "",
-    model: props.model || ""
+    model: props.model
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -6098,7 +6180,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount8(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6228,7 +6310,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount9(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
@@ -6251,7 +6333,7 @@ function Symbol(props) {
       ...contentToUse()?.data?.state
     }}
     canTrack={props.builderContext.canTrack}
-    model={props.symbol?.model}
+    model={props.symbol?.model ?? ""}
     content={contentToUse()}
     linkComponent={props.builderLinkComponent}
     blocksWrapper={blocksWrapper()}