@builder.io/sdk-svelte 0.11.2 → 0.11.4

package/src/components/block/block.svelte

@@ -112,6 +112,8 @@
 </script>
 
 {#if canShowBlock()}
+  <BlockStyles {block} context={$context} />
+
   {#if !blockComponent?.()?.noWrap}
     {#if isEmptyHtmlElement(Tag())}
       <BlockWrapper
@@ -150,17 +152,13 @@
           isInteractive={componentRefProps().isInteractive}
         />
 
-        {#each childrenWithoutParentComponent() as child ("block-" + child.id)}
+        {#each childrenWithoutParentComponent() as child (child.id)}
           <svelte:self
             block={child}
             context={childrenContext}
             {registeredComponents}
           />
         {/each}
-
-        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-          <BlockStyles block={child} context={$childrenContext} />
-        {/each}
       </BlockWrapper>
     {/if}
   {:else}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { wrapComponentRef } from "../../../content/wrap-component-ref.js";
   import Block from "../../block.svelte";
-  import BlockStyles from "../block-styles.svelte";
   import InteractiveElement from "../interactive-element.svelte";
   import type { ComponentProps } from "./component-ref.helpers.js";
   import { getWrapperProps } from "./component-ref.helpers.js";
@@ -31,12 +30,8 @@
       contextValue: $context,
     })}
   >
-    {#each blockChildren as child ("block-" + child.id)}
+    {#each blockChildren as child (child.id)}
       <Block block={child} {context} {registeredComponents} />
     {/each}
-
-    {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} context={$context} />
-    {/each}
   </svelte:component>
 {/if}

package/src/components/blocks/blocks.svelte

@@ -1,26 +1,11 @@
-<script context="module" lang="ts">
-  export type BlocksProps = Partial<
-    Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWrapperProps">
-  > & {
-    context?: Writable<BuilderContextInterface>;
-    registeredComponents?: RegisteredComponents;
-  };
-</script>
-
 <script lang="ts">
   import { getContext } from "svelte";
 
   import BuilderContext from "../../context/builder.context.js";
   import ComponentsContext from "../../context/components.context.js";
-  import type {
-    BuilderContextInterface,
-    RegisteredComponents,
-  } from "../../context/types.js";
   import Block from "../block/block.svelte";
-  import BlockStyles from "../block/components/block-styles.svelte";
-  import type { BlocksWrapperProps } from "./blocks-wrapper.svelte";
   import BlocksWrapper from "./blocks-wrapper.svelte";
-  import type { Writable } from "svelte/store";
+  import type { BlocksProps } from "./blocks.types.js";
 
   export let blocks: BlocksProps["blocks"];
   export let parent: BlocksProps["parent"];
@@ -43,7 +28,7 @@
   BlocksWrapperProps={$context?.BlocksWrapperProps}
 >
   {#if blocks}
-    {#each blocks as block ("render-block-" + block.id)}
+    {#each blocks as block (block.id)}
       <Block
         {block}
         context={context || builderContext}
@@ -52,10 +37,4 @@
       />
     {/each}
   {/if}
-
-  {#if blocks}
-    {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={$context || $builderContext} />
-    {/each}
-  {/if}
 </BlocksWrapper>

package/src/components/blocks/blocks.types.ts

@@ -0,0 +1,7 @@
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+  context?: Writable<BuilderContextInterface>;
+  registeredComponents?: RegisteredComponents;
+}

package/src/components/content/components/enable-editor.svelte

@@ -2,7 +2,6 @@
   type BuilderEditorProps = Omit<
     ContentProps,
     | "customComponents"
-    | "data"
     | "apiVersion"
     | "isSsrAbTest"
     | "blocksWrapper"
@@ -38,6 +37,7 @@
   } from "../../../scripts/init-editing.js";
   import type { BuilderContent } from "../../../types/builder-content.js";
   import type { ComponentInfo } from "../../../types/components.js";
+  import type { Dictionary } from "../../../types/typescript.js";
   import type {
     BuilderComponentStateChange,
     ContentProps,
@@ -58,6 +58,19 @@
   export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
     undefined;
 
+  export let data: BuilderEditorProps["data"] = undefined;
+
+  function mergeNewRootState(newData: Dictionary<any>) {
+    const combinedState = {
+      ...$builderContextSignal.rootState,
+      ...newData,
+    };
+    if ($builderContextSignal.rootSetState) {
+      $builderContextSignal.rootSetState?.(combinedState);
+    } else {
+      $builderContextSignal.rootState = combinedState;
+    }
+  }
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {
       ...$builderContextSignal.content,
@@ -271,6 +284,7 @@
   let elementRef;
 
   let forceReRenderCount = 0;
+  let firstRender = true;
   let lastUpdated = 0;
   let shouldSendResetCookie = false;
   let ContentWrapper = contentWrapper || "div";
@@ -339,6 +353,20 @@
     emitStateUpdate();
   }
   $: onUpdateFn_4(...[$builderContextSignal.rootState]);
+  function onUpdateFn_5(..._args: any[]) {
+    if (data) {
+      mergeNewRootState(data);
+    }
+  }
+  $: onUpdateFn_5(...[data]);
+  function onUpdateFn_6(..._args: any[]) {
+    if (locale) {
+      mergeNewRootState({
+        locale: locale,
+      });
+    }
+  }
+  $: onUpdateFn_6(...[locale]);
 
   setContext(builderContext.key, builderContextSignal);
 

package/src/components/content/content.helpers.ts

@@ -2,7 +2,7 @@ import type { BuilderRenderState } from '../../context/types.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
 import type { ContentProps } from './content.types.js';
-export const getContextStateInitialValue = ({
+export const getRootStateInitialValue = ({
   content,
   data,
   locale

package/src/components/content/content.svelte

@@ -23,7 +23,7 @@
   import ContentStyles from "./components/styles.svelte";
   import {
     getContentInitialValue,
-    getContextStateInitialValue,
+    getRootStateInitialValue,
   } from "./content.helpers.js";
   import type { ContentProps } from "./content.types.js";
   import { wrapComponentRef } from "./wrap-component-ref.js";
@@ -82,7 +82,7 @@
       data: data,
     }),
     localState: undefined,
-    rootState: getContextStateInitialValue({
+    rootState: getRootStateInitialValue({
       content: content,
       data: data,
       locale: locale,
@@ -119,6 +119,7 @@
 
 <EnableEditor
   {content}
+  {data}
   {model}
   {context}
   {apiKey}

package/src/components/content-variants/content-variants.types.ts

@@ -3,32 +3,74 @@ import type { ApiVersion } from '../../types/api-version.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
 export interface ContentVariantsPrps {
+  /**
+   * The Builder content JSON to render (required).
+   */
   content?: Nullable<BuilderContent>;
+
+  /**
+   * The Builder content `model` to render (required).
+   */
   model?: string;
+
+  /**
+   * Additional data to inject into your Builder content (optional).
+   */
   data?: {
     [key: string]: any;
   };
+
+  /**
+   *
+   */
   context?: BuilderRenderContext;
+
+  /**
+   * Your API Key: needed to dynamically fetch symbols (required).
+   */
   apiKey: string;
   apiVersion?: ApiVersion;
+
+  /**
+   * An array of custom components to register (optional).
+   */
   customComponents?: RegisteredComponent[];
+
+  /**
+   * A boolean to enable or disable tracking (optional). Defaults to `true`.
+   */
   canTrack?: boolean;
+
+  /**
+   * If provided, the API will auto-resolve localized objects to the value of this `locale` key (optional).
+   */
   locale?: string;
-  /** @deprecated use `enrich` instead **/
+
+  /** @deprecated use `enrich` instead */
   includeRefs?: boolean;
+
+  /**
+   * A boolean to enable or disable enriching API content (optional).
+   *
+   * Enriching will Include multilevel references in the response. Defaults to `false`.
+   */
   enrich?: boolean;
+
   /**
    * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
    */
   contentWrapper?: any;
+
   /**
    * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
    */
   contentWrapperProps?: any;
+
   /**
    * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
    */
   blocksWrapper?: any;
+
   /**
    * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
    */

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.11.2"
+export const SDK_VERSION = "0.11.4"

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

@@ -11,7 +11,7 @@ import type { GetContentOptions } from './types.js';
 const checkContentHasResults = (content: ContentResponse): content is ContentResults => 'results' in content;
 
 /**
- * Returns a the first entry that matches the given options.
+ * Returns the first content entry that matches the given options.
  */
 export async function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null> {
   const allContent = await fetchEntries({

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

@@ -1,8 +1,8 @@
 export interface GetContentOptions {
-  /** The model to get content for */
+  /** The model to get content for (required) */
   model: string;
 
-  /** Your public API key */
+  /** Your public API key (required) */
   apiKey: string;
 
   /** Number of items to fetch. Default is 1 */

package/src/server-index.ts

@@ -1,4 +1,14 @@
 export * from './index-helpers/top-of-file.js';
+export type { ButtonProps } from './blocks/button/button.types.js';
+export type { ColumnProps } from './blocks/columns/columns.types.js';
+export type { FragmentProps } from './blocks/fragment/fragment.types.js';
+export type { ImageProps } from './blocks/image/image.types.js';
+export type { SectionProps } from './blocks/section/section.types.js';
+export type { SymbolProps } from './blocks/symbol/symbol.types.js';
+export type { TextProps } from './blocks/text/text.types.js';
+export type { VideoProps } from './blocks/video/video.types.js';
+export type { BlocksProps } from './components/blocks/blocks.types.js';
+export type { ContentVariantsPrps as ContentProps } from './components/content-variants/content-variants.types.js';
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -9,7 +19,6 @@ export type { Settings } from './functions/set-editor-settings.js';
 export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
-export type { ContentProps } from './components/content/content.types.js';
 export type { RegisteredComponent } from './context/types.js';
 export type { ComponentInfo } from './types/components.js';
 export { fetchBuilderProps } from './functions/fetch-builder-props.js'