@builder.io/sdk-solid 0.0.8-13 → 0.0.8-14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-13",
+  "version": "0.0.8-14",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/blocks/image/image.jsx

@@ -27,9 +27,7 @@ function Image(props) {
         fontSize: "0"
       })} style={{
         "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
+      }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}

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

@@ -4,6 +4,8 @@ import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.jsx";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 
 function BlockStyles(props) {
   const state = createMutable({
@@ -15,35 +17,25 @@ function BlockStyles(props) {
       });
     },
 
-    camelToKebabCase(string) {
-      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-    },
-
     get css() {
-      // TODO: media queries
-      const styleObject = state.useBlock.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${state.useBlock.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
+      const styles = state.useBlock.responsiveStyles;
+      const largeStyles = styles?.large;
+      const mediumStyles = styles?.medium;
+      const smallStyles = styles?.small;
+      return `
+      ${largeStyles ? `.${state.useBlock.id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ""}
+      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ""}
+    }`;
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show when={TARGET === "vue" || TARGET === "svelte"}>
+  return <Show when={TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}>
       <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
     </Show>;
 }

package/src/constants/device-sizes.js

@@ -1,10 +1,4 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -19,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

package/src/helpers/css.js

@@ -0,0 +1,12 @@
+import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+const convertStyleMaptoCSS = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+  return cssProps.join("\n");
+};
+export {
+  convertStyleMaptoCSS
+};

package/src/components/error-boundary.jsx

@@ -1,5 +0,0 @@
-function ErrorBoundary(props) {
-  return <></>;
-}
-
-export default ErrorBoundary;