@liquidcommercedev/rmn-sdk 1.5.0-beta.20 → 1.5.0-beta.21

package/dist/index.cjs

@@ -20203,6 +20203,7 @@ function clearPlacement(placementId) {
 function prepareSpotPlacement(placement) {
     placement.removeAttribute('style');
     placement.removeAttribute('class');
+    placement.setAttribute('data-spot-parent', 'true');
     const styles = {
         width: '100%',
         height: '100%',
@@ -20211,24 +20212,6 @@ function prepareSpotPlacement(placement) {
     };
     Object.assign(placement.style, styles);
 }
-/**
- * Waits for the DOM to be ready before continuing.
- *
- * @return {Promise<void>} - A promise that resolves when the DOM is ready.
- */
-async function waitForDOM() {
-    if (!isBrowserEnvironment()) {
-        return;
-    }
-    if (document.readyState === 'complete' || document.readyState === 'interactive') {
-        return;
-    }
-    return new Promise((resolve) => {
-        document.addEventListener('DOMContentLoaded', () => {
-            resolve();
-        });
-    });
-}
 // Sets the id for the user who is browsing the website
 // This id is used to identify the user and provide personalized content
 function setUserId() {
@@ -20237,6 +20220,35 @@ function setUserId() {
         localStorageService.setUserId();
     }
 }
+function initDOMObserver(elementIds, callback) {
+    const checkElement = (element) => {
+        if (element.id &&
+            elementIds.includes(element.id) &&
+            !element.getAttribute('data-spot-parent')) {
+            callback(element);
+        }
+    };
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        checkElement(node);
+                        node
+                            .querySelectorAll('*')
+                            .forEach((el) => checkElement(el));
+                    }
+                });
+            }
+        });
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+    document.querySelectorAll('*').forEach((el) => checkElement(el));
+    return observer;
+}
 
 /**
  * LiquidCommerce Rmn Client
@@ -20270,9 +20282,6 @@ class LiquidCommerceRmnClient {
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
     async injectSpotElement(params) {
-        var _a;
-        // Wait for the DOM to be ready before continuing, to avoid issues with the spot placements
-        await waitForDOM();
         const config = params.config;
         // Handle no spots error state
         if (!params.inject.length) {
@@ -20285,41 +20294,42 @@ class LiquidCommerceRmnClient {
         }
         // Validate inject data
         const inject = validateInjectData(params.inject);
-        for (const item of inject) {
-            // Identify the spot element
-            this.eventService.handleSpotState(item.placementId, {
-                identifier: {
-                    placementId: item.placementId,
-                    spotType: item.spotType,
-                },
-            }, false);
-            const placement = document.getElementById(item.placementId);
+        const placementElementShowedInDOM = (placement) => {
+            var _a;
+            const data = inject.find((item) => item.placementId === placement.id);
             // Handle placement not found error state
-            if (!placement) {
-                this.eventService.handleSpotState(item.placementId, {
+            if (!data) {
+                this.eventService.handleSpotState(placement.id, {
                     state: {
-                        error: `Placement not found for id "${item.placementId}".`,
+                        error: `Placement not found for id "${placement.id}".`,
                         mounted: false,
                         loading: false,
                     },
                 });
-                continue;
+                return;
             }
+            // Identify the spot element
+            this.eventService.handleSpotState(data.placementId, {
+                identifier: {
+                    placementId: data.placementId,
+                    spotType: data.spotType,
+                },
+            }, false);
             prepareSpotPlacement(placement);
             const skeletonElement = this.elementService.createSkeletonElement({
                 fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
-                spotType: item.spotType,
+                spotType: data.spotType,
             });
             // Handle skeleton loader error state
             if (!skeletonElement) {
-                this.eventService.handleSpotState(item.placementId, {
+                this.eventService.handleSpotState(data.placementId, {
                     state: {
                         error: `Failed to create skeleton loader element.`,
                         mounted: false,
                         loading: true,
                     },
                 });
-                continue;
+                return;
             }
             placement.replaceChildren(skeletonElement);
             const spotPlacementIsNearCallback = async () => {
@@ -20327,34 +20337,34 @@ class LiquidCommerceRmnClient {
                 // Stop observing the placement, as we only need to do this once
                 this.intersectionObserver.unobserve(placement);
                 // Set the spot element to loading state
-                this.eventService.handleSpotState(item.placementId, { state: { loading: true } });
+                this.eventService.handleSpotState(data.placementId, { state: { loading: true } });
                 // Make the spot selection request
-                const response = await this.injectSpotSelectionRequest({ ...params, inject: [item] });
+                const response = await this.injectSpotSelectionRequest({ ...params, inject: [data] });
                 // const response = await useSpotSelectionExample(inject);
                 // Handle request error state
                 if (typeof response === 'object' && 'error' in response) {
-                    this.eventService.handleSpotState(item.placementId, {
+                    this.eventService.handleSpotState(data.placementId, {
                         state: {
                             error: response.error,
                             mounted: false,
                             loading: false,
                         },
                     });
-                    clearPlacement(item.placementId);
+                    clearPlacement(data.placementId);
                     return;
                 }
-                const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
-                const spots = response[item.placementId];
+                const itemConfig = (_a = data.config) !== null && _a !== void 0 ? _a : config;
+                const spots = response[data.placementId];
                 // Handle no spots found error state
                 if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                    this.eventService.handleSpotState(item.placementId, {
+                    this.eventService.handleSpotState(data.placementId, {
                         state: {
-                            error: `No spots found for type "${item.spotType}".`,
+                            error: `No spots found for type "${data.spotType}".`,
                             mounted: false,
                             loading: false,
                         },
                     });
-                    clearPlacement(item.placementId);
+                    clearPlacement(data.placementId);
                     return;
                 }
                 // Handle single spot
@@ -20374,7 +20384,8 @@ class LiquidCommerceRmnClient {
                 rootMargin: '1000px',
                 threshold: 0,
             });
-        }
+        };
+        initDOMObserver(inject.map((item) => item.placementId), placementElementShowedInDOM);
     }
     /**
      * Injects a single spot element into the provided placement.

package/dist/index.esm.js

@@ -20201,6 +20201,7 @@ function clearPlacement(placementId) {
 function prepareSpotPlacement(placement) {
     placement.removeAttribute('style');
     placement.removeAttribute('class');
+    placement.setAttribute('data-spot-parent', 'true');
     const styles = {
         width: '100%',
         height: '100%',
@@ -20209,24 +20210,6 @@ function prepareSpotPlacement(placement) {
     };
     Object.assign(placement.style, styles);
 }
-/**
- * Waits for the DOM to be ready before continuing.
- *
- * @return {Promise<void>} - A promise that resolves when the DOM is ready.
- */
-async function waitForDOM() {
-    if (!isBrowserEnvironment()) {
-        return;
-    }
-    if (document.readyState === 'complete' || document.readyState === 'interactive') {
-        return;
-    }
-    return new Promise((resolve) => {
-        document.addEventListener('DOMContentLoaded', () => {
-            resolve();
-        });
-    });
-}
 // Sets the id for the user who is browsing the website
 // This id is used to identify the user and provide personalized content
 function setUserId() {
@@ -20235,6 +20218,35 @@ function setUserId() {
         localStorageService.setUserId();
     }
 }
