@builder.io/sdk-solid 0.12.7 → 0.13.0

package/dist/index.d.ts

@@ -104,7 +104,7 @@ type BlocksWrapperProps = {
     BlocksWrapperProps: any;
 };
 
-type ApiVersion = 'v2' | 'v3';
+type ApiVersion = 'v3';
 
 interface Input {
     /** This is the name of the component prop this input represents */
@@ -718,6 +718,86 @@ type Settings = {
 };
 declare function setEditorSettings(newSettings: Settings): void;
 
+type QueryObject = Record<string, string | string[]>;
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
+declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
+
+interface Event {
+    /**
+     * The type of your event.
+     *
+     * Examples: `click`, `conversion`, `pageview`, `impression`
+     */
+    type: string;
+    data: {
+        /**
+         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+         */
+        contentId?: string;
+        /**
+         * This is the ID of the space that the content belongs to.
+         */
+        ownerId: string;
+        /**
+         * (Optional) metadata that you want to provide with your event.
+         */
+        metadata?: Dictionary<any>;
+        /**
+         * Session ID of the user. This is provided by the SDK by checking session storage.
+         */
+        sessionId: string | undefined;
+        /**
+         * Visitor ID of the user. This is provided by the SDK by checking cookies.
+         */
+        visitorId: string | undefined;
+        /**
+         * (Optional) If running an A/B test, the ID of the variation that the user is in.
+         */
+        variationId?: string;
+        [index: string]: any;
+    };
+}
+type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
+    [index: string]: any;
+};
+declare const track: (args: EventProperties) => Promise<void | Response>;
+
+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.
+ */
+declare const subscribeToEditor: SubscribeToEditor;
+
 interface GetContentOptions {
     /** The model to get content for (required) */
     model: string;
@@ -796,9 +876,9 @@ interface GetContentOptions {
     /**
      * If provided, sets the Builder API version used to fetch content.
      *
-     * Defaults to `v3`.
+     * Currently, the only available API version is `v3`.
      */
-    apiVersion?: 'v2' | 'v3';
+    apiVersion?: 'v3';
     /**
      * Only include these fields.
      * Note: 'omit' takes precedence over 'fields'
@@ -861,88 +941,6 @@ interface GetContentOptions {
     includeUnpublished?: boolean;
 }
 
-/**
- * Returns the first content entry that matches the given options.
- */
-declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
-/**
- * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
- *
- * NOTE: consider using `fetchBuilderProps` instead for easier setup.
- */
-declare const getContent: typeof fetchOneEntry;
-type ContentResults = {
-    results: BuilderContent[];
-};
-/**
- * @internal Exported only for testing purposes. Do not use.
- */
-declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<BuilderContent[]>;
-/**
- * Returns a paginated array of entries that match the given options.
- */
-declare function fetchEntries(options: GetContentOptions): Promise<BuilderContent[]>;
-/**
- * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
- */
-declare const getAllContent: typeof fetchEntries;
-
-type QueryObject = Record<string, string | string[]>;
-/**
- * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
- * relevant to the Builder SDK.
- *
- * @returns
- */
-declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
-
-interface Event {
-    /**
-     * The type of your event.
-     *
-     * Examples: `click`, `conversion`, `pageview`, `impression`
-     */
-    type: string;
-    data: {
-        /**
-         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
-         */
-        contentId?: string;
-        /**
-         * This is the ID of the space that the content belongs to.
-         */
-        ownerId: string;
-        /**
-         * (Optional) metadata that you want to provide with your event.
-         */
-        metadata?: Dictionary<any>;
-        /**
-         * Session ID of the user. This is provided by the SDK by checking session storage.
-         */
-        sessionId: string | undefined;
-        /**
-         * Visitor ID of the user. This is provided by the SDK by checking cookies.
-         */
-        visitorId: string | undefined;
-        /**
-         * (Optional) If running an A/B test, the ID of the variation that the user is in.
-         */
-        variationId?: string;
-        [index: string]: any;
-    };
-}
-type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
-    /**
-     * Your organization's API key.
-     */
-    apiKey: Event['data']['ownerId'];
-    /**
-     * (Optional) Any additional (non-metadata) properties to add to the event.
-     */
-    [index: string]: any;
-};
-declare const track: (args: EventProperties) => Promise<void | Response>;
-
 type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
     model?: string;
 }) & ({
@@ -993,4 +991,30 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
  */
 declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 
-export { Blocks, BlocksProps, Button, ButtonProps, ColumnProps, Columns, ComponentInfo, ContentVariants as Content, ContentVariantsPrps as ContentProps, FragmentComponent as Fragment, FragmentProps, Image, ImageProps, InsertMenuConfig, InsertMenuItem, RegisteredComponent, RenderBlocks, RenderContent, SectionComponent as Section, SectionProps, Settings, Symbol, SymbolProps, Text, TextProps, Video, VideoProps, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track };
+/**
+ * Returns the first content entry that matches the given options.
+ */
+declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
+/**
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
+ *
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
+ */
+declare const getContent: typeof fetchOneEntry;
+type ContentResults = {
+    results: BuilderContent[];
+};
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<BuilderContent[]>;
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+declare function fetchEntries(options: GetContentOptions): Promise<BuilderContent[]>;
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+declare const getAllContent: typeof fetchEntries;
+
+export { Blocks, BlocksProps, BuilderBlock, BuilderContent, Button, ButtonProps, ColumnProps, Columns, ComponentInfo, ContentVariants as Content, ContentVariantsPrps as ContentProps, FragmentComponent as Fragment, FragmentProps, Image, ImageProps, InsertMenuConfig, InsertMenuItem, RegisteredComponent, RenderBlocks, RenderContent, SectionComponent as Section, SectionProps, Settings, Symbol, SymbolProps, Text, TextProps, Video, VideoProps, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, subscribeToEditor, track };

package/lib/browser/dev.js

@@ -3247,8 +3247,8 @@ var generateContentUrl = (options) => {
   if (!apiKey) {
     throw new Error("Missing API key");
   }
-  if (!["v2", "v3"].includes(apiVersion)) {
-    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  if (!["v3"].includes(apiVersion)) {
+    throw new Error(`Invalid apiVersion: expected 'v3', received '${apiVersion}'`);
   }
   if ((options.limit === void 0 || options.limit > 1) && !("noTraverse" in options)) {
     noTraverse = true;
@@ -3368,13 +3368,6 @@ async function fetchEntries(options) {
 }
 var getAllContent = fetchEntries;
 
-// src/functions/is-from-trusted-host.ts
-var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
-function isFromTrustedHost(trustedHosts, e) {
-  const url = new URL(e.origin), hostname = url.hostname;
-  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
-}
-
 // src/functions/is-previewing.ts
 function isPreviewing() {
   if (!isBrowser()) {
@@ -3625,8 +3618,15 @@ var getInteractionPropertiesForEvent = (event) => {
   };
 };
 
+// src/functions/is-from-trusted-host.ts
+var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
+function isFromTrustedHost(trustedHosts, e) {
+  const url = new URL(e.origin), hostname = url.hostname;
+  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
+}
+
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.7";
+var SDK_VERSION = "0.13.0";
 
 // src/functions/register.ts
 var registry = {};
@@ -3763,6 +3763,66 @@ var setupBrowserForEditing = (options = {}) => {
   }
 };
 
+// src/helpers/subscribe-to-editor.ts
+var 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;
+        }
+      }
+    }
+  };
+};
+var 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);
+  };
+};
+
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -3806,16 +3866,11 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
-    if (!isFromTrustedHost(props.trustedHosts, event)) {
-      return;
-    }
-    const {
-      data
-    } = event;
-    if (data) {
-      switch (data.type) {
-        case "builder.configureSdk": {
-          const messageContent = data.data;
+    return createEditorListener({
+      model: props.model,
+      trustedHosts: props.trustedHosts,
+      callbacks: {
+        configureSdk: (messageContent) => {
           const {
             breakpoints,
             contentId
@@ -3829,26 +3884,18 @@ function EnableEditor(props) {
                 breakpoints
               }
             });
-          }
-          setForceReRenderCount(forceReRenderCount() + 1);
-          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 === props.model) {
-            mergeNewContent(contentData);
             setForceReRenderCount(forceReRenderCount() + 1);
           }
-          break;
+        },
+        animation: (animation) => {
+          triggerAnimation(animation);
+        },
+        contentUpdate: (newContent) => {
+          mergeNewContent(newContent);
+          setForceReRenderCount(forceReRenderCount() + 1);
         }
       }
-    }
+    })(event);
   }
   function evaluateJsCode() {
     const jsCode = props.builderContextSignal.content?.data?.jsCode;
@@ -4692,4 +4739,4 @@ var fetchBuilderProps = async (_args) => {
   };
 };
 
