@builder.io/sdk-svelte 0.0.6 → 0.0.8

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

@@ -34,6 +34,27 @@
   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: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
@@ -58,7 +79,7 @@
       return ref;
     }
   };
-  $: tagName = () => {
+  $: tag = () => {
     return getBlockTag(useBlock());
   };
   $: useBlock = () => {
@@ -71,14 +92,16 @@
           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({
@@ -94,7 +117,7 @@
   };
   $: renderComponentProps = () => {
     return {
-      blockChildren: children(),
+      blockChildren: useChildren(),
       componentRef: component?.()?.component,
       componentOptions: {
         ...getBlockComponentOptions(useBlock()),
@@ -105,13 +128,16 @@
         ...(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.
@@ -127,7 +153,7 @@
      */
     const shouldRenderChildrenOutsideRef =
       !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
   };
   $: repeatItemData = () => {
     /**
@@ -197,18 +223,18 @@
 </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/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

@@ -46,7 +46,6 @@
 
   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";
@@ -60,11 +59,11 @@
   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: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -259,10 +258,14 @@
   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(
@@ -316,7 +319,7 @@
   function onUpdateFn_0() {
     evaluateJsCode();
   }
-  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
   function onUpdateFn_1() {
     runHttpRequests();
   }
@@ -353,7 +356,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/evaluate.ts

@@ -7,9 +7,11 @@ export function evaluate({
   context,
   state,
   event,
+  isExpression = true,
 }: {
   code: string;
   event?: Event;
+  isExpression?: boolean;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): any {
   if (code === '') {
     console.warn('Skipping evaluation of empty code block.');
@@ -24,11 +26,14 @@ export function evaluate({
 
   // 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;
 
@@ -46,7 +51,7 @@ export function evaluate({
       'Builder custom code error: \n While Evaluating: \n ',
       useCode,
       '\n',
-      (e as any).message || e
+      e
     );
   }
 }

package/src/functions/event-handler-name.ts

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

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

@@ -2,18 +2,19 @@ import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { evaluate } from './evaluate.js';
 
-export function crateEventHandler(
-  value: string,
-  options: { block: BuilderBlock } & Pick<
-    BuilderContextInterface,
-    'state' | 'context'
-  >
-): (event: Event) => any {
-  return (event: Event) =>
+type Options = {
+  block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>;
+
+type EventHandler = (event: Event) => any;
+
+export const createEventHandler =
+  (value: string, options: Options): EventHandler =>
+  (event) =>
     evaluate({
       code: value,
       context: options.context,
       state: options.state,
       event,
+      isExpression: false,
     });
-}

package/src/functions/get-block-actions.ts

@@ -1,7 +1,7 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { getEventHandlerName } from './event-handler-name.js';
-import { crateEventHandler } from './get-block-actions-handler.js';
+import { createEventHandler } from './get-block-actions-handler.js';
 
 type Actions = { [index: string]: (event: Event) => any };
 
@@ -19,7 +19,7 @@ export function getBlockActions(
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+    obj[getEventHandlerName(key)] = createEventHandler(value, options);
   }
   return obj;
 }

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

@@ -2,7 +2,7 @@ import { isBrowser } from '../is-browser.js';
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
 
-type QueryObject = Record<string, string>;
+type QueryObject = Record<string, string | string[]>;
 
 export const convertSearchParamsToQueryObject = (
   searchParams: URLSearchParams

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

@@ -6,7 +6,12 @@ import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.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.
@@ -95,6 +100,13 @@ const createEvent = async ({
 });
 
 export async function _track(eventProps: 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/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

package/package/functions/mark-mutable.d.ts

@@ -1,2 +0,0 @@
-export declare function markMutable<T = any>(value: T): T;
-export declare function markPropsMutable<T = any>(props: T): T;

package/package/functions/mark-mutable.js

@@ -1,6 +0,0 @@
-export function markMutable(value) {
-    return value;
-}
-export function markPropsMutable(props) {
-    return props;
-}

package/src/functions/mark-mutable.ts

@@ -1,7 +0,0 @@
-export function markMutable<T = any>(value: T): T {
-  return value;
-}
-
-export function markPropsMutable<T = any>(props: T): T {
-  return props;
-}