@builder.io/sdk-react 0.1.11 → 0.1.12

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/symbol/symbol.js

@@ -6,33 +6,60 @@ import { TARGET } from "../../constants/target";
 function Symbol(props) {
     const _context = { ...props["_context"] };
     const state = {
-        get 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(" ");
-        },
-        fetchedContent: null,
-        get contentToUse() {
-            return props.symbol?.content || state.fetchedContent;
+        className: [
+            ...(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(" "),
+        contentToUse: props.symbol?.content,
+        fetchContent() {
+            /**
+             * If:
+             * - we have a symbol prop
+             * - yet it does not have any content
+             * - and we have not already stored content from before
+             * - and it has a model name
+             *
+             * then we want to re-fetch the symbol content.
+             */
+            if (!state.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: props.symbol.model,
+                    apiKey: builderContext.apiKey,
+                    apiVersion: builderContext.apiVersion,
+                    query: {
+                        id: props.symbol.entry,
+                    },
+                })
+                    .then((response) => {
+                    if (response) {
+                        state.contentToUse = response;
+                    }
+                })
+                    .catch((err) => {
+                    console.error("[Builder.io]: Could not fetch symbol content: ", err);
+                });
+            }
         },
     };
     const builderContext = _context["BuilderContext"];
     return (React.createElement("div", { ...props.attributes, dataSet: {
             class: state.className,
         }, className: state.className },
-        React.createElement(RenderContent, { apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+        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,
+                ...state.contentToUse?.data?.state,
             }, model: props.symbol?.model, content: state.contentToUse, _context: _context })));
 }
 export default Symbol;

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

@@ -192,6 +192,7 @@ function RenderContent(props) {
         setState: state.setContextState,
         context: props.context || {},
         apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
         registeredComponents: state.allRegisteredComponents,
     };
     return (React.createElement(React.Fragment, null, state.useContent ? (React.createElement(React.Fragment, null,

package/dist/rsc/context/builder.context.js

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

package/dist/rsc/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/rsc/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/rsc/types/api-version.js

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

package/package.json

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

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

@@ -6,8 +6,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]),
@@ -18,20 +18,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
@@ -42,44 +34,60 @@ 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 (
     <div
       {...props.attributes}
       dataSet={{
-        class: className(),
+        class: className,
       }}
-      className={className()}
+      className={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}
       />
     </div>
   );

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

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

package/packages/react/src/context/builder.context.js

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

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

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

@@ -8,23 +8,55 @@ function Symbol(props) {
   const _context = { ...props["_context"] };
 
   const state = {
-    get 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(" ");
-    },
-    fetchedContent: null,
-    get contentToUse() {
-      return props.symbol?.content || state.fetchedContent;
+    className: [
+      ...(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(" "),
+    contentToUse: props.symbol?.content,
+    fetchContent() {
+      /**
+       * If:
+       * - we have a symbol prop
+       * - yet it does not have any content
+       * - and we have not already stored content from before
+       * - and it has a model name
+       *
+       * then we want to re-fetch the symbol content.
+       */
+      if (
+        !state.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: props.symbol.model,
+          apiKey: builderContext.apiKey,
+          apiVersion: builderContext.apiVersion,
+          query: {
+            id: props.symbol.entry,
+          },
+        })
+          .then((response) => {
+            if (response) {
+              state.contentToUse = response;
+            }
+          })
+          .catch((err) => {
+            console.error(
+              "[Builder.io]: Could not fetch symbol content: ",
+              err
+            );
+          });
+      }
     },
   };
 
@@ -39,13 +71,14 @@ function Symbol(props) {
       className={state.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,
+          ...state.contentToUse?.data?.state,
         }}
         model={props.symbol?.model}
         content={state.contentToUse}

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

@@ -214,6 +214,7 @@ function RenderContent(props) {
     setState: state.setContextState,
     context: props.context || {},
     apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents,
   };
 

package/packages/rsc/src/context/builder.context.js

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

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