@builder.io/sdk-react 0.1.15 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+### 0.2.0
+- Sets the default `apiVersion` to `v3`.
+
+In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
+
+```jsx
+<RenderContent apiVersion="v2" />
+```
+
+```js
+getContent({ apiVersion: "v2" })
+```
+More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).

package/dist/react/blocks/button/button.js

@@ -2,8 +2,10 @@ import * as React from "react";
 function Button(props) {
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
-            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-66d34b93", ...props.attributes }, props.text)),
-        React.createElement("style", null, `.button-66d34b93 {
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: 
+            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+            props.attributes.class + " button-5050ef15", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-5050ef15 {
 all: unset;
 }`)));
 }

package/dist/react/blocks/columns/columns.js

@@ -107,21 +107,21 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-5d70b7a2", style: columnsCssVars(), dataSet: {
+                " div-f0aded1c", style: columnsCssVars(), dataSet: {
                 "builder-block-name": "builder-columns",
             } },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-5d70b7a2-2", style: columnCssVars(index), dataSet: {
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-f0aded1c-2", style: columnCssVars(index), dataSet: {
                     "builder-block-name": "builder-column",
                 }, key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-5d70b7a2 {
+        React.createElement("style", null, `.div-f0aded1c {
 display: flex;
 line-height: normal;
-}.div-5d70b7a2-2 {
+}.div-f0aded1c-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/blocks/form/form.js

@@ -187,7 +187,7 @@ function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
             " ",
             submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-0d1abaf2" },
+                React.createElement("pre", { className: "builder-form-error-text pre-8b05da54" },
                     " ",
                     JSON.stringify(responseData, null, 2),
                     " "))) : null,
@@ -196,7 +196,7 @@ function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
             " "),
         " ",
-        React.createElement("style", null, `.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`),
+        React.createElement("style", null, `.pre-8b05da54 { padding: 10px; color: red; text-align: center; }`),
         " "));
 }
 export default FormComponent;

package/dist/react/blocks/image/image.js

@@ -51,25 +51,23 @@ function Image(props) {
                         ...aspectRatioCss(),
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-54289eda", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
+                        " img-23384452", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-54289eda", style: {
-                        paddingTop: 
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        props.aspectRatio * 100 + "%",
+                React.createElement("div", { className: "builder-image-sizer div-23384452", style: {
+                        paddingTop: props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-54289eda-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-54289eda {
+                React.createElement("div", { className: "div-23384452-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-23384452 {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-54289eda {
+}.div-23384452 {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-54289eda-2 {
+}.div-23384452-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/components/render-block/render-block.js

@@ -127,6 +127,7 @@ function RenderBlock(props) {
         };
         return {
             apiKey: props.context.apiKey,
+            apiVersion: props.context.apiVersion,
             state: props.context.state,
             content: props.context.content,
             context: props.context.context,

package/dist/react/components/render-blocks.js

@@ -32,12 +32,12 @@ function RenderBlocks(props) {
     }
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-297c34fa", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+        React.createElement("div", { className: className() + " div-1fdf6196", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
                 class: className(),
             }, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-297c34fa {
+        React.createElement("style", null, `.div-1fdf6196 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/components/render-content/render-content.js

@@ -157,7 +157,7 @@ function RenderContent(props) {
             setContextState(newState);
         })
             .catch((err) => {
-            console.log("error fetching dynamic data", url, err);
+            console.error("error fetching dynamic data", url, err);
         });
     }
     function runHttpRequests() {

package/dist/react/functions/get-content/generate-content-url.js

@@ -16,8 +16,9 @@ var __spreadValues = (a, b) => {
 };
 import { flatten } from "../../helpers/flatten.js";
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from "../get-builder-search-params/index.js";
+import { DEFAULT_API_VERSION } from "../../types/api-version";
 const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION } = options;
     if (!apiKey) {
         throw new Error("Missing API key");
     }

package/dist/react/functions/get-content/generate-content-url.test.js

