@builder.io/sdk-solid 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/blocks/columns/columns.jsx

@@ -6,56 +6,87 @@ import RenderBlocks from "../../components/render-blocks.jsx";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
 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] = createSignal(
+    typeof props.space === "number" ? props.space || 0 : 20
+  );
 
-  function getColumns() {
-    return props.columns || [];
-  }
+  const [cols, setCols] = createSignal(props.columns || []);
+
+  const [stackAt, setStackAt] = createSignal(props.stackColumnsAt || "tablet");
+
+  const [flexDir, setFlexDir] = createSignal(
+    props.stackColumnsAt === "never"
+      ? "row"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column"
+  );
 
   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;
   }
 
   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": 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,
+      }),
     };
   }
 
@@ -66,63 +97,34 @@ 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 this.columnStyleObjects.columns.small;
-  }
-
-  function reactNativeColumnStyles() {
-    return this.columnStyleObjects.column.small;
-  }
-
   const builderContext = useContext(BuilderContext);
 
   return (
@@ -135,9 +137,9 @@ function Columns(props) {
           lineHeight: "normal",
         })
       }
-      style={{
-        ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
-        ...columnsCssVars(),
+      style={columnsCssVars()}
+      dataSet={{
+        "builder-block-name": "builder-columns",
       }}
     >
       <Show when={TARGET !== "reactNative"}>
@@ -156,11 +158,9 @@ function Columns(props) {
                   alignItems: "stretch",
                 })
               }
-              style={{
-                width: getColumnCssWidth(index),
-                "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
-                ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
-                ...columnCssVars(),
+              style={columnCssVars(index)}
+              dataSet={{
+                "builder-block-name": "builder-column",
               }}
               key={index}
             >

package/src/blocks/symbol/symbol.jsx

@@ -1,4 +1,4 @@
-import { useContext, on, createEffect, createSignal } from "solid-js";
+import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
 
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
@@ -6,10 +6,8 @@ import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 
 function Symbol(props) {
-  const [fetchedContent, setFetchedContent] = createSignal(null);
-
-  function className() {
-    return [
+  const [className, setClassName] = createSignal(
+    [
       ...(TARGET === "vue2" || TARGET === "vue3"
         ? Object.keys(props.attributes.class)
         : [props.attributes.class]),
@@ -20,18 +18,12 @@ function Symbol(props) {
         : undefined,
     ]
       .filter(Boolean)
-      .join(" ");
-  }
-
-  function contentToUse() {
-    return props.symbol?.content || fetchedContent();
-  }
-
-  const builderContext = useContext(BuilderContext);
+      .join(" ")
+  );
 
-  function onUpdateFn_0() {
-    const symbolToUse = props.symbol;
+  const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
 
+  function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -42,25 +34,40 @@ 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);
+        });
     }
   }
-  createEffect(on(() => [props.symbol, fetchedContent()], onUpdateFn_0));
+
+  const builderContext = useContext(BuilderContext);
+
+  onMount(() => {
+    fetchContent();
+  });
+
+  function onUpdateFn_0() {
+    fetchContent();
+  }
+  createEffect(on(() => [props.symbol], onUpdateFn_0));
 
   return (
     <div
@@ -71,13 +78,14 @@ function Symbol(props) {
       }}
     >
       <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()}

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

@@ -304,6 +304,7 @@ function RenderContent(props) {
           getContent({
             model: props.model,
             apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -318,21 +319,28 @@ function RenderContent(props) {
   });
 
   function onUpdateFn_0() {
+    if (props.content) {
+      mergeNewContent(props.content);
+    }
+  }
+  createEffect(on(() => [props.content], onUpdateFn_0));
+
+  function onUpdateFn_1() {
     evaluateJsCode();
   }
   createEffect(
-    on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_0)
+    on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_1)
   );
 
-  function onUpdateFn_1() {
+  function onUpdateFn_2() {
     runHttpRequests();
   }
-  createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_1));
+  createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_2));
 
-  function onUpdateFn_2() {
+  function onUpdateFn_3() {
     emitStateUpdate();
   }
-  createEffect(on(() => [contentState()], onUpdateFn_2));
+  createEffect(on(() => [contentState()], onUpdateFn_3));
 
   return (
     <builderContext.Provider
@@ -342,6 +350,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'`);
+  });
 });