@builder.io/sdk-svelte 0.12.7 → 0.12.8

package/lib/browser/components/content/components/enable-editor.svelte

@@ -8,7 +8,6 @@ import { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";
-import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import { createRegisterComponentMessage } from "../../../functions/register-component.js";
 import { _track } from "../../../functions/track/index.js";
@@ -16,12 +15,13 @@ import { getInteractionPropertiesForEvent } from "../../../functions/track/inter
 import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
+import { createEditorListener } from "../../../helpers/subscribe-to-editor.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 import { triggerAnimation } from "../../block/animator.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
-export let trustedHosts = undefined;
 export let model = undefined;
+export let trustedHosts = undefined;
 export let context = undefined;
 export let canTrack = undefined;
 export let apiKey;
@@ -62,14 +62,11 @@ function mergeNewContent(newContent) {
     $builderContextSignal.content = newContentValue;
 }
 function processMessage(event) {
-    if (!isFromTrustedHost(trustedHosts, event)) {
-        return;
-    }
-    const { data } = event;
-    if (data) {
-        switch (data.type) {
-            case "builder.configureSdk": {
-                const messageContent = data.data;
+    return createEditorListener({
+        model: model,
+        trustedHosts: trustedHosts,
+        callbacks: {
+            configureSdk: (messageContent) => {
                 const { breakpoints, contentId } = messageContent;
                 if (!contentId || contentId !== $builderContextSignal.content?.id) {
                     return;
@@ -80,29 +77,18 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                }
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-                break;
-            }
-            case "builder.triggerAnimation": {
-                triggerAnimation(data.data);
-                break;
-            }
-            case "builder.contentUpdate": {
-                const messageContent = data.data;
-                const key = messageContent.key ||
-                    messageContent.alias ||
-                    messageContent.entry ||
-                    messageContent.modelName;
-                const contentData = messageContent.data;
-                if (key === model) {
-                    mergeNewContent(contentData);
                     forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
-                break;
-            }
-        }
-    }
+            },
+            animation: (animation) => {
+                triggerAnimation(animation);
+            },
+            contentUpdate: (newContent) => {
+                mergeNewContent(newContent);
+                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+            },
+        },
+    })(event);
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
     props: {
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
-        trustedHosts?: BuilderEditorProps["trustedHosts"];
         model?: BuilderEditorProps["model"];
+        trustedHosts?: BuilderEditorProps["trustedHosts"];
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];
         apiKey: BuilderEditorProps["apiKey"];

package/lib/browser/components/content-variants/helpers.d.ts

@@ -6,7 +6,7 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
     data?: {
         [key: string]: any;
         title?: string | undefined;
-        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        blocks?: import("../../server-index.js").BuilderBlock[] | undefined;
         inputs?: import("../../types/input.js").Input[] | undefined;
         state?: {
             [key: string]: any;

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.7";
+export declare const SDK_VERSION = "0.12.8";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.7";
+export const SDK_VERSION = "0.12.8";

package/lib/browser/helpers/subscribe-to-editor.d.ts

@@ -0,0 +1,35 @@
+import type { ContentProps } from '../components/content/content.types.js';
+import type { BuilderAnimation } from '../types/builder-block.js';
+import type { BuilderContent } from '../types/builder-content.js';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+    callbacks: {
+        contentUpdate: (updatedContent: BuilderContent) => void;
+        animation: (updatedContent: BuilderAnimation) => void;
+        configureSdk: (updatedContent: any) => void;
+    };
+};
+export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
+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?: {
+    /**
+     * List of hosts to allow editing content from.
+     */
+    trustedHosts?: string[] | undefined;
+}) => () => void;
+/**
+ * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
+ * Sends the updated `content` to the `callback` function.
+ */
+export declare const subscribeToEditor: SubscribeToEditor;
+export {};

package/lib/browser/helpers/subscribe-to-editor.js

@@ -0,0 +1,60 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
+import { setupBrowserForEditing } from '../scripts/init-editing.js';
+import { logger } from './logger.js';
+export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
+    return (event) => {
+        if (!isFromTrustedHost(trustedHosts, event)) {
+            return;
+        }
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case 'builder.configureSdk':
+                    {
+                        callbacks.configureSdk(data.data);
+                        break;
+                    }
+                case 'builder.triggerAnimation':
+                    {
+                        callbacks.animation(data.data);
+                        break;
+                    }
+                case 'builder.contentUpdate':
+                    {
+                        const messageContent = data.data;
+                        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+                        const contentData = messageContent.data;
+                        if (key === model) {
+                            callbacks.contentUpdate(contentData);
+                        }
+                        break;
+                    }
+            }
+        }
+    };
+};
+/**
+ * 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 = (model, callback, options) => {
+    if (!isBrowser) {
+        logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+        return () => { };
+    }
+    setupBrowserForEditing();
+    const listener = createEditorListener({
+        callbacks: {
+            contentUpdate: callback,
+            animation: () => { },
+            configureSdk: () => { }
+        },
+        model,
+        trustedHosts: options?.trustedHosts
+    });
+    window.addEventListener('message', listener);
+    return () => {
+        window.removeEventListener('message', listener);
+    };
+};

package/lib/browser/server-index.d.ts

@@ -1,4 +1,7 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Component Prop types
+ */
 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';
