@builder.io/sdk-svelte 3.0.7 → 4.0.1

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

@@ -57,8 +57,8 @@
   export let locale: BuilderEditorProps["locale"] = undefined;
   export let enrich: BuilderEditorProps["enrich"] = undefined;
   export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
-  export let model: BuilderEditorProps["model"] = undefined;
-  export let content: BuilderEditorProps["content"] = undefined;
+  export let model: BuilderEditorProps["model"];
+  export let content: BuilderEditorProps["content"];
   export let context: BuilderEditorProps["context"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
@@ -130,6 +130,9 @@
         contentUpdate: (newContent) => {
           mergeNewContent(newContent);
         },
+        stateUpdate: (newState) => {
+          mergeNewRootState(newState);
+        },
       },
     })(event);
   }
@@ -229,11 +232,12 @@
             trustedHosts: trustedHosts,
           }
         : {}),
+      modelName: model ?? "",
+      apiKey: apiKey,
     });
     Object.values<ComponentInfo>($builderContextSignal.componentInfos).forEach(
       (registeredComponent) => {
         if (
-          !model ||
           !registeredComponent.models?.length ||
           registeredComponent.models.includes(model)
         ) {
@@ -272,7 +276,7 @@
         (!content || searchParamPreviewId === content.id))
     ) {
       fetchOneEntry({
-        model: model || "",
+        model: model,
         apiKey: apiKey,
         apiVersion: $builderContextSignal.apiVersion,
         ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId

package/src/components/content/content.svelte

@@ -30,7 +30,7 @@
 
   export let apiKey: ContentProps["apiKey"];
   export let context: ContentProps["context"] = undefined;
-  export let content: ContentProps["content"] = undefined;
+  export let content: ContentProps["content"];
   export let customComponents: ContentProps["customComponents"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
@@ -39,7 +39,7 @@
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let nonce: ContentProps["nonce"] = undefined;
-  export let model: ContentProps["model"] = undefined;
+  export let model: ContentProps["model"];
   export let apiHost: ContentProps["apiHost"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
@@ -104,7 +104,7 @@
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
-    model: model || "",
+    model: model,
   });
   if (!apiKey) {
     logger.error(

package/src/components/content-variants/content-variants.svelte

@@ -25,12 +25,12 @@
   } from "./helpers";
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
-  export let content: VariantsProviderProps["content"] = undefined;
+  export let content: VariantsProviderProps["content"];
   export let isNestedRender: VariantsProviderProps["isNestedRender"] =
     undefined;
   export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let apiHost: VariantsProviderProps["apiHost"] = undefined;
-  export let model: VariantsProviderProps["model"] = undefined;
+  export let model: VariantsProviderProps["model"];
   export let data: VariantsProviderProps["data"] = undefined;
   export let context: VariantsProviderProps["context"] = undefined;
   export let apiKey: VariantsProviderProps["apiKey"];

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

@@ -7,12 +7,12 @@ export interface ContentVariantsPrps extends ExtraFrameworkProps {
   /**
    * The Builder content JSON to render (required).
    */
-  content?: Nullable<BuilderContent>;
+  content: Nullable<BuilderContent>;
 
   /**
    * The Builder content `model` to render (required).
    */
-  model?: string;
+  model: string;
 
   /**
    * Additional data to inject into your Builder content (optional).

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.7"
+export const SDK_VERSION = "4.0.1"

package/src/helpers/subscribe-to-editor.ts

@@ -4,10 +4,12 @@ import { isFromTrustedHost } from '../functions/is-from-trusted-host';
 import { setupBrowserForEditing } from '../scripts/init-editing';
 import type { BuilderAnimation } from '../types/builder-block';
 import type { BuilderContent } from '../types/builder-content';
+import type { Dictionary } from '../types/typescript';
 import { logger } from './logger';
 type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
   callbacks: {
     contentUpdate: (updatedContent: BuilderContent) => void;
+    stateUpdate: (newState: Dictionary<string>) => void;
     animation: (updatedContent: BuilderAnimation) => void;
     configureSdk: (updatedContent: any) => void;
   };
@@ -36,6 +38,16 @@ export const createEditorListener = ({
             callbacks.animation(data.data);
             break;
           }
+        case 'builder.resetState':
+          {
+            const messageContent = data.data;
+            const modelName = messageContent.model;
+            const newState = messageContent?.state;
+            if (modelName === model && newState) {
+              callbacks.stateUpdate(newState);
+            }
+            break;
+          }
         case 'builder.contentUpdate':
           {
             const messageContent = data.data;
@@ -50,19 +62,24 @@ export const createEditorListener = ({
     }
   };
 };
-type SubscribeToEditor = (
-/**
- * The Builder `model` to subscribe to
- */
-model: string,
-/**
- * The callback function to call when the content is updated.
- */
-callback: (updatedContent: BuilderContent) => void,
-/**
- * Extra options for the listener.
- */
-options?: {
+type SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}: {
+  /**
+   * The Builder `model` to subscribe to
+   */
+  model: string;
+  /**
+   * Builder API Key to use for the editor.
+   */
+  apiKey: string;
+  /**
+   * The callback function to call when the content is updated.
+   */
+  callback: (updatedContent: BuilderContent) => void;
   /**
    * List of hosts to allow editing content from.
    */
@@ -73,20 +90,29 @@ options?: {
  * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
  * Sends the updated `content` to the `callback` function.
  */
-export const subscribeToEditor: SubscribeToEditor = (model, callback, options) => {
+export const subscribeToEditor: SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}) => {
   if (!isBrowser) {
     logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
     return () => {};
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
       animation: () => {},
-      configureSdk: () => {}
+      configureSdk: () => {},
+      stateUpdate: () => {}
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener('message', listener);
   return () => {

package/src/scripts/init-editing.ts

@@ -28,11 +28,13 @@ export const registerInsertMenu = () => {
 };
 let isSetupForEditing = false;
 export const setupBrowserForEditing = (options: {
+  modelName: string;
+  apiKey: string;
   enrich?: boolean;
   includeRefs?: boolean;
   locale?: string;
   trustedHosts?: string[];
-} = {}) => {
+}) => {
   if (isSetupForEditing) {
     return;
   }
@@ -48,6 +50,8 @@ export const setupBrowserForEditing = (options: {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
         supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
         blockLevelPersonalization: true
       }