@@ -28,6 +28,15 @@ describe("Generate Content URL", () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test("generate content url with apiVersion as default", () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options
+        });
+        expect(output).toMatchSnapshot();
+    });
     test("generate content url with apiVersion as v2", () => {
         const output = generateContentUrl({
             apiKey: testKey,

package/dist/react/functions/get-content/index.js

@@ -44,7 +44,11 @@ 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 allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
+        if ("results" in allContent) {
+            return (allContent == null ? void 0 : allContent.results[0]) || null;
+        }
+        return null;
     });
 }
 function getAllContent(options) {
@@ -52,12 +56,21 @@ function getAllContent(options) {
         const url = generateContentUrl(options);
         const res = yield fetch(url.href);
         const content = yield res.json();
+        if ("status" in content && !("results" in content)) {
+            console.error("[Builder.io]: Error fetching data. ", content, options);
+            return content;
+        }
         const canTrack = options.canTrack !== false;
-        if (canTrack && Array.isArray(content.results)) {
-            for (const item of content.results) {
-                yield handleABTesting({ item, canTrack });
+        try {
+            if (canTrack && Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    yield handleABTesting({ item, canTrack });
+                }
             }
         }
+        catch (e) {
+            console.error("[Builder.io]: Could not setup A/B testing. ", e);
+        }
         return content;
     });
 }

package/dist/react/types/api-version.js

@@ -1 +1,2 @@
-"use strict";
+const DEFAULT_API_VERSION = "v3";
+export { DEFAULT_API_VERSION };

package/dist/rsc/blocks/button/button.js

@@ -3,8 +3,10 @@ function Button(props) {
     const _context = { ...props["_context"] };
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
-            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-b25d5310", ...props.attributes }, props.text)),
-        React.createElement("style", null, `.button-b25d5310 {
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: 
+            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+            props.attributes.class + " button-3083674c", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-3083674c {
 all: unset;
 }`)));
 }

package/dist/rsc/blocks/columns/columns.js

@@ -109,21 +109,21 @@ function Columns(props) {
     const builderContext = _context["BuilderContext"];
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-6ea80494", style: state.columnsCssVars, dataSet: {
+                " div-38093a46", style: state.columnsCssVars, dataSet: {
                 "builder-block-name": "builder-columns",
             } },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-6ea80494-2", style: state.columnCssVars(index), dataSet: {
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-38093a46-2", style: state.columnCssVars(index), dataSet: {
                     "builder-block-name": "builder-column",
                 }, key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     }, _context: _context }))))),
-        React.createElement("style", null, `.div-6ea80494 {
+        React.createElement("style", null, `.div-38093a46 {
 display: flex;
 line-height: normal;
-}.div-6ea80494-2 {
+}.div-38093a46-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/rsc/blocks/form/form.js

@@ -190,7 +190,7 @@ function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage, _context: _context }))) : null,
             " ",
             state.submissionState === "error" && state.responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-41e7c77e" },
+                React.createElement("pre", { className: "builder-form-error-text pre-1adaf299" },
                     " ",
                     JSON.stringify(state.responseData, null, 2),
                     " "))) : null,
@@ -199,7 +199,7 @@ function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage, _context: _context }))) : null,
             " "),
         " ",
-        React.createElement("style", null, `.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`),
+        React.createElement("style", null, `.pre-1adaf299 { padding: 10px; color: red; text-align: center; }`),
         " "));
 }
 export default FormComponent;

package/dist/rsc/blocks/image/image.js

