@builder.io/sdk-react-nextjs 0.7.3 → 0.7.4

package/types/esm/components/content-variants/helpers.d.ts

@@ -24,7 +24,7 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
         breakpoints?: import("../../types/builder-content.js").Breakpoints;
     };
 }[];
-export declare const checkShouldRunVariants: ({ canTrack, content }: {
+export declare const checkShouldRenderVariants: ({ canTrack, content }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
 }) => boolean;
@@ -33,8 +33,8 @@ type VariantData = {
     testRatio?: number;
 };
 export declare const getScriptString: () => string;
-export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+export declare const getUpdateCookieAndStylesScript: (variants: VariantData[], contentId: string) => string;
+export declare const getUpdateVariantVisibilityScript: ({ contentId, variationId }: {
     variationId: string;
     contentId: string;
 }) => string;

package/types/esm/components/content-variants/inlined-fns.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export declare const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/types/esm/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.7.3";
+export declare const SDK_VERSION = "0.7.4";

package/lib/browser/USE_CLIENT_BUNDLE-6ab88b18.cjs

@@ -1,23 +0,0 @@
-"use client";"use strict";const t=require("react/jsx-runtime"),a=require("./bundle-34c6ede8.cjs"),o=require("react"),_=require("./USE_SERVER_BUNDLE-f71d2896.cjs"),M=require("next/navigation");function W(e){return t.jsxs(t.Fragment,{children:[e.link?t.jsx(t.Fragment,{children:t.jsx("a",{...e.attributes,href:e.link,target:e.openLinkInNewTab?"_blank":void 0,role:"button",children:e.text})}):t.jsx(t.Fragment,{children:t.jsx("button",{...e.attributes,style:e.attributes.style,className:e.attributes.className+" button-5294b10c",children:e.text})}),t.jsx("style",{children:`.button-5294b10c {
-  all: unset;
-}`})]})}function A(e){return t.jsxs(t.Fragment,{children:[" ",e.hasChildren?t.jsx(t.Fragment,{children:t.jsxs(e.Wrapper,{...a.getBlockProperties({block:e.block,context:e.context}),...a.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0}),children:[" ",e.children," "]})}):t.jsx(t.Fragment,{children:t.jsx(e.Wrapper,{...a.getBlockProperties({block:e.block,context:e.context}),...a.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0})})})," "]})}function V(e){return t.jsx(e.Wrapper,{...e.wrapperProps,attributes:{...a.getBlockProperties({block:e.block,context:e.context}),...a.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context})},children:e.children})}function z(e){function c(){var s;return"builder-blocks"+((s=e.blocks)!=null&&s.length?"":" no-blocks")}function g(){var s,x;a.isEditing()&&!((s=e.blocks)!=null&&s.length)&&((x=window.parent)==null||x.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}function h(){var s,x;a.isEditing()&&!((s=e.blocks)!=null&&s.length)&&((x=window.parent)==null||x.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:c()+" div-02c7a115","builder-path":e.path,"builder-parent-id":e.parent,style:e.styleProp,onClick:s=>g(),onMouseEnter:s=>h(),onKeyPress:s=>g(),children:e.children}),t.jsx("style",{children:`.div-02c7a115 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`})]})}function D(e){return t.jsx("span",{children:e.children})}function U(e){var s,x,k,S;function c(){var b;const d=e.image||e.src;if(!d||!(d.match(/builder\.io/)||d.match(/cdn\.shopify\.com/)))return e.srcset;if(e.srcset&&((b=e.image)!=null&&b.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),a.getSrcSet(d)}else if(e.image&&!e.srcset)return a.getSrcSet(d);return a.getSrcSet(d)}function g(){var f;return(f=c==null?void 0:c())!=null&&f.match(/builder\.io/)&&!e.noWebp?c().replace(/\?/g,"?format=webp&"):""}function h(){const f={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?f:void 0}return t.jsxs(t.Fragment,{children:[t.jsxs(t.Fragment,{children:[t.jsxs("picture",{children:[g()?t.jsx(t.Fragment,{children:t.jsx("source",{type:"image/webp",srcSet:g()})}):null,t.jsx("img",{loading:"lazy",alt:e.altText,role:e.altText?"presentation":void 0,style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...h()},className:"builder-image"+(e.className?" "+e.className:"")+" img-dbab4030",src:e.image,srcSet:c(),sizes:e.sizes})]}),e.aspectRatio&&!((x=(s=e.builderBlock)==null?void 0:s.children)!=null&&x.length&&e.fitContent)?t.jsx(t.Fragment,{children:t.jsx("div",{className:"builder-image-sizer div-dbab4030",style:{paddingTop:e.aspectRatio*100+"%"}})}):null,(S=(k=e.builderBlock)==null?void 0:k.children)!=null&&S.length&&e.fitContent?t.jsx(t.Fragment,{children:e.children}):null,!e.fitContent&&e.children?t.jsx(t.Fragment,{children:t.jsx("div",{className:"div-dbab4030-2",children:e.children})}):null]}),t.jsx("style",{children:`.img-dbab4030 {
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}.div-dbab4030 {
-  width: 100%;
-  pointer-events: none;
-  font-size: 0;
-}.div-dbab4030-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}`})]})}function H(e){return t.jsx("section",{...e.attributes,style:{width:"100%",alignSelf:"stretch",flexGrow:1,boxSizing:"border-box",maxWidth:e.maxWidth||1200,display:"flex",flexDirection:"column",alignItems:"stretch",marginLeft:"auto",marginRight:"auto"},children:e.children})}function O(e){const c=o.useRef(null),[g,h]=o.useState(()=>[]),[s,x]=o.useState(()=>[]);return o.useEffect(()=>{var S;if(!((S=c.current)!=null&&S.getElementsByTagName)||typeof window>"u")return;const k=c.current.getElementsByTagName("script");for(let f=0;f<k.length;f++){const d=k[f];if(d.src){if(g.includes(d.src))continue;g.push(d.src);const b=document.createElement("script");b.async=!0,b.src=d.src,document.head.appendChild(b)}else if(!d.type||["text/javascript","application/javascript","application/ecmascript"].includes(d.type)){if(s.includes(d.innerText))continue;try{s.push(d.innerText),new Function(d.innerText)()}catch(b){console.warn("`CustomCode`: Error running script:",b)}}}},[]),t.jsx("div",{ref:c,className:"builder-custom-code"+(e.replaceNodes?" replace-nodes":""),dangerouslySetInnerHTML:{__html:e.code}})}function J(e){const c=o.useRef(null),[g,h]=o.useState(()=>[]),[s,x]=o.useState(()=>[]),[k,S]=o.useState(()=>!1);function f(){if(!c.current||!c.current.getElementsByTagName)return;const d=c.current.getElementsByTagName("script");for(let b=0;b<d.length;b++){const v=d[b];if(v.src&&!g.includes(v.src)){g.push(v.src);const y=document.createElement("script");y.async=!0,y.src=v.src,document.head.appendChild(y)}else if(a.isJsScript(v)&&!s.includes(v.innerText))try{s.push(v.innerText),new Function(v.innerText)()}catch(y){console.warn("`Embed`: Error running script:",y)}}}return o.useEffect(()=>{c.current&&!k&&(S(!0),f())},[c.current,k]),t.jsx("div",{className:"builder-embed",ref:c,dangerouslySetInnerHTML:{__html:e.content}})}function G(e){return t.jsx("img",{style:{objectFit:e.backgroundSize||"cover",objectPosition:e.backgroundPosition||"center"},alt:e.altText,src:e.imgSrc||e.image,...e.attributes},a.isEditing()&&e.imgSrc||"default-key")}function $(e){var h;function c(){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{...e.attributes,...c()}}return t.jsx("video",{...g(),preload:e.preload||"metadata",style:{width:"100%",height:"100%",...(h=e.attributes)==null?void 0:h.style,objectFit:e.fit,objectPosition:e.position,borderRadius:1},src:e.video||"no-src",poster:e.posterImage})}const Q=o.createContext({content:null,context:{},localState:void 0,rootSetState(){},rootState:{},apiKey:null,apiVersion:void 0,componentInfos:{},inheritedStyles:{}});function X(e){var R,I,P,T,F;const c=o.useRef(null),[g,h]=o.useState(()=>0);function s(n){var r,l,u,m,B;const i={...e.builderContextSignal.content,...n,data:{...(r=e.builderContextSignal.content)==null?void 0:r.data,...n==null?void 0:n.data},meta:{...(l=e.builderContextSignal.content)==null?void 0:l.meta,...n==null?void 0:n.meta,breakpoints:((u=n==null?void 0:n.meta)==null?void 0:u.breakpoints)||((B=(m=e.builderContextSignal.content)==null?void 0:m.meta)==null?void 0:B.breakpoints)}};_.postPreviewContent({value:i,key:i.id}).then(()=>{q.refresh()})}o.useState(()=>0);const[x,k]=o.useState(()=>!1);function S(n){var r;const{data:i}=n;if(i)switch(i.type){case"builder.configureSdk":{const l=i.data,{breakpoints:u,contentId:m}=l;if(!m||m!==((r=e.builderContextSignal.content)==null?void 0:r.id))return;u&&s({meta:{breakpoints:u}}),h(g+1);break}case"builder.contentUpdate":{const l=i.data,u=l.key||l.alias||l.entry||l.modelName,m=l.data;u===e.model&&(s(m),h(g+1));break}}}function f(){var i,r;const n=(r=(i=e.builderContextSignal.content)==null?void 0:i.data)==null?void 0:r.jsCode;n&&a.evaluate({code:n,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState})}const[d,b]=o.useState(()=>({})),[v,y]=o.useState(()=>!1);function N(n){var i,r;if(e.builderContextSignal.content){const l=(i=e.builderContextSignal.content)==null?void 0:i.testVariationId,u=(r=e.builderContextSignal.content)==null?void 0:r.id;a._track({type:"click",canTrack:a.getDefaultCanTrack(e.canTrack),contentId:u,apiKey:e.apiKey,variationId:l!==u?l:void 0,...a.getInteractionPropertiesForEvent(n),unique:!v})}v||y(!0)}function L(n){return n.replace(/{{([^}]+)}}/g,(i,r)=>a.evaluate({code:r,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState}))}function K({url:n,key:i}){a.fetch(n).then(r=>r.json()).then(r=>{var u,m;const l={...e.builderContextSignal.rootState,[i]:r};(m=(u=e.builderContextSignal).rootSetState)==null||m.call(u,l),d[i]=!0}).catch(r=>{console.error("error fetching dynamic data",n,r)})}function C(){var i,r;const n=((r=(i=e.builderContextSignal.content)==null?void 0:i.data)==null?void 0:r.httpRequests)??{};Object.entries(n).forEach(([l,u])=>{if(u&&(!d[l]||a.isEditing())){const m=L(u);K({url:m,key:l})}})}function E(){a.isEditing()&&window.dispatchEvent(new CustomEvent("builder:component:stateChange",{detail:{state:a.fastClone(e.builderContextSignal.rootState),ref:{name:e.model}}}))}function j(n){h(g+1),window.addEventListener("message",S),a.registerInsertMenu(),a.setupBrowserForEditing({...e.locale?{locale:e.locale}:{},...e.includeRefs?{includeRefs:e.includeRefs}:{},...e.enrich?{enrich:e.enrich}:{}}),Object.values(e.builderContextSignal.componentInfos).forEach(i=>{var l;const r=a.createRegisterComponentMessage(i);(l=window.parent)==null||l.postMessage(r,"*")}),window.addEventListener("builder:component:stateChangeListenerActivated",E)}function w(n){const i=new URL(location.href).searchParams,r=i.get("builder.preview"),l=i.get(`builder.preview.${r}`),u=i.get("apiKey")||i.get("builder.space");r===e.model&&u===e.apiKey&&(!e.content||l===e.content.id)&&a.fetchOneEntry({model:e.model,apiKey:e.apiKey,apiVersion:e.builderContextSignal.apiVersion}).then(m=>{m&&s(m)})}const q=M.useRouter();return o.useEffect(()=>{var n;return(n=c.current)==null||n.addEventListener("initeditingbldr",j),()=>{var i;return(i=c.current)==null?void 0:i.removeEventListener("initeditingbldr",j)}},[]),o.useEffect(()=>{var n;return(n=c.current)==null||n.addEventListener("initpreviewingbldr",w),()=>{var i;return(i=c.current)==null?void 0:i.removeEventListener("initpreviewingbldr",w)}},[]),o.useEffect(()=>{var n,i;if(a.isBrowser()){if(a.isEditing()&&c.current&&c.current.dispatchEvent(new CustomEvent("initeditingbldr")),e.builderContextSignal.content&&a.getDefaultCanTrack(e.canTrack)){const l=(n=e.builderContextSignal.content)==null?void 0:n.testVariationId,u=(i=e.builderContextSignal.content)==null?void 0:i.id,m=e.apiKey;a._track({type:"impression",canTrack:!0,contentId:u,apiKey:m,variationId:l!==u?l:void 0})}a.isPreviewing()&&c.current}},[]),o.useEffect(()=>{e.apiKey||a.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."),f(),C(),E()},[]),o.useEffect(()=>{},[e.content]),o.useEffect(()=>{a.isBrowser()&&(window.removeEventListener("message",S),window.addEventListener("message",S))},[x]),o.useEffect(()=>{f()},[(I=(R=e.builderContextSignal.content)==null?void 0:R.data)==null?void 0:I.jsCode,e.builderContextSignal.rootState]),o.useEffect(()=>{C()},[(T=(P=e.builderContextSignal.content)==null?void 0:P.data)==null?void 0:T.httpRequests]),o.useEffect(()=>{E()},[e.builderContextSignal.rootState]),o.useEffect(()=>()=>{a.isBrowser()&&(window.removeEventListener("message",S),window.removeEventListener("builder:component:stateChangeListenerActivated",E))},[]),t.jsx(Q.Provider,{value:e.builderContextSignal,children:e.builderContextSignal.content?t.jsx(t.Fragment,{children:o.createElement("div",{key:g,ref:c,onClick:n=>N(n),"builder-content-id":(F=e.builderContextSignal.content)==null?void 0:F.id,"builder-model":e.model,...e.showContent?{}:{hidden:!0,"aria-hidden":!0},className:e.classNameProp},e.children)}):null})}exports.BlockWrapper=A;exports.BlocksWrapper=z;exports.Button=W;exports.CustomCode=O;exports.Embed=J;exports.EnableEditor=X;exports.FragmentComponent=D;exports.Image=U;exports.ImgComponent=G;exports.InteractiveElement=V;exports.SectionComponent=H;exports.Video=$;