@builder.io/sdk-svelte 3.0.7 → 4.0.0

package/lib/browser/blocks/symbol/symbol.svelte

@@ -72,7 +72,7 @@ $: onUpdateFn_0(...[symbol]);
       ...contentToUse?.data?.state,
     }}
     canTrack={$builderContext.canTrack}
-    model={symbol?.model}
+    model={symbol?.model ?? ""}
     content={contentToUse}
     linkComponent={builderLinkComponent}
     blocksWrapper={blocksWrapper()}

package/lib/browser/blocks/video/video.svelte

@@ -1,4 +1,6 @@
-<script>export let autoPlay = undefined;
+<script>import { onDestroy, onMount } from "svelte";
+export let lazyLoad = undefined;
+export let autoPlay = undefined;
 export let muted = undefined;
 export let controls = undefined;
 export let loop = undefined;
@@ -8,9 +10,8 @@ export let attributes = undefined;
 export let fit = undefined;
 export let position = undefined;
 export let aspectRatio = undefined;
-export let video = undefined;
 export let posterImage = undefined;
-export let lazyLoad = undefined;
+export let video = undefined;
 export let fitContent = undefined;
 export let builderBlock = undefined;
 function stringifyStyles(stylesObj) {
@@ -57,6 +58,44 @@ $: spreadProps = () => {
         ...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;
+                try {
+                    // Convert HTMLCollection to Array and filter for source elements
+                    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);
+        }
+        lazyVideoObserver = oberver;
+    }
+});
+onDestroy(() => {
+    if (lazyVideoObserver) {
+        lazyVideoObserver.disconnect();
+    }
+});
 </script>
 
 <div
@@ -82,13 +121,19 @@ $: spreadProps = () => {
     })}
     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/lib/browser/blocks/video/video.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { VideoProps } from "./video.types";
 declare const __propDef: {
     props: {
+        lazyLoad?: VideoProps["lazyLoad"];
         autoPlay?: VideoProps["autoPlay"];
         muted?: VideoProps["muted"];
         controls?: VideoProps["controls"];
@@ -12,9 +13,8 @@ declare const __propDef: {
         fit?: VideoProps["fit"];
         position?: VideoProps["position"];
         aspectRatio?: VideoProps["aspectRatio"];
-        video?: VideoProps["video"];
         posterImage?: VideoProps["posterImage"];
-        lazyLoad?: VideoProps["lazyLoad"];
+        video?: VideoProps["video"];
         fitContent?: VideoProps["fitContent"];
         builderBlock?: VideoProps["builderBlock"];
     };

package/lib/browser/components/content/components/enable-editor.svelte

@@ -28,8 +28,8 @@ export let apiHost = undefined;
 export let locale = undefined;
 export let enrich = undefined;
 export let trustedHosts = undefined;
-export let model = undefined;
-export let content = undefined;
+export let model;
+export let content;
 export let context = undefined;
 export let data = undefined;
 export let showContent;
@@ -187,10 +187,11 @@ function elementRef_onIniteditingbldr(event) {
                 trustedHosts: trustedHosts,
             }
             : {}),
+        modelName: model ?? "",
+        apiKey: apiKey,
     });
     Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
