@builder.io/sdk-svelte 0.1.1 → 0.1.3-0

package/src/blocks/form/form.svelte

@@ -58,7 +58,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import RenderBlock from "../../components/render-block/render-block.svelte";
   import BuilderBlocks from "../../components/render-blocks.svelte";
@@ -66,7 +66,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -76,16 +75,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -364,4 +359,4 @@
     color: red;
     text-align: center;
   }
-</style>
+</style>

package/src/blocks/fragment/fragment.svelte

@@ -9,4 +9,4 @@
 <script lang="ts">
 </script>
 
-<span><slot /></span>
+<span><slot /></span>

package/src/blocks/image/component-info.ts

@@ -23,69 +23,71 @@ export const componentInfo: ComponentInfo = {
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-      onChange: serializeFn((options: Map<string, any>) => {
-        const DEFAULT_ASPECT_RATIO = 0.7041;
-        options.delete('srcset');
-        options.delete('noWebp');
-        function loadImage(
-          url: string,
-          timeout = 60000
-        ): Promise<HTMLImageElement> {
-          return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            let loaded = false;
-            img.onload = () => {
-              loaded = true;
-              resolve(img);
-            };
+      onChange: serializeFn(
+        (options: Map<string, any>): void | Promise<void> => {
+          const DEFAULT_ASPECT_RATIO = 0.7041;
+          options.delete('srcset');
+          options.delete('noWebp');
+          function loadImage(
+            url: string,
+            timeout = 60000
+          ): Promise<HTMLImageElement> {
+            return new Promise((resolve, reject) => {
+              const img = document.createElement('img');
+              let loaded = false;
+              img.onload = () => {
+                loaded = true;
+                resolve(img);
+              };
 
-            img.addEventListener('error', (event) => {
-              console.warn('Image load failed', event.error);
-              reject(event.error);
-            });
+              img.addEventListener('error', (event) => {
+                console.warn('Image load failed', event.error);
+                reject(event.error);
+              });
 
-            img.src = url;
-            setTimeout(() => {
-              if (!loaded) {
-                reject(new Error('Image load timed out'));
-              }
-            }, timeout);
-          });
-        }
+              img.src = url;
+              setTimeout(() => {
+                if (!loaded) {
+                  reject(new Error('Image load timed out'));
+                }
+              }, timeout);
+            });
+          }
 
-        function round(num: number) {
-          return Math.round(num * 1000) / 1000;
-        }
+          function round(num: number) {
+            return Math.round(num * 1000) / 1000;
+          }
 
-        const value = options.get('image');
-        const aspectRatio = options.get('aspectRatio');
+          const value = options.get('image');
+          const aspectRatio = options.get('aspectRatio');
 
-        // For SVG images - don't render as webp, keep them as SVG
-        fetch(value)
-          .then((res) => res.blob())
-          .then((blob) => {
-            if (blob.type.includes('svg')) {
-              options.set('noWebp', true);
-            }
-          });
+          // For SVG images - don't render as webp, keep them as SVG
+          fetch(value)
+            .then((res) => res.blob())
+            .then((blob) => {
+              if (blob.type.includes('svg')) {
+                options.set('noWebp', true);
+              }
+            });
 
-        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-          return loadImage(value).then((img) => {
-            const possiblyUpdatedAspectRatio = options.get('aspectRatio');
-            if (
-              options.get('image') === value &&
-              (!possiblyUpdatedAspectRatio ||
-                possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)
-            ) {
-              if (img.width && img.height) {
-                options.set('aspectRatio', round(img.height / img.width));
-                options.set('height', img.height);
-                options.set('width', img.width);
+          if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+            return loadImage(value).then((img) => {
+              const possiblyUpdatedAspectRatio = options.get('aspectRatio');
+              if (
+                options.get('image') === value &&
+                (!possiblyUpdatedAspectRatio ||
+                  possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)
+              ) {
+                if (img.width && img.height) {
+                  options.set('aspectRatio', round(img.height / img.width));
+                  options.set('height', img.height);
+                  options.set('width', img.width);
+                }
               }
-            }
-          });
+            });
+          }
         }
-      }),
+      ),
     },
     {
       name: 'backgroundSize',

package/src/blocks/image/image.svelte

@@ -106,7 +106,6 @@
     srcset={srcSetToUse()}
     {sizes}
   />
-  <source srcset={srcSetToUse()} />
 </picture>
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
@@ -150,4 +149,4 @@
     width: 100%;
     height: 100%;
   }
