@builder.io/sdk-react-nextjs 0.17.7 → 0.18.0

package/lib/node/constants/sdk-version.mjs

@@ -1,4 +1,4 @@
-const o = "0.17.7";
+const o = "0.18.0";
 export {
   o as SDK_VERSION
 };

package/lib/node/helpers/subscribe-to-editor.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../functions/is-browser.cjs"),u=require("../functions/is-from-trusted-host.cjs"),g=require("../scripts/init-editing.cjs"),b=require("./logger.cjs"),o=({model:n,trustedHosts:i,callbacks:e})=>t=>{if(!u.isFromTrustedHost(i,t))return;const{data:r}=t;if(r)switch(r.type){case"builder.configureSdk":{e.configureSdk(r.data);break}case"builder.triggerAnimation":{e.animation(r.data);break}case"builder.contentUpdate":{const s=r.data,a=s.key||s.alias||s.entry||s.modelName,d=s.data;a===n&&e.contentUpdate(d);break}}},m=(n,i,e)=>{if(!c.isBrowser)return b.logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."),()=>{};g.setupBrowserForEditing();const t=o({callbacks:{contentUpdate:i,animation:()=>{},configureSdk:()=>{}},model:n,trustedHosts:e==null?void 0:e.trustedHosts});return window.addEventListener("message",t),()=>{window.removeEventListener("message",t)}};exports.createEditorListener=o;exports.subscribeToEditor=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../functions/is-browser.cjs"),u=require("../functions/is-from-trusted-host.cjs"),g=require("../scripts/init-editing.cjs"),b=require("./logger.cjs"),s=({model:n,trustedHosts:o,callbacks:t})=>i=>{if(!u.isFromTrustedHost(o,i))return;const{data:e}=i;if(e)switch(e.type){case"builder.configureSdk":{t.configureSdk(e.data);break}case"builder.triggerAnimation":{t.animation(e.data);break}case"builder.contentUpdate":{const r=e.data,a=r.key||r.alias||r.entry||r.modelName,d=r.data;a===n&&t.contentUpdate(d);break}}},m=({model:n,apiKey:o,callback:t,trustedHosts:i})=>{if(!c.isBrowser)return b.logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."),()=>{};g.setupBrowserForEditing({modelName:n,apiKey:o});const e=s({callbacks:{contentUpdate:t,animation:()=>{},configureSdk:()=>{}},model:n,trustedHosts:i});return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}};exports.createEditorListener=s;exports.subscribeToEditor=m;

package/lib/node/helpers/subscribe-to-editor.mjs

@@ -3,52 +3,60 @@ import { isFromTrustedHost as c } from "../functions/is-from-trusted-host.mjs";
 import { setupBrowserForEditing as m } from "../scripts/init-editing.mjs";
 import { logger as u } from "./logger.mjs";
 const g = ({
-  model: o,
-  trustedHosts: s,
-  callbacks: e
-}) => (t) => {
-  if (!c(s, t))
+  model: n,
+  trustedHosts: i,
+  callbacks: t
+}) => (o) => {
+  if (!c(i, o))
     return;
   const {
-    data: r
-  } = t;
-  if (r)
-    switch (r.type) {
+    data: e
+  } = o;
+  if (e)
+    switch (e.type) {
       case "builder.configureSdk": {
-        e.configureSdk(r.data);
+        t.configureSdk(e.data);
         break;
       }
       case "builder.triggerAnimation": {
-        e.animation(r.data);
+        t.animation(e.data);
         break;
       }
       case "builder.contentUpdate": {
-        const n = r.data, i = n.key || n.alias || n.entry || n.modelName, a = n.data;
-        i === o && e.contentUpdate(a);
+        const r = e.data, s = r.key || r.alias || r.entry || r.modelName, a = r.data;
+        s === n && t.contentUpdate(a);
         break;
       }
     }
-}, l = (o, s, e) => {
+}, k = ({
+  model: n,
+  apiKey: i,
+  callback: t,
+  trustedHosts: o
+}) => {
   if (!d)
     return u.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."), () => {
     };