-        if (!model ||
-            !registeredComponent.models?.length ||
+        if (!registeredComponent.models?.length ||
             registeredComponent.models.includes(model)) {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -217,7 +218,7 @@ function elementRef_onInitpreviewingbldr(event) {
             previewApiKey === apiKey &&
             (!content || searchParamPreviewId === content.id))) {
         fetchOneEntry({
-            model: model || "",
+            model: model,
             apiKey: apiKey,
             apiVersion: $builderContextSignal.apiVersion,
             ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -17,8 +17,8 @@ declare const __propDef: {
         locale?: BuilderEditorProps["locale"];
         enrich?: BuilderEditorProps["enrich"];
         trustedHosts?: BuilderEditorProps["trustedHosts"];
-        model?: BuilderEditorProps["model"];
-        content?: BuilderEditorProps["content"];
+        model: BuilderEditorProps["model"];
+        content: BuilderEditorProps["content"];
         context?: BuilderEditorProps["context"];
         data?: BuilderEditorProps["data"];
         showContent: BuilderEditorProps["showContent"];

package/lib/browser/components/content/content.svelte

@@ -16,7 +16,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let apiKey;
 export let context = undefined;
-export let content = undefined;
+export let content;
 export let customComponents = undefined;
 export let data = undefined;
 export let locale = undefined;
@@ -25,7 +25,7 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
-export let model = undefined;
+export let model;
 export let apiHost = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -81,7 +81,7 @@ let builderContextSignal = writable({
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
-    model: model || "",
+    model: model,
 });
 if (!apiKey) {
     logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");

package/lib/browser/components/content/content.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         apiKey: ContentProps["apiKey"];
         context?: ContentProps["context"];
-        content?: ContentProps["content"];
+        content: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
@@ -13,7 +13,7 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
-        model?: ContentProps["model"];
+        model: ContentProps["model"];
         apiHost?: ContentProps["apiHost"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

package/lib/browser/components/content-variants/content-variants.svelte

@@ -9,11 +9,11 @@ import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
-export let content = undefined;
+export let content;
 export let isNestedRender = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
-export let model = undefined;
+export let model;
 export let data = undefined;
 export let context = undefined;
 export let apiKey;

package/lib/browser/components/content-variants/content-variants.svelte.d.ts

@@ -9,11 +9,11 @@ import type { ContentVariantsPrps } from "./content-variants.types";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
-        content?: VariantsProviderProps["content"];
+        content: VariantsProviderProps["content"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
-        model?: VariantsProviderProps["model"];
+        model: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];
         apiKey: VariantsProviderProps["apiKey"];

package/lib/browser/components/content-variants/content-variants.types.d.ts

@@ -7,11 +7,11 @@ 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/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.7";
+export declare const SDK_VERSION = "4.0.0";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.7";
+export const SDK_VERSION = "4.0.0";

package/lib/browser/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/browser/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/browser/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/browser/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,8 @@ 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/edge/blocks/symbol/symbol.svelte

@@ -72,7 +72,7 @@ $: onUpdateFn_0(...[symbol]);
       ...contentToUse?.data?.state,
     }}
     canTrack={$builderContext.canTrack}
-    model={symbol?.model}
+    model={symbol?.model ?? ""}
     content={contentToUse}
     linkComponent={builderLinkComponent}
     blocksWrapper={blocksWrapper()}

package/lib/edge/blocks/video/video.svelte

@@ -1,4 +1,6 @@
-<script>export let autoPlay = undefined;
+<script>import { onDestroy, onMount } from "svelte";
+export let lazyLoad = undefined;
+export let autoPlay = undefined;
 export let muted = undefined;
 export let controls = undefined;
 export let loop = undefined;
@@ -8,9 +10,8 @@ export let attributes = undefined;
 export let fit = undefined;
 export let position = undefined;
 export let aspectRatio = undefined;
-export let video = undefined;
 export let posterImage = undefined;
-export let lazyLoad = undefined;
+export let video = undefined;
 export let fitContent = undefined;
 export let builderBlock = undefined;
 function stringifyStyles(stylesObj) {
@@ -57,6 +58,44 @@ $: spreadProps = () => {
         ...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;
+                try {
+                    // Convert HTMLCollection to Array and filter for source elements
+                    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);
+        }
+        lazyVideoObserver = oberver;
+    }
+});
+onDestroy(() => {
+    if (lazyVideoObserver) {
+        lazyVideoObserver.disconnect();
+    }
+});
 </script>
 
 <div
@@ -82,13 +121,19 @@ $: spreadProps = () => {
     })}
     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/lib/edge/blocks/video/video.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { VideoProps } from "./video.types";
 declare const __propDef: {
     props: {
+        lazyLoad?: VideoProps["lazyLoad"];
         autoPlay?: VideoProps["autoPlay"];
         muted?: VideoProps["muted"];
         controls?: VideoProps["controls"];
@@ -12,9 +13,8 @@ declare const __propDef: {
         fit?: VideoProps["fit"];
         position?: VideoProps["position"];
         aspectRatio?: VideoProps["aspectRatio"];
-        video?: VideoProps["video"];
         posterImage?: VideoProps["posterImage"];
-        lazyLoad?: VideoProps["lazyLoad"];
+        video?: VideoProps["video"];
         fitContent?: VideoProps["fitContent"];
         builderBlock?: VideoProps["builderBlock"];
     };

package/lib/edge/components/content/components/enable-editor.svelte

@@ -28,8 +28,8 @@ export let apiHost = undefined;
 export let locale = undefined;
 export let enrich = undefined;
 export let trustedHosts = undefined;
-export let model = undefined;
-export let content = undefined;
+export let model;
+export let content;
 export let context = undefined;
 export let data = undefined;
 export let showContent;
@@ -187,10 +187,11 @@ function elementRef_onIniteditingbldr(event) {
                 trustedHosts: trustedHosts,
             }
             : {}),
+        modelName: model ?? "",
+        apiKey: apiKey,
     });
     Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
