fix: ensure onChange callback is not called multiple times on site load

Using some state, ensure that the first call of onEntryChange callback
only happens from one of - requestDataSync, callback registration or
first client-data-send

Author: faraazb-contentstack

src/livePreview/eventManager/postMessageEvent.hooks.ts

@@ -1,4 +1,5 @@
 import Config, { setConfigFromParams } from "../../configManager/configManager";
+import ContentstackLivePreview from "../../preview/contentstack-live-preview-HOC";
 import { ILivePreviewWindowType } from "../../types/types";
 import { addParamsToUrl } from "../../utils";
 import livePreviewPostMessage from "./livePreviewEventManager";
@@ -51,6 +52,18 @@ export function useOnEntryUpdatePostMessageEvent(): void {
             });
             const { ssr, onChange } = Config.get();
             if (!ssr) {
+                console.log("onChange called for client-data-send");
+                // if client-data-send is received for the first time
+                // and onChange has not been called for the first time, call it
+                if (!ContentstackLivePreview.hasReceivedFirstClientDataSend) {
+                    ContentstackLivePreview.hasReceivedFirstClientDataSend =
+                        true;
+                    if (!ContentstackLivePreview.firstOnChangeCalled) {
+                        onChange();
+                        ContentstackLivePreview.firstOnChangeCalled = true;
+                        return;
+                    }
+                }
                 onChange();
             }
         }
@@ -79,7 +92,10 @@ export function sendInitializeLivePreviewPostMessageEvent(): void {
 
             // TODO: This is a fix for the issue where we were calling sending init in the builder
             // Let's remove this condition when we fix it.
-            if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {
+            if (
+                Config?.get()?.windowType &&
+                Config.get().windowType === ILivePreviewWindowType.BUILDER
+            ) {
                 return;
             }
 

src/livePreview/live-preview.ts

@@ -1,3 +1,4 @@
+import { aC } from "vitest/dist/chunks/reporters.D7Jzd9GS.js";
 import Config from "../configManager/configManager";
 import { PublicLogger } from "../logger/logger";
 import { ILivePreviewModeConfig } from "../types/types";
@@ -12,6 +13,7 @@ import {
     OnEntryChangeCallbackUID,
     OnEntryChangeUnsubscribeParameters,
 } from "./types/onEntryChangeCallback.type";
+import ContentstackLivePreview from "../preview/contentstack-live-preview-HOC";
 
 export default class LivePreview {
     /**
@@ -53,14 +55,13 @@ export default class LivePreview {
             // render the hover outline only when edit button enable
 
             if (
-                !isOpeningInTimeline() && 
+                !isOpeningInTimeline() &&
                 (config.editButton.enable ||
-                config.mode >= ILivePreviewModeConfig.BUILDER)
+                    config.mode >= ILivePreviewModeConfig.BUILDER)
             ) {
                 LivePreviewEditButton.livePreviewEditButton =
                     new LivePreviewEditButton();
             }
-
         } else if (config.cleanCslpOnProduction) {
             removeDataCslp();
         }
@@ -74,7 +75,10 @@ export default class LivePreview {
 
         //! TODO: we replaced the handleOnChange() with this.
         //! I don't think we need this. Confirm and remove it.
-        config.onChange();
+        if (!ContentstackLivePreview.firstOnChangeCalled) {
+            console.log("Requesting data sync");
+            config.onChange();
+        }
 
         sendInitializeLivePreviewPostMessageEvent();
     }
@@ -88,8 +92,10 @@ export default class LivePreview {
     }
 
     private publish(): void {
+        console.log("Calling callbacks", this.subscribers);
         Object.values<OnEntryChangeCallback>(this.subscribers).forEach(
             (func) => {
+                console.log("Calling subscriber", func);
                 func();
             }
         );

src/preview/contentstack-live-preview-HOC.ts

@@ -31,6 +31,15 @@ class ContentstackLivePreview {
     private static onEntryChangeCallbacks: OnEntryChangeCallbackSubscribers =
         {};
 
+    /**
+     * Tracks whether the first onChange has been called.
+     */
+    static firstOnChangeCalled: boolean = false;
+    /**
+     * Tracks whether the first client-data-send has been received.
+     */
+    static hasReceivedFirstClientDataSend: boolean = false;
+
     /**
      * Initializes the Live Preview SDK with the provided user configuration.
      * If the SDK is already initialized, subsequent calls to this method will return the existing SDK instance.
@@ -77,15 +86,15 @@ class ContentstackLivePreview {
         const config = Config.get();
         const clonedConfig = cloneDeep(config);
         const configToShare = pick(clonedConfig, [
-            'ssr',
-            'enable',
-            'cleanCslpOnProduction',
-            'stackDetails',
-            'clientUrlParams',
-            'windowType',
-            'hash',
-            'editButton',
-            'mode',
+            "ssr",
+            "enable",
+            "cleanCslpOnProduction",
+            "stackDetails",
+            "clientUrlParams",
+            "windowType",
+            "hash",
+            "editButton",
+            "mode",
         ]);
         return configToShare;
     }
@@ -153,14 +162,21 @@ class ContentstackLivePreview {
         }
 
         const isWindowDefined = typeof window !== "undefined";
+        const searchParams =
+            isWindowDefined && new URLSearchParams(window.location.search);
         const isLivePreviewSearchParamPresent =
-            isWindowDefined &&
-            new URLSearchParams(window.location.search).has("live_preview");
+            searchParams && searchParams.has("live_preview");
+        const shouldCallCallback =
+            skipInitialRender && isLivePreviewSearchParamPresent;
         // calling onChangeCallback when live_preview search parameter
         // is present because we don't send the initial client-data-send
         //  message in visual builder
-        if (!skipInitialRender || isLivePreviewSearchParamPresent) {
+        if (
+            !skipInitialRender ||
+            (shouldCallCallback && !this.firstOnChangeCalled)
+        ) {
             onChangeCallback();
+            ContentstackLivePreview.firstOnChangeCalled = true;
         }
 
         return callbackUid;
@@ -185,6 +201,7 @@ class ContentstackLivePreview {
     static onLiveEdit(
         onChangeCallback: OnEntryChangeCallback
     ): OnEntryChangeCallbackUID {
+        console.log("Requesting onLiveEdit");
         return ContentstackLivePreview.onEntryChange(onChangeCallback, {
             skipInitialRender: true,
         });
@@ -252,4 +269,4 @@ class ContentstackLivePreview {
     }
 }
 
-export default ContentstackLivePreview;
+export default ContentstackLivePreview;