@builder.io/sdk-react 3.0.7 → 4.0.0

package/lib/edge/{symbol-8f6ff028.js → symbol-f488bea0.js}

@@ -1,15 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as s, useEffect as u } from "react";
-import { Content as C } from "./blocks-exports.mjs";
-import { getClassPropName as v } from "./get-class-prop-name-dbc5d99c.js";
-import { fetchOneEntry as k, logger as h } from "./server-entry-43a6f5be.js";
-const x = async ({
+import { jsx as u } from "react/jsx-runtime";
+import { useState as C, useEffect as f } from "react";
+import { Content as v } from "./blocks-exports.mjs";
+import { getClassPropName as k } from "./get-class-prop-name-dac81472.js";
+import { fetchOneEntry as h, logger as x } from "./server-entry-c1673af2.js";
+const K = async ({
   builderContextValue: e,
   symbol: t
 }) => {
   if (t != null && t.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
   (e != null && e.apiKey))
-    return k({
+    return h({
       model: t.model,
       apiKey: e.apiKey,
       apiVersion: e.apiVersion,
@@ -19,43 +19,43 @@ const x = async ({
         }
       }
     }).catch((o) => {
-      h.error("Could not fetch symbol content: ", o);
+      x.error("Could not fetch symbol content: ", o);
     });
 };
-function j(e) {
-  var r, a, c, d;
+function B(e) {
+  var r, a, c, d, l;
   function t() {
     return "div";
   }
   function o() {
     return "div";
   }
-  function f() {
-    var n, l;
+  function b() {
+    var n, m;
     return [
-      e.attributes[v()],
+      e.attributes[k()],
       "builder-symbol",
       (n = e.symbol) != null && n.inline ? "builder-inline-symbol" : void 0,
-      (l = e.symbol) != null && l.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
+      (m = e.symbol) != null && m.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }
-  const [i, b] = s(() => {
+  const [i, y] = C(() => {
     var n;
     return (n = e.symbol) == null ? void 0 : n.content;
   });
-  function y() {
-    i || x({
+  function s() {
+    i || K({
       symbol: e.symbol,
       builderContextValue: e.builderContext
     }).then((n) => {
-      n && b(n);
+      n && y(n);
     });
   }
-  return u(() => {
-  }, []), u(() => {
-    y();
-  }, [e.symbol]), /* @__PURE__ */ m("div", { ...e.attributes, className: f(), children: /* @__PURE__ */ m(
-    C,
+  return f(() => {
+  }, []), f(() => {
+    s();
+  }, [e.symbol]), /* @__PURE__ */ u("div", { ...e.attributes, className: b(), children: /* @__PURE__ */ u(
+    v,
     {
       nonce: e.builderContext.nonce,
       isNestedRender: !0,
@@ -72,7 +72,7 @@ function j(e) {
         ...(c = i == null ? void 0 : i.data) == null ? void 0 : c.state
       },
       canTrack: e.builderContext.canTrack,
-      model: (d = e.symbol) == null ? void 0 : d.model,
+      model: (l = (d = e.symbol) == null ? void 0 : d.model) != null ? l : "",
       content: i,
       linkComponent: e.builderLinkComponent,
       blocksWrapper: t(),
@@ -81,5 +81,5 @@ function j(e) {
   ) });
 }
 export {
-  j as default
+  B as default
 };

package/lib/edge/{tabs-6b67fca2.js → tabs-244d53fa.js}

@@ -1,9 +1,9 @@
 import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import { useState as d } from "react";
-import { Blocks as c } from "./blocks-2989e629.js";
+import { Blocks as c } from "./blocks-0885e182.js";
 import "./blocks-exports.mjs";
-import "./server-entry-43a6f5be.js";
-import "./get-class-prop-name-dbc5d99c.js";
+import "./server-entry-c1673af2.js";
+import "./get-class-prop-name-dac81472.js";
 import "./dynamic-renderer-8b343325.js";
 function y(t) {
   var b;

package/lib/edge/{tabs-880c9088.cjs → tabs-edb82022.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),b=require("./blocks-d3f37507.cjs");require("./blocks-exports.cjs");require("./server-entry-ac35a5c8.cjs");require("./get-class-prop-name-f597545d.cjs");require("./dynamic-renderer-b29b45ca.cjs");function s(e){var o;const[t,a]=u.useState(()=>e.defaultActiveTab?e.defaultActiveTab-1:0);function c(n){return e.tabs&&e.tabs[n].content}function r(n){n===t&&e.collapsible?a(-1):a(n)}return l.jsxs("div",{children:[l.jsx("div",{className:"builder-tabs-wrap",style:{display:"flex",flexDirection:"row",justifyContent:e.tabHeaderLayout||"flex-start",overflow:"auto"},children:(o=e.tabs)==null?void 0:o.map((n,i)=>l.jsx("span",{className:`builder-tab-wrap ${t===i?"builder-tab-active":""}`,style:{...t===i?e.activeTabStyle:{}},onClick:d=>r(i),children:l.jsx(b.Blocks,{parent:e.builderBlock.id,path:`tabs.${i}.label`,blocks:n.label,context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent})},i))}),c(t)?l.jsx("div",{children:l.jsx(b.Blocks,{parent:e.builderBlock.id,path:`tabs.${t}.content`,blocks:c(t),context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent})}):null]})}exports.default=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),b=require("./blocks-5165c164.cjs");require("./blocks-exports.cjs");require("./server-entry-77166102.cjs");require("./get-class-prop-name-0b992cfb.cjs");require("./dynamic-renderer-b29b45ca.cjs");function s(e){var o;const[t,a]=u.useState(()=>e.defaultActiveTab?e.defaultActiveTab-1:0);function c(n){return e.tabs&&e.tabs[n].content}function r(n){n===t&&e.collapsible?a(-1):a(n)}return l.jsxs("div",{children:[l.jsx("div",{className:"builder-tabs-wrap",style:{display:"flex",flexDirection:"row",justifyContent:e.tabHeaderLayout||"flex-start",overflow:"auto"},children:(o=e.tabs)==null?void 0:o.map((n,i)=>l.jsx("span",{className:`builder-tab-wrap ${t===i?"builder-tab-active":""}`,style:{...t===i?e.activeTabStyle:{}},onClick:d=>r(i),children:l.jsx(b.Blocks,{parent:e.builderBlock.id,path:`tabs.${i}.label`,blocks:n.label,context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent})},i))}),c(t)?l.jsx("div",{children:l.jsx(b.Blocks,{parent:e.builderBlock.id,path:`tabs.${t}.content`,blocks:c(t),context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent})}):null]})}exports.default=s;

package/lib/edge/{video-a3f10439.js → video-52df64e2.js}

@@ -1,7 +1,9 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-function f(e) {
-  var i, l, n, o, d, u, a;
-  function c() {
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
+import { useRef as I, useState as R, useEffect as m } from "react";
+function j(e) {
+  var a, c, d, u, s, f, h;
+  const n = I(null);
+  function b() {
     return {
       ...e.autoPlay === !0 ? {
         autoPlay: !0
@@ -20,28 +22,54 @@ function f(e) {
       } : {}
     };
   }
-  function r() {
+  function g() {
     return {
-      ...c()
+      ...b()
     };
   }
-  return /* @__PURE__ */ s(
+  const [r, x] = R(() => {
+  });
+  return m(() => {
+    if (e.lazyLoad) {
+      const l = new IntersectionObserver(function(E) {
+        E.forEach(function(v) {
+          if (!v.isIntersecting)
+            return;
+          const o = v.target;
+          try {
+            Array.from(o.children).filter(
+              (t) => t instanceof HTMLElement && t.tagName === "SOURCE"
+            ).forEach((t) => {
+              const y = t.dataset.src;
+              y && (t.src = y);
+            }), o.load(), l.unobserve(o);
+          } catch (t) {
+            console.error("Error loading lazy video:", t);
+          }
+        });
+      });
+      n.current && l.observe(n.current), x(l);
+    }
+  }, []), m(() => () => {
+    r && r.disconnect();
+  }, []), /* @__PURE__ */ z(
     "div",
     {
       style: {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ i(
           "video",
           {
             className: "builder-video",
-            ...r(),
-            preload: e.preload || "metadata",
+            ...g(),
+            ref: n,
+            preload: e.lazyLoad ? "none" : e.preload || "metadata",
             style: {
               width: "100%",
               height: "100%",
-              ...(i = e.attributes) == null ? void 0 : i.style,
+              ...(a = e.attributes) == null ? void 0 : a.style,
               objectFit: e.fit,
               objectPosition: e.position,
               // Hack to get object fit to work as expected and
@@ -51,12 +79,21 @@ function f(e) {
                 position: "absolute"
               } : null
             },
-            src: e.video || "no-src",
             poster: e.posterImage,
-            children: e.lazyLoad ? null : /* @__PURE__ */ t("source", { type: "video/mp4", src: e.video })
+            children: /* @__PURE__ */ i(
+              "source",
+              {
+                type: "video/mp4",
+                ...e.lazyLoad ? {
+                  "data-src": e.video
+                } : {
+                  src: e.video
+                }
+              }
+            )
           }
         ),
-        e.aspectRatio && !(e.fitContent && ((n = (l = e.builderBlock) == null ? void 0 : l.children) != null && n.length)) ? /* @__PURE__ */ t(
+        e.aspectRatio && !(e.fitContent && ((d = (c = e.builderBlock) == null ? void 0 : c.children) != null && d.length)) ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -67,7 +104,7 @@ function f(e) {
             }
           }
         ) : null,
-        (d = (o = e.builderBlock) == null ? void 0 : o.children) != null && d.length && e.fitContent ? /* @__PURE__ */ t(
+        (s = (u = e.builderBlock) == null ? void 0 : u.children) != null && s.length && e.fitContent ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -78,7 +115,7 @@ function f(e) {
             children: e.children
           }
         ) : null,
-        (a = (u = e.builderBlock) == null ? void 0 : u.children) != null && a.length && !e.fitContent ? /* @__PURE__ */ t(
+        (h = (f = e.builderBlock) == null ? void 0 : f.children) != null && h.length && !e.fitContent ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -100,5 +137,5 @@ function f(e) {
   );
 }
 export {
-  f as default
+  j as default
 };

package/lib/edge/video-cc58dd83.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react");function E(e){var a,d,u,s,f,h,v;const l=n.useRef(null);function m(){return{...e.autoPlay===!0?{autoPlay:!0}:{},...e.muted===!0?{muted:!0}:{},...e.controls===!0?{controls:!0}:{},...e.loop===!0?{loop:!0}:{},...e.playsInline===!0?{playsInline:!0}:{}}}function g(){return{...m()}}const[c,x]=n.useState(()=>{});return n.useEffect(()=>{if(e.lazyLoad){const o=new IntersectionObserver(function(j){j.forEach(function(y){if(!y.isIntersecting)return;const r=y.target;try{Array.from(r.children).filter(t=>t instanceof HTMLElement&&t.tagName==="SOURCE").forEach(t=>{const b=t.dataset.src;b&&(t.src=b)}),r.load(),o.unobserve(r)}catch(t){console.error("Error loading lazy video:",t)}})});l.current&&o.observe(l.current),x(o)}},[]),n.useEffect(()=>()=>{c&&c.disconnect()},[]),i.jsxs("div",{style:{position:"relative"},children:[i.jsx("video",{className:"builder-video",...g(),ref:l,preload:e.lazyLoad?"none":e.preload||"metadata",style:{width:"100%",height:"100%",...(a=e.attributes)==null?void 0:a.style,objectFit:e.fit,objectPosition:e.position,borderRadius:"1px",...e.aspectRatio?{position:"absolute"}:null},poster:e.posterImage,children:i.jsx("source",{type:"video/mp4",...e.lazyLoad?{"data-src":e.video}:{src:e.video}})}),e.aspectRatio&&!(e.fitContent&&((u=(d=e.builderBlock)==null?void 0:d.children)!=null&&u.length))?i.jsx("div",{style:{width:"100%",paddingTop:e.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}}):null,(f=(s=e.builderBlock)==null?void 0:s.children)!=null&&f.length&&e.fitContent?i.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch"},children:e.children}):null,(v=(h=e.builderBlock)==null?void 0:h.children)!=null&&v.length&&!e.fitContent?i.jsx("div",{style:{pointerEvents:"none",display:"flex",flexDirection:"column",alignItems:"stretch",position:"absolute",top:"0",left:"0",width:"100%",height:"100%"},children:e.children}):null]})}exports.default=E;