-export { blocks_default as Blocks, button_default as Button, columns_default as Columns, content_variants_default as Content, fragment_default as Fragment, image_default as Image, RenderBlocks, RenderContent, section_default as Section, symbol_default as Symbol, text_default as Text, video_default as Video, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track };
+export { blocks_default as Blocks, button_default as Button, columns_default as Columns, content_variants_default as Content, fragment_default as Fragment, image_default as Image, RenderBlocks, RenderContent, section_default as Section, symbol_default as Symbol, text_default as Text, video_default as Video, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, subscribeToEditor, track };

package/lib/browser/dev.jsx

@@ -2921,8 +2921,8 @@ var generateContentUrl = (options) => {
   if (!apiKey) {
     throw new Error("Missing API key");
   }
-  if (!["v2", "v3"].includes(apiVersion)) {
-    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  if (!["v3"].includes(apiVersion)) {
+    throw new Error(`Invalid apiVersion: expected 'v3', received '${apiVersion}'`);
   }
   if ((options.limit === void 0 || options.limit > 1) && !("noTraverse" in options)) {
     noTraverse = true;
@@ -3042,13 +3042,6 @@ async function fetchEntries(options) {
 }
 var getAllContent = fetchEntries;
 
-// src/functions/is-from-trusted-host.ts
-var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
-function isFromTrustedHost(trustedHosts, e) {
-  const url = new URL(e.origin), hostname = url.hostname;
-  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
-}
-
 // src/functions/is-previewing.ts
 function isPreviewing() {
   if (!isBrowser()) {
@@ -3299,8 +3292,15 @@ var getInteractionPropertiesForEvent = (event) => {
   };
 };
 
+// src/functions/is-from-trusted-host.ts
+var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
+function isFromTrustedHost(trustedHosts, e) {
+  const url = new URL(e.origin), hostname = url.hostname;
+  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
+}
+
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.7";
+var SDK_VERSION = "0.13.0";
 
 // src/functions/register.ts
 var registry = {};
@@ -3437,6 +3437,66 @@ var setupBrowserForEditing = (options = {}) => {
   }
 };
 
+// src/helpers/subscribe-to-editor.ts
+var 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;
+        }
+      }
+    }
+  };
+};
+var 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);
+  };
+};
+
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
@@ -3482,14 +3542,11 @@ function EnableEditor(props) {
     }));
   }
   function processMessage(event) {
-    if (!isFromTrustedHost(props.trustedHosts, event)) {
-      return;
-    }
-    const { data } = event;
-    if (data) {
-      switch (data.type) {
-        case "builder.configureSdk": {
-          const messageContent = data.data;
+    return createEditorListener({
+      model: props.model,
+      trustedHosts: props.trustedHosts,
+      callbacks: {
+        configureSdk: (messageContent) => {
           const { breakpoints, contentId } = messageContent;
           if (!contentId || contentId !== props.builderContextSignal.content?.id) {
             return;
@@ -3500,26 +3557,18 @@ function EnableEditor(props) {
                 breakpoints
               }
             });
-          }
-          setForceReRenderCount(forceReRenderCount() + 1);
-          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 === props.model) {
-            mergeNewContent(contentData);
             setForceReRenderCount(forceReRenderCount() + 1);
           }
-          break;
+        },
+        animation: (animation) => {
+          triggerAnimation(animation);
+        },
+        contentUpdate: (newContent) => {
+          mergeNewContent(newContent);
+          setForceReRenderCount(forceReRenderCount() + 1);
         }
       }
-    }
+    })(event);
   }
   function evaluateJsCode() {
     const jsCode = props.builderContextSignal.content?.data?.jsCode;
@@ -4213,5 +4262,6 @@ export {
   isPreviewing,
   register,
   setEditorSettings,
+  subscribeToEditor,
   track
 };