@builder.io/sdk-svelte 0.0.6 → 0.0.8

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

package/src/blocks/image/component-info.ts

@@ -1,5 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
-import { markSerializable } from '../util.js';
+import { serializeFn } from '../util.js';
 
 export const componentInfo: ComponentInfo = {
   name: 'Image',
@@ -23,7 +23,7 @@ export const componentInfo: ComponentInfo = {
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-      onChange: markSerializable((options: Map<string, any>) => {
+      onChange: serializeFn((options: Map<string, any>) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete('srcset');
         options.delete('noWebp');

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

package/src/blocks/symbol/symbol.svelte

@@ -30,7 +30,40 @@
   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: SymbolProps["symbol"];
   export let attributes: SymbolProps["attributes"];
@@ -77,24 +110,23 @@
 </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/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/util.ts

@@ -1,6 +1,18 @@
-export function markSerializable<FN extends (...args: any[]) => any>(
-  fn: FN
-): FN {
-  (fn as any).__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: Function) => {
+  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/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"];
@@ -86,7 +120,6 @@
 </script>
 
 <video
-  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -97,6 +130,8 @@
     // not have the video overflow
     borderRadius: 1,
   }}
+  {...filterAttrs(spreadProps(), isNonEvent)}
   src={video || "no-src"}
   poster={posterImage}
+  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

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

@@ -10,7 +10,10 @@
 </script>
 
 <script lang="ts">
-  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+  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";
@@ -29,6 +32,10 @@
   };
   $: 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;
@@ -43,14 +50,20 @@
       ? 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(" ");