@builder.io/sdk-svelte 4.1.3 → 4.2.3

package/lib/edge/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/lib/edge/server-index.d.ts

@@ -25,7 +25,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';

package/lib/edge/server-index.js

@@ -5,7 +5,7 @@ export * from './index-helpers/top-of-file';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
 export { track } from './functions/track/index';

package/lib/node/blocks/form/form/form.svelte

@@ -44,6 +44,9 @@ function mergeNewRootState(newData) {
 function submissionState() {
     return (isEditing() && previewState) || formState;
 }
+function errorResponse(response) {
+    return JSON.stringify(response, null, 2);
+}
 function onSubmit(event) {
     const sendWithJsProp = sendWithJs || sendSubmissionsTo === "email";
     if (sendSubmissionsTo === "zapier") {
@@ -62,13 +65,16 @@ function onSubmit(event) {
         // TODO: maybe support null
         const formPairs = Array.from(el.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
+            .filter((el) => !!el.name &&
+            (el.type !== "radio" ||
+                el.checked))
             .map((el) => {
             let value;
             const key = el.name;
             if (el instanceof HTMLInputElement) {
                 if (el.type === "radio") {
                     if (el.checked) {
-                        value = el.name;
+                        value = el.value;
                         return {
                             key,
                             value,
@@ -288,11 +294,7 @@ let formErrorMessage = "";
     />
   {/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/lib/node/blocks/img/component-info.js

@@ -1,6 +1,5 @@
 import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 export const 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',
@@ -10,7 +9,38 @@ export const 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/lib/node/blocks/img/img.svelte

@@ -6,13 +6,15 @@
 <script>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 = undefined;
 export let image = undefined;
+export let attributes = undefined;
+export let altText = undefined;
+export let title = undefined;
 export let backgroundSize = undefined;
 export let backgroundPosition = undefined;
-export let altText = undefined;
-export let attributes = undefined;
+export let aspectRatio = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -34,6 +36,15 @@ $: srcSetToUse = () => {
     }
     return getSrcSet(url);
 };
+$: imgAttrs = () => {
+    const attrs = {
+        ...filterAttrs(attributes, "on:", false),
+        ...filterAttrs(attributes, "on:", true),
+        [getClassPropName()]: `builder-raw-img ${attributes[getClassPropName()] || ""}`,
+    };
+    delete attrs.style;
+    return attrs;
+};
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -41,12 +52,13 @@ $: srcSetToUse = () => {
     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/lib/node/blocks/symbol/symbol.svelte

@@ -6,11 +6,11 @@ import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
 import { fetchSymbolContent } from "./symbol.helpers";
 export let symbol = undefined;
+export let builderComponents;
 export let attributes = undefined;
 export let dynamic = undefined;
 export let builderContext;
 export let builderBlock;
-export let builderComponents;
 export let builderLinkComponent = undefined;
 function setContent() {
     if (contentToUse && symbolEntry === symbol?.entry)
@@ -31,6 +31,9 @@ $: blocksWrapper = () => {
 $: contentWrapper = () => {
     return "div";
 };
+$: customComponents = () => {
+    return Object.values(builderComponents);
+};
 $: className = () => {
     return [
         ...[attributes[getClassPropName()]],
@@ -67,7 +70,7 @@ $: onUpdateFn_0(...[symbol]);
       ...$builderContext.context,
       symbolId: builderBlock?.id,
     }}
-    customComponents={Object.values(builderComponents)}
+    customComponents={customComponents()}
     data={{
       ...symbol?.data,
       ...$builderContext.localState,

package/lib/node/blocks/symbol/symbol.svelte.d.ts

@@ -3,11 +3,11 @@ import type { SymbolProps } from "./symbol.types";
 declare const __propDef: {
     props: {
         symbol?: SymbolProps["symbol"];
+        builderComponents: SymbolProps["builderComponents"];
         attributes?: SymbolProps["attributes"];
         dynamic?: SymbolProps["dynamic"];
         builderContext: SymbolProps["builderContext"];
         builderBlock: SymbolProps["builderBlock"];
-        builderComponents: SymbolProps["builderComponents"];
         builderLinkComponent?: SymbolProps["builderLinkComponent"];
     };
     events: {

package/lib/node/blocks/symbol/symbol.types.d.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;
@@ -16,4 +16,3 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
     inheritState?: boolean;
     renderToLiquid?: boolean;
 }
-export {};

package/lib/node/blocks/tabs/tabs.svelte

@@ -1,9 +1,9 @@
 <script>import Blocks from "../../components/blocks/blocks.svelte";
 export let defaultActiveTab = undefined;
 export let tabs;
+export let activeTabStyle = undefined;
 export let collapsible = undefined;
 export let tabHeaderLayout = undefined;
-export let activeTabStyle = undefined;
 export let builderBlock;
 export let builderContext;
 export let builderComponents;
@@ -21,6 +21,9 @@ function stringifyStyles(stylesObj) {
 function activeTabContent(active) {
     return tabs && tabs[active].content;
 }
+function getTabStyle(index) {
+    return index === activeTab ? activeTabStyle : {};
+}
 function onClick(index) {
     if (index === activeTab && collapsible) {
         activeTab = -1;
@@ -44,9 +47,7 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
   >
     {#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/lib/node/blocks/tabs/tabs.svelte.d.ts

@@ -4,9 +4,9 @@ declare const __propDef: {
     props: {
         defaultActiveTab?: TabsProps["defaultActiveTab"];
         tabs: TabsProps["tabs"];
+        activeTabStyle?: TabsProps["activeTabStyle"];
         collapsible?: TabsProps["collapsible"];
         tabHeaderLayout?: TabsProps["tabHeaderLayout"];
-        activeTabStyle?: TabsProps["activeTabStyle"];
         builderBlock: TabsProps["builderBlock"];
         builderContext: TabsProps["builderContext"];
         builderComponents: TabsProps["builderComponents"];

package/lib/node/blocks/text/component-info.js

@@ -6,7 +6,6 @@ export const 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/lib/node/components/awaiter.types.d.ts

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

package/lib/node/components/awaiter.types.js

@@ -0,0 +1 @@
+export {};

package/lib/node/components/block/block.svelte

@@ -8,10 +8,10 @@ import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
 import { generateKey, getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
-import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
 import RepeatedBlock from "./components/repeated-block.svelte";
+import StyleWrapper from "./components/style-wrapper.svelte";
 export let block;
 export let context;
 export let registeredComponents;
@@ -109,7 +109,7 @@ afterUpdate(() => { });
 </script>
 
 {#if canShowBlock()}
-  <BlockStyles block={processedBlock()} context={$context} />
+  <StyleWrapper block={processedBlock()} context={$context} id={block.id} />
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}

package/lib/node/components/block/components/component-ref/component-ref.svelte

@@ -2,19 +2,17 @@
 import Block from "../../block.svelte";
 import InteractiveElement from "../interactive-element.svelte";
 import { getWrapperProps } from "./component-ref.helpers";
-export let componentOptions;
-export let blockChildren;
 export let isInteractive;
 export let componentRef;
+export let componentOptions;
 export let builderBlock;
 export let context;
 export let linkComponent;
 export let includeBlockProps;
+export let blockChildren;
 export let registeredComponents;
 let shouldUpdate = false;
 let Wrapper = isInteractive ? InteractiveElement : componentRef;
-function onUpdateFn_0(..._args) { }
-$: onUpdateFn_0(...[componentOptions, blockChildren]);
 </script>
 
 {#if componentRef}
@@ -31,8 +29,10 @@ $: onUpdateFn_0(...[componentOptions, blockChildren]);
       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/lib/node/components/block/components/component-ref/component-ref.svelte.d.ts

@@ -2,14 +2,14 @@ import { SvelteComponent } from "svelte";
 import type { ComponentProps } from "./component-ref.helpers";
 declare const __propDef: {
     props: {
-        componentOptions: ComponentProps["componentOptions"];
-        blockChildren: ComponentProps["blockChildren"];
         isInteractive: ComponentProps["isInteractive"];
         componentRef: ComponentProps["componentRef"];
+        componentOptions: ComponentProps["componentOptions"];
         builderBlock: ComponentProps["builderBlock"];
         context: ComponentProps["context"];
         linkComponent: ComponentProps["linkComponent"];
         includeBlockProps: ComponentProps["includeBlockProps"];
+        blockChildren: ComponentProps["blockChildren"];
         registeredComponents: ComponentProps["registeredComponents"];
     };
     events: {

package/lib/node/components/block/components/interactive-element.svelte

@@ -1,8 +1,11 @@
 <script context="module"></script>
 
-<script>import { getBlockActions } from "../../../functions/get-block-actions";
+<script>import { TARGET } from "../../../constants/target";
+import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import { isEditing } from "../../../server-index";
 import Awaiter from "../../awaiter.svelte";
+import LiveEdit from "../../live-edit.svelte";
 export let wrapperProps;
 export let block;
 export let includeBlockProps;
@@ -40,6 +43,10 @@ $: onUpdateFn_0(...[wrapperProps, block?.component?.options]);
     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/lib/node/components/block/components/live-edit-block-styles.svelte

@@ -0,0 +1,114 @@
+<script context="module"></script>
+
+<script>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 InlinedStyles from "../../inlined-styles.svelte";
+export let contextProvider;
+export let 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}

package/lib/node/components/block/components/live-edit-block-styles.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+type LiveEditBlockStylesProps = {
+    id?: any;
+    contextProvider: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../../server-index";
+declare const __propDef: {
+    props: {
+        contextProvider: LiveEditBlockStylesProps["contextProvider"];
+        id?: LiveEditBlockStylesProps["id"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type LiveEditBlockStylesProps_ = typeof __propDef.props;
+export { LiveEditBlockStylesProps_ as LiveEditBlockStylesProps };
+export type LiveEditBlockStylesEvents = typeof __propDef.events;
+export type LiveEditBlockStylesSlots = typeof __propDef.slots;
+export default class LiveEditBlockStyles extends SvelteComponent<LiveEditBlockStylesProps, LiveEditBlockStylesEvents, LiveEditBlockStylesSlots> {
+}

package/lib/node/components/block/components/style-wrapper.svelte

@@ -0,0 +1,25 @@
+<script context="module"></script>
+
+<script>import { getContext, onMount } from "svelte";
+import { TARGET } from "../../../constants/target";
+import { BuilderContext } from "../../../context/index";
+import "../../../server-index";
+import BlockStyles from "./block-styles.svelte";
+import LiveEditBlockStyles from "./live-edit-block-styles.svelte";
+export let block;
+export let context;
+let contextProvider = getContext(BuilderContext.key);
+let isClientEditing = false;
+let isHydrated = false;
+onMount(() => { });
+</script>
+
+{#if isHydrated}
+  {#if TARGET === "rsc" && isClientEditing}
+    <LiveEditBlockStyles id={block.id} contextProvider={$contextProvider} />
+  {:else}
+    <BlockStyles {block} {context} />
+  {/if}
+{:else}
+  <BlockStyles {block} {context} />
+{/if}

package/lib/node/components/block/components/style-wrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+type StyleWrapperProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    id?: string;
+};
+import { BuilderBlock, BuilderContextInterface } from "../../../server-index";
+declare const __propDef: {
+    props: {
+        block: StyleWrapperProps["block"];
+        context: StyleWrapperProps["context"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type StyleWrapperProps_ = typeof __propDef.props;
+export { StyleWrapperProps_ as StyleWrapperProps };
+export type StyleWrapperEvents = typeof __propDef.events;
+export type StyleWrapperSlots = typeof __propDef.slots;
+export default class StyleWrapper extends SvelteComponent<StyleWrapperProps, StyleWrapperEvents, StyleWrapperSlots> {
+}