@builder.io/sdk-react 0.1.11 → 0.1.13

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

@@ -1,132 +1,127 @@
 import * as React from "react";
-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;
-    }
-    function getColumns() {
-        return props.columns || [];
-    }
+    const [gutterSize, setGutterSize] = useState(() => typeof props.space === "number" ? props.space || 0 : 20);
+    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,
+            }),
         };
     }
     function getWidthForBreakpointSize(size) {
         const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.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 {
-        ${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 (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-0a8a143e", style: {
-                ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
-                ...columnsCssVars(),
+                " div-568386c4", 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-0a8a143e-2", style: {
-                    width: getColumnCssWidth(index),
-                    marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
-                    ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
-                    ...columnCssVars(),
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-568386c4-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-0a8a143e {
+        React.createElement("style", null, `.div-568386c4 {
 display: flex;
 line-height: normal;
-}.div-0a8a143e-2 {
+}.div-568386c4-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/blocks/symbol/symbol.js

@@ -5,27 +5,20 @@ import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 function Symbol(props) {
-    function className() {
-        return [
-            ...(TARGET === "vue2" || TARGET === "vue3"
-                ? Object.keys(props.attributes.class)
-                : [props.attributes.class]),
-            "builder-symbol",
-            props.symbol?.inline ? "builder-inline-symbol" : undefined,
-            props.symbol?.dynamic || props.dynamic
-                ? "builder-dynamic-symbol"
-                : undefined,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    const [fetchedContent, setFetchedContent] = useState(() => null);
-    function contentToUse() {
-        return props.symbol?.content || fetchedContent;
-    }
-    const builderContext = useContext(BuilderContext);
-    useEffect(() => {
-        const symbolToUse = props.symbol;
+    const [className, setClassName] = useState(() => [
+        ...(TARGET === "vue2" || TARGET === "vue3"
+            ? Object.keys(props.attributes.class)
+            : [props.attributes.class]),
+        "builder-symbol",
+        props.symbol?.inline ? "builder-inline-symbol" : undefined,
+        props.symbol?.dynamic || props.dynamic
+            ? "builder-dynamic-symbol"
+            : undefined,
+    ]
+        .filter(Boolean)
+        .join(" "));
+    const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
+    function fetchContent() {
         /**
          * If:
          * - we have a symbol prop
@@ -35,30 +28,42 @@ function Symbol(props) {
          *
          * then we want to re-fetch the symbol content.
          */
-        if (symbolToUse &&
-            !symbolToUse.content &&
-            !fetchedContent &&
-            symbolToUse.model &&
+        if (!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 (React.createElement("div", { ...props.attributes, dataSet: {
-            class: className(),
-        }, className: className() },
-        React.createElement(RenderContent, { apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+            class: className,
+        }, className: className },
+        React.createElement(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,
-            }, model: props.symbol?.model, content: contentToUse() })));
+                ...contentToUse?.data?.state,
+            }, model: props.symbol?.model, content: contentToUse })));
 }
 export default Symbol;

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

@@ -241,6 +241,7 @@ function RenderContent(props) {
                     getContent({
                         model: props.model,
                         apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
                     }).then((content) => {
                         if (content) {
                             mergeNewContent(content);
@@ -253,6 +254,11 @@ function RenderContent(props) {
             emitStateUpdate();
         }
     }, []);
+    useEffect(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
     useEffect(() => {
         evaluateJsCode();
     }, [useContent?.data?.jsCode, contentState]);
@@ -276,6 +282,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("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },

package/dist/react/context/builder.context.js

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

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

@@ -17,11 +17,14 @@ var __spreadValues = (a, b) => {
 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;
+    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({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
     const flattened = flatten(queryOptions);
     for (const key in flattened) {

package/dist/react/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'`);
+    });
 });

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

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

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

@@ -3,134 +3,127 @@ 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) {
     const _context = { ...props["_context"] };
     const state = {
-        getGutterSize() {
-            return typeof props.space === "number" ? props.space || 0 : 20;
-        },
-        getColumns() {
-            return props.columns || [];
-        },
+        gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+        cols: props.columns || [],
+        stackAt: props.stackColumnsAt || "tablet",
         getWidth(index) {
-            const columns = state.getColumns();
-            return columns[index]?.width || 100 / columns.length;
+            return state.cols[index]?.width || 100 / state.cols.length;
         },
         getColumnCssWidth(index) {
-            const columns = state.getColumns();
-            const gutterSize = state.getGutterSize();
-            const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+            const subtractWidth = (state.gutterSize * (state.cols.length - 1)) / state.cols.length;
             return `calc(${state.getWidth(index)}% - ${subtractWidth}px)`;
         },
-        maybeApplyForTablet(prop) {
-            const _stackColumnsAt = props.stackColumnsAt || "tablet";
-            return _stackColumnsAt === "tablet" ? prop : "inherit";
+        getTabletStyle({ stackedStyle, desktopStyle }) {
+            return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
         },
+        getMobileStyle({ stackedStyle, desktopStyle }) {
+            return state.stackAt === "never" ? desktopStyle : stackedStyle;
+        },
+        flexDir: props.stackColumnsAt === "never"
+            ? "row"
+            : props.reverseColumnsWhenStacked
+                ? "column-reverse"
+                : "column",
         get columnsCssVars() {
-            const flexDir = props.stackColumnsAt === "never"
-                ? "inherit"
-                : props.reverseColumnsWhenStacked
-                    ? "column-reverse"
-                    : "column";
+            if (TARGET === "reactNative") {
+                return {
+                    flexDirection: state.flexDir,
+                };
+            }
             return {
-                "--flex-dir": flexDir,
-                "--flex-dir-tablet": state.maybeApplyForTablet(flexDir),
+                "--flex-dir": state.flexDir,
+                "--flex-dir-tablet": state.getTabletStyle({
+                    stackedStyle: state.flexDir,
+                    desktopStyle: "row",
+                }),
             };
         },
-        get columnCssVars() {
-            const width = "100%";
-            const marginLeft = "0";
+        columnCssVars(index) {
+            const width = state.getColumnCssWidth(index);
+            const gutter = `${index === 0 ? 0 : state.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": state.maybeApplyForTablet(width),
-                "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft),
+                width,
+                "margin-left": gutter,
+                "--column-width-mobile": state.getMobileStyle({
+                    stackedStyle: mobileWidth,
+                    desktopStyle: width,
+                }),
+                "--column-margin-left-mobile": state.getMobileStyle({
+                    stackedStyle: mobileMarginLeft,
+                    desktopStyle: gutter,
+                }),
+                "--column-width-tablet": state.getTabletStyle({
+                    stackedStyle: mobileWidth,
+                    desktopStyle: width,
+                }),
+                "--column-margin-left-tablet": state.getTabletStyle({
+                    stackedStyle: mobileMarginLeft,
+                    desktopStyle: gutter,
+                }),
             };
         },
         getWidthForBreakpointSize(size) {
             const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
             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)}
+        flex-direction: var(--flex-dir-tablet);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
+        width: var(--column-width-tablet) !important;
+        margin-left: var(--column-margin-left-tablet) !important;
       }
     }
 
     @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
       .${props.builderBlock.id}-breakpoints {
-        ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
+        flex-direction: var(--flex-dir);
+        align-items: stretch;
       }
 
       .${props.builderBlock.id}-breakpoints > .builder-column {
-        ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
+        width: var(--column-width-mobile) !important;
+        margin-left: var(--column-margin-left-mobile) !important;
       }
     },
   `;
         },
-        get reactNativeColumnsStyles() {
-            return this.columnStyleObjects.columns.small;
-        },
-        get reactNativeColumnStyles() {
-            return this.columnStyleObjects.column.small;
-        },
     };
     const builderContext = _context["BuilderContext"];
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-fbdb9b00", style: {
-                ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
-                ...state.columnsCssVars,
+                " div-263839f0", 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-fbdb9b00-2", style: {
-                    width: state.getColumnCssWidth(index),
-                    marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
-                    ...(TARGET === "reactNative"
-                        ? state.reactNativeColumnStyles
-                        : {}),
-                    ...state.columnCssVars,
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-263839f0-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-fbdb9b00 {
+        React.createElement("style", null, `.div-263839f0 {
 display: flex;
 line-height: normal;
-}.div-fbdb9b00-2 {
+}.div-263839f0-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;