-</style>
+</style>

package/src/blocks/img/img.svelte

@@ -23,7 +23,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -33,16 +32,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -83,4 +78,4 @@
   src={imgSrc || image}
   {...filterAttrs(attributes, isNonEvent)}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/src/blocks/input/input.svelte

@@ -15,7 +15,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -25,16 +24,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -66,4 +61,4 @@
   {defaultValue}
   {required}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/src/blocks/raw-text/raw-text.svelte

@@ -13,4 +13,4 @@
 
 <span class={attributes?.class || attributes?.className}
   >{@html text || ""}</span
->
+>

package/src/blocks/section/section.svelte

@@ -10,7 +10,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -20,16 +19,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -73,4 +68,4 @@
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <slot />
-</section>
+</section>

package/src/blocks/select/select.svelte

@@ -16,7 +16,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -26,16 +25,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -66,4 +61,4 @@
   {#each options as option}
     <option value={option.value}>{option.name || option.value}</option>
   {/each}
-</select>
+</select>

package/src/blocks/submit-button/submit-button.svelte

@@ -8,7 +8,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -18,16 +17,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -50,4 +45,4 @@
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {text}
-</button>
+</button>

package/src/blocks/symbol/symbol.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate, getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
@@ -34,7 +34,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -44,16 +43,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -106,7 +101,9 @@
       symbolToUse &&
       !symbolToUse.content &&
       !fetchedContent &&
-      symbolToUse.model
+      symbolToUse.model &&
+      // This is a hack, we should not need to check for this, but it is needed for Svelte.
+      builderContext?.apiKey
     ) {
       getContent({
         model: symbolToUse.model,
@@ -142,4 +139,4 @@
     model={symbol?.model}
     content={contentToUse()}
   />
-</div>
+</div>

package/src/blocks/text/text.svelte

@@ -8,4 +8,4 @@
   export let text: TextProps["text"];
 </script>
 
-<span class="builder-text">{@html text}</span>
+<span class="builder-text">{@html text}</span>

package/src/blocks/textarea/textarea.svelte

@@ -11,7 +11,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -21,16 +20,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -57,4 +52,4 @@
   {value}
   {defaultValue}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/src/blocks/video/video.svelte

@@ -29,7 +29,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -39,16 +38,12 @@
     });
     return validAttr;
   };
-
   const setAttrs = (node, attrs) => {
     const attrKeys = Object.keys(attrs);
-
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
-
     attrKeys.map(setup);
-
     return {
       update(attrs) {
         const attrKeys = Object.keys(attrs);
@@ -134,4 +129,4 @@
   src={video || "no-src"}
   poster={posterImage}
   use:setAttrs={filterAttrs(spreadProps(), isEvent)}
-/>
+/>

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

@@ -72,4 +72,4 @@
 
 {#if TARGET !== "reactNative" && css()}
   <RenderInlinedStyles styles={css()} />
-{/if}
+{/if}

package/src/components/render-block/render-block.helpers.ts

@@ -1,3 +1,9 @@
+import type { BuilderContextInterface } from '../../context/types';
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+
 /**
  * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
  */
@@ -25,3 +31,82 @@ export const isEmptyHtmlElement = (tagName: unknown) => {
     EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
   );
 };
+
+export const getComponent = ({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  const componentName = getProcessedBlock({
+    block: block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false,
+  }).component?.name;
+
+  if (!componentName) {
+    return null;
+  }
+
+  const ref = context.registeredComponents[componentName];
+
+  if (!ref) {
+    // TODO: Public doc page with more info about this message
+    console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    return undefined;
+  } else {
+    return ref;
+  }
+};
+
+export const getRepeatItemData = ({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): RepeatData[] | undefined => {
+  /**
+   * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+   * which will not work if there is a repeat.
+   */
+  const { repeat, ...blockWithoutRepeat } = block;
+
+  if (!repeat?.collection) {
+    return undefined;
+  }
+
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    context: context.context,
+  });
+
+  if (!Array.isArray(itemsArray)) {
+    return undefined;
+  }
+
+  const collectionName = repeat.collection.split('.').pop();
+  const itemNameToUse =
+    repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+
+  const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
+    context: {
+      ...context,
+      state: {
+        ...context.state,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index,
+      },
+    },
+    block: blockWithoutRepeat,
+  }));
+
+  return repeatArray;
+};