@builder.io/sdk-svelte 0.0.6 → 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.5",
+  "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": {
@@ -72,6 +72,7 @@
     "./components/render-block/render-repeated-block.svelte": "./components/render-block/render-repeated-block.svelte",
     "./components/render-block/types": "./components/render-block/types.js",
     "./components/render-blocks.svelte": "./components/render-blocks.svelte",
+    "./components/render-content/builder-editing.svelte": "./components/render-content/builder-editing.svelte",
     "./components/render-content/components/render-styles.svelte": "./components/render-content/components/render-styles.svelte",
     "./components/render-content": "./components/render-content/index.js",
     "./components/render-content/render-content.svelte": "./components/render-content/render-content.svelte",
@@ -107,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;
@@ -8,15 +35,20 @@ export let openLinkInNewTab;
 
 {#if link}
   <a
-    {...attributes}
     role="button"
+    {...filterAttrs(attributes, isNonEvent)}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
+    use:setAttrs={filterAttrs(attributes, isEvent)}
   >
     {text}
   </a>
 {:else}
-  <button {...attributes} class="button">
+  <button
+    class="button"
+    {...filterAttrs(attributes, isNonEvent)}
+    use:setAttrs={filterAttrs(attributes, isEvent)}
+  >
     {text}
   </button>
 {/if}

package/package/blocks/columns/columns.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
 <script>import RenderBlocks from "../../components/render-blocks.svelte";
-import { markMutable } from "../../functions/mark-mutable";
 export let space;
 export let columns;
 export let stackColumnsAt;
@@ -71,7 +70,7 @@ $: columnCssVars = () => {
       class="builder-column div-2"
     >
       <RenderBlocks
-        blocks={markMutable(column.blocks)}
+        blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{

package/package/blocks/columns/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     // TODO: ways to statically preprocess JSON for references, functions, etc
     name: 'Columns',
@@ -188,7 +188,7 @@ export const componentInfo = {
                     ],
                 },
             ],
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 function clearWidths() {
                     columns.forEach((col) => {
                         col.delete('width');

package/package/blocks/embed/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Embed',
     static: true,
@@ -10,7 +10,7 @@ export const componentInfo = {
             required: true,
             defaultValue: '',
             helperText: 'e.g. enter a youtube url, google map, etc',
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');

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;
@@ -217,7 +244,6 @@ let formErrorMessage = "";
 </script>
 
 <form
-  {...attributes}
   {validate}
   bind:this={formRef}
   action={!sendWithJs && action}
@@ -226,6 +252,8 @@ let formErrorMessage = "";
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block}

package/package/blocks/image/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Image',
     static: true,
@@ -19,7 +19,7 @@ export const componentInfo = {
             allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-            onChange: markSerializable((options) => {
+            onChange: serializeFn((options) => {
                 const DEFAULT_ASPECT_RATIO = 0.7041;
                 options.delete('srcset');
                 options.delete('noWebp');

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;
@@ -20,7 +47,6 @@ function mitosis_styling(node, vars) {
 </script>
 
 <img
-  {...attributes}
   use:mitosis_styling={{
     objectFit: backgroundSize || "cover",
     objectPosition: backgroundPosition || "center",
@@ -28,4 +54,6 @@ function mitosis_styling(node, vars) {
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
+  {...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]) => {
@@ -15,12 +42,13 @@ function mitosis_styling(node, vars) {
 </script>
 
 <section
-  {...attributes}
   use:mitosis_styling={maxWidth && typeof maxWidth === "number"
     ? {
         maxWidth: maxWidth,
       }
     : undefined}
+  {...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 {...attributes} type="submit">
+<button
+  type="submit"
+  {...filterAttrs(attributes, isNonEvent)}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
+>
   {text}
 </button>

package/package/blocks/symbol/symbol.svelte

@@ -4,7 +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";
-import { markMutable } from "../../functions/mark-mutable";
+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);
@@ -43,24 +69,23 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
 </script>
 
 <div
-  {...attributes}
+  {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
     class: className,
   }}
   class={className}
+  use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
     apiKey={builderContext.apiKey}
     context={builderContext.context}
-    customComponents={markMutable(
-      Object.values(builderContext.registeredComponents)
-    )}
-    data={markMutable({
+    customComponents={Object.values(builderContext.registeredComponents)}
+    data={{
       ...symbol?.data,
       ...builderContext.state,
       ...symbol?.content?.data?.state,
-    })}
+    }}
     model={symbol?.model}
-    content={markMutable(contentToUse())}
+    content={contentToUse()}
   />
 </div>

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/util.d.ts

@@ -1 +1,4 @@
-export declare function markSerializable<FN extends (...args: any[]) => any>(fn: FN): FN;
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+export declare const serializeFn: (fnValue: Function) => string;

package/package/blocks/util.js

@@ -1,4 +1,13 @@
-export function markSerializable(fn) {
-    fn.__qwik_serializable__ = true;
-    return fn;
-}
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const serializeFn = (fnValue) => {
+    const fnStr = fnValue.toString().trim();
+    // we need to account for a few different fn syntaxes:
+    // 1. `function name(args) => {code}`
+    // 2. `name(args) => {code}`
+    // 3. `(args) => {}`
+    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
+    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
+};

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;
@@ -58,7 +85,6 @@ $: spreadProps = () => {
 </script>
 
 <video
-  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -69,6 +95,8 @@ $: spreadProps = () => {
     // not have the video overflow
     borderRadius: 1,
   }}
+  {...filterAttrs(spreadProps(), isNonEvent)}
   src={video || "no-src"}
   poster={posterImage}
+  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

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

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+<script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
@@ -17,6 +17,8 @@ $: useBlock = () => {
 };
 $: css = () => {
     const styles = useBlock().responsiveStyles;
+    const content = context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
@@ -31,14 +33,14 @@ $: css = () => {
         ? createCssClass({
             className,
             styles: mediumStyles,
-            mediaQuery: getMaxWidthQueryForSize("medium"),
+            mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
         })
         : "";
     const smallStylesClass = smallStyles
         ? createCssClass({
             className,
             styles: smallStyles,
-            mediaQuery: getMaxWidthQueryForSize("small"),
+            mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");