-        if (!model ||
-            !registeredComponent.models?.length ||
+        if (!registeredComponent.models?.length ||
             registeredComponent.models.includes(model)) {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -217,7 +218,7 @@ function elementRef_onInitpreviewingbldr(event) {
             previewApiKey === apiKey &&
             (!content || searchParamPreviewId === content.id))) {
         fetchOneEntry({
-            model: model || "",
+            model: model,
             apiKey: apiKey,
             apiVersion: $builderContextSignal.apiVersion,
             ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId

package/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -17,8 +17,8 @@ declare const __propDef: {
         locale?: BuilderEditorProps["locale"];
         enrich?: BuilderEditorProps["enrich"];
         trustedHosts?: BuilderEditorProps["trustedHosts"];
-        model?: BuilderEditorProps["model"];
-        content?: BuilderEditorProps["content"];
+        model: BuilderEditorProps["model"];
+        content: BuilderEditorProps["content"];
         context?: BuilderEditorProps["context"];
         data?: BuilderEditorProps["data"];
         showContent: BuilderEditorProps["showContent"];

package/lib/edge/components/content/content.svelte

@@ -16,7 +16,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let apiKey;
 export let context = undefined;
-export let content = undefined;
+export let content;
 export let customComponents = undefined;
 export let data = undefined;
 export let locale = undefined;
@@ -25,7 +25,7 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
-export let model = undefined;
+export let model;
 export let apiHost = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -81,7 +81,7 @@ let builderContextSignal = writable({
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
-    model: model || "",
+    model: model,
 });
 if (!apiKey) {
     logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");

package/lib/edge/components/content/content.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         apiKey: ContentProps["apiKey"];
         context?: ContentProps["context"];
-        content?: ContentProps["content"];
+        content: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
@@ -13,7 +13,7 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
-        model?: ContentProps["model"];
+        model: ContentProps["model"];
         apiHost?: ContentProps["apiHost"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

package/lib/edge/components/content-variants/content-variants.svelte

@@ -9,11 +9,11 @@ import InlinedScript from "../inlined-script.svelte";
 import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
-export let content = undefined;
+export let content;
 export let isNestedRender = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
-export let model = undefined;
+export let model;
 export let data = undefined;
 export let context = undefined;
 export let apiKey;

package/lib/edge/components/content-variants/content-variants.svelte.d.ts

@@ -9,11 +9,11 @@ import type { ContentVariantsPrps } from "./content-variants.types";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
-        content?: VariantsProviderProps["content"];
+        content: VariantsProviderProps["content"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
-        model?: VariantsProviderProps["model"];
+        model: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];
         apiKey: VariantsProviderProps["apiKey"];

package/lib/edge/components/content-variants/content-variants.types.d.ts

@@ -7,11 +7,11 @@ 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/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.7";
+export declare const SDK_VERSION = "4.0.0";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.7";
+export const SDK_VERSION = "4.0.0";

package/lib/edge/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.
      */