@@ -9,6 +12,16 @@ 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';
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types.js';
+export type { BuilderBlock } from './types/builder-block.js';
+export type { BuilderContent } from './types/builder-content.js';
+export type { ComponentInfo } from './types/components.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -16,9 +29,11 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 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 { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
+export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/lib/browser/server-index.js

@@ -1,10 +1,17 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
 export { register } from './functions/register.js';
 export { setEditorSettings } 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 { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/lib/edge/components/content/components/enable-editor.svelte

@@ -8,7 +8,6 @@ import { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";
-import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import { createRegisterComponentMessage } from "../../../functions/register-component.js";
 import { _track } from "../../../functions/track/index.js";
@@ -16,12 +15,13 @@ import { getInteractionPropertiesForEvent } from "../../../functions/track/inter
 import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
+import { createEditorListener } from "../../../helpers/subscribe-to-editor.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 import { triggerAnimation } from "../../block/animator.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
-export let trustedHosts = undefined;
 export let model = undefined;
+export let trustedHosts = undefined;
 export let context = undefined;
 export let canTrack = undefined;
 export let apiKey;
@@ -62,14 +62,11 @@ function mergeNewContent(newContent) {
     $builderContextSignal.content = newContentValue;
 }
 function processMessage(event) {
-    if (!isFromTrustedHost(trustedHosts, event)) {
-        return;
-    }
-    const { data } = event;
-    if (data) {
-        switch (data.type) {
-            case "builder.configureSdk": {
-                const messageContent = data.data;
+    return createEditorListener({
+        model: model,
+        trustedHosts: trustedHosts,
+        callbacks: {
+            configureSdk: (messageContent) => {
                 const { breakpoints, contentId } = messageContent;
                 if (!contentId || contentId !== $builderContextSignal.content?.id) {
                     return;
@@ -80,29 +77,18 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                }
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-                break;
-            }
-            case "builder.triggerAnimation": {
-                triggerAnimation(data.data);
-                break;
-            }
-            case "builder.contentUpdate": {
-                const messageContent = data.data;
-                const key = messageContent.key ||
-                    messageContent.alias ||
-                    messageContent.entry ||
-                    messageContent.modelName;
-                const contentData = messageContent.data;
-                if (key === model) {
-                    mergeNewContent(contentData);
                     forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
-                break;
-            }
-        }
-    }
+            },
+            animation: (animation) => {
+                triggerAnimation(animation);
+            },
+            contentUpdate: (newContent) => {
+                mergeNewContent(newContent);
+                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+            },
+        },
+    })(event);
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content

package/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
     props: {
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
-        trustedHosts?: BuilderEditorProps["trustedHosts"];
         model?: BuilderEditorProps["model"];
+        trustedHosts?: BuilderEditorProps["trustedHosts"];
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];
         apiKey: BuilderEditorProps["apiKey"];

package/lib/edge/components/content-variants/helpers.d.ts

@@ -6,7 +6,7 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
     data?: {
         [key: string]: any;
         title?: string | undefined;
-        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        blocks?: import("../../server-index.js").BuilderBlock[] | undefined;
         inputs?: import("../../types/input.js").Input[] | undefined;
         state?: {
             [key: string]: any;

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.7";
+export declare const SDK_VERSION = "0.12.8";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.7";
+export const SDK_VERSION = "0.12.8";

package/lib/edge/helpers/subscribe-to-editor.d.ts

@@ -0,0 +1,35 @@
+import type { ContentProps } from '../components/content/content.types.js';
+import type { BuilderAnimation } from '../types/builder-block.js';
+import type { BuilderContent } from '../types/builder-content.js';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+    callbacks: {
+        contentUpdate: (updatedContent: BuilderContent) => void;
+        animation: (updatedContent: BuilderAnimation) => void;
+        configureSdk: (updatedContent: any) => void;
+    };
+};
+export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
+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?: {
+    /**
+     * List of hosts to allow editing content from.
+     */
+    trustedHosts?: string[] | undefined;
+}) => () => void;
+/**
+ * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
+ * Sends the updated `content` to the `callback` function.
+ */
+export declare const subscribeToEditor: SubscribeToEditor;
+export {};

package/lib/edge/helpers/subscribe-to-editor.js

@@ -0,0 +1,60 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
+import { setupBrowserForEditing } from '../scripts/init-editing.js';
+import { logger } from './logger.js';
+export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
+    return (event) => {
+        if (!isFromTrustedHost(trustedHosts, event)) {
+            return;
+        }
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case 'builder.configureSdk':
+                    {
+                        callbacks.configureSdk(data.data);
+                        break;
+                    }
+                case 'builder.triggerAnimation':
+                    {
+                        callbacks.animation(data.data);
+                        break;
+                    }
+                case 'builder.contentUpdate':
+                    {
+                        const messageContent = data.data;
+                        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+                        const contentData = messageContent.data;
+                        if (key === model) {
+                            callbacks.contentUpdate(contentData);
+                        }
+                        break;
+                    }
+            }
+        }
+    };
+};
+/**
+ * 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 = (model, callback, options) => {
+    if (!isBrowser) {
+        logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+        return () => { };
+    }
+    setupBrowserForEditing();
+    const listener = createEditorListener({
+        callbacks: {
+            contentUpdate: callback,
+            animation: () => { },
+            configureSdk: () => { }
+        },
+        model,
+        trustedHosts: options?.trustedHosts
+    });
+    window.addEventListener('message', listener);
+    return () => {
+        window.removeEventListener('message', listener);
+    };
+};

package/lib/edge/server-index.d.ts

@@ -1,4 +1,7 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Component Prop types
+ */
 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';
@@ -9,6 +12,16 @@ 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';
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types.js';
+export type { BuilderBlock } from './types/builder-block.js';
+export type { BuilderContent } from './types/builder-content.js';
+export type { ComponentInfo } from './types/components.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -16,9 +29,11 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 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 { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
+export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/lib/edge/server-index.js

@@ -1,10 +1,17 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
 export { register } from './functions/register.js';
 export { setEditorSettings } 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 { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/lib/node/components/content/components/enable-editor.svelte

@@ -8,7 +8,6 @@ import { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";
-import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import { createRegisterComponentMessage } from "../../../functions/register-component.js";
 import { _track } from "../../../functions/track/index.js";
@@ -16,12 +15,13 @@ import { getInteractionPropertiesForEvent } from "../../../functions/track/inter
 import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
+import { createEditorListener } from "../../../helpers/subscribe-to-editor.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 import { triggerAnimation } from "../../block/animator.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
-export let trustedHosts = undefined;
 export let model = undefined;
+export let trustedHosts = undefined;
 export let context = undefined;
 export let canTrack = undefined;
 export let apiKey;
@@ -62,14 +62,11 @@ function mergeNewContent(newContent) {
     $builderContextSignal.content = newContentValue;
 }
 function processMessage(event) {
-    if (!isFromTrustedHost(trustedHosts, event)) {
-        return;
-    }
-    const { data } = event;
-    if (data) {
-        switch (data.type) {
-            case "builder.configureSdk": {
-                const messageContent = data.data;
+    return createEditorListener({
+        model: model,
+        trustedHosts: trustedHosts,
+        callbacks: {
+            configureSdk: (messageContent) => {
                 const { breakpoints, contentId } = messageContent;
                 if (!contentId || contentId !== $builderContextSignal.content?.id) {
                     return;
@@ -80,29 +77,18 @@ function processMessage(event) {
                             breakpoints,
                         },
                     });
-                }
-                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-                break;
-            }
-            case "builder.triggerAnimation": {
-                triggerAnimation(data.data);
-                break;
-            }
-            case "builder.contentUpdate": {
-                const messageContent = data.data;
-                const key = messageContent.key ||
-                    messageContent.alias ||
-                    messageContent.entry ||
-                    messageContent.modelName;
-                const contentData = messageContent.data;
-                if (key === model) {
-                    mergeNewContent(contentData);
                     forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
-                break;
-            }
-        }
-    }
+            },
+            animation: (animation) => {
+                triggerAnimation(animation);
+            },
+            contentUpdate: (newContent) => {
+                mergeNewContent(newContent);
+                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+            },
+        },
+    })(event);
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
     props: {
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
-        trustedHosts?: BuilderEditorProps["trustedHosts"];
         model?: BuilderEditorProps["model"];
+        trustedHosts?: BuilderEditorProps["trustedHosts"];
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];
         apiKey: BuilderEditorProps["apiKey"];

package/lib/node/components/content-variants/helpers.d.ts

@@ -6,7 +6,7 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
     data?: {
         [key: string]: any;
         title?: string | undefined;
-        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        blocks?: import("../../server-index.js").BuilderBlock[] | undefined;
         inputs?: import("../../types/input.js").Input[] | undefined;
         state?: {
             [key: string]: any;

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.7";
+export declare const SDK_VERSION = "0.12.8";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.7";
+export const SDK_VERSION = "0.12.8";

package/lib/node/helpers/subscribe-to-editor.d.ts

@@ -0,0 +1,35 @@
+import type { ContentProps } from '../components/content/content.types.js';
+import type { BuilderAnimation } from '../types/builder-block.js';
+import type { BuilderContent } from '../types/builder-content.js';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+    callbacks: {
+        contentUpdate: (updatedContent: BuilderContent) => void;
+        animation: (updatedContent: BuilderAnimation) => void;
+        configureSdk: (updatedContent: any) => void;
+    };
+};
+export declare const createEditorListener: ({ model, trustedHosts, callbacks }: ContentListener) => (event: MessageEvent<any>) => void;
+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?: {
+    /**
+     * List of hosts to allow editing content from.
+     */
+    trustedHosts?: string[] | undefined;
+}) => () => void;
+/**
+ * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
+ * Sends the updated `content` to the `callback` function.
+ */
+export declare const subscribeToEditor: SubscribeToEditor;
+export {};

package/lib/node/helpers/subscribe-to-editor.js

@@ -0,0 +1,60 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
+import { setupBrowserForEditing } from '../scripts/init-editing.js';
+import { logger } from './logger.js';
+export const createEditorListener = ({ model, trustedHosts, callbacks }) => {
+    return (event) => {
+        if (!isFromTrustedHost(trustedHosts, event)) {
+            return;
+        }
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case 'builder.configureSdk':
+                    {
+                        callbacks.configureSdk(data.data);
+                        break;
+                    }
+                case 'builder.triggerAnimation':
+                    {
+                        callbacks.animation(data.data);
+                        break;
+                    }
+                case 'builder.contentUpdate':
+                    {
+                        const messageContent = data.data;
+                        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+                        const contentData = messageContent.data;
+                        if (key === model) {
+                            callbacks.contentUpdate(contentData);
+                        }
+                        break;
+                    }
+            }
+        }
+    };
+};
+/**
+ * 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 = (model, callback, options) => {
+    if (!isBrowser) {
+        logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+        return () => { };
+    }
+    setupBrowserForEditing();
+    const listener = createEditorListener({
+        callbacks: {
+            contentUpdate: callback,
+            animation: () => { },
+            configureSdk: () => { }
+        },
+        model,
+        trustedHosts: options?.trustedHosts
+    });
+    window.addEventListener('message', listener);
+    return () => {
+        window.removeEventListener('message', listener);
+    };
+};

package/lib/node/server-index.d.ts

@@ -1,4 +1,7 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Component Prop types
+ */
 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';
@@ -9,6 +12,16 @@ 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';
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types.js';
+export type { BuilderBlock } from './types/builder-block.js';
+export type { BuilderContent } from './types/builder-content.js';
+export type { ComponentInfo } from './types/components.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -16,9 +29,11 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 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 { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
+export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/lib/node/server-index.js

@@ -1,10 +1,17 @@
 export * from './index-helpers/top-of-file.js';
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
 export { register } from './functions/register.js';
 export { setEditorSettings } 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 { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+/**
+ * Content fetching
+ */
 export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "type": "module",
   "files": [
     "lib",

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

@@ -24,7 +24,6 @@
   import { fetch } from "../../../functions/get-fetch.js";
   import { isBrowser } from "../../../functions/is-browser.js";
   import { isEditing } from "../../../functions/is-editing.js";
-  import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
   import { isPreviewing } from "../../../functions/is-previewing.js";
   import { createRegisterComponentMessage } from "../../../functions/register-component.js";
   import { _track } from "../../../functions/track/index.js";
@@ -32,6 +31,7 @@
   import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
   import { logger } from "../../../helpers/logger.js";
   import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
+  import { createEditorListener } from "../../../helpers/subscribe-to-editor.js";
   import {
     registerInsertMenu,
     setupBrowserForEditing,
@@ -48,8 +48,8 @@
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
-  export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
+  export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
   export let apiKey: BuilderEditorProps["apiKey"];
@@ -93,14 +93,11 @@
     $builderContextSignal.content = newContentValue;
   }
   function processMessage(event: MessageEvent) {
-    if (!isFromTrustedHost(trustedHosts, event)) {
-      return;
-    }
-    const { data } = event;
-    if (data) {
-      switch (data.type) {
-        case "builder.configureSdk": {
-          const messageContent = data.data;
+    return createEditorListener({
+      model: model,
+      trustedHosts: trustedHosts,
+      callbacks: {
+        configureSdk: (messageContent) => {
           const { breakpoints, contentId } = messageContent;
           if (!contentId || contentId !== $builderContextSignal.content?.id) {
             return;
@@ -111,30 +108,18 @@
                 breakpoints,
               },
             });
-          }
-          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-          break;
-        }
-        case "builder.triggerAnimation": {
-          triggerAnimation(data.data);
-          break;
-        }
-        case "builder.contentUpdate": {
-          const messageContent = data.data;
-          const key =
-            messageContent.key ||
-            messageContent.alias ||
-            messageContent.entry ||
-            messageContent.modelName;
-          const contentData = messageContent.data;
-          if (key === model) {
-            mergeNewContent(contentData);
             forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
           }
-          break;
-        }
-      }
-    }
+        },
+        animation: (animation) => {
+          triggerAnimation(animation);
+        },
+        contentUpdate: (newContent) => {
+          mergeNewContent(newContent);
+          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+        },
+      },
+    })(event);
   }
   function evaluateJsCode() {
     // run any dynamic JS code attached to content

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.7"
+export const SDK_VERSION = "0.12.8"

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

@@ -0,0 +1,95 @@
+import type { ContentProps } from '../components/content/content.types.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
+import { setupBrowserForEditing } from '../scripts/init-editing.js';
+import type { BuilderAnimation } from '../types/builder-block.js';
+import type { BuilderContent } from '../types/builder-content.js';
+import { logger } from './logger.js';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+  callbacks: {
+    contentUpdate: (updatedContent: BuilderContent) => void;
+    animation: (updatedContent: BuilderAnimation) => void;
+    configureSdk: (updatedContent: any) => void;
+  };
+};
+export const createEditorListener = ({
+  model,
+  trustedHosts,
+  callbacks
+}: ContentListener) => {
+  return (event: MessageEvent<any>): void => {
+    if (!isFromTrustedHost(trustedHosts, event)) {
+      return;
+    }
+    const {
+      data
+    } = event;
+    if (data) {
+      switch (data.type) {
+        case 'builder.configureSdk':
+          {
+            callbacks.configureSdk(data.data);
+            break;
+          }
+        case 'builder.triggerAnimation':
+          {
+            callbacks.animation(data.data);
+            break;
+          }
+        case 'builder.contentUpdate':
+          {
+            const messageContent = data.data;
+            const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+            const contentData = messageContent.data;
+            if (key === model) {
+              callbacks.contentUpdate(contentData);
+            }
+            break;
+          }
+      }
+    }
+  };
+};
+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?: {
+  /**
+   * List of hosts to allow editing content from.
+   */
+  trustedHosts?: string[] | undefined;
+}) => () => void;
+
+/**
+ * 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) => {
+  if (!isBrowser) {
+    logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+    return () => {};
+  }
+  setupBrowserForEditing();
+  const listener = createEditorListener({
+    callbacks: {
+      contentUpdate: callback,
+      animation: () => {},
+      configureSdk: () => {}
+    },
+    model,
+    trustedHosts: options?.trustedHosts
+  });
+  window.addEventListener('message', listener);
+  return () => {
+    window.removeEventListener('message', listener);
+  };
+}

package/src/server-index.ts

@@ -1,4 +1,8 @@
 export * from './index-helpers/top-of-file.js';
+
+/**
+ * Component Prop types
+ */
 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';
@@ -9,6 +13,18 @@ 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';
+
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types.js';
+export type { BuilderBlock } from './types/builder-block.js';
+export type { BuilderContent } from './types/builder-content.js';
+export type { ComponentInfo } from './types/components.js';
+
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -16,9 +32,12 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 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 { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
-export { fetchBuilderProps } from './functions/fetch-builder-props.js'
+export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+
+/**
+ * Content fetching
+ */
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js'