@builder.io/sdk-svelte 0.0.1-15 → 0.0.1-18

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-15",
+  "version": "0.0.1-18",
   "type": "module",
   "files": [
     "src"
   ],
+  "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BuilderIO/builder.git",
+    "directory": "packages/sdks/output/svelte"
+  },
   "main": "./src/index.js",
   "module": "./src/index.js",
   "svelte": "./src/index.js",

package/src/blocks/image/image.svelte

@@ -39,10 +39,10 @@ export let builderBlock;
     
 <picture >
       
-<img  loading="lazy"  class="img"  alt={altText}  role={altText ? 'presentation' : undefined}  style={{
+<img  loading="lazy"  alt={altText}  role={altText ? 'presentation' : undefined}  style={{
 objectPosition: backgroundSize || 'center',
 objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (className ? ' ' + className : '')}  src={image}  srcset={srcset}  sizes={sizes}  />
+}}  class={'builder-image' + (className ? ' ' + className : '') + 'img'}  src={image}  srcset={srcset}  sizes={sizes}  />
 
       
 <source  srcset={srcset}  />
@@ -52,13 +52,13 @@ objectFit: backgroundSize || 'cover'
     
 
 {#if aspectRatio && !(fitContent && builderBlock?.children?.length) }
+
+      
 <div  class="builder-image-sizer div-2"  style={{
 paddingTop: aspectRatio * 100 + '%'
-}} >
-          
-{' '}
+}} ></div>
 
-        </div>
+    
 
 
 {/if}

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

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

package/src/components/render-blocks.svelte

@@ -54,7 +54,7 @@ return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
     
   </script>
 
-  <div  class="div"  class={className()}  builder-path={path}  builder-parent-id={parent}  dataSet={{
+  <div  class={className() + 'div'}  builder-path={path}  builder-parent-id={parent}  dataSet={{
 class: className()
 }}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}" >
     

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/functions/get-block-styles.js

@@ -14,15 +14,15 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { sizes } from "../constants/device-sizes.js";
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
 function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
   const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium})`] = (_c = block.responsiveStyles) == null ? void 0 : _c.medium;
+    styles[getMaxWidthQueryForSize("medium")] = (_c = block.responsiveStyles) == null ? void 0 : _c.medium;
   }
   if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[`@media (max-width: ${sizes.small})`] = (_e = block.responsiveStyles) == null ? void 0 : _e.small;
+    styles[getMaxWidthQueryForSize("small")] = (_e = block.responsiveStyles) == null ? void 0 : _e.small;
   }
   return styles;
 }

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.svelte

@@ -1,27 +0,0 @@
-<script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
-  
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
-</script>