@builder.io/sdk-svelte 0.0.6 → 0.0.8

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

@@ -14,6 +14,22 @@ import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponentWithContext from "./render-component-with-context.svelte";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+const setAttrs = (node, attrs) => {
+    const attrKeys = Object.keys(attrs);
+    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
+    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
+    attrKeys.map(setup);
+    return {
+        update(attrs) {
+            const attrKeys = Object.keys(attrs);
+            attrKeys.map(teardown);
+            attrKeys.map(setup);
+        },
+        destroy() {
+            attrKeys.map(teardown);
+        },
+    };
+};
 export let block;
 export let context;
 $: component = () => {
@@ -38,7 +54,7 @@ $: component = () => {
         return ref;
     }
 };
-$: tagName = () => {
+$: tag = () => {
     return getBlockTag(useBlock());
 };
 $: useBlock = () => {
@@ -51,14 +67,16 @@ $: useBlock = () => {
             shouldEvaluateBindings: true,
         });
 };
+$: actions = () => {
+    return getBlockActions({
+        block: useBlock(),
+        state: context.state,
+        context: context.context,
+    });
+};
 $: attributes = () => {
     return {
         ...getBlockProperties(useBlock()),
-        ...getBlockActions({
-            block: useBlock(),
-            state: context.state,
-            context: context.context,
-        }),
         ...(TARGET === "reactNative"
             ? {
                 style: getReactNativeBlockStyles({
@@ -74,7 +92,7 @@ $: shouldWrap = () => {
 };
 $: renderComponentProps = () => {
     return {
-        blockChildren: children(),
+        blockChildren: useChildren(),
         componentRef: component?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(useBlock()),
@@ -85,13 +103,16 @@ $: renderComponentProps = () => {
             ...(shouldWrap()
                 ? {}
                 : {
-                    attributes: attributes(),
+                    attributes: {
+                        ...attributes(),
+                        ...actions(),
+                    },
                 }),
         },
         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 +127,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 +198,18 @@ $: renderComponentTag = () => {
 </script>
 
 {#if shouldWrap()}
-  {#if isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()} />
+  {#if isEmptyHtmlElement(tag())}
+    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/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()} use:setAttrs={actions()}>
       <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

@@ -3,7 +3,6 @@
 <script>import { onDestroy, onMount, setContext, } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } from "../../functions/get-fetch.js";
@@ -14,8 +13,8 @@ import { components, createRegisterComponentMessage, } from "../../functions/reg
 import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
+import BuilderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
 export let content;
 export let data;
 export let canTrack;
@@ -193,10 +192,12 @@ let overrideContent = null;
 let update = 0;
 let overrideState = {};
 onMount(() => {
+    if (!apiKey) {
+        console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+    }
     if (isBrowser()) {
         if (isEditing()) {
             forceReRenderCount = forceReRenderCount + 1;
-            // QWIK-REPLACE: _useMutableProps
             registerInsertMenu();
             setupBrowserForEditing();
             Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
@@ -242,7 +243,7 @@ onMount(() => {
 function onUpdateFn_0() {
     evaluateJsCode();
 }
-$: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+$: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
 function onUpdateFn_1() {
     runHttpRequests();
 }
@@ -275,7 +276,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/evaluate.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
-export declare function evaluate({ code, context, state, event, }: {
+export declare function evaluate({ code, context, state, event, isExpression, }: {
     code: string;
     event?: Event;
+    isExpression?: boolean;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): any;

package/package/functions/evaluate.js

@@ -1,6 +1,6 @@
 import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
-export function evaluate({ code, context, state, event, }) {
+export function evaluate({ code, context, state, event, isExpression = true, }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -12,14 +12,17 @@ export function evaluate({ code, context, state, event, }) {
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = !(code.includes(';') ||
-        code.includes(' return ') ||
-        code.trim().startsWith('return '));
+    const useReturn = 
+    // we disable this for cases where we definitely don't want a return
+    isExpression &&
+        !(code.includes(';') ||
+            code.includes(' return ') ||
+            code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
         return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
     }
     catch (e) {
-        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }

package/package/functions/event-handler-name.js

@@ -1,4 +1 @@
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-export const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export const getEventHandlerName = (key) => `on:${key.toLowerCase()}`;

package/package/functions/get-block-actions-handler.d.ts

@@ -1,5 +1,8 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function crateEventHandler(value: string, options: {
+declare type Options = {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): (event: Event) => any;
+} & Pick<BuilderContextInterface, 'state' | 'context'>;
+declare type EventHandler = (event: Event) => any;
+export declare const createEventHandler: (value: string, options: Options) => EventHandler;
+export {};

package/package/functions/get-block-actions-handler.js

@@ -1,9 +1,8 @@
 import { evaluate } from './evaluate.js';
-export function crateEventHandler(value, options) {
-    return (event) => evaluate({
-        code: value,
-        context: options.context,
-        state: options.state,
-        event,
-    });
-}
+export const createEventHandler = (value, options) => (event) => evaluate({
+    code: value,
+    context: options.context,
+    state: options.state,
+    event,
+    isExpression: false,
+});

package/package/functions/get-block-actions.js

@@ -1,5 +1,5 @@
 import { getEventHandlerName } from './event-handler-name.js';
-import { crateEventHandler } from './get-block-actions-handler.js';
+import { createEventHandler } from './get-block-actions-handler.js';
 export function getBlockActions(options) {
     const obj = {};
     const optionActions = options.block.actions ?? {};
@@ -9,7 +9,7 @@ export function getBlockActions(options) {
             continue;
         }
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
     }
     return obj;
 }

package/package/functions/get-builder-search-params/index.d.ts

@@ -1,4 +1,4 @@
-declare type QueryObject = Record<string, string>;
+declare type QueryObject = Record<string, string | string[]>;
 export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
 export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
 export declare const getBuilderSearchParamsFromWindow: () => QueryObject;

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

@@ -1,6 +1,11 @@
 import type { CanTrack } from '../types/can-track.js';
 interface Event {
-    type: 'click' | 'impression';
+    /**
+     * The type of your event.
+     *
+     * Examples: `click`, `conversion`, `pageview`, `impression`
+     */
+    type: string;
     data: {
         /**
          * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.

package/package/functions/track.js

@@ -24,6 +24,10 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
     },
 });
 export async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        return;
+    }
     if (!eventProps.canTrack) {
         return;
     }

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.8",
   "type": "module",
   "files": [
     "package",
@@ -15,7 +15,7 @@
   },
   "main": "./package/index.js",
   "module": "./package/index.js",
-  "svelte": "./src/index.ts",
+  "svelte": "./package/index.js",
   "exports": {
     "./src": {
       "import": "./src/index.js",

package/src/blocks/button/button.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: ButtonProps["attributes"];
   export let text: ButtonProps["text"];
   export let link: ButtonProps["link"];
@@ -16,15 +50,20 @@
 
 {#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/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...');