@builder.io/sdk-svelte 0.0.9-3 → 0.0.9

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.9-2",
+  "version": "0.0.9-3",
   "type": "module",
   "files": [
     "package",

package/package/blocks/image/image.svelte

@@ -5,11 +5,12 @@ export let image;
 export let src;
 export let srcset;
 export let noWebp;
+export let aspectRatio;
 export let altText;
+export let backgroundPosition;
 export let backgroundSize;
 export let className;
 export let sizes;
-export let aspectRatio;
 export let builderBlock;
 export let fitContent;
 function mitosis_styling(node, vars) {
@@ -50,6 +51,17 @@ $: webpSrcSet = () => {
         return "";
     }
 };
+$: aspectRatioCss = () => {
+    const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px",
+    };
+    const out = aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+};
 </script>
 
 <picture>
@@ -58,8 +70,9 @@ $: webpSrcSet = () => {
   {/if}
   <img
     use:mitosis_styling={{
-      objectPosition: backgroundSize || "center",
+      objectPosition: backgroundPosition || "center",
       objectFit: backgroundSize || "cover",
+      ...aspectRatioCss(),
     }}
     loading="lazy"
     alt={altText}
@@ -97,11 +110,6 @@ $: webpSrcSet = () => {
   .img {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0px;
-    left: 0px;
   }
   .div {
     width: 100%;

package/package/blocks/image/image.svelte.d.ts

@@ -25,11 +25,12 @@ declare const __propDef: {
         src: ImageProps["src"];
         srcset: ImageProps["srcset"];
         noWebp: ImageProps["noWebp"];
+        aspectRatio: ImageProps["aspectRatio"];
         altText: ImageProps["altText"];
+        backgroundPosition: ImageProps["backgroundPosition"];
         backgroundSize: ImageProps["backgroundSize"];
         className: ImageProps["className"];
         sizes: ImageProps["sizes"];
-        aspectRatio: ImageProps["aspectRatio"];
         builderBlock: ImageProps["builderBlock"];
         fitContent: ImageProps["fitContent"];
     };

package/package/functions/get-builder-search-params/index.js

@@ -4,7 +4,7 @@ const BUILDER_OPTIONS_PREFIX = 'options.';
 export const convertSearchParamsToQueryObject = (searchParams) => {
     const options = {};
     searchParams.forEach((value, key) => {
-        options[key.replace('options.', '')] = value;
+        options[key] = value;
     });
     return options;
 };

package/package/functions/get-content/index.d.ts

@@ -2,6 +2,9 @@ import type { BuilderContent } from '../../types/builder-content.js';
 export declare type GetContentOptions = import('./types.js').GetContentOptions;
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
 export declare const generateContentUrl: (options: GetContentOptions) => URL;
+/**
+ * TO-DO: Handle error responses.
+ */
 interface ContentResponse {
     results: BuilderContent[];
 }

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

@@ -35,7 +35,9 @@ export async function getAllContent(options) {
     const fetch = await getFetch();
     const content = await fetch(url.href).then((res) => res.json());
     const canTrack = options.canTrack !== false;
-    if (canTrack) {
+    if (canTrack &&
+        // This makes sure we have a non-error response with the results array.
+        Array.isArray(content.results)) {
         for (const item of content.results) {
             await handleABTesting({ item, canTrack });
         }

package/package/functions/get-content/types.d.ts

@@ -33,7 +33,7 @@ export interface GetContentOptions {
      */
     includeRefs?: boolean;
     /**
-     * If passed , the API will aut-resolve localized objects to the value of this locale key
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */
     locale?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.9-3",
+  "version": "0.0.9",
   "type": "module",
   "files": [
     "package",

package/src/blocks/image/image.svelte

@@ -28,11 +28,12 @@
   export let src: ImageProps["src"];
   export let srcset: ImageProps["srcset"];
   export let noWebp: ImageProps["noWebp"];
+  export let aspectRatio: ImageProps["aspectRatio"];
   export let altText: ImageProps["altText"];
+  export let backgroundPosition: ImageProps["backgroundPosition"];
   export let backgroundSize: ImageProps["backgroundSize"];
   export let className: ImageProps["className"];
   export let sizes: ImageProps["sizes"];
-  export let aspectRatio: ImageProps["aspectRatio"];
   export let builderBlock: ImageProps["builderBlock"];
   export let fitContent: ImageProps["fitContent"];
 
@@ -74,6 +75,17 @@
       return "";
     }
   };
+  $: aspectRatioCss = () => {
+    const aspectRatioStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      left: "0px",
+      top: "0px",
+    };
+    const out = aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+  };
 </script>
 
 <picture>
@@ -82,8 +94,9 @@
   {/if}
   <img
     use:mitosis_styling={{
-      objectPosition: backgroundSize || "center",
+      objectPosition: backgroundPosition || "center",
       objectFit: backgroundSize || "cover",
+      ...aspectRatioCss(),
     }}
     loading="lazy"
     alt={altText}
@@ -121,11 +134,6 @@
   .img {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0px;
-    left: 0px;
   }
   .div {
     width: 100%;

package/src/functions/get-builder-search-params/index.ts

@@ -9,7 +9,7 @@ export const convertSearchParamsToQueryObject = (
 ): QueryObject => {
   const options: Record<string, string> = {};
   searchParams.forEach((value, key) => {
-    options[key.replace('options.', '')] = value;
+    options[key] = value;
   });
   return options;
 };

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

@@ -60,6 +60,9 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   return url;
 };
 
+/**
+ * TO-DO: Handle error responses.
+ */
 interface ContentResponse {
   results: BuilderContent[];
 }
@@ -75,7 +78,11 @@ export async function getAllContent(
   );
 
   const canTrack = options.canTrack !== false;
-  if (canTrack) {
+  if (
+    canTrack &&
+    // This makes sure we have a non-error response with the results array.
+    Array.isArray(content.results)
+  ) {
     for (const item of content.results) {
       await handleABTesting({ item, canTrack });
     }

package/src/functions/get-content/types.ts

@@ -40,7 +40,7 @@ export interface GetContentOptions {
   includeRefs?: boolean;
 
   /**
-   * If passed , the API will aut-resolve localized objects to the value of this locale key
+   * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
    */
   locale?: string;
 }