+function initDOMObserver(elementIds, callback) {
+    const checkElement = (element) => {
+        if (element.id &&
+            elementIds.includes(element.id) &&
+            !element.getAttribute('data-spot-parent')) {
+            callback(element);
+        }
+    };
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        checkElement(node);
+                        node
+                            .querySelectorAll('*')
+                            .forEach((el) => checkElement(el));
+                    }
+                });
+            }
+        });
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+    document.querySelectorAll('*').forEach((el) => checkElement(el));
+    return observer;
+}
 
 /**
  * LiquidCommerce Rmn Client
@@ -20268,9 +20280,6 @@ class LiquidCommerceRmnClient {
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
     async injectSpotElement(params) {
-        var _a;
-        // Wait for the DOM to be ready before continuing, to avoid issues with the spot placements
-        await waitForDOM();
         const config = params.config;
         // Handle no spots error state
         if (!params.inject.length) {
@@ -20283,41 +20292,42 @@ class LiquidCommerceRmnClient {
         }
         // Validate inject data
         const inject = validateInjectData(params.inject);
-        for (const item of inject) {
-            // Identify the spot element
-            this.eventService.handleSpotState(item.placementId, {
-                identifier: {
-                    placementId: item.placementId,
-                    spotType: item.spotType,
-                },
-            }, false);
-            const placement = document.getElementById(item.placementId);
+        const placementElementShowedInDOM = (placement) => {
+            var _a;
+            const data = inject.find((item) => item.placementId === placement.id);
             // Handle placement not found error state
-            if (!placement) {
-                this.eventService.handleSpotState(item.placementId, {
+            if (!data) {
+                this.eventService.handleSpotState(placement.id, {
                     state: {
-                        error: `Placement not found for id "${item.placementId}".`,
+                        error: `Placement not found for id "${placement.id}".`,
                         mounted: false,
                         loading: false,
                     },
                 });
-                continue;
+                return;
             }
+            // Identify the spot element
+            this.eventService.handleSpotState(data.placementId, {
+                identifier: {
+                    placementId: data.placementId,
+                    spotType: data.spotType,
+                },
+            }, false);
             prepareSpotPlacement(placement);
             const skeletonElement = this.elementService.createSkeletonElement({
                 fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
-                spotType: item.spotType,
+                spotType: data.spotType,
             });
             // Handle skeleton loader error state
             if (!skeletonElement) {
-                this.eventService.handleSpotState(item.placementId, {
+                this.eventService.handleSpotState(data.placementId, {
                     state: {
                         error: `Failed to create skeleton loader element.`,
                         mounted: false,
                         loading: true,
                     },
                 });
-                continue;
+                return;
             }
             placement.replaceChildren(skeletonElement);
             const spotPlacementIsNearCallback = async () => {
@@ -20325,34 +20335,34 @@ class LiquidCommerceRmnClient {
                 // Stop observing the placement, as we only need to do this once
                 this.intersectionObserver.unobserve(placement);
                 // Set the spot element to loading state
-                this.eventService.handleSpotState(item.placementId, { state: { loading: true } });
+                this.eventService.handleSpotState(data.placementId, { state: { loading: true } });
                 // Make the spot selection request
-                const response = await this.injectSpotSelectionRequest({ ...params, inject: [item] });
+                const response = await this.injectSpotSelectionRequest({ ...params, inject: [data] });
                 // const response = await useSpotSelectionExample(inject);
                 // Handle request error state
                 if (typeof response === 'object' && 'error' in response) {
-                    this.eventService.handleSpotState(item.placementId, {
+                    this.eventService.handleSpotState(data.placementId, {
                         state: {
                             error: response.error,
                             mounted: false,
                             loading: false,
                         },
                     });
-                    clearPlacement(item.placementId);
+                    clearPlacement(data.placementId);
                     return;
                 }
-                const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
-                const spots = response[item.placementId];
+                const itemConfig = (_a = data.config) !== null && _a !== void 0 ? _a : config;
+                const spots = response[data.placementId];
                 // Handle no spots found error state
                 if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                    this.eventService.handleSpotState(item.placementId, {
+                    this.eventService.handleSpotState(data.placementId, {
                         state: {
-                            error: `No spots found for type "${item.spotType}".`,
+                            error: `No spots found for type "${data.spotType}".`,
                             mounted: false,
                             loading: false,
                         },
                     });
-                    clearPlacement(item.placementId);
+                    clearPlacement(data.placementId);
                     return;
                 }
                 // Handle single spot
@@ -20372,7 +20382,8 @@ class LiquidCommerceRmnClient {
                 rootMargin: '1000px',
                 threshold: 0,
             });
-        }
+        };
+        initDOMObserver(inject.map((item) => item.placementId), placementElementShowedInDOM);
     }
     /**
      * Injects a single spot element into the provided placement.

package/dist/types/rmn-client.helper.d.ts

@@ -29,13 +29,8 @@ export declare function clearPlacement(placementId: string): void;
  * @return {void}
  */
 export declare function prepareSpotPlacement(placement: HTMLElement): void;
-/**
- * Waits for the DOM to be ready before continuing.
- *
- * @return {Promise<void>} - A promise that resolves when the DOM is ready.
- */
-export declare function waitForDOM(): Promise<void>;
 export declare function useSpotSelectionExample(inject: IInjectSpotElement[]): Promise<ISpots | {
     error: string;
 }>;
 export declare function setUserId(): void;
+export declare function initDOMObserver(elementIds: string[], callback: (element: HTMLElement) => void): MutationObserver;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.20",
+  "version": "1.5.0-beta.21",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",