@builder.io/sdk-react-native 0.1.11 → 0.1.13

package/dist/blocks/columns/columns.js

@@ -33,50 +33,75 @@ const render_blocks_1 = __importDefault(require("../../components/render-blocks"
 const device_sizes_1 = require("../../constants/device-sizes");
 const render_inlined_styles_1 = __importDefault(require("../../components/render-inlined-styles"));
 const target_js_1 = require("../../constants/target.js");
-const css_1 = require("../../helpers/css");
 const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
 function Columns(props) {
     var _a;
-    function getGutterSize() {
-        return typeof props.space === "number" ? props.space || 0 : 20;
-    }
-    function getColumns() {
-        return props.columns || [];
-    }
+    const [gutterSize, setGutterSize] = (0, react_1.useState)(() => typeof props.space === "number" ? props.space || 0 : 20);
+    const [cols, setCols] = (0, react_1.useState)(() => props.columns || []);
+    const [stackAt, setStackAt] = (0, react_1.useState)(() => props.stackColumnsAt || "tablet");
     function getWidth(index) {
         var _a;
-        const columns = getColumns();
-        return ((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / columns.length;
+        return ((_a = cols[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / cols.length;
     }
     function getColumnCssWidth(index) {
-        const columns = getColumns();
-        const gutterSize = getGutterSize();
-        const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
         return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
     }
-    function maybeApplyForTablet(prop) {
-        const _stackColumnsAt = props.stackColumnsAt || "tablet";
-        return _stackColumnsAt === "tablet" ? prop : "inherit";
+    function getTabletStyle({ stackedStyle, desktopStyle }) {
+        return stackAt === "tablet" ? stackedStyle : desktopStyle;
     }
+    function getMobileStyle({ stackedStyle, desktopStyle }) {
+        return stackAt === "never" ? desktopStyle : stackedStyle;
+    }
+    const [flexDir, setFlexDir] = (0, react_1.useState)(() => props.stackColumnsAt === "never"
+        ? "row"
+        : props.reverseColumnsWhenStacked
+            ? "column-reverse"
+            : "column");
     function columnsCssVars() {
-        const flexDir = props.stackColumnsAt === "never"
-            ? "inherit"
-            : props.reverseColumnsWhenStacked
-                ? "column-reverse"
-                : "column";
+        if (target_js_1.TARGET === "reactNative") {
+            return {
+                flexDirection: flexDir,
+            };
+        }
         return {
             "--flex-dir": flexDir,
-            "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+            "--flex-dir-tablet": getTabletStyle({
+                stackedStyle: flexDir,
+                desktopStyle: "row",
+            }),
         };
     }
-    function columnCssVars() {
-        const width = "100%";
-        const marginLeft = "0";
+    function columnCssVars(index) {
+        const width = getColumnCssWidth(index);
+        const gutter = `${index === 0 ? 0 : gutterSize}px`;
+        if (target_js_1.TARGET === "reactNative") {
+            return {
+                width,
+                marginLeft: props.stackColumnsAt === "never" ? gutter : "0",
+            };
+        }
+        const mobileWidth = "100%";
+        const mobileMarginLeft = "0";
         return {
-            "--column-width": width,
-            "--column-margin-left": marginLeft,
-            "--column-width-tablet": maybeApplyForTablet(width),
-            "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+            width,
+            "margin-left": gutter,
+            "--column-width-mobile": getMobileStyle({
+                stackedStyle: mobileWidth,
+                desktopStyle: width,
+            }),
+            "--column-margin-left-mobile": getMobileStyle({
+                stackedStyle: mobileMarginLeft,
+                desktopStyle: gutter,
+            }),
+            "--column-width-tablet": getTabletStyle({
+                stackedStyle: mobileWidth,
+                desktopStyle: width,
+            }),
+            "--column-margin-left-tablet": getTabletStyle({
+                stackedStyle: mobileMarginLeft,
+                desktopStyle: gutter,
+            }),
         };
     }
     function getWidthForBreakpointSize(size) {
@@ -84,64 +109,42 @@ function Columns(props) {
         const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(((_b = (_a = builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
         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 {
-        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.medium)}
+        flex-direction: var(--flex-dir-tablet);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.medium)}
+        width: var(--column-width-tablet) !important;
+        margin-left: var(--column-margin-left-tablet) !important;
       }
     }
 
     @media (max-width: ${getWidthForBreakpointSize("small")}px) {
       .${props.builderBlock.id}-breakpoints {
-        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.small)}
+        flex-direction: var(--flex-dir);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.small)}
+        width: var(--column-width-mobile) !important;
+        margin-left: var(--column-margin-left-mobile) !important;
       }
     },
   `;
     }
-    function reactNativeColumnsStyles() {
-        return columnStyleObjects.columns.small;
-    }
-    function reactNativeColumnStyles() {
-        return columnStyleObjects.column.small;
-    }
     const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
-    return (React.createElement(react_native_1.View, { style: styles.view1 },
+    return (React.createElement(react_native_1.View, { style: columnsCssVars(), dataSet: {
+            "builder-block-name": "builder-columns",
+        } },
         target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
             React.createElement(render_inlined_styles_1.default, { styles: columnsStyles() }))) : null, (_a = props.columns) === null || _a === void 0 ? void 0 :
-        _a.map((column, index) => (React.createElement(react_native_1.View, { style: styles.view2, key: index },
+        _a.map((column, index) => (React.createElement(react_native_1.View, { style: columnCssVars(index), dataSet: {
+                "builder-block-name": "builder-column",
+            }, key: index },
             React.createElement(render_blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                     flexGrow: "1",
                 } }))))));

package/dist/blocks/symbol/symbol.js

@@ -34,8 +34,8 @@ const builder_context_js_1 = __importDefault(require("../../context/builder.cont
 const index_js_1 = require("../../functions/get-content/index.js");
 const target_1 = require("../../constants/target");
 function Symbol(props) {
-    var _a, _b, _c, _d, _e;
-    function className() {
+    var _a, _b, _c;
+    const [className, setClassName] = (0, react_1.useState)(() => {
         var _a, _b;
         return [
             ...(target_1.TARGET === "vue2" || target_1.TARGET === "vue3"
@@ -49,15 +49,10 @@ function Symbol(props) {
         ]
             .filter(Boolean)
             .join(" ");
-    }
-    const [fetchedContent, setFetchedContent] = (0, react_1.useState)(() => null);
-    function contentToUse() {
+    });
+    const [contentToUse, setContentToUse] = (0, react_1.useState)(() => { var _a; return (_a = props.symbol) === null || _a === void 0 ? void 0 : _a.content; });
+    function fetchContent() {
         var _a;
-        return ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.content) || fetchedContent;
-    }
-    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
-    (0, react_1.useEffect)(() => {
-        const symbolToUse = props.symbol;
         /**
          * If:
          * - we have a symbol prop
@@ -67,31 +62,43 @@ function Symbol(props) {
          *
          * then we want to re-fetch the symbol content.
          */
-        if (symbolToUse &&
-            !symbolToUse.content &&
-            !fetchedContent &&
-            symbolToUse.model &&
+        if (!contentToUse &&
+            ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.model) &&
             (
             // This is a hack, we should not need to check for this, but it is needed for Svelte.
             builderContext === null || builderContext === void 0 ? void 0 : builderContext.apiKey)) {
             (0, index_js_1.getContent)({
-                model: symbolToUse.model,
+                model: props.symbol.model,
                 apiKey: builderContext.apiKey,
+                apiVersion: builderContext.apiVersion,
                 query: {
-                    id: symbolToUse.entry,
+                    id: props.symbol.entry,
                 },
-            }).then((response) => {
-                setFetchedContent(response);
+            })
+                .then((response) => {
+                if (response) {
+                    setContentToUse(response);
+                }
+            })
+                .catch((err) => {
+                console.error("[Builder.io]: Could not fetch symbol content: ", err);
             });
         }
-    }, [props.symbol, fetchedContent]);
+    }
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
+    (0, react_1.useEffect)(() => {
+        fetchContent();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        fetchContent();
+    }, [props.symbol]);
     return (React.createElement(react_native_1.View, { ...props.attributes, dataSet: {
-            class: className(),
+            class: className,
         } },
-        React.createElement(render_content_1.default, { apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+        React.createElement(render_content_1.default, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...(_a = props.symbol) === null || _a === void 0 ? void 0 : _a.data,
                 ...builderContext.state,
-                ...(_d = (_c = (_b = props.symbol) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.state,
-            }, model: (_e = props.symbol) === null || _e === void 0 ? void 0 : _e.model, content: contentToUse() })));
+                ...(_b = contentToUse === null || contentToUse === void 0 ? void 0 : contentToUse.data) === null || _b === void 0 ? void 0 : _b.state,
+            }, model: (_c = props.symbol) === null || _c === void 0 ? void 0 : _c.model, content: contentToUse })));
 }
 exports.default = Symbol;

package/dist/components/render-blocks.js

@@ -66,7 +66,7 @@ function RenderBlocks(props) {
     const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
     return (React.createElement(react_native_1.ScrollView, { "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
             class: className(),
-        }, contentContainerStyle: styles.scrollView1, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
+        }, contentContainerStyle: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
         props.blocks ? (React.createElement(React.Fragment, null, (_a = props.blocks) === null || _a === void 0 ? void 0 : _a.map((block) => (React.createElement(render_block_1.default, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
         props.blocks ? (React.createElement(React.Fragment, null, (_b = props.blocks) === null || _b === void 0 ? void 0 : _b.map((block) => (React.createElement(block_styles_1.default, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null));
 }

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

@@ -275,6 +275,7 @@ function RenderContent(props) {
                     (0, index_js_1.getContent)({
                         model: props.model,
                         apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
                     }).then((content) => {
                         if (content) {
                             mergeNewContent(content);
@@ -287,6 +288,11 @@ function RenderContent(props) {
             emitStateUpdate();
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
     (0, react_1.useEffect)(() => {
         evaluateJsCode();
     }, [(_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.jsCode, contentState]);
@@ -310,6 +316,7 @@ function RenderContent(props) {
             setState: setContextState,
             context: props.context || {},
             apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
             registeredComponents: allRegisteredComponents,
         } }, useContent ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },

package/dist/context/builder.context.js

@@ -9,6 +9,7 @@ var stdin_default = (0, react_1.createContext)({
     setState() {
     },
     apiKey: null,
+    apiVersion: void 0,
     registeredComponents: {},
     inheritedStyles: {}
 });

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

@@ -20,11 +20,14 @@ var __spreadValues = (a, b) => {
 const flatten_js_1 = require("../../helpers/flatten.js");
 const index_js_1 = require("../get-builder-search-params/index.js");
 const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = 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}` : ""}`);
+    if (!["v2", "v3"].includes(apiVersion)) {
+        throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+    }
+    const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
     const queryOptions = __spreadValues(__spreadValues({}, (0, index_js_1.getBuilderSearchParamsFromWindow)()), (0, index_js_1.normalizeSearchParams)(options.options || {}));
     const flattened = (0, flatten_js_1.flatten)(queryOptions);
     for (const key in flattened) {

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

@@ -30,4 +30,46 @@ describe("Generate Content URL", () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test("generate content url with apiVersion as v2", () => {
+        const output = (0, generate_content_url_1.generateContentUrl)({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: "v2"
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test("generate content url with apiVersion as v3", () => {
+        const output = (0, generate_content_url_1.generateContentUrl)({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: "v3"
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test("throw error when trying to generate content url with apiVersion as v1", () => {
+        expect(() => {
+            (0, generate_content_url_1.generateContentUrl)({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: "v1"
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+    });
+    test("throw error when trying to generate content url with an invalid apiVersion value", () => {
+        expect(() => {
+            (0, generate_content_url_1.generateContentUrl)({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: "INVALID_API_VERSION"
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
+    });
 });

package/dist/types/api-version.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/blocks/columns/columns.jsx

@@ -7,61 +7,94 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useContext } from "react";
+import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
-import { convertStyleMapToCSS } from "../../helpers/css";
 import BuilderContext from "../../context/builder.context.js";
 
 function Columns(props) {
-  function getGutterSize() {
-    return typeof props.space === "number" ? props.space || 0 : 20;
-  }
+  const [gutterSize, setGutterSize] = useState(() =>
+    typeof props.space === "number" ? props.space || 0 : 20
+  );
 
-  function getColumns() {
-    return props.columns || [];
-  }
+  const [cols, setCols] = useState(() => props.columns || []);
+
+  const [stackAt, setStackAt] = useState(
+    () => props.stackColumnsAt || "tablet"
+  );
 
   function getWidth(index) {
-    const columns = getColumns();
-    return columns[index]?.width || 100 / columns.length;
+    return cols[index]?.width || 100 / cols.length;
   }
 
   function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
 
-  function maybeApplyForTablet(prop) {
-    const _stackColumnsAt = props.stackColumnsAt || "tablet";
-    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  function getTabletStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
   }
 
+  function getMobileStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+  }
+
+  const [flexDir, setFlexDir] = useState(() =>
+    props.stackColumnsAt === "never"
+      ? "row"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column"
+  );
+
   function columnsCssVars() {
-    const flexDir =
-      props.stackColumnsAt === "never"
-        ? "inherit"
-        : props.reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
+    if (TARGET === "reactNative") {
+      return {
+        flexDirection: flexDir,
+      };
+    }
     return {
       "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+      "--flex-dir-tablet": getTabletStyle({
+        stackedStyle: flexDir,
+        desktopStyle: "row",
+      }),
     };
   }
 
-  function columnCssVars() {
-    const width = "100%";
-    const marginLeft = "0";
+  function columnCssVars(index) {
+    const width = getColumnCssWidth(index);
+    const gutter = `${index === 0 ? 0 : gutterSize}px`;
+    if (TARGET === "reactNative") {
+      return {
+        width,
+        marginLeft: props.stackColumnsAt === "never" ? gutter : "0",
+      };
+    }
+    const mobileWidth = "100%";
+    const mobileMarginLeft = "0";
     return {
-      "--column-width": width,
-      "--column-margin-left": marginLeft,
-      "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+      width,
+      "margin-left": gutter,
+      "--column-width-mobile": getMobileStyle({
+        stackedStyle: mobileWidth,
+        desktopStyle: width,
+      }),
+      "--column-margin-left-mobile": getMobileStyle({
+        stackedStyle: mobileMarginLeft,
+        desktopStyle: gutter,
+      }),
+      "--column-width-tablet": getTabletStyle({
+        stackedStyle: mobileWidth,
+        desktopStyle: width,
+      }),
+      "--column-margin-left-tablet": getTabletStyle({
+        stackedStyle: mobileMarginLeft,
+        desktopStyle: gutter,
+      }),
     };
   }
 
@@ -72,67 +105,43 @@ function Columns(props) {
     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)}
+        flex-direction: var(--flex-dir-tablet);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        width: var(--column-width-tablet) !important;
+        margin-left: var(--column-margin-left-tablet) !important;
       }
     }
 
     @media (max-width: ${getWidthForBreakpointSize("small")}px) {
       .${props.builderBlock.id}-breakpoints {
-        ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        flex-direction: var(--flex-dir);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        width: var(--column-width-mobile) !important;
+        margin-left: var(--column-margin-left-mobile) !important;
       }
     },
   `;
   }
 
-  function reactNativeColumnsStyles() {
-    return columnStyleObjects.columns.small;
-  }
-
-  function reactNativeColumnStyles() {
-    return columnStyleObjects.column.small;
-  }
-
   const builderContext = useContext(BuilderContext);
 
   return (
-    <View style={styles.view1}>
+    <View
+      style={columnsCssVars()}
+      dataSet={{
+        "builder-block-name": "builder-columns",
+      }}
+    >
       {TARGET !== "reactNative" ? (
         <>
           <RenderInlinedStyles styles={columnsStyles()} />
@@ -140,7 +149,13 @@ function Columns(props) {
       ) : null}
 
       {props.columns?.map((column, index) => (
-        <View style={styles.view2} key={index}>
+        <View
+          style={columnCssVars(index)}
+          dataSet={{
+            "builder-block-name": "builder-column",
+          }}
+          key={index}
+        >
           <RenderBlocks
             blocks={column.blocks}
             path={`component.options.columns.${index}.blocks`}

package/src/blocks/symbol/symbol.jsx

@@ -14,8 +14,8 @@ import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 
 function Symbol(props) {
-  function className() {
-    return [
+  const [className, setClassName] = useState(() =>
+    [
       ...(TARGET === "vue2" || TARGET === "vue3"
         ? Object.keys(props.attributes.class)
         : [props.attributes.class]),
@@ -26,20 +26,12 @@ function Symbol(props) {
         : undefined,
     ]
       .filter(Boolean)
-      .join(" ");
-  }
-
-  const [fetchedContent, setFetchedContent] = useState(() => null);
-
-  function contentToUse() {
-    return props.symbol?.content || fetchedContent;
-  }
-
-  const builderContext = useContext(BuilderContext);
+      .join(" ")
+  );
 
-  useEffect(() => {
-    const symbolToUse = props.symbol;
+  const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
 
+  function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -50,43 +42,59 @@ function Symbol(props) {
      * then we want to re-fetch the symbol content.
      */
     if (
-      symbolToUse &&
-      !symbolToUse.content &&
-      !fetchedContent &&
-      symbolToUse.model &&
+      !contentToUse &&
+      props.symbol?.model &&
       // This is a hack, we should not need to check for this, but it is needed for Svelte.
       builderContext?.apiKey
     ) {
       getContent({
-        model: symbolToUse.model,
+        model: props.symbol.model,
         apiKey: builderContext.apiKey,
+        apiVersion: builderContext.apiVersion,
         query: {
-          id: symbolToUse.entry,
+          id: props.symbol.entry,
         },
-      }).then((response) => {
-        setFetchedContent(response);
-      });
+      })
+        .then((response) => {
+          if (response) {
+            setContentToUse(response);
+          }
+        })
+        .catch((err) => {
+          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+        });
     }
-  }, [props.symbol, fetchedContent]);
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  useEffect(() => {
+    fetchContent();
+  }, []);
+
+  useEffect(() => {
+    fetchContent();
+  }, [props.symbol]);
 
   return (
     <View
       {...props.attributes}
       dataSet={{
-        class: className(),
+        class: className,
       }}
     >
       <RenderContent
+        apiVersion={builderContext.apiVersion}
         apiKey={builderContext.apiKey}
         context={builderContext.context}
         customComponents={Object.values(builderContext.registeredComponents)}
         data={{
           ...props.symbol?.data,
           ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
+          ...contentToUse?.data?.state,
         }}
         model={props.symbol?.model}
-        content={contentToUse()}
+        content={contentToUse}
       />
     </View>
   );

package/src/components/render-blocks.jsx

@@ -57,7 +57,7 @@ function RenderBlocks(props) {
       dataSet={{
         class: className(),
       }}
-      contentContainerStyle={styles.scrollView1}
+      contentContainerStyle={props.styleProp}
       onClick={(event) => onClick()}
       onMouseEnter={(event) => onMouseEnter()}
     >

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

@@ -308,6 +308,7 @@ function RenderContent(props) {
           getContent({
             model: props.model,
             apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -321,6 +322,11 @@ function RenderContent(props) {
     }
   }, []);
 
+  useEffect(() => {
+    if (props.content) {
+      mergeNewContent(props.content);
+    }
+  }, [props.content]);
   useEffect(() => {
     evaluateJsCode();
   }, [useContent?.data?.jsCode, contentState]);
@@ -351,6 +357,7 @@ function RenderContent(props) {
         setState: setContextState,
         context: props.context || {},
         apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
         registeredComponents: allRegisteredComponents,
       }}
     >

package/src/context/builder.context.js

@@ -6,6 +6,7 @@ var stdin_default = createContext({
   setState() {
   },
   apiKey: null,
+  apiVersion: void 0,
   registeredComponents: {},
   inheritedStyles: {}
 });

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

@@ -28,12 +28,16 @@ const generateContentUrl = (options) => {
     model,
     apiKey,
     includeRefs = true,
-    locale
+    locale,
+    apiVersion = "v2"
   } = 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}` : ""}`);
+  if (!["v2", "v3"].includes(apiVersion)) {
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  }
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/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) {

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

@@ -28,4 +28,46 @@ describe("Generate Content URL", () => {
     });
     expect(output).toMatchSnapshot();
   });
+  test("generate content url with apiVersion as v2", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: "v2"
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test("generate content url with apiVersion as v3", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: "v3"
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test("throw error when trying to generate content url with apiVersion as v1", () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: "v1"
+      });
+    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+  });
+  test("throw error when trying to generate content url with an invalid apiVersion value", () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: "INVALID_API_VERSION"
+      });
+    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
+  });
 });