@builder.io/sdk-react-nextjs 0.14.10 → 0.14.12

package/README.md

@@ -1,71 +1,83 @@
-# Builder.io React NextJS SDK (EXPERIMENTAL)
+## When should I use this SDK (please read carefully)
 
-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.
+- you should ONLY use this SDK if you are trying to [register](https://www.builder.io/c/docs/custom-components-setup) your RSCs (react server components) in Builder. That is its only advantage over our standard React SDKs.
+- our [Gen1](../../../react/) and [Gen2](../react/) React SDKs work perfectly well with all versions of Next.js. The only feature they do not support is registration of RSCs.
+- this SDK only works in the NextJS App Directory.
 
-## Note
+To allow registering RSCs, this SDK must make compromises. Most notably:
 
-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).
+- it does not support interactive Builder features within the rendered content (such as updating dynamic bindings, state, actions etc.). As of today, there are no workarounds around these limitations, due to how RSCs work. See the [features grid](https://github.com/BuilderIO/builder/tree/main/packages/sdks#features) for more information.
+- the visual editor experience is laggy, as it requires network roundtrips to the customer's servers for each edit. We are working on improving this.
 
-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.
+this SDK is marked as "Beta" due to the missing features mentioned above. It is however actively maintained and developed alongside all other SDKs.
 
-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.
+# Builder.io React NextJS SDK (BETA)
 
-## API Reference
+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.
 
-To use the SDK, you need to:
+## Usage
 
-- fetch the builder data using `getContent`: you can see how to use it here https://www.builder.io/c/docs/content-api, and how it differs from the React V1 SDK's `builder.get()` function.
+When registering a custom component, you will need to add the `isRSC: true` option to the component. For example:
 
-- pass that data to the `RenderContent` component, along with the following properties:
+```tsx
+// CatFacts.tsx
+async function CatFacts() {
+  const catFacts = await fetch('https://cat-fact.herokuapp.com/facts').then(
+    (x) => x.json()
+  );
+  return (
+    <div>
+      Here are some cat facts from an RSC:
+      <ul>
+        {catFacts.slice(3).map((fact) => (
+          <li key={fact._id}>{fact.text}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
 
-```ts
-type RenderContentProps = {
-  content?: Nullable<BuilderContent>;
-  model?: string;
-  data?: { [key: string]: any };
-  context?: BuilderRenderContext;
-  apiKey: string;
-  apiVersion?: ApiVersion;
-  customComponents?: RegisteredComponent[];
-  canTrack?: boolean;
-  locale?: string;
-  includeRefs?: boolean;
+export const CatFactsInfo = {
+  name: 'CatFacts',
+  component: CatFacts,
+  // You must add the below option or the SDK will fail to render.
+  isRSC: true,
 };
 ```
 
-Here is a simplified example showing how you would use both. This needs to be created created with the name `app/[[...slug]]/page.tsx`, so it catches all routes:
+And in your `page.tsx`, you can use the custom component like this:
 
 ```tsx
+// page.tsx
 import {
-  RenderContent,
+  Content,
+  fetchOneEntry,
   getBuilderSearchParams,
-  getContent,
 } from '@builder.io/sdk-react-nextjs';
+import { CatFactsInfo } from './CatFacts';
 
-interface MyPageProps {
-  params: {
-    slug: string[];
-  };
-  searchParams: Record<string, string>;
-}
-
-const apiKey = 'YOUR_API_KEY_HERE';
-
-export default async function Page(props: MyPageProps) {
+export default async function Page(props) {
   const urlPath = '/' + (props.params?.slug?.join('/') || '');
 
-  const content = await getContent({
+  const content = await fetchOneEntry({
     model: 'page',
     apiKey,
     options: getBuilderSearchParams(props.searchParams),
     userAttributes: { urlPath },
   });
 
-  return <RenderContent content={content} model="page" apiKey={apiKey} />;
+  return (
+    <Content
+      content={content}
+      model="page"
+      apiKey={apiKey}
+      customComponents={[CatFactsInfo]}
+    />
+  );
 }
 ```
 
-Look at the [examples](#examples) for more information.
+For more usage information, look at the [examples](#examples).
 
 ## Mitosis
 

package/lib/browser/USE_CLIENT_BUNDLE-2bbdea6c.cjs

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