@builder.io/sdk-svelte 0.0.5 → 0.0.7

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.5",
+  "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

@@ -57,14 +57,13 @@
     components,
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
-  import { track } from "../../functions/track.js";
+  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: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -131,11 +130,14 @@
   }
   function onClick(_event) {
     if (useContent()) {
-      track({
+      const variationId = useContent?.()?.testVariationId;
+      const contentId = useContent?.()?.id;
+      _track({
         type: "click",
         canTrack: canTrackToUse(),
-        contentId: useContent?.()?.id,
-        orgId: apiKey,
+        contentId,
+        apiKey: apiKey,
+        variationId: variationId !== contentId ? variationId : undefined,
       });
     }
   }
@@ -259,7 +261,6 @@
     if (isBrowser()) {
       if (isEditing()) {
         forceReRenderCount = forceReRenderCount + 1;
-        // QWIK-REPLACE: _useMutableProps
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach(
@@ -275,11 +276,14 @@
         );
       }
       if (useContent()) {
-        track({
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
           type: "impression",
           canTrack: canTrackToUse(),
-          contentId: useContent?.()?.id,
-          orgId: apiKey,
+          contentId,
+          apiKey: apiKey,
+          variationId: variationId !== contentId ? variationId : undefined,
         });
       }
 
@@ -347,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