-  m();
-  const t = g({
+  m({
+    modelName: n,
+    apiKey: i
+  });
+  const e = g({
     callbacks: {
-      contentUpdate: s,
+      contentUpdate: t,
       animation: () => {
       },
       configureSdk: () => {
       }
     },
-    model: o,
-    trustedHosts: e == null ? void 0 : e.trustedHosts
+    model: n,
+    trustedHosts: o
   });
-  return window.addEventListener("message", t), () => {
-    window.removeEventListener("message", t);
+  return window.addEventListener("message", e), () => {
+    window.removeEventListener("message", e);
   };
 };
 export {
   g as createEditorListener,
-  l as subscribeToEditor
+  k as subscribeToEditor
 };

package/lib/node/scripts/init-editing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),M=require("../functions/is-from-trusted-host.cjs"),B=require("../functions/register.cjs"),E=()=>{B.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const v=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!M.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),B=require("../functions/is-from-trusted-host.cjs"),M=require("../functions/register.cjs"),E=()=>{M.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const S=r=>{var o,i;c||(c=!0,b.isBrowser()&&((o=window.parent)==null||o.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,modelName:r.modelName,apiKey:r.apiKey,supportsXSmallBreakpoint:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:r}},"*"),window.addEventListener("message",u=>{var d,l;if(!B.isFromTrustedHost(r.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const m=e.data.text,g=e.data.arguments||[],s=e.data.id,w=new Function(m);let t,a=null;try{t=w.apply(null,g)}catch(n){a=n}a?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:s,error:a.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:s,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:s}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=S;

package/lib/node/scripts/init-editing.mjs

@@ -1,10 +1,10 @@
 import { SDK_VERSION as w } from "../constants/sdk-version.mjs";
 import { TARGET as y } from "../constants/target.mjs";
 import { isBrowser as b } from "../functions/is-browser.mjs";
-import { isFromTrustedHost as C } from "../functions/is-from-trusted-host.mjs";
-import { register as E } from "../functions/register.mjs";
-const x = () => {
-  E("insertMenu", {
+import { isFromTrustedHost as B } from "../functions/is-from-trusted-host.mjs";
+import { register as C } from "../functions/register.mjs";
+const S = () => {
+  C("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -27,7 +27,7 @@ const x = () => {
   });
 };
 let m = !1;
-const S = (a = {}) => {
+const x = (r) => {
   var n, i;
   m || (m = !0, b() && ((n = window.parent) == null || n.postMessage({
     type: "builder.sdkInfo",
@@ -39,16 +39,19 @@ const S = (a = {}) => {
       // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0,
+      modelName: r.modelName,
+      apiKey: r.apiKey,
+      supportsXSmallBreakpoint: !0,
       blockLevelPersonalization: !0
     }
   }, "*"), (i = window.parent) == null || i.postMessage({
     type: "builder.updateContent",
     data: {
-      options: a
+      options: r
     }
   }, "*"), window.addEventListener("message", (u) => {
     var p, d;
-    if (!C(a.trustedHosts, u))
+    if (!B(r.trustedHosts, u))
       return;
     const {
       data: e
@@ -56,7 +59,7 @@ const S = (a = {}) => {
     if (e != null && e.type)
       switch (e.type) {
         case "builder.evaluate": {
-          const c = e.data.text, f = e.data.arguments || [], r = e.data.id, g = new Function(c);
+          const c = e.data.text, f = e.data.arguments || [], a = e.data.id, g = new Function(c);
           let t, s = null;
           try {
             t = g.apply(null, f);
@@ -66,7 +69,7 @@ const S = (a = {}) => {
           s ? (p = window.parent) == null || p.postMessage({
             type: "builder.evaluateError",
             data: {
-              id: r,
+              id: a,
               error: s.message
             }
           }, "*") : t && typeof t.then == "function" ? t.then((o) => {
@@ -74,7 +77,7 @@ const S = (a = {}) => {
             (l = window.parent) == null || l.postMessage({
               type: "builder.evaluateResult",
               data: {
-                id: r,
+                id: a,
                 result: o
               }
             }, "*");
@@ -82,7 +85,7 @@ const S = (a = {}) => {
             type: "builder.evaluateResult",
             data: {
               result: t,
-              id: r
+              id: a
             }
           }, "*");
           break;
@@ -91,6 +94,6 @@ const S = (a = {}) => {
   })));
 };
 export {
-  x as registerInsertMenu,
-  S as setupBrowserForEditing
+  S as registerInsertMenu,
+  x as setupBrowserForEditing
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-nextjs",
   "description": "Builder.io RSC SDK for NextJS App Directory",
-  "version": "0.17.7",
+  "version": "0.18.0",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/nextjs",
   "repository": {
     "type": "git",

package/types/cjs/components/content-variants/content-variants.types.d.ts

@@ -7,11 +7,11 @@ export interface ContentVariantsPrps extends ExtraFrameworkProps {
     /**
      * The Builder content JSON to render (required).
      */
-    content?: Nullable<BuilderContent>;
+    content: Nullable<BuilderContent>;
     /**
      * The Builder content `model` to render (required).
      */
-    model?: string;
+    model: string;
     /**
      * Additional data to inject into your Builder content (optional).
      */

package/types/cjs/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.17.7";
+export declare const SDK_VERSION = "0.18.0";

package/types/cjs/helpers/subscribe-to-editor.d.ts

@@ -9,19 +9,19 @@ type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> &
     };
 };
 export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
-type SubscribeToEditor = (
-/**
- * The Builder `model` to subscribe to
- */
-model: string, 
-/**
- * The callback function to call when the content is updated.
- */
-callback: (updatedContent: BuilderContent) => void, 
-/**
- * Extra options for the listener.
- */
-options?: {
+type SubscribeToEditor = ({ model, apiKey, callback, trustedHosts }: {
+    /**
+     * The Builder `model` to subscribe to
+     */
+    model: string;
+    /**
+     * Builder API Key to use for the editor.
+     */
+    apiKey: string;
+    /**
+     * The callback function to call when the content is updated.
+     */
+    callback: (updatedContent: BuilderContent) => void;
     /**
      * List of hosts to allow editing content from.
      */

package/types/cjs/scripts/init-editing.d.ts

@@ -1,5 +1,7 @@
 export declare const registerInsertMenu: () => void;
-export declare const setupBrowserForEditing: (options?: {
+export declare const setupBrowserForEditing: (options: {
+    modelName: string;
+    apiKey: string;
     enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;

package/types/cjs/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/types/cjs/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block.js';
 import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

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

@@ -7,11 +7,11 @@ export interface ContentVariantsPrps extends ExtraFrameworkProps {
     /**
      * The Builder content JSON to render (required).
      */
-    content?: Nullable<BuilderContent>;
+    content: Nullable<BuilderContent>;
     /**
      * The Builder content `model` to render (required).
      */
-    model?: string;
+    model: string;
     /**
      * Additional data to inject into your Builder content (optional).
      */

package/types/esm/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.17.7";
+export declare const SDK_VERSION = "0.18.0";

package/types/esm/helpers/subscribe-to-editor.d.ts

@@ -9,19 +9,19 @@ type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> &
     };
 };
 export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
-type SubscribeToEditor = (
-/**
- * The Builder `model` to subscribe to
- */
-model: string, 
-/**
- * The callback function to call when the content is updated.
- */
-callback: (updatedContent: BuilderContent) => void, 
-/**
- * Extra options for the listener.
- */
-options?: {
+type SubscribeToEditor = ({ model, apiKey, callback, trustedHosts }: {
+    /**
+     * The Builder `model` to subscribe to
+     */
+    model: string;
+    /**
+     * Builder API Key to use for the editor.
+     */
+    apiKey: string;
+    /**
+     * The callback function to call when the content is updated.
+     */
+    callback: (updatedContent: BuilderContent) => void;
     /**
      * List of hosts to allow editing content from.
      */

package/types/esm/scripts/init-editing.d.ts

@@ -1,5 +1,7 @@
 export declare const registerInsertMenu: () => void;
-export declare const setupBrowserForEditing: (options?: {
+export declare const setupBrowserForEditing: (options: {
+    modelName: string;
+    apiKey: string;
     enrich?: boolean;
     includeRefs?: boolean;
     locale?: string;

package/types/esm/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/types/esm/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block.js';
 import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }