@builder.io/sdk-react 0.0.4 → 0.0.6-0

package/README.md

@@ -17,3 +17,7 @@ npm install @builder.io/sdk-react@dev
 ```
 
 Take a look at [our example repo](/examples/react-v2) for how to use this SDK.
+
+## Fetch
+
+This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.0.4",
+  "version": "0.0.6-0",
   "main": "src/index.js",
   "type": "module",
   "exports": {
@@ -24,8 +24,5 @@
   },
   "devDependencies": {
     "react": "^18.2.0"
-  },
-  "dependencies": {
-    "node-fetch": "^2.6.1"
   }
 }

package/packages/_rsc/src/blocks/columns/columns.js

@@ -16,6 +16,10 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import RenderBlocks from "../../components/render-blocks.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import { TARGET } from "../../constants/target.js";
+import { convertStyleMapToCSS } from "../../helpers/css";
 function Columns(props) {
   var _a;
   const _context = __spreadValues({}, props["_context"]);
@@ -57,17 +61,77 @@ function Columns(props) {
         "--column-width-tablet": state.maybeApplyForTablet(width),
         "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft)
       };
+    },
+    getWidthForBreakpointSize(size) {
+      const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+      return breakpointSizes[size].max;
+    },
+    get columnStyleObjects() {
+      return {
+        columns: {
+          small: {
+            flexDirection: "var(--flex-dir)",
+            alignItems: "stretch"
+          },
+          medium: {
+            flexDirection: "var(--flex-dir-tablet)",
+            alignItems: "stretch"
+          }
+        },
+        column: {
+          small: {
+            width: "var(--column-width) !important",
+            marginLeft: "var(--column-margin-left) !important"
+          },
+          medium: {
+            width: "var(--column-width-tablet) !important",
+            marginLeft: "var(--column-margin-left-tablet) !important"
+          }
+        }
+      };
+    },
+    get columnsStyles() {
+      return `
+      @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
+        }
+      }
+
+      @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
+        }
+      },
+    `;
+    },
+    get reactNativeColumnsStyles() {
+      return this.columnStyleObjects.columns.small;
+    },
+    get reactNativeColumnStyles() {
+      return this.columnStyleObjects.column.small;
     }
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div-6bcd11d2",
-    style: state.columnsCssVars
-  }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-6bcd11d2-2",
-    style: __spreadValues({
+    className: `builder-columns ${props.builderBlock.id}-breakpoints div-540739f0`,
+    style: __spreadValues(__spreadValues({}, TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}), state.columnsCssVars)
+  }, TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: state.columnsStyles,
+    _context
+  })) : null, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
+    className: "builder-column div-540739f0-2",
+    style: __spreadValues(__spreadValues({
       width: state.getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`
-    }, state.columnCssVars),
+    }, TARGET === "reactNative" ? state.reactNativeColumnStyles : {}), state.columnCssVars),
     key: index
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
     blocks: column.blocks,
