@builder.io/sdk-react 0.1.11 → 0.1.13

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

@@ -3,54 +3,79 @@ 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;
+        (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) {
@@ -59,59 +84,33 @@ function Columns(props) {
       );
       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"];
@@ -121,11 +120,11 @@ function Columns(props) {
       <div
         className={
           `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-fbdb9b00"
+          " div-263839f0"
         }
-        style={{
-          ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
-          ...state.columnsCssVars,
+        style={state.columnsCssVars}
+        dataSet={{
+          "builder-block-name": "builder-columns",
         }}
       >
         {TARGET !== "reactNative" ? (
@@ -139,14 +138,10 @@ function Columns(props) {
 
         {props.columns?.map((column, index) => (
           <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,
+            className="builder-column div-263839f0-2"
+            style={state.columnCssVars(index)}
+            dataSet={{
+              "builder-block-name": "builder-column",
             }}
             key={index}
           >
@@ -162,10 +157,10 @@ function Columns(props) {
           </div>
         ))}
       </div>
-      <style>{`.div-fbdb9b00 {
+      <style>{`.div-263839f0 {
 display: flex;
 line-height: normal;
-}.div-fbdb9b00-2 {
+}.div-263839f0-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

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'`);
+  });
 });