chore: snyc changes from main

.github/workflows/update-copyright-years-in-license-file.yml

@@ -0,0 +1,17 @@
+name: Update copyright year(s) in license file
+
+on:
+    schedule:
+        - cron: "0 3 1 1 *"
+    workflow_dispatch:
+
+jobs:
+    run:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  fetch-depth: 0
+            - uses: FantasticFiasco/action-update-license-year@v2
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -15,7 +15,7 @@ npm install @contentstack/live-preview-utils
 Alternatively, if you want to include the package directly in your website HTML code, use the following command:
 
 ```html
-<script src="https://unpkg.com/@contentstack/live-preview-utils@1.3.2/dist/index.js"></script>
+<script src="https://unpkg.com/@contentstack/live-preview-utils@1.4.0/dist/index.js"></script>
 ```
 
 # Initializing the SDK

docs/live-preview-configs.md

@@ -2,22 +2,24 @@
 
 The init data has following structure
 
-- [Contentstack Live Preview Utils SDK Configs](#contentstack-live-preview-utils-sdk-configs)
-  - [`init(config: IConfig)`](#initconfig-iconfig)
-    - [`enable`](#enable)
-    - [`ssr`](#ssr)
-    - [`editButton`](#editbutton)
-    - [`cleanCslpOnProduction`](#cleancslponproduction)
-    - [`stackDetails`](#stackdetails)
-      - [`apiKey`](#apikey)
-      - [`environment`](#environment)
-    - [`clientUrlParams`](#clienturlparams)
-      - [NA config](#na-config)
-      - [EU config](#eu-config)
-    - [`stackSdk`](#stacksdk)
-  - [`onLiveEdit(callback: () => void)`](#onliveeditcallback---void)
-  - [`onEntryChange(callback: () => void)`](#onentrychangecallback---void)
-  - [`getGatsbyDataFormat(sdkQuery: IStackSdk, prefix: string)`](#getgatsbydataformatsdkquery-istacksdk-prefix-string)
+-   [Contentstack Live Preview Utils SDK Configs](#contentstack-live-preview-utils-sdk-configs)
+    -   [`init(config: IConfig)`](#initconfig-iconfig)
+        -   [`enable`](#enable)
+        -   [`ssr`](#ssr)
+        -   [`editButton`](#editbutton)
+        -   [`cleanCslpOnProduction`](#cleancslponproduction)
+        -   [`stackDetails`](#stackdetails)
+            -   [`apiKey`](#apikey)
+            -   [`environment`](#environment)
+        -   [`clientUrlParams`](#clienturlparams)
+            -   [NA config](#na-config)
+            -   [EU config](#eu-config)
+        -   [`stackSdk`](#stacksdk)
+    -   [`onLiveEdit(callback: () => void)`](#onliveeditcallback---void)
+    -   [`onEntryChange(callback: () => void)`](#onentrychangecallback---void)
+    -   [hash](#hash)
+    -   [setConfigFromParams(config: ConstructorParameters\[0\])](#setconfigfromparamsconfig-constructorparameters0)
+    -   [`getGatsbyDataFormat(sdkQuery: IStackSdk, prefix: string)`](#getgatsbydataformatsdkquery-istacksdk-prefix-string)
 
 ## `init(config: IConfig)`
 
@@ -253,11 +255,36 @@ const Footer = () => {
 ```
 
 > **Note:** To make the `onEntryChange` method work similarly to the [`onLiveEdit`](#onliveeditcallback---void) method, you can utilize the optional parameter `skipInitialRender:true`. This will enable the function to only call the Contentstack API once.
->
->For example:
->```js
->onEntryChange(fetchData,{skipInitialRender:true})
->```
+
+**For example:**
+
+```js
+onEntryChange(fetchData, { skipInitialRender: true });
+```
+
+## hash
+
+The `hash` property returns the live preview hash of the entry. It returns an empty string if the page is not opened in live preivew pane.
+
+> **Note:** In the SSR mode, the hash may not be populated automatically and may require you to pass it using the `setConfigFromParams()` method.
+
+**For example:**
+
+```js
+console.log(ContentstackLivePreview.hash); // "hash"
+```
+
+## setConfigFromParams(config: ConstructorParameters<typeof URLSearchParams>[0])
+
+The `setConfigFromParams` method allows you to set the configuration from the URL parameters. It accepts the URLSearchParams object as a parameter. This method is used in the SSR mode to set the live preview hash received from the URL.
+
+**For example:**
+
+```js
+console.log(ContentstackLivePreview.hash); // ""
+ContentstackLivePreview.setConfigFromParams(window.location.search); // https://example.com?live_preview=hash
+console.log(ContentstackLivePreview.hash); // "hash"
+```
 
 ## `getGatsbyDataFormat(sdkQuery: IStackSdk, prefix: string)`
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "1.3.2",
+    "version": "1.4.0",
     "types": "dist/src/index.d.ts",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "main": "dist/index.js",

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

@@ -3,6 +3,7 @@ import { PublicLogger } from "../utils/public-logger";
 import { IInitData } from "../types/types";
 import { sendPostmessageToWindow } from "./utils";
 import packageJson from "../../package.json";
+import Config from "../utils/configHandler";
 
 describe("Live preview HOC Callback Pub Sub", () => {
     afterEach(() => {
@@ -296,3 +297,74 @@ describe("Gatsby Data formatter", () => {
         ]);
     });
 });
+
+describe("live preview hash", () => {
+    beforeAll(() => {
+        Config.reset();
+    });
+    afterEach(() => {
+        ContentstackLivePreview.subscribers = {};
+        ContentstackLivePreview.livePreview = null;
+        Config.reset();
+    });
+    test("should be empty by default", () => {
+        ContentstackLivePreview.init();
+
+        expect(ContentstackLivePreview.hash).toBe("");
+    });
+
+    test("should be set when client-data-send event is fired", async () => {
+        ContentstackLivePreview.init();
+        const livePreviewHash = "livePreviewHash1234";
+
+        await sendPostmessageToWindow("client-data-send", {
+            hash: livePreviewHash,
+            content_type_uid: "entryContentTypeUid",
+            entry_uid: "entryUid",
+        });
+
+        expect(ContentstackLivePreview.hash).toBe(livePreviewHash);
+    });
+
+    test("should be empty string before init", () => {
+        expect(ContentstackLivePreview.hash).toBe("");
+    });
+});
+
+describe("setConfigFromParams()", () => {
+    afterEach(() => {
+        ContentstackLivePreview.subscribers = {};
+        ContentstackLivePreview.livePreview = null;
+    });
+    test("should set hash if live_preview is present", () => {
+        ContentstackLivePreview.init();
+        const livePreviewHash = "livePreviewHash1234";
+
+        expect(ContentstackLivePreview.hash).toBe("");
+
+        ContentstackLivePreview.setConfigFromParams({
+            live_preview: livePreviewHash,
+        });
+
+        expect(ContentstackLivePreview.hash).toBe(livePreviewHash);
+    });
+
+    test("should throw an error if param is not an object", () => {
+        ContentstackLivePreview.init();
+
+        expect(() => {
+            // @ts-ignore
+            ContentstackLivePreview.setConfigFromParams("");
+        }).toThrowError("Live preview SDK: query param must be an object");
+    });
+
+    test("should set the params if it was set before initialization", () => {
+        const livePreviewHash = "livePreviewHash1234";
+
+        ContentstackLivePreview.setConfigFromParams({
+            live_preview: livePreviewHash,
+        });
+
+        expect(ContentstackLivePreview.hash).toBe(livePreviewHash);
+    });
+});

src/__test__/live-preview.test.ts

@@ -894,3 +894,24 @@ describe("Live modes", () => {
         expect(spiedVisualEditor).not.toHaveBeenCalled();
     });
 });
+
+describe("live preview hash", () => {
+    test("should be empty by default", () => {
+        const livePreview = new LivePreview();
+
+        expect(livePreview.hash).toBe("");
+    });
+
+    test("should be set when client-data-send event is fired", async () => {
+        const livePreview = new LivePreview();
+        const livePreviewHash = "livePreviewHash1234";
+
+        await sendPostmessageToWindow("client-data-send", {
+            hash: livePreviewHash,
+            content_type_uid: "entryContentTypeUid",
+            entry_uid: "entryUid",
+        });
+
+        expect(livePreview.hash).toBe(livePreviewHash);
+    });
+});

src/contentstack-live-preview-HOC.ts

@@ -17,6 +17,11 @@ export class ContentstackLivePreview {
     static livePreview: LivePreview | null = null;
     static userConfig: Partial<IInitData> | null = null;
     static subscribers: { [uid: string]: OnEntryChangeCallback } = {};
+    static configs: {
+        params: ConstructorParameters<typeof URLSearchParams>[0];
+    } = {
+        params: {},
+    };
 
     static init(
         userConfig: Partial<IInitData> = getUserInitData()
@@ -34,13 +39,48 @@ export class ContentstackLivePreview {
                 ContentstackLivePreview.livePreview.setOnChangeCallback(
                     ContentstackLivePreview.publish
                 );
+
+                ContentstackLivePreview.livePreview.setConfigFromParams(
+                    this.configs.params
+                );
+                this.configs.params = {};
+
                 return Promise.resolve(ContentstackLivePreview.livePreview);
             }
         } else {
             ContentstackLivePreview.userConfig = userConfig;
         }
     }
 
+    /**
+     * It is the live preview hash.
+     * This hash could be used when data is fetched manually.
+     */
+    static get hash(): string {
+        if (!this.livePreview) {
+            const urlParams = new URLSearchParams(this.configs.params);
+            return urlParams.get("live_preview") ?? "";
+        }
+
+        return this.livePreview.hash;
+    }
+
+    /**
+     * Sets the live preview hash from the query param which is
+     * accessible via `hash` property.
+     * @param params query param in an object form
+     */
+    static setConfigFromParams(
+        params: ConstructorParameters<typeof URLSearchParams>[0] = {}
+    ): void {
+        if (!this.livePreview) {
+            this.configs.params = params;
+            return;
+        }
+
+        this.livePreview.setConfigFromParams(params);
+    }
+
     private static publish(): void {
         Object.values<OnEntryChangeCallback>(
             ContentstackLivePreview.subscribers
@@ -74,6 +114,13 @@ export class ContentstackLivePreview {
             ContentstackLivePreview.livePreview.setOnChangeCallback(
                 ContentstackLivePreview.publish
             );
+
+            ContentstackLivePreview.livePreview.setConfigFromParams(
+                this.configs.params
+            );
+
+            this.configs.params = {};
+
             ContentstackLivePreview.userConfig = null;
         }
         const callbackUid = ContentstackLivePreview.subscribe(onChangeCallback);

src/live-preview.ts

@@ -264,6 +264,35 @@ export default class LivePreview {
         Config.set("onChange", onChangeCallback);
     }
 
+    /**
+     * It is the live preview hash.
+     * This hash could be used when data is fetched manually.
+     */
+    get hash(): string {
+        return Config.get().hash;
+    }
+
+    /**
+     * Sets the live preview hash from the query param which is
+     * accessible via `hash` property.
+     * @param params query param in an object form
+     */
+    setConfigFromParams(
+        params: ConstructorParameters<typeof URLSearchParams>[0] = {}
+    ): void {
+        if (typeof params !== "object")
+            throw new TypeError(
+                "Live preview SDK: query param must be an object"
+            );
+
+        const urlParams = new URLSearchParams(params);
+        const live_preview = urlParams.get("live_preview");
+
+        if (live_preview) {
+            Config.set("hash", live_preview);
+        }
+    }
+
     private resolveIncomingMessage(
         e: MessageEvent<ILivePreviewReceivePostMessages>
     ) {
@@ -278,6 +307,8 @@ export default class LivePreview {
                 const { contentTypeUid, entryUid } = config.stackDetails;
                 const { hash } = e.data.data;
 
+                this.setConfigFromParams({ live_preview: hash });
+
                 if (config.ssr) {
                     // Get the content from the server and replace the body
 

src/types/types.ts

@@ -69,6 +69,7 @@ export declare interface IConfig {
     stackSdk: IStackSdk;
     onChange: () => void;
     runScriptsOnUpdate: boolean;
+    hash: string;
     editButton: IConfigEditButton;
     mode: ILivePreviewModeConfig;
 }

src/utils/defaults.ts

@@ -48,6 +48,7 @@ export function getDefaultConfig(): IConfig {
             includeByQueryParameter: true,
         },
 
+        hash: "",
         mode: 1,
 
         stackDetails: {