@builder.io/sdk-solid 3.0.7 → 4.0.0

package/lib/node/index.jsx

@@ -2079,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) => {
@@ -4725,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 ? {
@@ -4751,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"
@@ -4759,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%",
@@ -4773,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
@@ -4945,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,
@@ -4959,7 +4996,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 = () => ({
@@ -5561,7 +5598,7 @@ var registerInsertMenu = () => {
   });
 };
 var isSetupForEditing = false;
-var setupBrowserForEditing = (options = {}) => {
+var setupBrowserForEditing = (options) => {
   if (isSetupForEditing) {
     return;
   }
@@ -5577,6 +5614,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
       }
@@ -5682,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,
@@ -5698,7 +5745,7 @@ var subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {
@@ -5938,7 +5985,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount6(() => {
+  onMount7(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -5952,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, "*");
           }
@@ -5990,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 ? {
@@ -6178,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) => ({
@@ -6283,7 +6332,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount7(() => {
+  onMount8(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -6413,7 +6462,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount8(() => {
+  onMount9(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
@@ -6436,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.7",
+  "version": "4.0.0",
   "description": "",
   "files": [
     "dist",