@builder.io/sdk-svelte 3.0.6 → 4.0.0

package/lib/node/helpers/subscribe-to-editor.d.ts

@@ -9,19 +9,19 @@ type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> &
     };
 };
 export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
-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/node/helpers/subscribe-to-editor.js

@@ -38,12 +38,15 @@ export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
  * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
  * Sends the updated `content` to the `callback` function.
  */
-export const subscribeToEditor = (model, callback, options) => {
+export const 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,
@@ -51,7 +54,7 @@ export const subscribeToEditor = (model, callback, options) => {
             configureSdk: () => { }
         },
         model,
-        trustedHosts: options?.trustedHosts
+        trustedHosts
     });
     window.addEventListener('message', listener);
     return () => {

package/lib/node/scripts/init-editing.d.ts

@@ -1,5 +1,7 @@
 export declare const registerInsertMenu: () => void;
-export declare const setupBrowserForEditing: (options?: {
+export declare const setupBrowserForEditing: (options: {
+    modelName: string;
+    apiKey: string;
     enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;

package/lib/node/scripts/init-editing.js

@@ -27,7 +27,7 @@ export const registerInsertMenu = () => {
     });
 };
 let isSetupForEditing = false;
-export const setupBrowserForEditing = (options = {}) => {
+export const setupBrowserForEditing = (options) => {
     if (isSetupForEditing) {
         return;
     }
@@ -43,6 +43,9 @@ export const 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
             }
         }, '*');

package/lib/node/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/lib/node/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "3.0.6",
+  "version": "4.0.0",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/symbol/symbol.svelte

@@ -83,7 +83,7 @@
       ...contentToUse?.data?.state,
     }}
     canTrack={$builderContext.canTrack}
-    model={symbol?.model}
+    model={symbol?.model ?? ""}
     content={contentToUse}
     linkComponent={builderLinkComponent}
     blocksWrapper={blocksWrapper()}

package/src/blocks/video/video.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+
   import type { VideoProps } from "./video.types";
 
+  export let lazyLoad: VideoProps["lazyLoad"] = undefined;
   export let autoPlay: VideoProps["autoPlay"] = undefined;
   export let muted: VideoProps["muted"] = undefined;
   export let controls: VideoProps["controls"] = undefined;
@@ -11,9 +14,8 @@
   export let fit: VideoProps["fit"] = undefined;
   export let position: VideoProps["position"] = undefined;
   export let aspectRatio: VideoProps["aspectRatio"] = undefined;
-  export let video: VideoProps["video"] = undefined;
   export let posterImage: VideoProps["posterImage"] = undefined;
-  export let lazyLoad: VideoProps["lazyLoad"] = undefined;
+  export let video: VideoProps["video"] = undefined;
   export let fitContent: VideoProps["fitContent"] = undefined;
   export let builderBlock: VideoProps["builderBlock"] = undefined;
 
@@ -62,6 +64,49 @@
       ...videoProps(),
     };
   };
+
+  let videoRef;
+
+  let lazyVideoObserver = undefined;
+
+  onMount(() => {
+    if (lazyLoad) {
+      const oberver = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          const videoElement = entry.target as HTMLVideoElement;
+          try {
+            // Convert HTMLCollection to Array and filter for source elements
+            Array.from(videoElement.children)
+              .filter(
+                (child): child is HTMLSourceElement =>
+                  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);
+      }
+      lazyVideoObserver = oberver;
+    }
+  });
+
+  onDestroy(() => {
+    if (lazyVideoObserver) {
+      lazyVideoObserver.disconnect();
+    }
+  });
 </script>
 
 <div
@@ -87,13 +132,19 @@
     })}
     class="builder-video"
     {...spreadProps()}
-    preload={preload || "metadata"}
-    src={video || "no-src"}
+    bind:this={videoRef}
+    preload={lazyLoad ? "none" : preload || "metadata"}
     poster={posterImage}
-  >
-    {#if !lazyLoad}
-      <source type="video/mp4" src={video} />
-    {/if}</video
+    ><source
+      type="video/mp4"
+      {...lazyLoad
+        ? {
+            "data-src": video,
+          }
+        : {
+            src: video,
+          }}
+    /></video
   >
   {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
     <div

package/src/components/block/components/block-styles.svelte

@@ -39,9 +39,13 @@
     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 "";
@@ -72,6 +76,17 @@
           ),
         })
       : "";
+    const xsmallStylesClass =
+      xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "xsmall",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
     const hoverAnimation =
       processedBlock.animations &&
       processedBlock.animations.find((item) => item.trigger === "hover");
@@ -96,6 +111,7 @@
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass,
     ].join(" ");
   };

package/src/components/content/components/enable-editor.svelte

@@ -57,8 +57,8 @@
   export let locale: BuilderEditorProps["locale"] = undefined;
   export let enrich: BuilderEditorProps["enrich"] = undefined;
   export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