@@ -54,25 +54,23 @@ function Image(props) {
                         ...state.aspectRatioCss,
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-5aa89e3a", src: props.image, srcSet: state.srcSetToUse, sizes: props.sizes })),
+                        " img-2029f6ee", src: props.image, srcSet: state.srcSetToUse, sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-5aa89e3a", style: {
-                        paddingTop: 
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        props.aspectRatio * 100 + "%",
+                React.createElement("div", { className: "builder-image-sizer div-2029f6ee", style: {
+                        paddingTop: props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-5aa89e3a-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-5aa89e3a {
+                React.createElement("div", { className: "div-2029f6ee-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-2029f6ee {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-5aa89e3a {
+}.div-2029f6ee {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-5aa89e3a-2 {
+}.div-2029f6ee-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/rsc/components/render-block/render-block.js

@@ -130,6 +130,7 @@ function RenderBlock(props) {
             };
             return {
                 apiKey: props.context.apiKey,
+                apiVersion: props.context.apiVersion,
                 state: props.context.state,
                 content: props.context.content,
                 context: props.context.context,

package/dist/rsc/components/render-blocks.js

@@ -34,12 +34,12 @@ function RenderBlocks(props) {
     };
     const builderContext = _context["BuilderContext"];
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: state.className + " div-d19f7a9a", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+        React.createElement("div", { className: state.className + " div-7a14f25c", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
                 class: state.className,
             }, style: props.styleProp },
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext, _context: _context }))))) : null,
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext, _context: _context }))))) : null),
-        React.createElement("style", null, `.div-d19f7a9a {
+        React.createElement("style", null, `.div-7a14f25c {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/rsc/components/render-content/render-content.js

@@ -158,7 +158,7 @@ function RenderContent(props) {
                 state.setContextState(newState);
             })
                 .catch((err) => {
-                console.log("error fetching dynamic data", url, err);
+                console.error("error fetching dynamic data", url, err);
             });
         },
         runHttpRequests() {

package/dist/rsc/functions/get-content/generate-content-url.js

@@ -16,8 +16,9 @@ var __spreadValues = (a, b) => {
 };
 import { flatten } from "../../helpers/flatten.js";
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from "../get-builder-search-params/index.js";
+import { DEFAULT_API_VERSION } from "../../types/api-version";
 const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION } = options;
     if (!apiKey) {
         throw new Error("Missing API key");
     }

package/dist/rsc/functions/get-content/generate-content-url.test.js

