@builder.io/sdk-react-nextjs 0.14.6 → 0.14.8

package/README.md

@@ -1,8 +1,14 @@
-# Builder.io React NextJS SDK (BETA)
+# Builder.io React NextJS SDK (EXPERIMENTAL)
 
 This is the Builder NextJS SDK, `@builder.io/sdk-react-nextjs`. It is intended to be used _only_ with NextJS's app directory, and has hard dependencies on NextJS-specific functionality that only works in the app directory.
 
-Note: you can use _any_ Builder React SDK with Next.js. Our [Gen1](../../../react/) and [Gen2](../react/) SDKs both work with Next.js (pages router or app router). This SDK, though, is the only one that supports [registering](<[url](https://www.builder.io/c/docs/custom-components-setup)>) server components, and also includes nearly 0 client side JS runtime. Our other SDKs only support registering client components in React, due to how RSC's runtime works.
+## Note
+
+You can use _any_ Builder React SDK with Next.js. Our [Gen1](../../../react/) and [Gen2](../react/) SDKs both work with Next.js (pages router or app router).
+
+This NextJS SDK, though, is the only one that supports [registering](https://www.builder.io/c/docs/custom-components-setup) RSCs (react server components) as custom components in Builder, and also includes nearly 0 client side JS runtime. Our other SDKs only support registering React client components in Builder, due to how RSC's runtime works.
+
+To allow registering RSCS, this SDK makes compromises on Builder features: most notably, it does not support interactivity within the rendered content. See the [features grid](https://github.com/BuilderIO/builder/tree/main/packages/sdks#features) for more information.
 
 ## API Reference
 

package/lib/browser/USE_CLIENT_BUNDLE-2046b4f7.cjs

@@ -0,0 +1,21 @@
+"use client";"use strict";const n=require("react/jsx-runtime"),a=require("./bundle-eca4b0ba.cjs"),r=require("react"),D=require("./USE_SERVER_BUNDLE-d3d0c3a5.cjs"),V=require("next/navigation");function E(e){return n.jsx(n.Fragment,{children:a.isEmptyElement(e.TagName)?n.jsx(n.Fragment,{children:n.jsx(e.TagName,{...e.attributes,...e.actionAttributes})}):n.jsx(n.Fragment,{children:typeof e.TagName=="string"?n.jsx(e.TagName,{...e.attributes,...e.actionAttributes,children:e.children}):n.jsx(e.TagName,{...e.attributes,...e.actionAttributes,children:e.children})})})}function H(e){return n.jsx(E,{attributes:{...e.attributes,[a.getClassPropName()]:`${e.link?"":"builder-button"} ${e.attributes[a.getClassPropName()]||""}`,...e.link?{href:e.link,target:e.openLinkInNewTab?"_blank":void 0,role:"link"}:{role:"button"}},TagName:e.link?e.builderLinkComponent||"a":"button",actionAttributes:{},children:e.text})}function U(e){return n.jsx(E,{TagName:e.Wrapper,attributes:a.getBlockProperties({block:e.block,context:e.context}),actionAttributes: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})}function $(e){return n.jsx(e.Wrapper,{...e.wrapperProps,attributes:e.includeBlockProps?{...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 O(e){function o(){var l;return"builder-blocks"+((l=e.blocks)!=null&&l.length?"":" no-blocks")}function g(){var l,m;a.isEditing()&&!((l=e.blocks)!=null&&l.length)&&((m=window.parent)==null||m.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}function S(){var l,m;a.isEditing()&&!((l=e.blocks)!=null&&l.length)&&((m=window.parent)==null||m.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}return n.jsxs(n.Fragment,{children:[n.jsx(e.BlocksWrapper,{className:o()+" props-blocks-wrapper-7cd1560e","builder-path":e.path,"builder-parent-id":e.parent,style:e.styleProp,onClick:l=>g(),onMouseEnter:l=>S(),onKeyPress:l=>g(),...e.BlocksWrapperProps,children:e.children}),n.jsx("style",{children:`.props-blocks-wrapper-7cd1560e {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`})]})}function J(e){return n.jsx("span",{children:e.children})}function G(e){var l,m,h,v;function o(){var f;const s=e.image||e.src;if(!s||!(s.match(/builder\.io/)||s.match(/cdn\.shopify\.com/)))return e.srcset;if(e.srcset&&((f=e.image)!=null&&f.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),a.getSrcSet(s)}else if(e.image&&!e.srcset)return a.getSrcSet(s);return a.getSrcSet(s)}function g(){var b;return(b=o==null?void 0:o())!=null&&b.match(/builder\.io/)&&!e.noWebp?o().replace(/\?/g,"?format=webp&"):""}function S(){const b={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?b:void 0}return n.jsxs(n.Fragment,{children:[n.jsxs(n.Fragment,{children:[n.jsxs("picture",{children:[g()?n.jsx("source",{type:"image/webp",srcSet:g()}):null,n.jsx("img",{loading:"lazy",alt:e.altText,role:e.altText?void 0:"presentation",style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...S()},className:"builder-image"+(e.className?" "+e.className:"")+" img-a0c95e8c",src:e.image,srcSet:o(),sizes:e.sizes})]}),e.aspectRatio&&!((m=(l=e.builderBlock)==null?void 0:l.children)!=null&&m.length&&e.fitContent)?n.jsx("div",{className:"builder-image-sizer div-a0c95e8c",style:{paddingTop:e.aspectRatio*100+"%"}}):null,(v=(h=e.builderBlock)==null?void 0:h.children)!=null&&v.length&&e.fitContent?n.jsx(n.Fragment,{children:e.children}):null,!e.fitContent&&e.children?n.jsx("div",{className:"div-a0c95e8c-2",children:e.children}):null]}),n.jsx("style",{children:`.img-a0c95e8c {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}.div-a0c95e8c {
+  width: 100%;
+  pointer-events: none;
+  font-size: 0;
+}.div-a0c95e8c-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}`})]})}function Q(e){return n.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 X(e){const o=r.useRef(null),[g,S]=r.useState(()=>[]),[l,m]=r.useState(()=>[]);return r.useEffect(()=>{var v;if(!((v=o.current)!=null&&v.getElementsByTagName)||typeof window>"u")return;const h=o.current.getElementsByTagName("script");for(let b=0;b<h.length;b++){const s=h[b];if(s.src){if(g.includes(s.src))continue;g.push(s.src);const f=document.createElement("script");f.async=!0,f.src=s.src,document.head.appendChild(f)}else if(!s.type||["text/javascript","application/javascript","application/ecmascript"].includes(s.type)){if(l.includes(s.innerText))continue;try{l.push(s.innerText),new Function(s.innerText)()}catch(f){console.warn("`CustomCode`: Error running script:",f)}}}},[]),n.jsx("div",{ref:o,className:"builder-custom-code"+(e.replaceNodes?" replace-nodes":""),dangerouslySetInnerHTML:{__html:e.code}})}function Y(e){const o=r.useRef(null),[g,S]=r.useState(()=>[]),[l,m]=r.useState(()=>[]),[h,v]=r.useState(()=>!1);function b(){if(!o.current||!o.current.getElementsByTagName)return;const s=o.current.getElementsByTagName("script");for(let f=0;f<s.length;f++){const k=s[f];if(k.src&&!g.includes(k.src)){g.push(k.src);const y=document.createElement("script");y.async=!0,y.src=k.src,document.head.appendChild(y)}else if(a.isJsScript(k)&&!l.includes(k.innerText))try{l.push(k.innerText),new Function(k.innerText)()}catch(y){console.warn("`Embed`: Error running script:",y)}}}return r.useEffect(()=>{o.current&&!h&&(v(!0),b())},[o.current,h]),n.jsx("div",{className:"builder-embed",ref:o,dangerouslySetInnerHTML:{__html:e.content}})}function Z(e){return n.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 p(e){var S,l,m,h,v,b,s;function o(){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{...o()}}return n.jsxs("div",{style:{position:"relative"},children:[n.jsx("video",{className:"builder-video",...g(),preload:e.preload||"metadata",style:{width:"100%",height:"100%",...(S=e.attributes)==null?void 0:S.style,objectFit:e.fit,objectPosition:e.position,zIndex:2,borderRadius:"1px",...e.aspectRatio?{position:"absolute"}:null},src:e.video||"no-src",poster:e.posterImage,children:e.lazyLoad?null:n.jsx("source",{type:"video/mp4",src:e.video})}),e.aspectRatio&&!(e.fitContent&&((m=(l=e.builderBlock)==null?void 0:l.children)!=null&&m.length))?n.jsx("div",{style:{width:"100%",paddingTop:e.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}}):null,(v=(h=e.builderBlock)==null?void 0:h.children)!=null&&v.length&&e.fitContent?n.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch"},children:e.children}):null,(s=(b=e.builderBlock)==null?void 0:b.children)!=null&&s.length&&!e.fitContent?n.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]})}const ee=r.createContext({content:null,context:{},localState:void 0,rootSetState(){},rootState:{},apiKey:null,apiVersion:void 0,componentInfos:{},inheritedStyles:{},BlocksWrapper:"div",BlocksWrapperProps:{}});function te(e){var P,T,B,N,L,F,W;const o=r.useRef(null),[g,S]=r.useState(()=>0);r.useState(()=>!0);function l(i){var c,d;const t={...e.builderContextSignal.rootState,...i};e.builderContextSignal.rootSetState?(d=(c=e.builderContextSignal).rootSetState)==null||d.call(c,t):e.builderContextSignal.rootState=t}function m(i){var c,d,u,x,A;const t={...e.builderContextSignal.content,...i,data:{...(c=e.builderContextSignal.content)==null?void 0:c.data,...i==null?void 0:i.data},meta:{...(d=e.builderContextSignal.content)==null?void 0:d.meta,...i==null?void 0:i.meta,breakpoints:((u=i==null?void 0:i.meta)==null?void 0:u.breakpoints)||((A=(x=e.builderContextSignal.content)==null?void 0:x.meta)==null?void 0:A.breakpoints)}};D.postPreviewContent({value:t,key:t.id}).then(()=>{M.refresh()})}r.useState(()=>0);const[h,v]=r.useState(()=>!1),[b,s]=r.useState(()=>e.contentWrapper||"div");function f(i){return a.createEditorListener({model:e.model,trustedHosts:e.trustedHosts,callbacks:{configureSdk:t=>{var u;const{breakpoints:c,contentId:d}=t;!d||d!==((u=e.builderContextSignal.content)==null?void 0:u.id)||c&&(m({meta:{breakpoints:c}}),S(g+1))},animation:t=>{a.triggerAnimation(t)},contentUpdate:t=>{m(t),S(g+1)}}})(i)}function k(){var t,c;const i=(c=(t=e.builderContextSignal.content)==null?void 0:t.data)==null?void 0:c.jsCode;i&&a.evaluate({code:i,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState,enableCache:!1})}const[y,ne]=r.useState(()=>({})),[w,K]=r.useState(()=>!1);function q(i){var t,c;if(e.builderContextSignal.content){const d=(t=e.builderContextSignal.content)==null?void 0:t.testVariationId,u=(c=e.builderContextSignal.content)==null?void 0:c.id;a._track({type:"click",canTrack:a.getDefaultCanTrack(e.canTrack),contentId:u,apiKey:e.apiKey,variationId:d!==u?d:void 0,...a.getInteractionPropertiesForEvent(i),unique:!w})}w||K(!0)}function _(i){return i.replace(/{{([^}]+)}}/g,(t,c)=>String(a.evaluate({code:c,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState,enableCache:!0})))}function z({url:i,key:t}){a.fetch(i).then(c=>c.json()).then(c=>{var u,x;const d={...e.builderContextSignal.rootState,[t]:c};(x=(u=e.builderContextSignal).rootSetState)==null||x.call(u,d),y[t]=!0}).catch(c=>{console.error("error fetching dynamic data",i,c)})}function j(){var t,c;const i=((c=(t=e.builderContextSignal.content)==null?void 0:t.data)==null?void 0:c.httpRequests)??{};Object.entries(i).forEach(([d,u])=>{if(u&&(!y[d]||a.isEditing())){const x=_(u);z({url:x,key:d})}})}function C(){a.isEditing()&&window.dispatchEvent(new CustomEvent("builder:component:stateChange",{detail:{state:a.fastClone(e.builderContextSignal.rootState),ref:{name:e.model}}}))}function R(i){S(g+1),window.addEventListener("message",f),a.registerInsertMenu(),a.setupBrowserForEditing({...e.locale?{locale:e.locale}:{},...e.enrich?{enrich:e.enrich}:{},...e.trustedHosts?{trustedHosts:e.trustedHosts}:{}}),Object.values(e.builderContextSignal.componentInfos).forEach(t=>{var d;const c=a.createRegisterComponentMessage(t);(d=window.parent)==null||d.postMessage(c,"*")}),window.addEventListener("builder:component:stateChangeListenerActivated",C)}function I(i){const t=new URL(location.href).searchParams,c=t.get("builder.preview"),d=t.get(`builder.preview.${c}`),u=t.get("apiKey")||t.get("builder.space");c===e.model&&u===e.apiKey&&(!e.content||d===e.content.id)&&a.fetchOneEntry({model:e.model,apiKey:e.apiKey,apiVersion:e.builderContextSignal.apiVersion}).then(x=>{x&&m(x)})}const M=V.useRouter();return r.useEffect(()=>{var i;return(i=o.current)==null||i.addEventListener("initeditingbldr",R),()=>{var t;return(t=o.current)==null?void 0:t.removeEventListener("initeditingbldr",R)}},[]),r.useEffect(()=>{var i;return(i=o.current)==null||i.addEventListener("initpreviewingbldr",I),()=>{var t;return(t=o.current)==null?void 0:t.removeEventListener("initpreviewingbldr",I)}},[]),r.useEffect(()=>{var i,t;if(a.isBrowser()){if(a.isEditing()&&o.current&&o.current.dispatchEvent(new CustomEvent("initeditingbldr")),e.builderContextSignal.content&&a.getDefaultCanTrack(e.canTrack)){const d=(i=e.builderContextSignal.content)==null?void 0:i.testVariationId,u=(t=e.builderContextSignal.content)==null?void 0:t.id,x=e.apiKey;a._track({type:"impression",canTrack:!0,contentId:u,apiKey:x,variationId:d!==u?d:void 0})}a.isPreviewing()}},[]),r.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."),k(),j(),C()},[]),r.useEffect(()=>{},[e.content]),r.useEffect(()=>{a.isBrowser()&&(window.removeEventListener("message",f),window.addEventListener("message",f))},[h]),r.useEffect(()=>{k()},[(T=(P=e.builderContextSignal.content)==null?void 0:P.data)==null?void 0:T.jsCode]),r.useEffect(()=>{j()},[(N=(B=e.builderContextSignal.content)==null?void 0:B.data)==null?void 0:N.httpRequests]),r.useEffect(()=>{C()},[e.builderContextSignal.rootState]),r.useEffect(()=>{e.data&&l(e.data)},[e.data]),r.useEffect(()=>{e.locale&&l({locale:e.locale})},[e.locale]),r.useEffect(()=>()=>{a.isBrowser()&&(window.removeEventListener("message",f),window.removeEventListener("builder:component:stateChangeListenerActivated",C))},[]),n.jsx(ee.Provider,{value:e.builderContextSignal,children:e.builderContextSignal.content?r.createElement(b,{key:g,ref:o,onClick:i=>q(i),"builder-content-id":(L=e.builderContextSignal.content)==null?void 0:L.id,"builder-model":e.model,...e.showContent?{}:{hidden:!0,"aria-hidden":!0},...e.contentWrapperProps,className:`variant-${((F=e.content)==null?void 0:F.testVariationId)||((W=e.content)==null?void 0:W.id)}`},e.children):null})}exports.BlockWrapper=U;exports.BlocksWrapper=O;exports.Button=H;exports.CustomCode=X;exports.DynamicRenderer=E;exports.Embed=Y;exports.EnableEditor=te;exports.FragmentComponent=J;exports.Image=G;exports.ImgComponent=Z;exports.InteractiveElement=$;exports.SectionComponent=Q;exports.Video=p;