@builder.io/sdk-svelte 4.1.3 → 4.2.3

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

@@ -12,6 +12,27 @@
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;
   };
+
+  interface BuilderRequest {
+    "@type": "@builder.io/core:Request";
+    request: {
+      url: string;
+      query?: {
+        [key: string]: string;
+      };
+      headers?: {
+        [key: string]: string;
+      };
+      method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+      body?: any;
+    };
+    options?: {
+      [key: string]: any;
+    };
+    bindings?: {
+      [key: string]: string;
+    };
+  }
 </script>
 
 <script lang="ts">
@@ -32,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";
@@ -75,7 +99,7 @@
     return styles;
   }
 
-  function mergeNewRootState(newData: Dictionary<any>) {
+  function mergeNewRootState(newData: Dictionary<any>, editType?: EditType) {
     const combinedState = {
       ...$builderContextSignal.rootState,
       ...newData,
@@ -85,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,
@@ -125,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);
@@ -155,44 +184,77 @@
   }
   function runHttpRequests() {
     const requests: {
-      [key: string]: string;
+      [key: string]: string | any;
     } = $builderContextSignal.content?.data?.httpRequests ?? {};
-    Object.entries(requests).forEach(([key, url]) => {
-      if (!url) return;
+    Object.entries(requests).forEach(
+      ([key, httpRequest]: [string, BuilderRequest | string]) => {
+        if (!httpRequest) return;
+        const isCoreRequest =
+          typeof httpRequest === "object" &&
+          httpRequest["@type"] === "@builder.io/core:Request";
 
-      // request already in progress
-      if (httpReqsPending[key]) return;
+        // request already in progress
+        if (httpReqsPending[key]) return;
 
-      // request already completed, and not in edit mode
-      if (httpReqsData[key] && !isEditing()) return;
-      httpReqsPending[key] = true;
-      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) =>
-        String(
-          evaluate({
-            code: group,
-            context: context || {},
-            localState: undefined,
-            rootState: $builderContextSignal.rootState,
-            rootSetState: $builderContextSignal.rootSetState,
+        // request already completed, and not in edit mode
+        if (httpReqsData[key] && !isEditing()) return;
+        const url = isCoreRequest
+          ? httpRequest.request.url
+          : (httpRequest as string);
+        httpReqsPending[key] = true;
+        const evaluatedUrl = url.replace(
+          /{{([^}]+)}}/g,
+          (_match: string, group: string) =>
+            String(
+              evaluate({
+                code: group,
+                context: context || {},
+                localState: undefined,
+                rootState: $builderContextSignal.rootState,
+                rootSetState: $builderContextSignal.rootSetState,
+              })
+            )
+        );
+        const fetchRequestObj = isCoreRequest
+          ? {
+              url: evaluatedUrl,
+              method: httpRequest.request.method,
+              headers: httpRequest.request.headers,
+              body: httpRequest.request.body,
+            }
+          : {
+              url: evaluatedUrl,
+              method: "GET",
+            };
+        logFetch(JSON.stringify(fetchRequestObj));
+        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({
+              [key]: json,
+            });
+            httpReqsData[key] = true;
           })
-        )
-      );
-      logFetch(evaluatedUrl);
-      fetch(evaluatedUrl)
-        .then((response) => response.json())
-        .then((json) => {
-          mergeNewRootState({
-            [key]: json,
+          .catch((err) => {
+            console.error(
+              "error fetching dynamic data",
+              JSON.stringify(httpRequest),
+              err
+            );
+          })
+          .finally(() => {
+            httpReqsPending[key] = false;
           });
-          httpReqsData[key] = true;
-        })
-        .catch((err) => {
-          console.error("error fetching dynamic data", url, err);
-        })
-        .finally(() => {
-          httpReqsPending[key] = false;
-        });
-    });
+      }
+    );
   }
   function emitStateUpdate() {
     if (isEditing()) {
@@ -302,6 +364,9 @@
   let elementRef;
 
   let hasExecuted = false;
+  let contextValue = $builderContextSignal;
+  let prevData = null;
+  let prevLocale = "";
   let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let httpReqsPending = {};
@@ -366,7 +431,11 @@
 
   function onUpdateFn_2(..._args: any[]) {
     if (data) {
+      if (prevData === data) {
+        return;
+      }
       mergeNewRootState(data);
+      prevData = data;
     }
   }
 
@@ -374,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.1.3"
+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/functions/register.ts

@@ -1,7 +1,24 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
 import { isBrowser } from './is-browser';
 import { serializeIncludingFunctions } from './register-component';
+export interface Action {
+  name: string;
+  inputs?: readonly Input[];
+  returnType?: Input;
+  action: (options: Record<string, any>) => string;
+  /**
+   * Is an action for expression (e.g. calculating a binding like a formula
+   * to fill a value based on locale) or a function (e.g. something to trigger
+   * on an event like add to cart) or either (e.g. a custom code block)
+   */
+  kind: 'expression' | 'function' | 'any';
+  /**
+   * Globally unique ID for an action, e.g. "@builder.io:setState"
+   */
+  id: string;
+}
 export interface InsertMenuItem {
   name: string;
   icon?: string;
@@ -45,4 +62,16 @@ export function register(type: string, info: any) {
       console.debug('Could not postmessage', err);
     }
   }
+}
+export function registerAction(action: Action) {
+  if (isBrowser()) {
+    const actionClone = JSON.parse(JSON.stringify(action));
+    if (action.action) {
+      actionClone.action = action.action.toString();
+    }
+    window.parent?.postMessage({
+      type: 'builder.registerAction',
+      data: actionClone
+    }, '*');
+  }
 }

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;
+}