@builder.io/sdk-svelte 0.0.1-23 → 0.0.1-26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-23",
+  "version": "0.0.1-26",
   "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/symbol/symbol.svelte

@@ -22,13 +22,22 @@
 
   function onUpdateFn_0() {
     const symbolToUse = symbol;
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
 
     if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
-        options: {
-          entry: symbolToUse.entry,
+        query: {
+          id: symbolToUse.entry,
         },
       }).then((response) => {
         content = response;
@@ -48,6 +57,7 @@
   <RenderContent
     apiKey={builderContext.apiKey}
     context={builderContext.context}
+    customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
       ...builderContext.state,

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

@@ -139,34 +139,33 @@
       return undefined;
     }
 
-    const { collection, itemName } = repeat;
     const itemsArray = evaluate({
-      code: collection,
+      code: repeat.collection,
       state: builderContext.state,
       context: builderContext.context,
     });
 
-    if (Array.isArray(itemsArray)) {
-      const collectionName = collection.split(".").pop();
-      const itemNameToUse =
-        itemName || (collectionName ? collectionName + "Item" : "item");
-      const repeatArray = itemsArray.map((item, index) => ({
-        context: {
-          ...builderContext,
-          state: {
-            ...builderContext.state,
-            $index: index,
-            $item: item,
-            [itemNameToUse]: item,
-            [`$${itemNameToUse}Index`]: index,
-          },
-        },
-        block: blockWithoutRepeat,
-      }));
-      return repeatArray;
-    } else {
+    if (!Array.isArray(itemsArray)) {
       return undefined;
     }
+
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse =
+      repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index) => ({
+      context: {
+        ...builderContext,
+        state: {
+          ...builderContext.state,
+          $index: index,
+          $item: item,
+          [itemNameToUse]: item,
+          [`$${itemNameToUse}Index`]: index,
+        },
+      },
+      block: blockWithoutRepeat,
+    }));
+    return repeatArray;
   };
 
   let builderContext = getContext(BuilderContext.key);
@@ -182,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,17 +210,16 @@
       } // override normal content in preview mode
 
       if (isPreviewing()) {
-        if (model && previewingModelName() === model) {
-          const currentUrl = new URL(location.href);
-          const previewApiKey = currentUrl.searchParams.get("apiKey");
+        const searchParams = new URL(location.href).searchParams;
+
+        if (model && searchParams.get("builder.preview") === model) {
+          const previewApiKey =
+            searchParams.get("apiKey") || searchParams.get("builder.space");
 
           if (previewApiKey) {
             getContent({
               model: model,
               apiKey: previewApiKey,
-              options: getBuilderSearchParams(
-                convertSearchParamsToQueryObject(currentUrl.searchParams)
-              ),
             }).then((content) => {
               if (content) {
                 overrideContent = content;
@@ -266,10 +268,10 @@
     }}
     data-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/ab-testing.js

@@ -0,0 +1,38 @@
+const handleABTesting = (item, testGroups) => {
+  if (item.variations && Object.keys(item.variations).length) {
+    const testGroup = item.id ? testGroups[item.id] : void 0;
+    const variationValue = testGroup ? item.variations[testGroup] : void 0;
+    if (testGroup && variationValue) {
+      item.data = variationValue.data;
+      item.testVariationId = variationValue.id;
+      item.testVariationName = variationValue.name;
+    } else {
+      let n = 0;
+      const random = Math.random();
+      let set = false;
+      for (const id in item.variations) {
+        const variation = item.variations[id];
+        const testRatio = variation.testRatio;
+        n += testRatio;
+        if (random < n) {
+          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
+          set = true;
+          Object.assign(item, {
+            data: variation.data,
+            testVariationId: variation.id,
+            testVariationName: variationName
+          });
+        }
+      }
+      if (!set) {
+        Object.assign(item, {
+          testVariationId: item.id,
+          testVariationName: "Default"
+        });
+      }
+    }
+  }
+};
+export {
+  handleABTesting
+};

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

@@ -37,20 +37,14 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+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();
-function flatten(object, path = null, separator = ".") {
-  return Object.keys(object).reduce((acc, key) => {
-    const value = object[key];
-    const newPath = [path, key].filter(Boolean).join(separator);
-    const isObject = [
-      typeof value === "object",
-      value !== null,
-      !(Array.isArray(value) && value.length === 0)
-    ].every(Boolean);
-    return isObject ? __spreadValues(__spreadValues({}, acc), flatten(value, newPath, separator)) : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
-  }, {});
-}
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
@@ -66,67 +60,31 @@ 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;
 };
-const handleABTesting = (content, testGroups) => {
-  for (const item of content.results) {
-    if (item.variations && Object.keys(item.variations).length) {
-      const testGroup = testGroups[item.id];
-      const variationValue = item.variations[testGroup];
-      if (testGroup && variationValue) {
-        item.data = variationValue.data;
-        item.testVariationId = variationValue.id;
-        item.testVariationName = variationValue.name;
-      } else {
-        let n = 0;
-        const random = Math.random();
-        let set = false;
-        for (const id in item.variations) {
-          const variation = item.variations[id];
-          const testRatio = variation.testRatio;
-          n += testRatio;
-          if (random < n) {
-            const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-            set = true;
-            Object.assign(item, {
-              data: variation.data,
-              testVariationId: variation.id,
-              testVariationName: variationName
-            });
-          }
-        }
-        if (!set) {
-          Object.assign(item, {
-            testVariationId: item.id,
-            testVariationName: "Default"
-          });
-        }
-      }
-    }
-  }
-};
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
     const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
-      handleABTesting(content, options.testGroups);
+      for (const item of content.results) {
+        handleABTesting(item, options.testGroups);
+      }
     }
     return content;
   });

package/src/functions/register-component.js

@@ -46,12 +46,22 @@ const createRegisterComponentMessage = (_a) => {
     data: prepareComponentInfoToSend(info)
   };
 };
-const serializeFn = (fn) => `return (${fn.toString()}).apply(this, arguments)`;
-const prepareComponentInfoToSend = (info) => {
-  var _a;
-  return __spreadProps(__spreadValues({}, info), {
-    inputs: (_a = info.inputs) == null ? void 0 : _a.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
-      [key]: typeof value === "function" ? serializeFn(value) : value
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = (_c) => {
+  var _d = _c, {
+    inputs
+  } = _d, info = __objRest(_d, [
+    "inputs"
+  ]);
+  return __spreadProps(__spreadValues({}, fastClone(info)), {
+    inputs: inputs == null ? void 0 : inputs.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: serializeValue(value)
     }), {}))
   });
 };

package/src/helpers/flatten.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function flatten(object, path = null, separator = ".") {
+  return Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    const newPath = [path, key].filter(Boolean).join(separator);
+    const isObject = [
+      typeof value === "object",
+      value !== null,
+      !(Array.isArray(value) && value.length === 0)
+    ].every(Boolean);
+    return isObject ? __spreadValues(__spreadValues({}, acc), flatten(value, newPath, separator)) : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
+  }, {});
+}
+export {
+  flatten
+};

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
-};