@builder.io/sdk-svelte 0.0.7 → 0.0.8

package/package/functions/get-block-actions.js

@@ -1,5 +1,5 @@
 import { getEventHandlerName } from './event-handler-name.js';
-import { crateEventHandler } from './get-block-actions-handler.js';
+import { createEventHandler } from './get-block-actions-handler.js';
 export function getBlockActions(options) {
     const obj = {};
     const optionActions = options.block.actions ?? {};
@@ -9,7 +9,7 @@ export function getBlockActions(options) {
             continue;
         }
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
     }
     return obj;
 }

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

@@ -1,4 +1,4 @@
-declare type QueryObject = Record<string, string>;
+declare type QueryObject = Record<string, string | string[]>;
 export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
 export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
 export declare const getBuilderSearchParamsFromWindow: () => QueryObject;

package/package/functions/track.d.ts

@@ -1,6 +1,11 @@
 import type { CanTrack } from '../types/can-track.js';
 interface Event {
-    type: 'click' | 'impression';
+    /**
+     * The type of your event.
+     *
+     * Examples: `click`, `conversion`, `pageview`, `impression`
+     */
+    type: string;
     data: {
         /**
          * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.

package/package/functions/track.js

@@ -24,6 +24,10 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
     },
 });
 export async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        return;
+    }
     if (!eventProps.canTrack) {
         return;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "package",
@@ -15,7 +15,7 @@
   },
   "main": "./package/index.js",
   "module": "./package/index.js",
-  "svelte": "./src/index.ts",
+  "svelte": "./package/index.js",
   "exports": {
     "./src": {
       "import": "./src/index.js",

package/src/blocks/button/button.svelte

@@ -8,6 +8,40 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: ButtonProps["attributes"];
   export let text: ButtonProps["text"];
   export let link: ButtonProps["link"];
@@ -17,14 +51,19 @@
 {#if link}
   <a
     role="button"
-    {...attributes}
+    {...filterAttrs(attributes, isNonEvent)}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
+    use:setAttrs={filterAttrs(attributes, isEvent)}
   >
     {text}
   </a>
 {:else}
-  <button class="button" {...attributes}>
+  <button
+    class="button"
+    {...filterAttrs(attributes, isNonEvent)}
+    use:setAttrs={filterAttrs(attributes, isEvent)}
+  >
     {text}
   </button>
 {/if}

package/src/blocks/form/form.svelte

@@ -64,6 +64,40 @@
   import BuilderBlocks from "../../components/render-blocks.svelte";
   import { isEditing } from "../../functions/is-editing.js";
 
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+
+  const filterAttrs = (attrs, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let previewState: FormProps["previewState"];
   export let sendWithJs: FormProps["sendWithJs"];
   export let sendSubmissionsTo: FormProps["sendSubmissionsTo"];
@@ -296,7 +330,8 @@
   on:submit={(event) => {
     onSubmit(event);
   }}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block}

package/src/blocks/img/img.svelte

@@ -21,6 +21,40 @@
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+
+  const filterAttrs = (attrs, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let backgroundSize: ImgProps["backgroundSize"];
   export let backgroundPosition: ImgProps["backgroundPosition"];
   export let imgSrc: ImgProps["imgSrc"];
@@ -47,5 +81,6 @@
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 />

package/src/blocks/input/input.svelte

@@ -13,6 +13,40 @@
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+
+  const filterAttrs = (attrs, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: FormInputProps["attributes"];
   export let defaultValue: FormInputProps["defaultValue"];
   export let placeholder: FormInputProps["placeholder"];
@@ -23,7 +57,7 @@
 </script>
 
 <input
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {placeholder}
   {type}
@@ -31,4 +65,5 @@
   {value}
   {defaultValue}
   {required}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 />

package/src/blocks/section/section.svelte

@@ -8,6 +8,40 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: SectionProps["attributes"];
   export let maxWidth: SectionProps["maxWidth"];
 
@@ -28,7 +62,8 @@
         maxWidth: maxWidth,
       }
     : undefined}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <slot />
 </section>

package/src/blocks/select/select.svelte

@@ -14,6 +14,40 @@
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
 
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+
+  const filterAttrs = (attrs, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: FormSelectProps["attributes"];
   export let value: FormSelectProps["value"];
   export let defaultValue: FormSelectProps["defaultValue"];
@@ -22,11 +56,12 @@
 </script>
 
 <select
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   {value}
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {defaultValue}
   {name}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {#each options as option}
     <option value={option.value}>{option.name || option.value}</option>

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

@@ -6,10 +6,48 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: ButtonProps["attributes"];
   export let text: ButtonProps["text"];
 </script>
 
-<button type="submit" {...attributes}>
+<button
+  type="submit"
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
+>
   {text}
 </button>

package/src/blocks/symbol/symbol.svelte

@@ -31,6 +31,40 @@
   import BuilderContext from "../../context/builder.context.js";
   import { getContent } from "../../functions/get-content/index.js";
 
+  const isEvent = (attr) => attr.startsWith("on:");
+  const isNonEvent = (attr) => !attr.startsWith("on:");
+
+  const filterAttrs = (attrs, filter) => {
+    const validAttr = {};
+    Object.keys(attrs).forEach((attr) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let symbol: SymbolProps["symbol"];
   export let attributes: SymbolProps["attributes"];
 
@@ -76,11 +110,12 @@
 </script>
 
 <div
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
     class: className,
   }}
   class={className}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
     apiKey={builderContext.apiKey}

package/src/blocks/textarea/textarea.svelte

@@ -9,6 +9,40 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let attributes: TextareaProps["attributes"];
   export let placeholder: TextareaProps["placeholder"];
   export let name: TextareaProps["name"];
@@ -16,4 +50,11 @@
   export let defaultValue: TextareaProps["defaultValue"];
 </script>
 
-<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />
+<textarea
+  {...filterAttrs(attributes, isNonEvent)}
+  {placeholder}
+  {name}
+  {value}
+  {defaultValue}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
+/>

package/src/blocks/video/video.svelte

@@ -27,6 +27,40 @@
 </script>
 
 <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) => {
+      if (filter(attr)) {
+        validAttr[attr] = attrs[attr];
+      }
+    });
+    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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let autoPlay: VideoProps["autoPlay"];
   export let muted: VideoProps["muted"];
   export let controls: VideoProps["controls"];
@@ -96,7 +130,8 @@
     // not have the video overflow
     borderRadius: 1,
   }}
-  {...spreadProps()}
+  {...filterAttrs(spreadProps(), isNonEvent)}
   src={video || "no-src"}
   poster={posterImage}
+  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

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

@@ -34,6 +34,27 @@
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
+  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);
+        attrKeys.map(teardown);
+        attrKeys.map(setup);
+      },
+      destroy() {
+        attrKeys.map(teardown);
+      },
+    };
+  };
+
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
@@ -71,14 +92,16 @@
           shouldEvaluateBindings: true,
         });
   };
+  $: actions = () => {
+    return getBlockActions({
+      block: useBlock(),
+      state: context.state,
+      context: context.context,
+    });
+  };
   $: attributes = () => {
     return {
       ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: context.state,
-        context: context.context,
-      }),
       ...(TARGET === "reactNative"
         ? {
             style: getReactNativeBlockStyles({
@@ -105,7 +128,10 @@
         ...(shouldWrap()
           ? {}
           : {
-              attributes: attributes(),
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
             }),
       },
       context: childrenContext(),
@@ -198,7 +224,7 @@
 
 {#if shouldWrap()}
   {#if isEmptyHtmlElement(tag())}
-    <svelte:element this={tag()} {...attributes()} />
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
@@ -208,7 +234,7 @@
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
-    <svelte:element this={tag()} {...attributes()}>
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}