@builder.io/sdk-solid 3.0.6 → 4.0.0

package/lib/node/index.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';
 import { createRequire } from 'node:module';
 
@@ -1099,8 +1099,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
   },
@@ -1116,15 +1121,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,
@@ -1182,9 +1200,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 "";
@@ -1203,6 +1223,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) {
@@ -1216,7 +1241,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5184,10 +5209,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 ? {
@@ -5212,12 +5237,41 @@ 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 (error2) {
+          }
+        });
+      });
+      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 {
@@ -5234,29 +5288,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");
@@ -5269,7 +5315,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");
@@ -5282,7 +5328,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");
@@ -5439,7 +5485,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 = () => ({
@@ -6041,7 +6087,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -6057,6 +6103,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
       }
     }, "*");
@@ -6161,13 +6210,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,
@@ -6177,7 +6234,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -6422,10 +6479,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, "*");
           }
@@ -6453,7 +6512,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 ? {
@@ -6647,7 +6706,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) => ({
@@ -7088,7 +7147,7 @@ function Symbol(props) {
         return props.builderContext.canTrack;
       },
       get model() {
-        return props.symbol?.model;
+        return props.symbol?.model ?? "";
       },
       get content() {
         return contentToUse();

package/lib/node/index.jsx

@@ -1099,8 +1099,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
   },
@@ -1116,15 +1121,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,
@@ -1175,9 +1193,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 "";
@@ -1202,6 +1224,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) {
@@ -1221,6 +1251,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -2048,10 +2079,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) => {
@@ -4694,8 +4725,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 ? {
@@ -4720,6 +4752,35 @@ 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 (error2) {
+          }
+        });
+      });
+      if (videoRef) {
+        oberver.observe(videoRef);
+      }
+      setLazyVideoObserver(oberver);
+    }
+  });
   return <><div
     style={{
       position: "relative"
@@ -4728,7 +4789,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%",
@@ -4742,9 +4804,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
@@ -4914,7 +4982,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,
@@ -4928,7 +4996,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 = () => ({
@@ -5530,7 +5598,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5546,6 +5614,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
       }
     }, "*");
@@ -5650,13 +5721,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,
@@ -5666,7 +5745,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -5906,7 +5985,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount7(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5920,12 +5999,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, "*");
           }
@@ -5958,7 +6039,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 ? {
@@ -6146,7 +6227,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) => ({
@@ -6251,7 +6332,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount8(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6381,7 +6462,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount9(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
@@ -6404,7 +6485,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()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "",
   "files": [
     "dist",