@builder.io/sdk-svelte 0.0.7 → 0.0.9-0

package/package/functions/evaluate.js

@@ -1,6 +1,6 @@
 import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
-export function evaluate({ code, context, state, event, }) {
+export function evaluate({ code, context, state, event, isExpression = true, }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -12,14 +12,17 @@ export function evaluate({ code, context, state, event, }) {
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = !(code.includes(';') ||
-        code.includes(' return ') ||
-        code.trim().startsWith('return '));
+    const useReturn = 
+    // we disable this for cases where we definitely don't want a return
+    isExpression &&
+        !(code.includes(';') ||
+            code.includes(' return ') ||
+            code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
         return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
     }
     catch (e) {
-        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }

package/package/functions/event-handler-name.js

@@ -1,4 +1 @@
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-export const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export const getEventHandlerName = (key) => `on:${key.toLowerCase()}`;

package/package/functions/get-block-actions-handler.d.ts

@@ -1,5 +1,8 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function crateEventHandler(value: string, options: {
+declare type Options = {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): (event: Event) => any;
+} & Pick<BuilderContextInterface, 'state' | 'context'>;
+declare type EventHandler = (event: Event) => any;
+export declare const createEventHandler: (value: string, options: Options) => EventHandler;
+export {};

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

@@ -1,9 +1,8 @@
 import { evaluate } from './evaluate.js';
-export function crateEventHandler(value, options) {
-    return (event) => evaluate({
-        code: value,
-        context: options.context,
-        state: options.state,
-        event,
-    });
-}
+export const createEventHandler = (value, options) => (event) => evaluate({
+    code: value,
+    context: options.context,
+    state: options.state,
+    event,
+    isExpression: false,
+});

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/scripts/init-editing.d.ts

@@ -1,2 +1,5 @@
 export declare const registerInsertMenu: () => void;
-export declare const setupBrowserForEditing: () => void;
+export declare const setupBrowserForEditing: (options?: {
+    includeRefs?: boolean;
+    locale?: string;
+}) => void;

package/package/scripts/init-editing.js

@@ -22,7 +22,7 @@ export const registerInsertMenu = () => {
     });
 };
 let isSetupForEditing = false;
-export const setupBrowserForEditing = () => {
+export const setupBrowserForEditing = (options = {}) => {
     if (isSetupForEditing) {
         return;
     }
@@ -42,6 +42,12 @@ export const setupBrowserForEditing = () => {
                 supportsCustomBreakpoints: true,
             },
         }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options,
+            },
+        }, '*');
         window.addEventListener('message', ({ data }) => {
             if (!data?.type) {
                 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.9-0",
   "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)}
+/>