@builder.io/sdk-svelte 4.2.1 → 4.2.4

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.4"

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

@@ -5,8 +5,14 @@ const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
 const BUILDER_OPTIONS_PREFIX = 'options.';
 
 /**
- * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
- * relevant to the Builder SDK.
+ * Receives a `URLSearchParams` object or a regular query object, and returns
+ * the subset of query params that are relevant to the Builder SDK.
+ *
+ * Outputs a key-value object to be passed to `fetchOneEntry` or `fetchEntries`
+ * functions as the `options` argument.
+ *
+ * NOTE: This function is generally not needed. Instead, it is recommended to use `isPreviewing()`
+ * to check if the current page requires previewed content.
  *
  * @returns
  */

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/is-previewing.ts

@@ -1,16 +1,27 @@
 import type { Search } from '../helpers/search/search';
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-export function isPreviewing(_search?: 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?: 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/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;
           }