@builder.io/sdk-solid 3.0.7 → 4.0.1

package/lib/browser/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';
 
 // src/blocks/button/button.tsx
@@ -5040,10 +5040,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 ? {
@@ -5068,12 +5068,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 (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 {
@@ -5090,29 +5119,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");
@@ -5125,7 +5146,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");
@@ -5138,7 +5159,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");
@@ -5295,7 +5316,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.7";
+var SDK_VERSION = "4.0.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5897,7 +5918,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5913,6 +5934,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
       }
@@ -6005,6 +6028,15 @@ var createEditorListener = ({
           callbacks.animation(data.data);
           break;
         }
+        case "builder.resetState": {
+          const messageContent = data.data;
+          const modelName = messageContent.model;
+          const newState = messageContent?.state;
+          if (modelName === model && newState) {
+            callbacks.stateUpdate(newState);
+          }
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -6018,23 +6050,33 @@ 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,
       animation: () => {
       },
       configureSdk: () => {
+      },
+      stateUpdate: () => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -6198,6 +6240,9 @@ function EnableEditor(props) {
         },
         contentUpdate: (newContent) => {
           mergeNewContent(newContent);
+        },
+        stateUpdate: (newState) => {
+          mergeNewRootState(newState);
         }
       }
     })(event);
@@ -6279,10 +6324,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, "*");
           }
@@ -6310,7 +6357,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 ? {
@@ -6504,7 +6551,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) => ({
@@ -6945,7 +6992,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/index.jsx

@@ -1908,10 +1908,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) => {
@@ -4554,8 +4554,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 ? {
@@ -4580,6 +4581,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 (error) {
+          }
+        });
+      });
+      if (videoRef) {
+        oberver.observe(videoRef);
+      }
+      setLazyVideoObserver(oberver);
+    }
+  });
   return <><div
     style={{
       position: "relative"
@@ -4588,7 +4618,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%",
@@ -4602,9 +4633,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
@@ -4774,7 +4811,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,
@@ -4788,7 +4825,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.7";
+var SDK_VERSION = "4.0.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5390,7 +5427,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5406,6 +5443,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
       }
@@ -5498,6 +5537,15 @@ var createEditorListener = ({
           callbacks.animation(data.data);
           break;
         }
+        case "builder.resetState": {
+          const messageContent = data.data;
+          const modelName = messageContent.model;
+          const newState = messageContent?.state;
+          if (modelName === model && newState) {
+            callbacks.stateUpdate(newState);
+          }
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -5511,23 +5559,33 @@ 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,
       animation: () => {
       },
       configureSdk: () => {
+      },
+      stateUpdate: () => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -5690,6 +5748,9 @@ function EnableEditor(props) {
         },
         contentUpdate: (newContent) => {
           mergeNewContent(newContent);
+        },
+        stateUpdate: (newState) => {
+          mergeNewRootState(newState);
         }
       }
     })(event);
@@ -5767,7 +5828,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount7(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5781,12 +5842,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, "*");
           }
@@ -5819,7 +5882,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 ? {
@@ -6007,7 +6070,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) => ({
@@ -6112,7 +6175,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount8(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6242,7 +6305,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount9(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
@@ -6265,7 +6328,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()}