@builder.io/sdk-svelte 4.2.1 → 4.2.4

package/lib/node/functions/get-content/generate-content-url.js

@@ -20,15 +20,10 @@ export const generateContentUrl = (options) => {
     url.searchParams.set('limit', String(limit));
     url.searchParams.set('noTraverse', String(noTraverse));
     url.searchParams.set('includeRefs', String(true));
-    const finalLocale = locale || userAttributes?.locale;
-    let finalUserAttributes = userAttributes || {};
-    if (finalLocale) {
-        url.searchParams.set('locale', finalLocale);
-        finalUserAttributes = {
-            locale: finalLocale,
-            ...finalUserAttributes
-        };
+    if (locale) {
+        url.searchParams.set('locale', locale);
     }
+    let finalUserAttributes = userAttributes || {};
     if (enrich)
         url.searchParams.set('enrich', String(enrich));
     url.searchParams.set('omit', omit ?? 'meta.componentsUsed');

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

@@ -12,6 +12,14 @@ const checkContentHasResults = (content) => 'results' in content;
  * Returns the first content entry that matches the given options.
  */
 export async function fetchOneEntry(options) {
+    const finalLocale = options.locale || options.userAttributes?.locale;
+    if (finalLocale) {
+        options.locale = finalLocale;
+        options.userAttributes = {
+            locale: finalLocale,
+            ...options.userAttributes
+        };
+    }
     const allContent = await fetchEntries({
         ...options,
         limit: 1

package/lib/node/functions/is-previewing.d.ts

@@ -1,2 +1,12 @@
 import type { Search } from '../helpers/search/search';
-export declare function isPreviewing(_search?: Search): boolean;
+/**
+ * Checks the current URL's search parameters to see if it is attempting to
+ * preview Builder Content.
+ *
+ * When called on the client, it uses `window.location.search`.
+ * When called on the server (SSR), it requires a `search` argument.
+ *
+ * @param search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters.
+ * @returns `true` if the current page is being previewed, `false` otherwise.
+ */
+export declare function isPreviewing(search?: Search): boolean;

package/lib/node/functions/is-previewing.js

@@ -1,14 +1,24 @@
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-export function isPreviewing(_search) {
-    const search = _search || (isBrowser() ? window.location.search : undefined);
+/**
+ * Checks the current URL's search parameters to see if it is attempting to
+ * preview Builder Content.
+ *
+ * When called on the client, it uses `window.location.search`.
+ * When called on the server (SSR), it requires a `search` argument.
+ *
+ * @param search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters.
+ * @returns `true` if the current page is being previewed, `false` otherwise.
+ */
+export function isPreviewing(search) {
+    const searchToUse = search || (isBrowser() ? window.location.search : undefined);
     /**
      * If this function is called on the server without an explicit `search` argument,
      * then it can't check if the user is previewing, and will return `false`.
      */
-    if (!search) {
+    if (!searchToUse) {
         return false;
     }
-    const normalizedSearch = getSearchString(search);
+    const normalizedSearch = getSearchString(searchToUse);
     return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }

package/lib/node/helpers/find-block.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderBlock, BuilderContent } from '../server-index';
+/**
+ * Recursively searches for a block by ID.
+ *
+ * @param content The Builder content to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ */
+export declare const findBlockById: (content: BuilderContent, id: string) => BuilderBlock | null;
+/**
+ * Helper function to recursively search through block tree.
+ *
+ * @param blocks The blocks to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ * @private This is an internal implementation detail.
+ */
+export declare const findBlockInTree: (blocks: BuilderBlock[] | undefined, id: string) => BuilderBlock | null;

package/lib/node/helpers/find-block.js

@@ -0,0 +1,41 @@
+/**
+ * Recursively searches for a block by ID.
+ *
+ * @param content The Builder content to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ */
+export const findBlockById = (content, id) => {
+    return findBlockInTree(content.data?.blocks, id);
+};
+/**
+ * Helper function to recursively search through block tree.
+ *
+ * @param blocks The blocks to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ * @private This is an internal implementation detail.
+ */
+export const findBlockInTree = (blocks, id) => {
+    if (!blocks)
+        return null;
+    for (const block of blocks) {
+        if (block.id === id)
+            return block;
+        if (block.children) {
+            const child = findBlockInTree(block.children, id);
+            if (child)
+                return child;
+        }
+        if (block.component?.name === 'Columns' && block.component?.options?.columns) {
+            for (const column of block.component.options.columns) {
+                if (column.blocks) {
+                    const child = findBlockInTree(column.blocks, id);
+                    if (child)
+                        return child;
+                }
+            }
+        }
+    }
+    return null;
+};

package/lib/node/helpers/subscribe-to-editor.d.ts

@@ -2,10 +2,11 @@ import type { ContentProps } from '../components/content/content.types';
 import type { BuilderAnimation } from '../types/builder-block';
 import type { BuilderContent } from '../types/builder-content';
 import type { Dictionary } from '../types/typescript';
+export type EditType = 'client' | 'server' | undefined;
 type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
     callbacks: {
-        contentUpdate: (updatedContent: BuilderContent) => void;
-        stateUpdate: (newState: Dictionary<string>) => void;
+        contentUpdate: (updatedContent: BuilderContent, editType?: EditType) => void;
+        stateUpdate: (newState: Dictionary<string>, editType?: EditType) => void;
         animation: (updatedContent: BuilderAnimation) => void;
         configureSdk: (updatedContent: any) => void;
     };

package/lib/node/helpers/subscribe-to-editor.js

@@ -25,8 +25,9 @@ export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
                         const messageContent = data.data;
                         const modelName = messageContent.model;
                         const newState = messageContent?.state;
+                        const editType = messageContent.editType;
                         if (modelName === model && newState) {
-                            callbacks.stateUpdate(newState);
+                            callbacks.stateUpdate(newState, editType);
                         }
                         break;
                     }
@@ -35,8 +36,9 @@ export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
                         const messageContent = data.data;
                         const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
                         const contentData = messageContent.data;
+                        const editType = messageContent.editType;
                         if (key === model) {
-                            callbacks.contentUpdate(contentData);
+                            callbacks.contentUpdate(contentData, editType);
                         }
                         break;
                     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/form/form/form.svelte

@@ -87,6 +87,9 @@
   function submissionState() {
     return (isEditing() && previewState) || formState;
   }
+  function errorResponse(response: any) {
+    return JSON.stringify(response, null, 2);
+  }
   function onSubmit(event: any) {
     const sendWithJsProp = sendWithJs || sendSubmissionsTo === "email";
     if (sendSubmissionsTo === "zapier") {
@@ -351,11 +354,7 @@
     />
   {/if}
   {#if submissionState() === "error" && responseData}
-    <pre class="builder-form-error-text pre">{JSON.stringify(
-        responseData,
-        null,
-        2
-      )}</pre>
+    <pre class="builder-form-error-text pre">{errorResponse(responseData)}</pre>
   {/if}
   {#if submissionState() === "success"}
     <Blocks

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

@@ -1,7 +1,6 @@
 import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
@@ -11,7 +10,38 @@ export const componentInfo: ComponentInfo = {
     type: 'file',
     allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
+  }, {
+    name: 'backgroundSize',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: [{
+      label: 'contain',
+      value: 'contain',
+      helperText: 'The image should never get cropped'
+    }, {
+      label: 'cover',
+      value: 'cover',
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: 'backgroundPosition',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'altText',
+    type: 'string',
+    helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'title',
+    type: 'string',
+    helperText: 'Text to display when hovering over the asset'
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
   }],
-  noWrap: true,
-  static: true
+  noWrap: true
 }

package/src/blocks/img/img.svelte

@@ -19,6 +19,8 @@
       | "top right"
       | "bottom left"
       | "bottom right";
+    aspectRatio?: number;
+    title?: string;
   }
 </script>
 
@@ -26,14 +28,16 @@
   import { isEditing } from "../../functions/is-editing";
   import { filterAttrs } from "../helpers";
   import { getSrcSet } from "../image/image.helpers";
-  import { setAttrs } from "../helpers";
+  import { getClassPropName } from "../../functions/get-class-prop-name";
 
   export let imgSrc: ImgProps["imgSrc"] = undefined;
   export let image: ImgProps["image"] = undefined;
+  export let attributes: ImgProps["attributes"] = undefined;
+  export let altText: ImgProps["altText"] = undefined;
+  export let title: ImgProps["title"] = undefined;
   export let backgroundSize: ImgProps["backgroundSize"] = undefined;
   export let backgroundPosition: ImgProps["backgroundPosition"] = undefined;
-  export let altText: ImgProps["altText"] = undefined;
-  export let attributes: ImgProps["attributes"] = undefined;
+  export let aspectRatio: ImgProps["aspectRatio"] = undefined;
   function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -57,6 +61,17 @@
     }
     return getSrcSet(url);
   };
+  $: imgAttrs = () => {
+    const attrs = {
+      ...filterAttrs(attributes, "on:", false),
+      ...filterAttrs(attributes, "on:", true),
+      [getClassPropName()]: `builder-raw-img ${
+        attributes[getClassPropName()] || ""
+      }`,
+    } as Record<string, any>;
+    delete attrs.style;
+    return attrs;
+  };
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -64,12 +79,13 @@
     style={stringifyStyles({
       objectFit: backgroundSize || "cover",
       objectPosition: backgroundPosition || "center",
+      aspectRatio: aspectRatio || undefined,
+      ...(attributes?.style || {}),
     })}
     loading="lazy"
     alt={altText}
+    {title}
     src={imgSrc || image}
-    srcSet={srcSetToUse()}
-    {...filterAttrs(attributes, "on:", false)}
-    use:setAttrs={filterAttrs(attributes, "on:", true)}
+    {...imgAttrs()}
   />
 {/key}

package/src/blocks/symbol/symbol.svelte

@@ -12,11 +12,11 @@
   import type { SymbolProps } from "./symbol.types";
 
   export let symbol: SymbolProps["symbol"] = undefined;
+  export let builderComponents: SymbolProps["builderComponents"];
   export let attributes: SymbolProps["attributes"] = undefined;
   export let dynamic: SymbolProps["dynamic"] = undefined;
   export let builderContext: SymbolProps["builderContext"];
   export let builderBlock: SymbolProps["builderBlock"];
-  export let builderComponents: SymbolProps["builderComponents"];
   export let builderLinkComponent: SymbolProps["builderLinkComponent"] =
     undefined;
 
@@ -38,6 +38,9 @@
   $: contentWrapper = () => {
     return "div";
   };
+  $: customComponents = () => {
+    return Object.values(builderComponents);
+  };
   $: className = () => {
     return [
       ...[attributes[getClassPropName()]],
@@ -78,7 +81,7 @@
       ...$builderContext.context,
       symbolId: builderBlock?.id,
     }}
-    customComponents={Object.values(builderComponents)}
+    customComponents={customComponents()}
     data={{
       ...symbol?.data,
       ...$builderContext.localState,

package/src/blocks/symbol/symbol.types.ts

@@ -1,6 +1,6 @@
 import type { BuilderContent } from '../../types/builder-content';
 import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
-interface SymbolInfo {
+export interface SymbolInfo {
   model?: string;
   entry?: string;
   data?: any;

package/src/blocks/tabs/tabs.svelte

@@ -5,9 +5,9 @@
 
   export let defaultActiveTab: TabsProps["defaultActiveTab"] = undefined;
   export let tabs: TabsProps["tabs"];
+  export let activeTabStyle: TabsProps["activeTabStyle"] = undefined;
   export let collapsible: TabsProps["collapsible"] = undefined;
   export let tabHeaderLayout: TabsProps["tabHeaderLayout"] = undefined;
-  export let activeTabStyle: TabsProps["activeTabStyle"] = undefined;
   export let builderBlock: TabsProps["builderBlock"];
   export let builderContext: TabsProps["builderContext"];
   export let builderComponents: TabsProps["builderComponents"];
@@ -27,6 +27,9 @@
   function activeTabContent(active: number) {
     return tabs && tabs[active].content;
   }
+  function getTabStyle(index: number) {
+    return index === activeTab ? activeTabStyle : {};
+  }
   function onClick(index: number) {
     if (index === activeTab && collapsible) {
       activeTab = -1;
@@ -50,9 +53,7 @@
   >
     {#each tabs as tab, index (index)}
       <span
-        style={stringifyStyles({
-          ...(activeTab === index ? activeTabStyle : {}),
-        })}
+        style={stringifyStyles(getTabStyle(index))}
         class={`builder-tab-wrap ${
           activeTab === index ? "builder-tab-active" : ""
         }`}

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

@@ -7,7 +7,6 @@ export const componentInfo: ComponentInfo = {
   } : {},
   name: 'Text',
   static: true,
-  isRSC: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
   inputs: [{
     name: 'text',

package/src/components/awaiter.types.ts

@@ -0,0 +1,7 @@
+export type AwaiterProps = {
+  load: () => Promise<any>;
+  props?: any;
+  attributes?: any;
+  fallback?: any;
+  children?: any;
+}

package/src/components/block/block.svelte

@@ -31,11 +31,11 @@
     provideLinkComponent,
     provideRegisteredComponents,
   } from "./block.helpers";
-  import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
   import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
   import ComponentRef from "./components/component-ref/component-ref.svelte";
   import RepeatedBlock from "./components/repeated-block.svelte";
+  import StyleWrapper from "./components/style-wrapper.svelte";
   import type { Writable } from "svelte/store";
 
   export let block: BlockProps["block"];
@@ -148,7 +148,7 @@
 </script>
 
 {#if canShowBlock()}
-  <BlockStyles block={processedBlock()} context={$context} />
+  <StyleWrapper block={processedBlock()} context={$context} id={block.id} />
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}

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

@@ -5,22 +5,18 @@
   import type { ComponentProps } from "./component-ref.helpers";
   import { getWrapperProps } from "./component-ref.helpers";
 
-  export let componentOptions: ComponentProps["componentOptions"];
-  export let blockChildren: ComponentProps["blockChildren"];
   export let isInteractive: ComponentProps["isInteractive"];
   export let componentRef: ComponentProps["componentRef"];
+  export let componentOptions: ComponentProps["componentOptions"];
   export let builderBlock: ComponentProps["builderBlock"];
   export let context: ComponentProps["context"];
   export let linkComponent: ComponentProps["linkComponent"];
   export let includeBlockProps: ComponentProps["includeBlockProps"];
+  export let blockChildren: ComponentProps["blockChildren"];
   export let registeredComponents: ComponentProps["registeredComponents"];
 
   let shouldUpdate = false;
   let Wrapper = isInteractive ? InteractiveElement : componentRef;
-
-  function onUpdateFn_0(..._args: any[]) {}
-
-  $: onUpdateFn_0(...[componentOptions, blockChildren]);
 </script>
 
 {#if componentRef}
@@ -37,8 +33,10 @@
       contextValue: $context,
     })}
   >
-    {#each blockChildren as child (child.id)}
-      <Block block={child} {context} {registeredComponents} {linkComponent} />
-    {/each}
-  </svelte:component>
+    {#if componentRef}
+      {#each blockChildren as child (child.id)}
+        <Block block={child} {context} {registeredComponents} {linkComponent} />
+      {/each}
+    {/if}</svelte:component
+  >
 {/if}

package/src/components/block/components/interactive-element.svelte

@@ -10,12 +10,15 @@
 </script>
 
 <script lang="ts">
+  import { TARGET } from "../../../constants/target";
   import type { BuilderContextInterface } from "../../../context/types";
   import { getBlockActions } from "../../../functions/get-block-actions";
   import { getBlockProperties } from "../../../functions/get-block-properties";
+  import { isEditing } from "../../../server-index";
   import type { BuilderBlock } from "../../../types/builder-block";
   import type { Dictionary } from "../../../types/typescript";
   import Awaiter from "../../awaiter.svelte";
+  import LiveEdit from "../../live-edit.svelte";
   import type { Writable } from "svelte/store";
 
   export let wrapperProps: InteractiveElementProps["wrapperProps"];
@@ -59,6 +62,10 @@
     props={wrapperProps}
     attributes={attributes()}><slot /></Awaiter
   >
+{:else if TARGET === "rsc" && isEditing()}
+  <LiveEdit {Wrapper} id={block.id || ""} attributes={attributes()}
+    ><slot /></LiveEdit
+  >
 {:else}
   <svelte:component
     this={Wrapper}

package/src/components/block/components/live-edit-block-styles.svelte

@@ -0,0 +1,146 @@
+<script context="module" lang="ts">
+  type LiveEditBlockStylesProps = {
+    id?: any;
+    contextProvider: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  import {
+    getMaxWidthQueryForSize,
+    getSizesForBreakpoints,
+  } from "../../../constants/device-sizes";
+  import { TARGET } from "../../../constants/target";
+  import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
+  import { getProcessedBlock } from "../../../functions/get-processed-block";
+  import { createCssClass } from "../../../helpers/css";
+  import { findBlockById } from "../../../helpers/find-block";
+  import { checkIsDefined } from "../../../helpers/nullable";
+  import type {
+    BuilderBlock,
+    BuilderContextInterface,
+  } from "../../../server-index";
+  import InlinedStyles from "../../inlined-styles.svelte";
+
+  export let contextProvider: LiveEditBlockStylesProps["contextProvider"];
+  export let id: LiveEditBlockStylesProps["id"] = undefined;
+
+  $: block = () => {
+    return findBlockById(contextProvider.content!, id);
+  };
+  $: processedBlock = () => {
+    const foundBlock = block();
+    if (!foundBlock) {
+      return null;
+    }
+    const blockToUse = foundBlock.repeat?.collection
+      ? foundBlock
+      : getProcessedBlock({
+          block: foundBlock,
+          localState: contextProvider.localState,
+          rootState: contextProvider.rootState,
+          rootSetState: contextProvider.rootSetState,
+          context: contextProvider.context,
+        });
+    return blockToUse;
+  };
+  $: canShowBlock = () => {
+    if (checkIsDefined(processedBlock?.()?.hide)) {
+      return !processedBlock?.()?.hide;
+    }
+    if (checkIsDefined(processedBlock?.()?.show)) {
+      return processedBlock?.()?.show;
+    }
+    return true;
+  };
+  $: css = () => {
+    const styles = processedBlock?.()?.responsiveStyles;
+    const content = contextProvider.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
+    const className = processedBlock?.()?.id;
+    if (!className) {
+      return "";
+    }
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const xsmallStylesClass =
+      xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "xsmall",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+    const hoverAnimation =
+      processedBlock().animations &&
+      processedBlock().animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+      const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+      hoverStylesClass =
+        createCssClass({
+          className: `${className}:hover`,
+          styles: {
+            ...hoverStyles,
+            transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
+              hoverAnimation.easing
+            )}`,
+            transitionDelay: hoverAnimation.delay
+              ? `${hoverAnimation.delay}s`
+              : "0s",
+          },
+        }) || "";
+    }
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass,
+      xsmallStylesClass,
+      hoverStylesClass,
+    ].join(" ");
+  };
+</script>
+
+{#if TARGET === "rsc" && css() && canShowBlock()}
+  <InlinedStyles
+    id="builderio-block"
+    styles={css()}
+    nonce={contextProvider.nonce}
+  />
+{/if}