@builder.io/sdk-solid 3.0.7 → 4.0.0

package/dist/index.d.ts

@@ -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
@@ -5053,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 ? {
@@ -5081,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 {
@@ -5103,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");
@@ -5138,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");
@@ -5151,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");
@@ -5308,7 +5330,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.7";
+var SDK_VERSION = "4.0.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5916,7 +5938,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5932,6 +5954,8 @@ 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
       }
@@ -6037,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,
@@ -6053,7 +6085,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -6299,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, "*");
           }
@@ -6330,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 ? {
@@ -6524,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) => ({
@@ -6965,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

@@ -1916,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) => {
@@ -4565,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 ? {
@@ -4591,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"
@@ -4599,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%",
@@ -4613,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
@@ -4785,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,
@@ -4799,7 +4837,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.7";
+var SDK_VERSION = "4.0.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5407,7 +5445,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5423,6 +5461,8 @@ 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
       }
@@ -5528,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,
@@ -5544,7 +5592,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -5785,7 +5833,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount7(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5799,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, "*");
           }
@@ -5837,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 ? {
@@ -6025,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) => ({
@@ -6130,7 +6180,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount8(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6260,7 +6310,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount9(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
@@ -6283,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()}