@builder.io/sdk-svelte 0.0.7 → 0.0.8

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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": {
     "./package.json": "./package.json",
     "./src": {
@@ -108,7 +108,6 @@
     "./functions/is-editing": "./functions/is-editing.js",
     "./functions/is-iframe": "./functions/is-iframe.js",
     "./functions/is-previewing": "./functions/is-previewing.js",
-    "./functions/mark-mutable": "./functions/mark-mutable.js",
     "./functions/on-change.test": "./functions/on-change.test.js",
     "./functions/on-change": "./functions/on-change.js",
     "./functions/register-component": "./functions/register-component.js",

package/package/blocks/button/button.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
-<script>export let attributes;
+<script>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;
 export let text;
 export let link;
 export let openLinkInNewTab;
@@ -9,14 +36,19 @@ export let openLinkInNewTab;
 {#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/package/blocks/form/form.svelte

@@ -6,6 +6,33 @@
 import RenderBlock from "../../components/render-block/render-block.svelte";
 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;
 export let sendWithJs;
 export let sendSubmissionsTo;
@@ -225,7 +252,8 @@ let formErrorMessage = "";
   on:submit={(event) => {
     onSubmit(event);
   }}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block}

package/package/blocks/img/img.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
 <script>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;
 export let backgroundPosition;
 export let imgSrc;
@@ -27,5 +54,6 @@ function mitosis_styling(node, vars) {
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 />

package/package/blocks/input/input.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
 <script>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;
 export let defaultValue;
 export let placeholder;
@@ -11,7 +38,7 @@ export let required;
 </script>
 
 <input
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {placeholder}
   {type}
@@ -19,4 +46,5 @@ export let required;
   {value}
   {defaultValue}
   {required}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 />

package/package/blocks/section/section.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
-<script>export let attributes;
+<script>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;
 export let maxWidth;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -20,7 +47,8 @@ function mitosis_styling(node, vars) {
         maxWidth: maxWidth,
       }
     : undefined}
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <slot />
 </section>

package/package/blocks/select/select.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
 <script>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;
 export let value;
 export let defaultValue;
@@ -9,11 +36,12 @@ export let options;
 </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/package/blocks/submit-button/submit-button.svelte

@@ -1,9 +1,40 @@
 <script context="module"></script>
 
-<script>export let attributes;
+<script>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;
 export let text;
 </script>
 
-<button type="submit" {...attributes}>
+<button
+  type="submit"
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
+>
   {text}
 </button>

package/package/blocks/symbol/symbol.svelte

@@ -4,6 +4,33 @@
 import RenderContent from "../../components/render-content/render-content.svelte";
 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;
 export let attributes;
 let builderContext = getContext(BuilderContext.key);
@@ -42,11 +69,12 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
 </script>
 
 <div
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
     class: className,
   }}
   class={className}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
     apiKey={builderContext.apiKey}

package/package/blocks/textarea/textarea.svelte

@@ -1,10 +1,44 @@
 <script context="module"></script>
 
-<script>export let attributes;
+<script>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;
 export let placeholder;
 export let name;
 export let value;
 export let defaultValue;
 </script>
 
-<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />
+<textarea
+  {...filterAttrs(attributes, isNonEvent)}
+  {placeholder}
+  {name}
+  {value}
+  {defaultValue}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
+/>

package/package/blocks/video/video.svelte

@@ -1,6 +1,33 @@
 <script context="module"></script>
 
-<script>export let autoPlay;
+<script>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;
 export let muted;
 export let controls;
 export let loop;
@@ -68,7 +95,8 @@ $: spreadProps = () => {
     // not have the video overflow
     borderRadius: 1,
   }}
-  {...spreadProps()}
+  {...filterAttrs(spreadProps(), isNonEvent)}
   src={video || "no-src"}
   poster={posterImage}
+  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

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

@@ -14,6 +14,22 @@ import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponentWithContext from "./render-component-with-context.svelte";
 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;
 export let context;
 $: component = () => {
@@ -51,14 +67,16 @@ $: useBlock = () => {
             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({
@@ -85,7 +103,10 @@ $: renderComponentProps = () => {
             ...(shouldWrap()
                 ? {}
                 : {
-                    attributes: attributes(),
+                    attributes: {
+                        ...attributes(),
+                        ...actions(),
+                    },
                 }),
         },
         context: childrenContext(),
@@ -178,7 +199,7 @@ $: renderComponentTag = () => {
 
 {#if shouldWrap()}
   {#if isEmptyHtmlElement(tag())}
-    <svelte:element this={tag()} {...attributes()} />
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
@@ -188,7 +209,7 @@ $: renderComponentTag = () => {
   {/if}
 
   {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
-    <svelte:element this={tag()} {...attributes()}>
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}

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

@@ -3,7 +3,6 @@
 <script>import { onDestroy, onMount, setContext, } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } from "../../functions/get-fetch.js";
@@ -14,6 +13,7 @@ import { components, createRegisterComponentMessage, } from "../../functions/reg
 import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
+import BuilderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 export let content;
 export let data;
@@ -192,6 +192,9 @@ let overrideContent = null;
 let update = 0;
 let overrideState = {};
 onMount(() => {
+    if (!apiKey) {
+        console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+    }
     if (isBrowser()) {
         if (isEditing()) {
             forceReRenderCount = forceReRenderCount + 1;
@@ -240,7 +243,7 @@ onMount(() => {
 function onUpdateFn_0() {
     evaluateJsCode();
 }
-$: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+$: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
 function onUpdateFn_1() {
     runHttpRequests();
 }

package/package/functions/evaluate.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
-export declare function evaluate({ code, context, state, event, }: {
+export declare function evaluate({ code, context, state, event, isExpression, }: {
     code: string;
     event?: Event;
+    isExpression?: boolean;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): any;

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,
+});