-  export let model: BuilderEditorProps["model"] = undefined;
-  export let content: BuilderEditorProps["content"] = undefined;
+  export let model: BuilderEditorProps["model"];
+  export let content: BuilderEditorProps["content"];
   export let context: BuilderEditorProps["context"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
@@ -229,11 +229,12 @@
             trustedHosts: trustedHosts,
           }
         : {}),
+      modelName: model ?? "",
+      apiKey: apiKey,
     });
     Object.values<ComponentInfo>($builderContextSignal.componentInfos).forEach(
       (registeredComponent) => {
         if (
-          !model ||
           !registeredComponent.models?.length ||
           registeredComponent.models.includes(model)
         ) {
@@ -272,7 +273,7 @@
         (!content || searchParamPreviewId === content.id))
     ) {
       fetchOneEntry({
-        model: model || "",
+        model: model,
         apiKey: apiKey,
         apiVersion: $builderContextSignal.apiVersion,
         ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId

package/src/components/content/content.svelte

@@ -30,7 +30,7 @@
 
   export let apiKey: ContentProps["apiKey"];
   export let context: ContentProps["context"] = undefined;
-  export let content: ContentProps["content"] = undefined;
+  export let content: ContentProps["content"];
   export let customComponents: ContentProps["customComponents"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
@@ -39,7 +39,7 @@
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let nonce: ContentProps["nonce"] = undefined;
-  export let model: ContentProps["model"] = undefined;
+  export let model: ContentProps["model"];
   export let apiHost: ContentProps["apiHost"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
@@ -104,7 +104,7 @@
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
-    model: model || "",
+    model: model,
   });
   if (!apiKey) {
     logger.error(

package/src/components/content-variants/content-variants.svelte

@@ -25,12 +25,12 @@
   } from "./helpers";
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
-  export let content: VariantsProviderProps["content"] = undefined;
+  export let content: VariantsProviderProps["content"];
   export let isNestedRender: VariantsProviderProps["isNestedRender"] =
     undefined;
   export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let apiHost: VariantsProviderProps["apiHost"] = undefined;
-  export let model: VariantsProviderProps["model"] = undefined;
+  export let model: VariantsProviderProps["model"];
   export let data: VariantsProviderProps["data"] = undefined;
   export let context: VariantsProviderProps["context"] = undefined;
   export let apiKey: VariantsProviderProps["apiKey"];

package/src/components/content-variants/content-variants.types.ts

@@ -7,12 +7,12 @@ export 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).

package/src/constants/device-sizes.ts

@@ -1,13 +1,18 @@
 import { fastClone } from '../functions/fast-clone';
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
   min: number;
   default: number;
   max: number;
 }
 const SIZES: Record<SizeName, Size> = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -24,19 +29,33 @@ const SIZES: Record<SizeName, Size> = {
 };
 export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 interface Breakpoints {
+  xsmall?: number;
   small?: number;
   medium?: number;
 }
-export const getSizesForBreakpoints = ({
-  small,
-  medium
-}: Breakpoints) => {
+export const getSizesForBreakpoints = (breakpoints: Breakpoints) => {
   const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
 
+  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,

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.6"
+export const SDK_VERSION = "4.0.0"

package/src/helpers/subscribe-to-editor.ts

@@ -50,19 +50,24 @@ export const createEditorListener = ({
     }
   };
 };
-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.
    */
@@ -73,12 +78,20 @@ options?: {
  * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
  * Sends the updated `content` to the `callback` function.
  */
-export const subscribeToEditor: SubscribeToEditor = (model, callback, options) => {
+export const subscribeToEditor: 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,
@@ -86,7 +99,7 @@ export const subscribeToEditor: SubscribeToEditor = (model, callback, options) =
       configureSdk: () => {}
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener('message', listener);
   return () => {

package/src/scripts/init-editing.ts

@@ -28,11 +28,13 @@ export const registerInsertMenu = () => {
 };
 let isSetupForEditing = false;
 export const setupBrowserForEditing = (options: {
+  modelName: string;
+  apiKey: string;
   enrich?: boolean;
   includeRefs?: boolean;
   locale?: string;
   trustedHosts?: string[];
-} = {}) => {
+}) => {
   if (isSetupForEditing) {
     return;
   }
@@ -48,6 +50,9 @@ export const 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
       }
     }, '*');

package/src/types/builder-block.ts

@@ -41,7 +41,6 @@ export interface BuilderBlock {
     large?: Partial<CSSStyleDeclaration>;
     medium?: Partial<CSSStyleDeclaration>;
     small?: Partial<CSSStyleDeclaration>;
-    /** @deprecated */
     xsmall?: Partial<CSSStyleDeclaration>;
   };
   component?: {

package/src/types/builder-content.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+  xsmall?: number;
   small: number;
   medium: number;
 }