@@ -28,6 +28,15 @@ describe("Generate Content URL", () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test("generate content url with apiVersion as default", () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options
+        });
+        expect(output).toMatchSnapshot();
+    });
     test("generate content url with apiVersion as v2", () => {
         const output = generateContentUrl({
             apiKey: testKey,

package/dist/rsc/functions/get-content/index.js

@@ -44,7 +44,11 @@ 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 allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
+        if ("results" in allContent) {
+            return (allContent == null ? void 0 : allContent.results[0]) || null;
+        }
+        return null;
     });
 }
 function getAllContent(options) {
@@ -52,12 +56,21 @@ function getAllContent(options) {
         const url = generateContentUrl(options);
         const res = yield fetch(url.href);
         const content = yield res.json();
+        if ("status" in content && !("results" in content)) {
+            console.error("[Builder.io]: Error fetching data. ", content, options);
+            return content;
+        }
         const canTrack = options.canTrack !== false;
-        if (canTrack && Array.isArray(content.results)) {
-            for (const item of content.results) {
-                yield handleABTesting({ item, canTrack });
+        try {
+            if (canTrack && Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    yield handleABTesting({ item, canTrack });
+                }
             }
         }
+        catch (e) {
+            console.error("[Builder.io]: Could not setup A/B testing. ", e);
+        }
         return content;
     });
 }

package/dist/rsc/types/api-version.js

@@ -1 +1,2 @@
-"use strict";
+const DEFAULT_API_VERSION = "v3";
+export { DEFAULT_API_VERSION };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "main": "src/index.js",
   "type": "module",
   "exports": {

package/packages/react/src/blocks/button/button.jsx

@@ -15,11 +15,17 @@ function Button(props) {
           </a>
         </>
       ) : (
-        <button className="button-66d34b93" {...props.attributes}>
+        <button
+          className={
+            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+            props.attributes.class + " button-5050ef15"
+          }
+          {...props.attributes}
+        >
           {props.text}
         </button>
       )}
-      <style>{`.button-66d34b93 {
+      <style>{`.button-5050ef15 {
 all: unset;
 }`}</style>
     </>

package/packages/react/src/blocks/columns/columns.jsx

@@ -132,7 +132,7 @@ function Columns(props) {
       <div
         className={
           `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-5d70b7a2"
+          " div-f0aded1c"
         }
         style={columnsCssVars()}
         dataSet={{
@@ -147,7 +147,7 @@ function Columns(props) {
 
         {props.columns?.map((column, index) => (
           <div
-            className="builder-column div-5d70b7a2-2"
+            className="builder-column div-f0aded1c-2"
             style={columnCssVars(index)}
             dataSet={{
               "builder-block-name": "builder-column",
@@ -165,10 +165,10 @@ function Columns(props) {
           </div>
         ))}
       </div>
-      <style>{`.div-5d70b7a2 {
+      <style>{`.div-f0aded1c {
 display: flex;
 line-height: normal;
-}.div-5d70b7a2-2 {
+}.div-f0aded1c-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/react/src/blocks/form/form.jsx

@@ -232,7 +232,7 @@ function FormComponent(props) {
         ) : null}{" "}
         {submissionState() === "error" && responseData ? (
           <>
-            <pre className="builder-form-error-text pre-0d1abaf2">
+            <pre className="builder-form-error-text pre-8b05da54">
               {" "}
               {JSON.stringify(responseData, null, 2)}{" "}
             </pre>
@@ -247,7 +247,7 @@ function FormComponent(props) {
           </>
         ) : null}{" "}
       </form>{" "}
-      <style>{`.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+      <style>{`.pre-8b05da54 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
     </>
   );
 }

package/packages/react/src/blocks/image/image.jsx

@@ -66,7 +66,7 @@ function Image(props) {
             className={
               "builder-image" +
               (props.className ? " " + props.className : "") +
-              " img-54289eda"
+              " img-23384452"
             }
             src={props.image}
             srcSet={srcSetToUse()}
@@ -78,11 +78,9 @@ function Image(props) {
         !(props.builderBlock?.children?.length && props.fitContent) ? (
           <>
             <div
-              className="builder-image-sizer div-54289eda"
+              className="builder-image-sizer div-23384452"
               style={{
-                paddingTop:
-                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  props.aspectRatio * 100 + "%",
+                paddingTop: props.aspectRatio * 100 + "%",
               }}
             />
           </>
@@ -94,18 +92,18 @@ function Image(props) {
 
         {!props.fitContent && props.children ? (
           <>
-            <div className="div-54289eda-2">{props.children}</div>
+            <div className="div-23384452-2">{props.children}</div>
           </>
         ) : null}
       </>
-      <style>{`.img-54289eda {
+      <style>{`.img-23384452 {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-54289eda {
+}.div-23384452 {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-54289eda-2 {
+}.div-23384452-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

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

@@ -152,6 +152,7 @@ function RenderBlock(props) {
     };
     return {
       apiKey: props.context.apiKey,
+      apiVersion: props.context.apiVersion,
       state: props.context.state,
       content: props.context.content,
       context: props.context.context,

package/packages/react/src/components/render-blocks.jsx

@@ -45,7 +45,7 @@ function RenderBlocks(props) {
   return (
     <>
       <div
-        className={className() + " div-297c34fa"}
+        className={className() + " div-1fdf6196"}
         builder-path={props.path}
         builder-parent-id={props.parent}
         dataSet={{
@@ -79,7 +79,7 @@ function RenderBlocks(props) {
           </>
         ) : null}
       </div>
-      <style>{`.div-297c34fa {
+      <style>{`.div-1fdf6196 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

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

@@ -199,7 +199,7 @@ function RenderContent(props) {
         setContextState(newState);
       })
       .catch((err) => {
-        console.log("error fetching dynamic data", url, err);
+        console.error("error fetching dynamic data", url, err);
       });
   }
 

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

@@ -19,6 +19,7 @@ import {
   getBuilderSearchParamsFromWindow,
   normalizeSearchParams
 } from "../get-builder-search-params/index.js";
+import { DEFAULT_API_VERSION } from "../../types/api-version";
 const generateContentUrl = (options) => {
   const {
     limit = 30,
@@ -29,7 +30,7 @@ const generateContentUrl = (options) => {
     apiKey,
     includeRefs = true,
     locale,
-    apiVersion = "v2"
+    apiVersion = DEFAULT_API_VERSION
   } = options;
   if (!apiKey) {
     throw new Error("Missing API key");

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

@@ -28,6 +28,15 @@ describe("Generate Content URL", () => {
     });
     expect(output).toMatchSnapshot();
   });
+  test("generate content url with apiVersion as default", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options
+    });
+    expect(output).toMatchSnapshot();
+  });
   test("generate content url with apiVersion as v2", () => {
     const output = generateContentUrl({
       apiKey: testKey,

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

@@ -42,7 +42,11 @@ 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 allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
+    if ("results" in allContent) {
+      return (allContent == null ? void 0 : allContent.results[0]) || null;
+    }
+    return null;
   });
 }
 function getAllContent(options) {
@@ -50,11 +54,19 @@ function getAllContent(options) {
     const url = generateContentUrl(options);
     const res = yield fetch(url.href);
     const content = yield res.json();
+    if ("status" in content && !("results" in content)) {
+      console.error("[Builder.io]: Error fetching data. ", content, options);
+      return content;
+    }
     const canTrack = options.canTrack !== false;
-    if (canTrack && Array.isArray(content.results)) {
-      for (const item of content.results) {
-        yield handleABTesting({ item, canTrack });
+    try {
+      if (canTrack && Array.isArray(content.results)) {
+        for (const item of content.results) {
+          yield handleABTesting({ item, canTrack });
+        }
       }
+    } catch (e) {
+      console.error("[Builder.io]: Could not setup A/B testing. ", e);
     }
     return content;
   });

package/packages/react/src/types/api-version.js

@@ -0,0 +1,4 @@
+const DEFAULT_API_VERSION = "v3";
+export {
+  DEFAULT_API_VERSION
+};

package/packages/rsc/src/blocks/button/button.jsx

@@ -17,11 +17,17 @@ function Button(props) {
           </a>
         </>
       ) : (
-        <button className="button-b25d5310" {...props.attributes}>
+        <button
+          className={
+            /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+            props.attributes.class + " button-3083674c"
+          }
+          {...props.attributes}
+        >
           {props.text}
         </button>
       )}
-      <style>{`.button-b25d5310 {
+      <style>{`.button-3083674c {
 all: unset;
 }`}</style>
     </>

package/packages/rsc/src/blocks/columns/columns.jsx

@@ -120,7 +120,7 @@ function Columns(props) {
       <div
         className={
           `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-6ea80494"
+          " div-38093a46"
         }
         style={state.columnsCssVars}
         dataSet={{
@@ -138,7 +138,7 @@ function Columns(props) {
 
         {props.columns?.map((column, index) => (
           <div
-            className="builder-column div-6ea80494-2"
+            className="builder-column div-38093a46-2"
             style={state.columnCssVars(index)}
             dataSet={{
               "builder-block-name": "builder-column",
@@ -157,10 +157,10 @@ function Columns(props) {
           </div>
         ))}
       </div>
-      <style>{`.div-6ea80494 {
+      <style>{`.div-38093a46 {
 display: flex;
 line-height: normal;
-}.div-6ea80494-2 {
+}.div-38093a46-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/rsc/src/blocks/form/form.jsx

@@ -237,7 +237,7 @@ function FormComponent(props) {
         ) : null}{" "}
         {state.submissionState === "error" && state.responseData ? (
           <>
-            <pre className="builder-form-error-text pre-41e7c77e">
+            <pre className="builder-form-error-text pre-1adaf299">
               {" "}
               {JSON.stringify(state.responseData, null, 2)}{" "}
             </pre>
@@ -253,7 +253,7 @@ function FormComponent(props) {
           </>
         ) : null}{" "}
       </form>{" "}
-      <style>{`.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+      <style>{`.pre-1adaf299 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
     </>
   );
 }

package/packages/rsc/src/blocks/image/image.jsx

@@ -68,7 +68,7 @@ function Image(props) {
             className={
               "builder-image" +
               (props.className ? " " + props.className : "") +
-              " img-5aa89e3a"
+              " img-2029f6ee"
             }
             src={props.image}
             srcSet={state.srcSetToUse}
@@ -80,11 +80,9 @@ function Image(props) {
         !(props.builderBlock?.children?.length && props.fitContent) ? (
           <>
             <div
-              className="builder-image-sizer div-5aa89e3a"
+              className="builder-image-sizer div-2029f6ee"
               style={{
-                paddingTop:
-                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  props.aspectRatio * 100 + "%",
+                paddingTop: props.aspectRatio * 100 + "%",
               }}
             />
           </>
@@ -96,18 +94,18 @@ function Image(props) {
 
         {!props.fitContent && props.children ? (
           <>
-            <div className="div-5aa89e3a-2">{props.children}</div>
+            <div className="div-2029f6ee-2">{props.children}</div>
           </>
         ) : null}
       </>
-      <style>{`.img-5aa89e3a {
+      <style>{`.img-2029f6ee {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-5aa89e3a {
+}.div-2029f6ee {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-5aa89e3a-2 {
+}.div-2029f6ee-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

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

@@ -142,6 +142,7 @@ function RenderBlock(props) {
       };
       return {
         apiKey: props.context.apiKey,
+        apiVersion: props.context.apiVersion,
         state: props.context.state,
         content: props.context.content,
         context: props.context.context,

package/packages/rsc/src/components/render-blocks.jsx

@@ -46,7 +46,7 @@ function RenderBlocks(props) {
   return (
     <>
       <div
-        className={state.className + " div-d19f7a9a"}
+        className={state.className + " div-7a14f25c"}
         builder-path={props.path}
         builder-parent-id={props.parent}
         dataSet={{
@@ -80,7 +80,7 @@ function RenderBlocks(props) {
           </>
         ) : null}
       </div>
-      <style>{`.div-d19f7a9a {
+      <style>{`.div-7a14f25c {
 display: flex;
 flex-direction: column;
 align-items: stretch;

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

@@ -177,7 +177,7 @@ function RenderContent(props) {
           state.setContextState(newState);
         })
         .catch((err) => {
-          console.log("error fetching dynamic data", url, err);
+          console.error("error fetching dynamic data", url, err);
         });
     },
     runHttpRequests() {

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

@@ -19,6 +19,7 @@ import {
   getBuilderSearchParamsFromWindow,
   normalizeSearchParams
 } from "../get-builder-search-params/index.js";
+import { DEFAULT_API_VERSION } from "../../types/api-version";
 const generateContentUrl = (options) => {
   const {
     limit = 30,
@@ -29,7 +30,7 @@ const generateContentUrl = (options) => {
     apiKey,
     includeRefs = true,
     locale,
-    apiVersion = "v2"
+    apiVersion = DEFAULT_API_VERSION
   } = options;
   if (!apiKey) {
     throw new Error("Missing API key");

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

@@ -28,6 +28,15 @@ describe("Generate Content URL", () => {
     });
     expect(output).toMatchSnapshot();
   });
+  test("generate content url with apiVersion as default", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options
+    });
+    expect(output).toMatchSnapshot();
+  });
   test("generate content url with apiVersion as v2", () => {
     const output = generateContentUrl({
       apiKey: testKey,

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

@@ -42,7 +42,11 @@ 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 allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
+    if ("results" in allContent) {
+      return (allContent == null ? void 0 : allContent.results[0]) || null;
+    }
+    return null;
   });
 }
 function getAllContent(options) {
@@ -50,11 +54,19 @@ function getAllContent(options) {
     const url = generateContentUrl(options);
     const res = yield fetch(url.href);
     const content = yield res.json();
+    if ("status" in content && !("results" in content)) {
+      console.error("[Builder.io]: Error fetching data. ", content, options);
+      return content;
+    }
     const canTrack = options.canTrack !== false;
-    if (canTrack && Array.isArray(content.results)) {
-      for (const item of content.results) {
-        yield handleABTesting({ item, canTrack });
+    try {
+      if (canTrack && Array.isArray(content.results)) {
+        for (const item of content.results) {
+          yield handleABTesting({ item, canTrack });
+        }
       }
+    } catch (e) {
+      console.error("[Builder.io]: Could not setup A/B testing. ", e);
     }
     return content;
   });

package/packages/rsc/src/types/api-version.js

@@ -0,0 +1,4 @@
+const DEFAULT_API_VERSION = "v3";
+export {
+  DEFAULT_API_VERSION
+};