@builder.io/sdk-svelte 4.2.1 → 4.2.3

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}

package/src/components/block/components/style-wrapper.svelte

@@ -0,0 +1,41 @@
+<script context="module" lang="ts">
+  type StyleWrapperProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    id?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { getContext, onMount } from "svelte";
+
+  import { TARGET } from "../../../constants/target";
+  import { BuilderContext } from "../../../context/index";
+  import {
+    isEditing,
+    BuilderBlock,
+    BuilderContextInterface,
+  } from "../../../server-index";
+  import BlockStyles from "./block-styles.svelte";
+  import LiveEditBlockStyles from "./live-edit-block-styles.svelte";
+
+  export let block: StyleWrapperProps["block"];
+  export let context: StyleWrapperProps["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/src/components/content/components/enable-editor.svelte

@@ -53,7 +53,10 @@
   import { getDefaultCanTrack } from "../../../helpers/canTrack";
   import { getCookieSync } from "../../../helpers/cookie";
   import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
-  import { createEditorListener } from "../../../helpers/subscribe-to-editor";
+  import {
+    createEditorListener,
+    EditType,
+  } from "../../../helpers/subscribe-to-editor";
   import { setupBrowserForEditing } from "../../../scripts/init-editing";
   import type { BuilderContent } from "../../../types/builder-content";
   import type { ComponentInfo } from "../../../types/components";
@@ -96,7 +99,7 @@
     return styles;
   }
 
-  function mergeNewRootState(newData: Dictionary<any>) {
+  function mergeNewRootState(newData: Dictionary<any>, editType?: EditType) {
     const combinedState = {
       ...$builderContextSignal.rootState,
       ...newData,
@@ -106,8 +109,13 @@
     } else {
       $builderContextSignal.rootState = combinedState;
     }
+    if ($builderContextSignal.rootSetState) {
+      $builderContextSignal.rootSetState(combinedState);
+    } else {
+      $builderContextSignal.rootState = combinedState;
+    }
   }
-  function mergeNewContent(newContent: BuilderContent) {
+  function mergeNewContent(newContent: BuilderContent, editType?: EditType) {
     const newContentValue = {
       ...$builderContextSignal.content,
       ...newContent,
@@ -146,11 +154,11 @@
         animation: (animation) => {
           triggerAnimation(animation);
         },
-        contentUpdate: (newContent) => {
-          mergeNewContent(newContent);
+        contentUpdate: (newContent, editType) => {
+          mergeNewContent(newContent, editType);
         },
-        stateUpdate: (newState) => {
-          mergeNewRootState(newState);
+        stateUpdate: (newState, editType) => {
+          mergeNewRootState(newState, editType);
         },
       },
     })(event);
@@ -219,11 +227,15 @@
               method: "GET",
             };
         logFetch(JSON.stringify(fetchRequestObj));
-        fetch(fetchRequestObj.url, {
+        const fetchOptions = {
           method: fetchRequestObj.method,
           headers: fetchRequestObj.headers,
           body: fetchRequestObj.body,
-        })
+        };
+        if (fetchRequestObj.method === "GET") {
+          delete fetchOptions.body;
+        }
+        fetch(fetchRequestObj.url, fetchOptions)
           .then((response) => response.json())
           .then((json) => {
             mergeNewRootState({
@@ -352,6 +364,9 @@
   let elementRef;
 
   let hasExecuted = false;
+  let contextValue = $builderContextSignal;
+  let prevData = null;
+  let prevLocale = "";
   let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let httpReqsPending = {};
@@ -416,7 +431,11 @@
 
   function onUpdateFn_2(..._args: any[]) {
     if (data) {
+      if (prevData === data) {
+        return;
+      }
       mergeNewRootState(data);
+      prevData = data;
     }
   }
 
@@ -424,9 +443,13 @@
 
   function onUpdateFn_3(..._args: any[]) {
     if (locale) {
+      if (prevLocale === locale) {
+        return;
+      }
       mergeNewRootState({
         locale: locale,
       });
+      prevLocale = locale;
     }
   }
 

package/src/components/live-edit.svelte

@@ -0,0 +1,32 @@
+<script context="module" lang="ts">
+  type LiveEditProps = {
+    children?: any;
+    id?: any;
+    Wrapper?: any;
+    attributes?: any;
+  };
+</script>
+
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  import { BuilderContext } from "../context/index";
+  import { findBlockById } from "../helpers/find-block";
+
+  export let id: LiveEditProps["id"] = undefined;
+  export let attributes: LiveEditProps["attributes"] = undefined;
+  export let Wrapper: LiveEditProps["Wrapper"] = undefined;
+
+  let context = getContext(BuilderContext.key);
+
+  $: block = () => {
+    return findBlockById($context.content!, id);
+  };
+  $: options = () => {
+    return block?.()?.component?.options || {};
+  };
+</script>
+
+<svelte:component this={Wrapper} {...options()} {attributes}
+  ><slot /></svelte:component
+>

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.2.1"
+export const SDK_VERSION = "4.2.3"

package/src/functions/get-content/generate-content-url.ts

@@ -39,15 +39,10 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   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: Record<string, any> = userAttributes || {};
-  if (finalLocale) {
-    url.searchParams.set('locale', finalLocale);
-    finalUserAttributes = {
-      locale: finalLocale,
-      ...finalUserAttributes
-    };
+  if (locale) {
+    url.searchParams.set('locale', locale);
   }
+  let finalUserAttributes: Record<string, any> = userAttributes || {};
   if (enrich) url.searchParams.set('enrich', String(enrich));
   url.searchParams.set('omit', omit ?? 'meta.componentsUsed');
   if (fields) {

package/src/functions/get-content/index.ts

@@ -15,6 +15,14 @@ const checkContentHasResults = (content: ContentResponse): content is ContentRes
  * Returns the first content entry that matches the given options.
  */
 export async function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null> {
+  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/src/helpers/find-block.ts

@@ -0,0 +1,40 @@
+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 const findBlockById = (content: BuilderContent, id: string): BuilderBlock | null => {
+  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: BuilderBlock[] | undefined, id: string): BuilderBlock | null => {
+  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/src/helpers/subscribe-to-editor.ts

@@ -6,10 +6,11 @@ import type { BuilderAnimation } from '../types/builder-block';
 import type { BuilderContent } from '../types/builder-content';
 import type { Dictionary } from '../types/typescript';
 import { logger } from './logger';
+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;
   };
@@ -43,8 +44,9 @@ export const createEditorListener = ({
             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;
           }
@@ -53,8 +55,9 @@ export const createEditorListener = ({
             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;
           }