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

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.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": {
     "./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,14 +13,17 @@ 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;
 export let canTrack;
+export let locale;
 export let context;
 export let customComponents;
 export let model;
 export let apiKey;
+export let includeRefs;
 setContext(BuilderContext.key, {
     get content() {
         return useContent();
@@ -155,6 +157,11 @@ $: contentState = () => {
     return {
         ...content?.data?.state,
         ...data,
+        ...(locale
+            ? {
+                locale: locale,
+            }
+            : {}),
         ...overrideState,
     };
 };
@@ -192,11 +199,25 @@ 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;
             registerInsertMenu();
-            setupBrowserForEditing();
+            setupBrowserForEditing({
+                ...(locale
+                    ? {
+                        locale: locale,
+                    }
+                    : {}),
+                ...(includeRefs
+                    ? {
+                        includeRefs: includeRefs,
+                    }
+                    : {}),
+            });
             Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
                 window.parent?.postMessage(message, "*");
@@ -240,7 +261,7 @@ onMount(() => {
 function onUpdateFn_0() {
     evaluateJsCode();
 }
-$: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+$: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
 function onUpdateFn_1() {
     runHttpRequests();
 }

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

@@ -12,16 +12,20 @@ export declare type RenderContentProps = {
     apiKey: string;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
+    locale?: string;
+    includeRefs?: boolean;
 };
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];
         data: RenderContentProps["data"];
         canTrack: RenderContentProps["canTrack"];
+        locale: RenderContentProps["locale"];
         context: RenderContentProps["context"];
         customComponents: RenderContentProps["customComponents"];
         model: RenderContentProps["model"];
         apiKey: RenderContentProps["apiKey"];
+        includeRefs: RenderContentProps["includeRefs"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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;