@builder.io/sdk-svelte 0.0.9-2 → 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-1",
+  "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

@@ -1,5 +1,6 @@
 import { isBrowser } from '../is-browser.js';
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
 export const convertSearchParamsToQueryObject = (searchParams) => {
     const options = {};
     searchParams.forEach((value, key) => {
@@ -15,7 +16,9 @@ export const getBuilderSearchParams = (_options) => {
     const newOptions = {};
     Object.keys(options).forEach((key) => {
         if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+            const trimmedKey = key
+                .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
+                .replace(BUILDER_OPTIONS_PREFIX, '');
             newOptions[trimmedKey] = options[key];
         }
     });

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

@@ -6,7 +6,7 @@ export async function getContent(options) {
     return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
 }
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }
@@ -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-2",
+  "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

@@ -1,7 +1,7 @@
 import { isBrowser } from '../is-browser.js';
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
-
+const BUILDER_OPTIONS_PREFIX = 'options.';
 type QueryObject = Record<string, string | string[]>;
 
 export const convertSearchParamsToQueryObject = (
@@ -25,7 +25,9 @@ export const getBuilderSearchParams = (
   const newOptions: QueryObject = {};
   Object.keys(options).forEach((key) => {
     if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+      const trimmedKey = key
+        .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
+        .replace(BUILDER_OPTIONS_PREFIX, '');
       newOptions[trimmedKey] = options[key];
     }
   });

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

@@ -24,7 +24,7 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     model,
     apiKey,
     includeRefs = true,
-    locale
+    locale,
   } = options;
 
   if (!apiKey) {
@@ -32,7 +32,9 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   }
 
   const url = new URL(
-    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${ locale ? `&locale=${locale}` : ''}`
+    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
+      locale ? `&locale=${locale}` : ''
+    }`
   );
 
   const queryOptions = {
@@ -58,6 +60,9 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   return url;
 };
 
+/**
+ * TO-DO: Handle error responses.
+ */
 interface ContentResponse {
   results: BuilderContent[];
 }
@@ -73,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;
 }