@builder.io/sdk-solid 0.1.14 → 0.1.16

package/package.json

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

package/src/blocks/button/button.jsx

@@ -7,9 +7,16 @@ function Button(props) {
     <Show
       fallback={
         <button
-          class={css({
-            all: "unset",
-          })}
+          class={
+            /**
+             * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`.
+             */
+            props.attributes.class +
+            " " +
+            css({
+              all: "unset",
+            })
+          }
           {...props.attributes}
         >
           {props.text}

package/src/blocks/columns/columns.jsx

@@ -58,26 +58,26 @@ function Columns(props) {
   }
 
   function columnCssVars(index) {
-    const width = getColumnCssWidth(index);
-    const gutter = `${index === 0 ? 0 : gutterSize()}px`;
+    const gutter = index === 0 ? 0 : gutterSize();
     if (TARGET === "reactNative") {
       return {
-        width,
         marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
       };
     }
+    const width = getColumnCssWidth(index);
+    const gutterPixels = `${gutterSize()}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {
       width,
-      "margin-left": gutter,
+      "margin-left": gutterPixels,
       "--column-width-mobile": getMobileStyle({
         stackedStyle: mobileWidth,
         desktopStyle: width,
       }),
       "--column-margin-left-mobile": getMobileStyle({
         stackedStyle: mobileMarginLeft,
-        desktopStyle: gutter,
+        desktopStyle: gutterPixels,
       }),
       "--column-width-tablet": getTabletStyle({
         stackedStyle: mobileWidth,
@@ -85,7 +85,7 @@ function Columns(props) {
       }),
       "--column-margin-left-tablet": getTabletStyle({
         stackedStyle: mobileMarginLeft,
-        desktopStyle: gutter,
+        desktopStyle: gutterPixels,
       }),
     };
   }

package/src/blocks/image/image.jsx

@@ -92,9 +92,7 @@ function Image(props) {
             })
           }
           style={{
-            "padding-top":
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              props.aspectRatio * 100 + "%",
+            "padding-top": props.aspectRatio * 100 + "%",
           }}
         ></div>
       </Show>

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

@@ -153,6 +153,7 @@ function RenderBlock(props) {
     };
     return {
       apiKey: props.context.apiKey,
+      apiVersion: props.context.apiVersion,
       state: props.context.state,
       content: props.context.content,
       context: props.context.context,

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

@@ -193,7 +193,7 @@ function RenderContent(props) {
         setContextState(newState);
       })
       .catch((err) => {
-        console.log("error fetching dynamic data", url, err);
+        console.error("error fetching dynamic data", url, err);
       });
   }
 

package/src/functions/get-content/index.js

@@ -42,7 +42,11 @@ import { handleABTesting } from "./ab-testing.js";
 import { generateContentUrl } from "./generate-content-url.js";
 function getContent(options) {
   return __async(this, null, function* () {
-    return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
+    const allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
+    if ("results" in allContent) {
+      return (allContent == null ? void 0 : allContent.results[0]) || null;
+    }
+    return null;
   });
 }
 function getAllContent(options) {
@@ -50,11 +54,19 @@ function getAllContent(options) {
     const url = generateContentUrl(options);
     const res = yield fetch(url.href);
     const content = yield res.json();
+    if ("status" in content && !("results" in content)) {
+      console.error("[Builder.io]: Error fetching data. ", content, options);
+      return content;
+    }
     const canTrack = options.canTrack !== false;
-    if (canTrack && Array.isArray(content.results)) {
-      for (const item of content.results) {
-        yield handleABTesting({ item, canTrack });
+    try {
+      if (canTrack && Array.isArray(content.results)) {
+        for (const item of content.results) {
+          yield handleABTesting({ item, canTrack });
+        }
       }
+    } catch (e) {
+      console.error("[Builder.io]: Could not setup A/B testing. ", e);
     }
     return content;
   });