@builder.io/sdk-svelte 0.0.1-25 → 0.0.1-28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-25",
+  "version": "0.0.1-28",
   "type": "module",
   "files": [
     "src"

package/src/blocks/image/image.svelte

@@ -42,15 +42,20 @@
 
     return getSrcSet(url);
   };
+
+  $: webpSrcSet = () => {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !noWebp) {
+      return srcSetToUse().replace(/\?/g, "?format=webp&");
+    } else {
+      return "";
+    }
+  };
 </script>
 
 <div class="div">
   <picture>
-    {#if srcSetToUse?.()?.match(/builder\.io/) && !noWebp}
-      <source
-        type="image/webp"
-        srcset={srcSetToUse?.()?.replace(/\?/g, "?format=webp&")}
-      />
+    {#if webpSrcSet()}
+      <source type="image/webp" srcset={webpSrcSet()} />
     {/if}
 
     <img

package/src/blocks/video/video.svelte

@@ -1,23 +1,54 @@
 <script>
+  export let autoPlay;
+  export let muted;
+  export let controls;
+  export let loop;
+  export let playsInline;
   export let attributes;
   export let fit;
   export let position;
   export let video;
   export let posterImage;
-  export let autoPlay;
-  export let muted;
-  export let controls;
-  export let loop;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {
       node.style[p] = v;
     });
   }
+
+  $: videoProps = () => {
+    return {
+      ...(autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
+  };
 </script>
 
 <video
-  {...attributes}
+  {...videoProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -28,11 +59,6 @@
     // not have the video overflow
     borderRadius: 1,
   }}
-  preload="none"
   src={video || "no-src"}
   poster={posterImage}
-  {autoPlay}
-  {muted}
-  {controls}
-  {loop}
 />

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

@@ -181,7 +181,9 @@
             block={data.block}
           />
         {/each}
-      {:else}
+      {/if}
+
+      {#if !repeatItemData()}
         <RenderComponent {...renderComponentProps()} />
       {/if}
 

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

@@ -7,16 +7,11 @@
   import { TARGET } from "../../constants/target.js";
   import BuilderContext from "../../context/builder.context";
   import { evaluate } from "../../functions/evaluate.js";
-  import {
-    convertSearchParamsToQueryObject,
-    getBuilderSearchParams,
-  } from "../../functions/get-builder-search-params/index.js";
   import { getContent } from "../../functions/get-content/index.js";
   import { getFetch } from "../../functions/get-fetch.js";
   import { isBrowser } from "../../functions/is-browser.js";
   import { isEditing } from "../../functions/is-editing.js";
   import { isPreviewing } from "../../functions/is-previewing.js";
-  import { previewingModelName } from "../../functions/previewing-model-name.js";
   import {
     components,
     createRegisterComponentMessage,
@@ -163,6 +158,14 @@
     return {};
   };
 
+  $: shouldRenderContentStyles = () => {
+    return Boolean(
+      (useContent?.()?.data?.cssCode ||
+        useContent?.()?.data?.customFonts?.length) &&
+        TARGET !== "reactNative"
+    );
+  };
+
   setContext(BuilderContext.key, {
     get content() {
       return useContent();
@@ -207,8 +210,9 @@
       } // override normal content in preview mode
 
       if (isPreviewing()) {
-        if (model && previewingModelName() === model) {
-          const searchParams = new URL(location.href).searchParams;
+        const searchParams = new URL(location.href).searchParams;
+
+        if (model && searchParams.get("builder.preview") === model) {
           const previewApiKey =
             searchParams.get("apiKey") || searchParams.get("builder.space");
 
@@ -216,9 +220,6 @@
             getContent({
               model: model,
               apiKey: previewApiKey,
-              options: getBuilderSearchParams(
-                convertSearchParamsToQueryObject(searchParams)
-              ),
             }).then((content) => {
               if (content) {
                 overrideContent = content;
@@ -265,12 +266,12 @@
         contentId: useContent().id,
       });
     }}
-    data-builder-content-id={useContent?.()?.id}
+    builder-content-id={useContent?.()?.id}
   >
-    {#if (useContent?.()?.data?.cssCode || useContent?.()?.data?.customFonts?.length) && TARGET !== "reactNative"}
+    {#if shouldRenderContentStyles()}
       <RenderContentStyles
-        cssCode={useContent().data.cssCode}
-        customFonts={useContent().data.customFonts}
+        cssCode={useContent?.()?.data?.cssCode}
+        customFonts={useContent?.()?.data?.customFonts}
       />
     {/if}
 

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

@@ -1,3 +1,4 @@
+import { isBrowser } from "../is-browser";
 const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
@@ -16,7 +17,17 @@ const getBuilderSearchParams = (options) => {
   });
   return newOptions;
 };
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams));
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 export {
   convertSearchParamsToQueryObject,
-  getBuilderSearchParams
+  getBuilderSearchParams,
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
 };

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

@@ -38,6 +38,10 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { flatten } from "../../helpers/flatten.js";
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+} from "../get-builder-search-params/index.js";
 import { getFetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
 const fetch$ = getFetch();
@@ -56,19 +60,18 @@ const generateContentUrl = (options) => {
     apiKey
   } = options;
   const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  if (options.options) {
-    const flattened = flatten(options.options);
-    for (const key in flattened) {
-      url.searchParams.set(key, String(flattened[key]));
-    }
+  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
   }
   if (userAttributes) {
     url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
   }
   if (query) {
-    const flattened = flatten({ query });
-    for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify(flattened[key]));
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
     }
   }
   return url;

package/src/functions/previewing-model-name.js

@@ -1,11 +0,0 @@
-import { isPreviewing } from "./is-previewing.js";
-function previewingModelName() {
-  if (!isPreviewing()) {
-    return null;
-  }
-  const url = new URL(location.href);
-  return url.searchParams.get("builder.preview");
-}
-export {
-  previewingModelName
-};