@@ -77,19 +141,12 @@ function Columns(props) {
       flexGrow: "1"
     },
     _context
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-6bcd11d2 { 
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-540739f0 { 
 display: flex;
-align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-6bcd11d2 { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-6bcd11d2 { 
-flex-direction: var(--flex-dir); } }.div-6bcd11d2-2 { 
+line-height: normal; }.div-540739f0-2 { 
 display: flex;
 flex-direction: column;
-align-items: stretch; }@media (max-width: 991px) { .div-6bcd11d2-2 { 
-width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-6bcd11d2-2 { 
-width: var(--column-width) !important;
-margin-left: var(--column-margin-left) !important; } }`));
+align-items: stretch; }`));
 }
 export {
   Columns as default

package/packages/_rsc/src/blocks/section/section.js

@@ -21,9 +21,18 @@ import * as React from "react";
 function SectionComponent(props) {
   const _context = __spreadValues({}, props["_context"]);
   return /* @__PURE__ */ React.createElement("section", __spreadProps(__spreadValues({}, props.attributes), {
-    style: props.maxWidth && typeof props.maxWidth === "number" ? {
-      maxWidth: props.maxWidth
-    } : void 0
+    style: {
+      width: "100%",
+      alignSelf: "stretch",
+      flexGrow: "1",
+      boxSizing: "border-box",
+      maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
   }), props.children);
 }
 export {

package/packages/_rsc/src/blocks/symbol/symbol.js

@@ -19,11 +19,20 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import RenderContent from "../../components/render-content/render-content.js";
+import { TARGET } from "../../constants/target";
 function Symbol(props) {
   var _a, _b, _c, _d, _e;
   const _context = __spreadValues({}, props["_context"]);
   const state = {
-    className: "builder-symbol",
+    get className() {
+      var _a2, _b2;
+      return [
+        ...TARGET === "vue2" || TARGET === "vue3" ? Object.keys(props.attributes.class) : [props.attributes.class],
+        "builder-symbol",
+        ((_a2 = props.symbol) == null ? void 0 : _a2.inline) ? "builder-inline-symbol" : void 0,
+        ((_b2 = props.symbol) == null ? void 0 : _b2.dynamic) || props.dynamic ? "builder-dynamic-symbol" : void 0
+      ].filter(Boolean).join(" ");
+    },
     fetchedContent: null,
     get contentToUse() {
       var _a2;

package/packages/_rsc/src/components/render-block/render-block.js

@@ -88,10 +88,12 @@ function RenderBlock(props) {
       });
     },
     get attributes() {
-      return __spreadValues(__spreadValues({}, getBlockProperties(state.useBlock)), TARGET === "reactNative" ? {
+      const blockProperties = getBlockProperties(state.useBlock);
+      return __spreadValues(__spreadValues({}, blockProperties), TARGET === "reactNative" ? {
         style: getReactNativeBlockStyles({
           block: state.useBlock,
-          context: props.context
+          context: props.context,
+          blockStyles: blockProperties.style
         })
       } : {});
     },
@@ -100,12 +102,14 @@ function RenderBlock(props) {
       return !((_a2 = state.component) == null ? void 0 : _a2.noWrap);
     },
     get renderComponentProps() {
-      var _a2;
+      var _a2, _b2, _c2, _d;
       return {
         blockChildren: state.useChildren,
         componentRef: (_a2 = state.component) == null ? void 0 : _a2.component,
-        componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(state.useBlock)), state.shouldWrap ? {} : {
+        componentOptions: __spreadProps(__spreadValues(__spreadValues({}, getBlockComponentOptions(state.useBlock)), state.shouldWrap ? {} : {
           attributes: __spreadValues(__spreadValues({}, state.attributes), state.actions)
+        }), {
+          customBreakpoints: (_d = (_c2 = (_b2 = state.childrenContext) == null ? void 0 : _b2.content) == null ? void 0 : _c2.meta) == null ? void 0 : _d.breakpoints
         }),
         context: state.childrenContext
       };
@@ -153,7 +157,8 @@ function RenderBlock(props) {
       }
       const styles = getReactNativeBlockStyles({
         block: state.useBlock,
-        context: props.context
+        context: props.context,
+        blockStyles: state.attributes.style
       });
       return extractTextStyles(styles);
     },

package/packages/_rsc/src/components/render-content/render-content.js

@@ -21,7 +21,7 @@ import * as React from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
-import { getFetch } from "../../functions/get-fetch.js";
+import { fetch } from "../../functions/get-fetch.js";
 import { isEditing } from "../../functions/is-editing.js";
 import {
   components
@@ -34,18 +34,22 @@ function RenderContent(props) {
   const _context = __spreadValues({}, props["_context"]);
   const state = {
     forceReRenderCount: 0,
+    overrideContent: null,
     get useContent() {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h;
       if (!props.content && !state.overrideContent) {
         return void 0;
       }
       const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), state.overrideContent), {
-        data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), (_b2 = state.overrideContent) == null ? void 0 : _b2.data)
+        data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), (_b2 = state.overrideContent) == null ? void 0 : _b2.data),
+        meta: __spreadProps(__spreadValues(__spreadValues({}, (_c2 = props.content) == null ? void 0 : _c2.meta), (_d2 = state.overrideContent) == null ? void 0 : _d2.meta), {
+          breakpoints: state.useBreakpoints || ((_f2 = (_e2 = state.overrideContent) == null ? void 0 : _e2.meta) == null ? void 0 : _f2.breakpoints) || ((_h = (_g2 = props.content) == null ? void 0 : _g2.meta) == null ? void 0 : _h.breakpoints)
+        })
       });
       return mergedContent;
     },
-    overrideContent: null,
     update: 0,
+    useBreakpoints: null,
     get canTrackToUse() {
       return props.canTrack || true;
     },
@@ -71,9 +75,20 @@ function RenderContent(props) {
       return allComponents;
     },
     processMessage(event) {
+      var _a2;
       const { data } = event;
       if (data) {
         switch (data.type) {
+          case "builder.configureSdk": {
+            const messageContent = data.data;
+            const { breakpoints, contentId } = messageContent;
+            if (!contentId || contentId !== ((_a2 = state.useContent) == null ? void 0 : _a2.id)) {
+              return;
+            }
+            state.useBreakpoints = breakpoints;
+            state.forceReRenderCount = state.forceReRenderCount + 1;
+            break;
+          }
           case "builder.contentUpdate": {
             const messageContent = data.data;
             const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -126,7 +141,7 @@ function RenderContent(props) {
       }));
     },
     handleRequest({ url, key }) {
-      getFetch().then((fetch) => fetch(url)).then((response) => response.json()).then((json) => {
+      fetch(url).then((response) => response.json()).then((json) => {
         const newOverrideState = __spreadProps(__spreadValues({}, state.overrideState), {
           [key]: json
         });

package/packages/_rsc/src/functions/get-block-properties.js

@@ -17,12 +17,33 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { TARGET } from "../constants/target.js";
+import { convertStyleMapToCSSArray } from "../helpers/css.js";
+import { transformBlockProperties } from "./transform-block-properties.js";
 function getBlockProperties(block) {
   var _a;
-  return __spreadProps(__spreadValues({}, block.properties), {
+  const properties = __spreadProps(__spreadValues({}, block.properties), {
     "builder-id": block.id,
+    style: getStyleAttribute(block.style),
     class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
   });
+  return transformBlockProperties(properties);
+}
+function getStyleAttribute(style) {
+  if (!style) {
+    return void 0;
+  }
+  switch (TARGET) {
+    case "svelte":
+    case "vue2":
+    case "vue3":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+      return style;
+  }
 }
 export {
   getBlockProperties

package/packages/_rsc/src/functions/get-content/generate-content-url.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { flatten } from "../../helpers/flatten.js";
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+} from "../get-builder-search-params/index.js";
+const generateContentUrl = (options) => {
+  const {
+    limit = 30,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+    includeRefs = true,
+    locale
+  } = options;
+  if (!apiKey) {
+    throw new Error("Missing API key");
+  }
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
+  }
+  if (userAttributes) {
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  }
+  if (query) {
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
+    }
+  }
+  return url;
+};
+export {
+  generateContentUrl
+};

package/packages/_rsc/src/functions/get-content/{fn.test.js → generate-content-url.test.js}

@@ -1,4 +1,4 @@
-import { generateContentUrl } from ".";
+import { generateContentUrl } from "./generate-content-url";
 const testKey = "YJIGb4i01jvw0SRdL5Bt";
 const testModel = "page";
 const testId = "c1b81bab59704599b997574eb0736def";

package/packages/_rsc/src/functions/get-content/index.js

@@ -37,54 +37,19 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { flatten } from "../../helpers/flatten.js";
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams
-} from "../get-builder-search-params/index.js";
-import { getFetch } from "../get-fetch.js";
+import { fetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
+import { generateContentUrl } from "./generate-content-url.js";
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
   });
 }
-const generateContentUrl = (options) => {
-  const {
-    limit = 30,
-    userAttributes,
-    query,
-    noTraverse = false,
-    model,
-    apiKey,
-    includeRefs = true,
-    locale
-  } = options;
-  if (!apiKey) {
-    throw new Error("Missing API key");
-  }
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
-  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
-  const flattened = flatten(queryOptions);
-  for (const key in flattened) {
-    url.searchParams.set(key, String(flattened[key]));
-  }
-  if (userAttributes) {
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  }
-  if (query) {
-    const flattened2 = flatten({ query });
-    for (const key in flattened2) {
-      url.searchParams.set(key, JSON.stringify(flattened2[key]));
-    }
-  }
-  return url;
-};
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
-    const fetch = yield getFetch();
-    const content = yield fetch(url.href).then((res) => res.json());
+    const res = yield fetch(url.href);
+    const content = yield res.json();
     const canTrack = options.canTrack !== false;
     if (canTrack && Array.isArray(content.results)) {
       for (const item of content.results) {
@@ -95,7 +60,6 @@ function getAllContent(options) {
   });
 }
 export {
-  generateContentUrl,
   getAllContent,
   getContent
 };

package/packages/_rsc/src/functions/get-fetch.js

@@ -1,34 +1,14 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
-  return __async(this, null, function* () {
-    const globalFetch = getGlobalThis().fetch;
-    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch.default || nodeFetch;
-    }
-    return globalFetch.default || globalFetch;
-  });
+  const globalFetch = getGlobalThis().fetch;
+  if (typeof globalFetch === "undefined") {
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+    throw new Error("Builder SDK could not find a global `fetch` function");
+  }
+  return globalFetch;
 }
+const fetch = getFetch();
 export {
-  getFetch
+  fetch
 };

package/packages/_rsc/src/functions/get-global-this.js

@@ -11,7 +11,7 @@ function getGlobalThis() {
   if (typeof self !== "undefined") {
     return self;
   }
-  return null;
+  return globalThis;
 }
 export {
   getGlobalThis

package/packages/_rsc/src/functions/get-react-native-block-styles.js

@@ -17,13 +17,14 @@ var __spreadValues = (a, b) => {
 import { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
 function getReactNativeBlockStyles({
   block,
-  context
+  context,
+  blockStyles
 }) {
   const responsiveStyles = block.responsiveStyles;
   if (!responsiveStyles) {
     return {};
   }
-  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {}), blockStyles);
   const newStyles = sanitizeReactNativeBlockStyles(styles);
   return newStyles;
 }

package/packages/_rsc/src/functions/transform-block-properties.js

@@ -0,0 +1,6 @@
+function transformBlockProperties(properties) {
+  return properties;
+}
+export {
+  transformBlockProperties
+};

package/packages/_rsc/src/helpers/css.js

@@ -1,19 +1,23 @@
 import { camelToKebabCase } from "../functions/camel-to-kebab-case.js";
-const convertStyleMaptoCSS = (style) => {
+import { checkIsDefined } from "./nullable.js";
+const convertStyleMapToCSSArray = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === "string") {
       return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return void 0;
     }
   });
-  return cssProps.join("\n");
+  return cssProps.filter(checkIsDefined);
 };
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
 const createCssClass = ({
   mediaQuery,
   className,
   styles
 }) => {
   const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
   if (mediaQuery) {
     return `${mediaQuery} {
@@ -24,5 +28,7 @@ const createCssClass = ({
   }
 };
 export {
+  convertStyleMapToCSS,
+  convertStyleMapToCSSArray,
   createCssClass
 };

package/src/blocks/columns/columns.jsx

@@ -16,6 +16,10 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import RenderBlocks from "../../components/render-blocks.jsx";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
+import { TARGET } from "../../constants/target.js";
+import { convertStyleMapToCSS } from "../../helpers/css";
 function Columns(props) {
   var _a;
   function getGutterSize() {
@@ -56,15 +60,74 @@ function Columns(props) {
       "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
     };
   }
+  function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    return breakpointSizes[size].max;
+  }
+  function columnStyleObjects() {
+    return {
+      columns: {
+        small: {
+          flexDirection: "var(--flex-dir)",
+          alignItems: "stretch"
+        },
+        medium: {
+          flexDirection: "var(--flex-dir-tablet)",
+          alignItems: "stretch"
+        }
+      },
+      column: {
+        small: {
+          width: "var(--column-width) !important",
+          marginLeft: "var(--column-margin-left) !important"
+        },
+        medium: {
+          width: "var(--column-width-tablet) !important",
+          marginLeft: "var(--column-margin-left-tablet) !important"
+        }
+      }
+    };
+  }
+  function columnsStyles() {
+    return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+  }
+  function reactNativeColumnsStyles() {
+    return columnStyleObjects.columns.small;
+  }
+  function reactNativeColumnStyles() {
+    return columnStyleObjects.column.small;
+  }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div-48253552",
-    style: columnsCssVars()
-  }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-48253552-2",
-    style: __spreadValues({
+    className: `builder-columns ${props.builderBlock.id}-breakpoints div-bda7d4e0`,
+    style: __spreadValues(__spreadValues({}, TARGET === "reactNative" ? reactNativeColumnsStyles() : {}), columnsCssVars())
+  }, TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: columnsStyles()
+  })) : null, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
+    className: "builder-column div-bda7d4e0-2",
+    style: __spreadValues(__spreadValues({
       width: getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
-    }, columnCssVars()),
+    }, TARGET === "reactNative" ? reactNativeColumnStyles() : {}), columnCssVars()),
     key: index
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
     blocks: column.blocks,
@@ -73,19 +136,12 @@ function Columns(props) {
     styleProp: {
       flexGrow: "1"
     }
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-48253552 { 
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-bda7d4e0 { 
 display: flex;
-align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-48253552 { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-48253552 { 
-flex-direction: var(--flex-dir); } }.div-48253552-2 { 
+line-height: normal; }.div-bda7d4e0-2 { 
 display: flex;
 flex-direction: column;
-align-items: stretch; }@media (max-width: 991px) { .div-48253552-2 { 
-width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-48253552-2 { 
-width: var(--column-width) !important;
-margin-left: var(--column-margin-left) !important; } }`));
+align-items: stretch; }`));
 }
 export {
   Columns as default

package/src/blocks/section/section.jsx

@@ -20,9 +20,18 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 function SectionComponent(props) {
   return /* @__PURE__ */ React.createElement("section", __spreadProps(__spreadValues({}, props.attributes), {
-    style: props.maxWidth && typeof props.maxWidth === "number" ? {
-      maxWidth: props.maxWidth
-    } : void 0
+    style: {
+      width: "100%",
+      alignSelf: "stretch",
+      flexGrow: "1",
+      boxSizing: "border-box",
+      maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
   }), props.children);
 }
 export {

package/src/blocks/symbol/symbol.jsx

@@ -22,9 +22,18 @@ import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
+import { TARGET } from "../../constants/target";
 function Symbol(props) {
   var _a, _b, _c, _d, _e;
-  const [className, setClassName] = useState(() => "builder-symbol");
+  function className() {
+    var _a2, _b2;
+    return [
+      ...TARGET === "vue2" || TARGET === "vue3" ? Object.keys(props.attributes.class) : [props.attributes.class],
+      "builder-symbol",
+      ((_a2 = props.symbol) == null ? void 0 : _a2.inline) ? "builder-inline-symbol" : void 0,
+      ((_b2 = props.symbol) == null ? void 0 : _b2.dynamic) || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" ");
+  }
   const [fetchedContent, setFetchedContent] = useState(() => null);
   function contentToUse() {
     var _a2;
@@ -47,9 +56,9 @@ function Symbol(props) {
   }, [props.symbol, fetchedContent]);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props.attributes), {
     dataSet: {
-      class: className
+      class: className()
     },
-    className
+    className: className()
   }), /* @__PURE__ */ React.createElement(RenderContent, {
     apiKey: builderContext.apiKey,
     context: builderContext.context,

package/src/components/render-block/render-block.jsx

@@ -87,10 +87,12 @@ function RenderBlock(props) {
     });
   }
   function attributes() {
-    return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), TARGET === "reactNative" ? {
+    const blockProperties = getBlockProperties(useBlock());
+    return __spreadValues(__spreadValues({}, blockProperties), TARGET === "reactNative" ? {
       style: getReactNativeBlockStyles({
         block: useBlock(),
-        context: props.context
+        context: props.context,
+        blockStyles: blockProperties.style
       })
     } : {});
   }
@@ -99,12 +101,14 @@ function RenderBlock(props) {
     return !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.noWrap);
   }
   function renderComponentProps() {
-    var _a2;
+    var _a2, _b2, _c2, _d;
     return {
       blockChildren: useChildren(),
       componentRef: (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component,
-      componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
+      componentOptions: __spreadProps(__spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
         attributes: __spreadValues(__spreadValues({}, attributes()), actions())
+      }), {
+        customBreakpoints: (_d = (_c2 = (_b2 = childrenContext == null ? void 0 : childrenContext()) == null ? void 0 : _b2.content) == null ? void 0 : _c2.meta) == null ? void 0 : _d.breakpoints
       }),
       context: childrenContext()
     };
@@ -152,7 +156,8 @@ function RenderBlock(props) {
     }
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
-      context: props.context
+      context: props.context,
+      blockStyles: attributes().style
     });
     return extractTextStyles(styles);
   }

package/src/components/render-content/render-content.jsx

@@ -23,7 +23,7 @@ import { getDefaultRegisteredComponents } from "../../constants/builder-register
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
-import { getFetch } from "../../functions/get-fetch.js";
+import { fetch } from "../../functions/get-fetch.js";
 import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
@@ -43,18 +43,22 @@ function RenderContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const elementRef = useRef(null);
   const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+  const [overrideContent, setOverrideContent] = useState(() => null);
   function useContent() {
-    var _a2;
+    var _a2, _b2, _c2, _d2, _e2;
     if (!props.content && !overrideContent) {
       return void 0;
     }
     const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
-      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data)
+      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data),
+      meta: __spreadProps(__spreadValues(__spreadValues({}, (_b2 = props.content) == null ? void 0 : _b2.meta), overrideContent == null ? void 0 : overrideContent.meta), {
+        breakpoints: useBreakpoints || ((_c2 = overrideContent == null ? void 0 : overrideContent.meta) == null ? void 0 : _c2.breakpoints) || ((_e2 = (_d2 = props.content) == null ? void 0 : _d2.meta) == null ? void 0 : _e2.breakpoints)
+      })
     });
     return mergedContent;
   }
-  const [overrideContent, setOverrideContent] = useState(() => null);
   const [update, setUpdate] = useState(() => 0);
+  const [useBreakpoints, setUseBreakpoints] = useState(() => null);
   function canTrackToUse() {
     return props.canTrack || true;
   }
@@ -80,9 +84,20 @@ function RenderContent(props) {
     return allComponents;
   }
   function processMessage(event) {
+    var _a2;
     const { data } = event;
     if (data) {
       switch (data.type) {
+        case "builder.configureSdk": {
+          const messageContent = data.data;
+          const { breakpoints, contentId } = messageContent;
+          if (!contentId || contentId !== ((_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id)) {
+            return;
+          }
+          setUseBreakpoints(breakpoints);
+          setForceReRenderCount(forceReRenderCount + 1);
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -135,7 +150,7 @@ function RenderContent(props) {
     }));
   }
   function handleRequest({ url, key }) {
-    getFetch().then((fetch) => fetch(url)).then((response) => response.json()).then((json) => {
+    fetch(url).then((response) => response.json()).then((json) => {
       const newOverrideState = __spreadProps(__spreadValues({}, overrideState), {
         [key]: json
       });

package/src/functions/get-block-properties.js

@@ -17,12 +17,33 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { TARGET } from "../constants/target.js";
+import { convertStyleMapToCSSArray } from "../helpers/css.js";
+import { transformBlockProperties } from "./transform-block-properties.js";
 function getBlockProperties(block) {
   var _a;
-  return __spreadProps(__spreadValues({}, block.properties), {
+  const properties = __spreadProps(__spreadValues({}, block.properties), {
     "builder-id": block.id,
+    style: getStyleAttribute(block.style),
     class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
   });
+  return transformBlockProperties(properties);
+}
+function getStyleAttribute(style) {
+  if (!style) {
+    return void 0;
+  }
+  switch (TARGET) {
+    case "svelte":
+    case "vue2":
+    case "vue3":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+      return style;
+  }
 }
 export {
   getBlockProperties

package/src/functions/get-content/generate-content-url.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { flatten } from "../../helpers/flatten.js";
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+} from "../get-builder-search-params/index.js";
+const generateContentUrl = (options) => {
+  const {
+    limit = 30,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+    includeRefs = true,
+    locale
+  } = options;
+  if (!apiKey) {
+    throw new Error("Missing API key");
+  }
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
+  }
+  if (userAttributes) {
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  }
+  if (query) {
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
+    }
+  }
+  return url;
+};
+export {
+  generateContentUrl
+};

package/src/functions/get-content/{fn.test.js → generate-content-url.test.js}

@@ -1,4 +1,4 @@
-import { generateContentUrl } from ".";
+import { generateContentUrl } from "./generate-content-url";
 const testKey = "YJIGb4i01jvw0SRdL5Bt";
 const testModel = "page";
 const testId = "c1b81bab59704599b997574eb0736def";

package/src/functions/get-content/index.js

@@ -37,54 +37,19 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { flatten } from "../../helpers/flatten.js";
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams
-} from "../get-builder-search-params/index.js";
-import { getFetch } from "../get-fetch.js";
+import { fetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
+import { generateContentUrl } from "./generate-content-url.js";
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
   });
 }
-const generateContentUrl = (options) => {
-  const {
-    limit = 30,
-    userAttributes,
-    query,
-    noTraverse = false,
-    model,
-    apiKey,
-    includeRefs = true,
-    locale
-  } = options;
-  if (!apiKey) {
-    throw new Error("Missing API key");
-  }
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
-  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
-  const flattened = flatten(queryOptions);
-  for (const key in flattened) {
-    url.searchParams.set(key, String(flattened[key]));
-  }
-  if (userAttributes) {
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  }
-  if (query) {
-    const flattened2 = flatten({ query });
-    for (const key in flattened2) {
-      url.searchParams.set(key, JSON.stringify(flattened2[key]));
-    }
-  }
-  return url;
-};
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
-    const fetch = yield getFetch();
-    const content = yield fetch(url.href).then((res) => res.json());
+    const res = yield fetch(url.href);
+    const content = yield res.json();
     const canTrack = options.canTrack !== false;
     if (canTrack && Array.isArray(content.results)) {
       for (const item of content.results) {
@@ -95,7 +60,6 @@ function getAllContent(options) {
   });
 }
 export {
-  generateContentUrl,
   getAllContent,
   getContent
 };

package/src/functions/get-fetch.js

@@ -1,34 +1,14 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
-  return __async(this, null, function* () {
-    const globalFetch = getGlobalThis().fetch;
-    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch.default || nodeFetch;
-    }
-    return globalFetch.default || globalFetch;
-  });
+  const globalFetch = getGlobalThis().fetch;
+  if (typeof globalFetch === "undefined") {
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+    throw new Error("Builder SDK could not find a global `fetch` function");
+  }
+  return globalFetch;
 }
+const fetch = getFetch();
 export {
-  getFetch
+  fetch
 };

package/src/functions/get-global-this.js

@@ -11,7 +11,7 @@ function getGlobalThis() {
   if (typeof self !== "undefined") {
     return self;
   }
-  return null;
+  return globalThis;
 }
 export {
   getGlobalThis

package/src/functions/get-react-native-block-styles.js

@@ -17,13 +17,14 @@ var __spreadValues = (a, b) => {
 import { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
 function getReactNativeBlockStyles({
   block,
-  context
+  context,
+  blockStyles
 }) {
   const responsiveStyles = block.responsiveStyles;
   if (!responsiveStyles) {
     return {};
   }
-  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {}), blockStyles);
   const newStyles = sanitizeReactNativeBlockStyles(styles);
   return newStyles;
 }

package/src/functions/transform-block-properties.js

@@ -0,0 +1,6 @@
+function transformBlockProperties(properties) {
+  return properties;
+}
+export {
+  transformBlockProperties
+};

package/src/helpers/css.js

@@ -1,19 +1,23 @@
 import { camelToKebabCase } from "../functions/camel-to-kebab-case.js";
-const convertStyleMaptoCSS = (style) => {
+import { checkIsDefined } from "./nullable.js";
+const convertStyleMapToCSSArray = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === "string") {
       return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return void 0;
     }
   });
-  return cssProps.join("\n");
+  return cssProps.filter(checkIsDefined);
 };
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
 const createCssClass = ({
   mediaQuery,
   className,
   styles
 }) => {
   const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
   if (mediaQuery) {
     return `${mediaQuery} {
@@ -24,5 +28,7 @@ const createCssClass = ({
   }
 };
 export {
+  convertStyleMapToCSS,
+  convertStyleMapToCSSArray,
   createCssClass
 };