@builder.io/sdk-svelte 0.0.6 → 0.0.7

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.6",
   "type": "module",
   "files": [
     "package",
@@ -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",

package/package/blocks/button/button.svelte

@@ -8,15 +8,15 @@ export let openLinkInNewTab;
 
 {#if link}
   <a
-    {...attributes}
     role="button"
+    {...attributes}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
   >
     {text}
   </a>
 {:else}
-  <button {...attributes} class="button">
+  <button class="button" {...attributes}>
     {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

@@ -217,7 +217,6 @@ let formErrorMessage = "";
 </script>
 
 <form
-  {...attributes}
   {validate}
   bind:this={formRef}
   action={!sendWithJs && action}
@@ -226,6 +225,7 @@ let formErrorMessage = "";
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...attributes}
 >
   {#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

@@ -20,7 +20,6 @@ function mitosis_styling(node, vars) {
 </script>
 
 <img
-  {...attributes}
   use:mitosis_styling={{
     objectFit: backgroundSize || "cover",
     objectPosition: backgroundPosition || "center",
@@ -28,4 +27,5 @@ function mitosis_styling(node, vars) {
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
+  {...attributes}
 />

package/package/blocks/section/section.svelte

@@ -15,12 +15,12 @@ function mitosis_styling(node, vars) {
 </script>
 
 <section
-  {...attributes}
   use:mitosis_styling={maxWidth && typeof maxWidth === "number"
     ? {
         maxWidth: maxWidth,
       }
     : undefined}
+  {...attributes}
 >
   <slot />
 </section>

package/package/blocks/submit-button/submit-button.svelte

@@ -4,6 +4,6 @@
 export let text;
 </script>
 
-<button {...attributes} type="submit">
+<button type="submit" {...attributes}>
   {text}
 </button>

package/package/blocks/symbol/symbol.svelte

@@ -4,7 +4,6 @@
 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";
 export let symbol;
 export let attributes;
 let builderContext = getContext(BuilderContext.key);
@@ -52,15 +51,13 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
   <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/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

@@ -58,7 +58,6 @@ $: spreadProps = () => {
 </script>
 
 <video
-  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -69,6 +68,7 @@ $: spreadProps = () => {
     // not have the video overflow
     borderRadius: 1,
   }}
+  {...spreadProps()}
   src={video || "no-src"}
   poster={posterImage}
 />

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(" ");

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

@@ -38,7 +38,7 @@ $: component = () => {
         return ref;
     }
 };
-$: tagName = () => {
+$: tag = () => {
     return getBlockTag(useBlock());
 };
 $: useBlock = () => {
@@ -74,7 +74,7 @@ $: shouldWrap = () => {
 };
 $: renderComponentProps = () => {
     return {
-        blockChildren: children(),
+        blockChildren: useChildren(),
         componentRef: component?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(useBlock()),
@@ -91,7 +91,7 @@ $: renderComponentProps = () => {
         context: childrenContext(),
     };
 };
-$: children = () => {
+$: useChildren = () => {
     // TO-DO: When should `canHaveChildren` dictate rendering?
     // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
     // but still receive and need to render children.
@@ -106,7 +106,7 @@ $: childrenWithoutParentComponent = () => {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef = !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
 };
 $: repeatItemData = () => {
     /**
@@ -177,18 +177,18 @@ $: renderComponentTag = () => {
 </script>
 
 {#if shouldWrap()}
-  {#if isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()} />
+  {#if isEmptyHtmlElement(tag())}
+    <svelte:element this={tag()} {...attributes()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
     {#each repeatItemData() as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && !repeatItemData()}
-    <svelte:element this={tagName()} {...attributes()}>
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+    <svelte:element this={tag()} {...attributes()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}

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

@@ -2,7 +2,6 @@
 
 <script>import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
-import { markPropsMutable } from "../../functions/mark-mutable.js";
 export let componentRef;
 export let componentOptions;
 export let blockChildren;
@@ -10,7 +9,7 @@ export let context;
 </script>
 
 {#if componentRef}
-  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
+  <svelte:component this={componentRef} {...componentOptions}>
     {#each blockChildren as child ("render-block-" + child.id)}
       <RenderBlock block={child} {context} />
     {/each}

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

@@ -0,0 +1,4 @@
+<script>"use strict";
+</script>
+
+<div />

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BuilderEditingProps = typeof __propDef.props;
+export declare type BuilderEditingEvents = typeof __propDef.events;
+export declare type BuilderEditingSlots = typeof __propDef.slots;
+export default class BuilderEditing extends SvelteComponentTyped<BuilderEditingProps, BuilderEditingEvents, BuilderEditingSlots> {
+}
+export {};

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

@@ -15,7 +15,6 @@ import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
 export let content;
 export let data;
 export let canTrack;
@@ -196,7 +195,6 @@ onMount(() => {
     if (isBrowser()) {
         if (isEditing()) {
             forceReRenderCount = forceReRenderCount + 1;
-            // QWIK-REPLACE: _useMutableProps
             registerInsertMenu();
             setupBrowserForEditing();
             Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
@@ -275,7 +273,7 @@ onDestroy(() => {
       />
     {/if}
     <RenderBlocks
-      blocks={markMutable(useContent?.()?.data?.blocks)}
+      blocks={useContent?.()?.data?.blocks}
       key={forceReRenderCount}
     />
   </div>

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

@@ -3,9 +3,9 @@
 <script>import { TARGET } from "../constants/target.js";
 export let styles;
 $: injectedStyleScript = () => {
-    return `<${tagName()}>${styles}</${tagName()}>`;
+    return `<${tag()}>${styles}</${tag()}>`;
 };
-$: tagName = () => {
+$: tag = () => {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
@@ -15,5 +15,5 @@ $: tagName = () => {
 {#if TARGET === "svelte"}
   {@html injectedStyleScript()}
 {:else}
-  <svelte:element this={tagName()}>{styles}</svelte:element>
+  <svelte:element this={tag()}>{styles}</svelte:element>
 {/if}

package/package/constants/device-sizes.d.ts

@@ -1,2 +1,13 @@
 export declare type SizeName = 'large' | 'medium' | 'small';
-export declare const getMaxWidthQueryForSize: (size: SizeName) => string;
+interface Size {
+    min: number;
+    default: number;
+    max: number;
+}
+export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
+interface Breakpoints {
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export {};

package/package/constants/device-sizes.js

@@ -1,3 +1,4 @@
+import { fastClone } from '../functions/fast-clone';
 const SIZES = {
     small: {
         min: 320,
@@ -15,4 +16,29 @@ const SIZES = {
         max: 1200,
     },
 };
-export const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+export const getSizesForBreakpoints = ({ small, medium }) => {
+    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!small || !medium) {
+        return newSizes;
+    }
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1,
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1,
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2000,
+        min: largeMin,
+        default: largeMin + 1,
+    };
+    return newSizes;
+};

package/package/functions/get-content/index.js

@@ -6,8 +6,11 @@ export async function getContent(options) {
     return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
 }
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, } = options;
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, } = options;
+    if (!apiKey) {
+        throw new Error('Missing API key');
+    }
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {}),

package/package/functions/get-content/types.d.ts

@@ -28,4 +28,8 @@ export interface GetContentOptions {
      * Defaults to `true`.
      */
     canTrack?: boolean;
+    /**
+     * Include references in the response. Defaults to `true`.
+     */
+    includeRefs?: boolean;
 }

package/package/functions/register-component.js

@@ -1,3 +1,4 @@
+import { serializeFn } from '../blocks/util.js';
 import { fastClone } from './fast-clone.js';
 /**
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
@@ -16,19 +17,6 @@ export const createRegisterComponentMessage = ({ component: _, ...info }) => ({
     data: prepareComponentInfoToSend(info),
 });
 const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-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)`;
-};
 const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
     ...fastClone(info),
     inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({

package/package/index.d.ts

@@ -1,4 +1,4 @@
-import './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file.js';
 import './scripts/init-editing.js';
 export * from './index-helpers/blocks-exports.js';
 export * from './functions/is-editing.js';
@@ -9,3 +9,5 @@ export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track';
+export type { RegisteredComponent } from './context/types';
+export type { ComponentInfo } from './types/components';

package/package/index.js

@@ -1,4 +1,4 @@
-import './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file.js';
 import './scripts/init-editing.js';
 export * from './index-helpers/blocks-exports.js';
 export * from './functions/is-editing.js';

package/package/scripts/init-editing.js

@@ -21,7 +21,12 @@ export const registerInsertMenu = () => {
         ],
     });
 };
+let isSetupForEditing = false;
 export const setupBrowserForEditing = () => {
+    if (isSetupForEditing) {
+        return;
+    }
+    isSetupForEditing = true;
     if (isBrowser()) {
         window.parent?.postMessage({
             type: 'builder.sdkInfo',
@@ -34,6 +39,7 @@ export const setupBrowserForEditing = () => {
                 // Supports builder-model="..." attribute which is needed to
                 // scope our '+ add block' button styling
                 supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true,
             },
         }, '*');
         window.addEventListener('message', ({ data }) => {

package/package/types/builder-content.d.ts

@@ -18,6 +18,13 @@ export interface BuilderContentVariation {
     name?: string;
     testRatio?: number;
     id?: string;
+    meta?: {
+        breakpoints?: {
+            small: number;
+            medium: number;
+        };
+        [key: string]: any;
+    };
 }
 export interface BuilderContent extends BuilderContentVariation {
     '@version'?: number;

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",

package/src/blocks/button/button.svelte

@@ -16,15 +16,15 @@
 
 {#if link}
   <a
-    {...attributes}
     role="button"
+    {...attributes}
     href={link}
     target={openLinkInNewTab ? "_blank" : undefined}
   >
     {text}
   </a>
 {:else}
-  <button {...attributes} class="button">
+  <button class="button" {...attributes}>
     {text}
   </button>
 {/if}

package/src/blocks/columns/columns.svelte

@@ -28,7 +28,6 @@
 
 <script lang="ts">
   import RenderBlocks from "../../components/render-blocks.svelte";
-  import { markMutable } from "../../functions/mark-mutable";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
@@ -101,7 +100,7 @@
       class="builder-column div-2"
     >
       <RenderBlocks
-        blocks={markMutable(column.blocks)}
+        blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{

package/src/blocks/columns/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 = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
@@ -194,7 +194,7 @@ export const componentInfo: ComponentInfo = {
           ],
         },
       ],
-      onChange: markSerializable((options: Map<string, any>) => {
+      onChange: serializeFn((options: Map<string, any>) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete('width');

package/src/blocks/embed/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: 'Embed',
@@ -12,7 +12,7 @@ export const componentInfo: ComponentInfo = {
       required: true,
       defaultValue: '',
       helperText: 'e.g. enter a youtube url, google map, etc',
-      onChange: markSerializable((options: Map<string, any>) => {
+      onChange: serializeFn((options: Map<string, any>) => {
         const url = options.get('url');
         if (url) {
           options.set('content', 'Loading...');

package/src/blocks/form/form.svelte

@@ -288,7 +288,6 @@
 </script>
 
 <form
-  {...attributes}
   {validate}
   bind:this={formRef}
   action={!sendWithJs && action}
@@ -297,6 +296,7 @@
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...attributes}
 >
   {#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

@@ -40,7 +40,6 @@
 </script>
 
 <img
-  {...attributes}
   use:mitosis_styling={{
     objectFit: backgroundSize || "cover",
     objectPosition: backgroundPosition || "center",
@@ -48,4 +47,5 @@
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
+  {...attributes}
 />

package/src/blocks/section/section.svelte

@@ -23,12 +23,12 @@
 </script>
 
 <section
-  {...attributes}
   use:mitosis_styling={maxWidth && typeof maxWidth === "number"
     ? {
         maxWidth: maxWidth,
       }
     : undefined}
+  {...attributes}
 >
   <slot />
 </section>

package/src/blocks/submit-button/submit-button.svelte

@@ -10,6 +10,6 @@
   export let text: ButtonProps["text"];
 </script>
 
-<button {...attributes} type="submit">
+<button type="submit" {...attributes}>
   {text}
 </button>

package/src/blocks/symbol/symbol.svelte

@@ -30,7 +30,6 @@
   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";
 
   export let symbol: SymbolProps["symbol"];
   export let attributes: SymbolProps["attributes"];
@@ -86,15 +85,13 @@
   <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/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

@@ -86,7 +86,6 @@
 </script>
 
 <video
-  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -97,6 +96,7 @@
     // not have the video overflow
     borderRadius: 1,
   }}
+  {...spreadProps()}
   src={video || "no-src"}
   poster={posterImage}
 />

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(" ");

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

@@ -58,7 +58,7 @@
       return ref;
     }
   };
-  $: tagName = () => {
+  $: tag = () => {
     return getBlockTag(useBlock());
   };
   $: useBlock = () => {
@@ -94,7 +94,7 @@
   };
   $: renderComponentProps = () => {
     return {
-      blockChildren: children(),
+      blockChildren: useChildren(),
       componentRef: component?.()?.component,
       componentOptions: {
         ...getBlockComponentOptions(useBlock()),
@@ -111,7 +111,7 @@
       context: childrenContext(),
     };
   };
-  $: children = () => {
+  $: useChildren = () => {
     // TO-DO: When should `canHaveChildren` dictate rendering?
     // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
     // but still receive and need to render children.
@@ -127,7 +127,7 @@
      */
     const shouldRenderChildrenOutsideRef =
       !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
   };
   $: repeatItemData = () => {
     /**
@@ -197,18 +197,18 @@
 </script>
 
 {#if shouldWrap()}
-  {#if isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()} />
+  {#if isEmptyHtmlElement(tag())}
+    <svelte:element this={tag()} {...attributes()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
     {#each repeatItemData() as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tagName()) && !repeatItemData()}
-    <svelte:element this={tagName()} {...attributes()}>
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+    <svelte:element this={tag()} {...attributes()}>
       <svelte:component
         this={renderComponentTag()}
         {...renderComponentProps()}

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

@@ -14,7 +14,6 @@
 <script lang="ts">
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
-  import { markPropsMutable } from "../../functions/mark-mutable.js";
 
   export let componentRef: RenderComponentProps["componentRef"];
   export let componentOptions: RenderComponentProps["componentOptions"];
@@ -23,7 +22,7 @@
 </script>
 
 {#if componentRef}
-  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
+  <svelte:component this={componentRef} {...componentOptions}>
     {#each blockChildren as child ("render-block-" + child.id)}
       <RenderBlock block={child} {context} />
     {/each}

package/src/components/render-content/builder-editing.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div />

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

@@ -64,7 +64,6 @@
     registerInsertMenu,
     setupBrowserForEditing,
   } from "../../scripts/init-editing.js";
-  import { markMutable } from "../../functions/mark-mutable.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -262,7 +261,6 @@
     if (isBrowser()) {
       if (isEditing()) {
         forceReRenderCount = forceReRenderCount + 1;
-        // QWIK-REPLACE: _useMutableProps
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach(
@@ -353,7 +351,7 @@
       />
     {/if}
     <RenderBlocks
-      blocks={markMutable(useContent?.()?.data?.blocks)}
+      blocks={useContent?.()?.data?.blocks}
       key={forceReRenderCount}
     />
   </div>

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

@@ -10,9 +10,9 @@
   export let styles: Props["styles"];
 
   $: injectedStyleScript = () => {
-    return `<${tagName()}>${styles}</${tagName()}>`;
+    return `<${tag()}>${styles}</${tag()}>`;
   };
-  $: tagName = () => {
+  $: tag = () => {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
@@ -22,5 +22,5 @@
 {#if TARGET === "svelte"}
   {@html injectedStyleScript()}
 {:else}
-  <svelte:element this={tagName()}>{styles}</svelte:element>
+  <svelte:element this={tag()}>{styles}</svelte:element>
 {/if}

package/src/constants/device-sizes.ts

@@ -1,3 +1,4 @@
+import { fastClone } from '../functions/fast-clone';
 export type SizeName = 'large' | 'medium' | 'small';
 
 interface Size {
@@ -24,5 +25,41 @@ const SIZES: Record<SizeName, Size> = {
   },
 };
 
-export const getMaxWidthQueryForSize = (size: SizeName) =>
-  `@media (max-width: ${SIZES[size].max}px)`;
+export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) =>
+  `@media (max-width: ${sizeValues[size].max}px)`;
+
+interface Breakpoints {
+  small?: number;
+  medium?: number;
+}
+
+export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
+  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+
+  if (!small || !medium) {
+    return newSizes;
+  }
+
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1,
+  };
+
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1,
+  };
+
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2000, // TODO: decide upper limit
+    min: largeMin,
+    default: largeMin + 1,
+  };
+
+  return newSizes;
+};

package/src/functions/get-content/index.ts

@@ -23,10 +23,15 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     noTraverse = false,
     model,
     apiKey,
+    includeRefs = true,
   } = options;
 
+  if (!apiKey) {
+    throw new Error('Missing API key');
+  }
+
   const url = new URL(
-    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`
+    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`
   );
 
   const queryOptions = {

package/src/functions/get-content/types.ts

@@ -33,4 +33,9 @@ export interface GetContentOptions {
    * Defaults to `true`.
    */
   canTrack?: boolean;
+
+  /**
+   * Include references in the response. Defaults to `true`.
+   */
+  includeRefs?: boolean;
 }

package/src/functions/register-component.ts

@@ -1,3 +1,4 @@
+import { serializeFn } from '../blocks/util.js';
 import type { RegisteredComponent } from '../context/types.js';
 import type { ComponentInfo, Input } from '../types/components.js';
 import { fastClone } from './fast-clone.js';
@@ -31,24 +32,6 @@ export const createRegisterComponentMessage = ({
 const serializeValue = (value: object): any =>
   typeof value === 'function' ? serializeFn(value) : fastClone(value);
 
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-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)`;
-};
-
 const prepareComponentInfoToSend = ({
   inputs,
   ...info

package/src/index.ts

@@ -1,4 +1,4 @@
-import './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file.js';
 import './scripts/init-editing.js';
 
 export * from './index-helpers/blocks-exports.js';
@@ -11,3 +11,5 @@ export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track';
+export type { RegisteredComponent } from './context/types';
+export type { ComponentInfo } from './types/components';

package/src/scripts/init-editing.ts

@@ -23,7 +23,12 @@ export const registerInsertMenu = () => {
   });
 };
 
+let isSetupForEditing = false;
 export const setupBrowserForEditing = () => {
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
   if (isBrowser()) {
     window.parent?.postMessage(
       {
@@ -37,6 +42,7 @@ export const setupBrowserForEditing = () => {
           // Supports builder-model="..." attribute which is needed to
           // scope our '+ add block' button styling
           supportsAddBlockScoping: true,
+          supportsCustomBreakpoints: true,
         },
       },
       '*'

package/src/types/builder-content.ts

@@ -17,6 +17,13 @@ export interface BuilderContentVariation {
   name?: string;
   testRatio?: number;
   id?: string;
+  meta?: {
+    breakpoints?: {
+      small: number;
+      medium: number;
+    };
+    [key: string]: any;
+  };
 }
 
 // TODO: separate full and partial versions