Merge pull request #95 from contentstack/EB-890-get-details-from-url-…

…query-param feat: set live preview details from the URL
contentstack · Jan 24, 2024 · 88e2f3e · 88e2f3e
2 parents 95635f0 + 365edf1
commit 88e2f3e
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
         "@contentstack/advanced-post-message": "github:contentstack/adv-post-message#EB-676-config-support",
         "@testing-library/jest-dom": "^5.14.1",
         "@types/jest": "^27.0.1",
+        "@types/jsdom": "^21.1.6",
         "@types/lodash": "^4.14.195",
         "@types/mustache": "^4.2.2",
         "@types/uuid": "^8.3.1",
@@ -63,7 +64,6 @@
         "url": "https://github.com/contentstack/live-preview-sdk.git"
     },
     "dependencies": {
-        "@types/jsdom": "^21.1.6",
         "just-camel-case": "^4.0.2",
         "lodash": "^4.17.21",
         "morphdom": "^2.6.1",

diff --git a/src/__test__/contentstack-live-preview-HOC.test.ts b/src/__test__/contentstack-live-preview-HOC.test.ts
@@ -349,15 +349,6 @@ describe("setConfigFromParams()", () => {
         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";
 

diff --git a/src/__test__/live-preview.test.ts b/src/__test__/live-preview.test.ts
@@ -919,3 +919,45 @@ describe("live preview hash", () => {
         expect(livePreview.hash).toBe(livePreviewHash);
     });
 });
+
+describe("Live preview config update", () => {
+    beforeEach(() => {
+        Config.reset();
+    });
+
+    afterAll(() => {
+        Config.reset();
+    });
+
+    test("should update the config from the URL", () => {
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set("content_type_uid", "test");
+        searchParams.set("entry_uid", "test");
+        searchParams.set("live_preview", "test");
+
+        // mock window location
+        Object.defineProperty(window, "location", {
+            writable: true,
+            value: {
+                search: searchParams.toString(),
+            },
+        });
+
+        expect(Config.get().stackDetails.contentTypeUid).toEqual("");
+        expect(Config.get().stackDetails.entryUid).toEqual("");
+        expect(Config.get().hash).toEqual("");
+
+        new LivePreview();
+
+        expect(Config.get().stackDetails.contentTypeUid).toEqual("test");
+        expect(Config.get().stackDetails.entryUid).toEqual("test");
+        expect(Config.get().hash).toEqual("test");
+
+        Object.defineProperty(window, "location", {
+            writable: true,
+            value: {
+                search: "",
+            },
+        });
+    });
+});
diff --git a/src/contentstack-live-preview-HOC.ts b/src/contentstack-live-preview-HOC.ts
@@ -12,6 +12,7 @@ import {
 import LivePreview from "./live-preview";
 import { getUserInitData } from "./utils/defaults";
 import { PublicLogger } from "./utils/public-logger";
+import { setConfigFromParams } from "./utils/configHandler";
 
 export class ContentstackLivePreview {
     static livePreview: LivePreview | null = null;
@@ -40,9 +41,7 @@ export class ContentstackLivePreview {
                     ContentstackLivePreview.publish
                 );
 
-                ContentstackLivePreview.livePreview.setConfigFromParams(
-                    this.configs.params
-                );
+                setConfigFromParams(this.configs.params);
                 this.configs.params = {};
 
                 return Promise.resolve(ContentstackLivePreview.livePreview);
@@ -69,6 +68,8 @@ export class ContentstackLivePreview {
      * Sets the live preview hash from the query param which is
      * accessible via `hash` property.
      * @param params query param in an object form
+     * @deprecated The SDK will automatically get the hash from the URL.
+     *
      */
     static setConfigFromParams(
         params: ConstructorParameters<typeof URLSearchParams>[0] = {}
@@ -78,7 +79,7 @@ export class ContentstackLivePreview {
             return;
         }
 
-        this.livePreview.setConfigFromParams(params);
+        setConfigFromParams(params);
     }
 
     private static publish(): void {
@@ -115,9 +116,7 @@ export class ContentstackLivePreview {
                 ContentstackLivePreview.publish
             );
 
-            ContentstackLivePreview.livePreview.setConfigFromParams(
-                this.configs.params
-            );
+            setConfigFromParams(this.configs.params);
 
             this.configs.params = {};
 

diff --git a/src/live-preview.ts b/src/live-preview.ts
@@ -2,7 +2,6 @@ import packageJson from "../package.json";
 import { VisualEditor } from "./liveEditor";
 import {
     IEditButtonPosition,
-    IEditEntrySearchParams,
     IInitData,
     ILivePreviewModeConfig,
     ILivePreviewReceivePostMessages,
@@ -14,7 +13,10 @@ import {
     createSingularEditButton,
     getEditButtonPosition,
 } from "./utils";
-import Config from "./utils/configHandler";
+import Config, {
+    setConfigFromParams,
+    updateConfigFromUrl,
+} from "./utils/configHandler";
 import { addCslpOutline } from "./utils/cslpdata";
 import { getUserInitData } from "./utils/defaults";
 import { PublicLogger } from "./utils/public-logger";
@@ -38,13 +40,13 @@ export default class LivePreview {
 
     constructor(initData: Partial<IInitData> = getUserInitData()) {
         Config.replace(initData);
+        updateConfigFromUrl();
         const config = Config.get();
 
         this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);
         this.generateRedirectUrl = this.generateRedirectUrl.bind(this);
         this.scrollHandler = this.scrollHandler.bind(this);
         this.linkClickHandler = this.linkClickHandler.bind(this);
-        this.handleUserChange = this.handleUserChange.bind(this);
         this.setOnChangeCallback = this.setOnChangeCallback.bind(this);
         this.resolveIncomingMessage = this.resolveIncomingMessage.bind(this);
         this.createCslpTooltip = this.createCslpTooltip.bind(this);
@@ -242,18 +244,6 @@ export default class LivePreview {
         }
     }
 
-    private handleUserChange(editEntrySearchParams: IEditEntrySearchParams) {
-        const config = Config.get();
-        // here we provide contentTypeUid and EntryUid to the StackDelivery SDK.
-        const stackSdkLivePreviewConfig = {
-            ...config.stackSdk.live_preview,
-            ...editEntrySearchParams,
-            live_preview: editEntrySearchParams.hash,
-        };
-        Config.set("stackSdk.live_preview", stackSdkLivePreviewConfig);
-        config.onChange();
-    }
-
     setOnChangeCallback(onChangeCallback: () => void): void {
         Config.set("onChange", onChangeCallback);
     }
@@ -266,27 +256,6 @@ export default class LivePreview {
         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>
     ) {
@@ -301,7 +270,11 @@ export default class LivePreview {
                 const { contentTypeUid, entryUid } = config.stackDetails;
                 const { hash } = e.data.data;
 
-                this.setConfigFromParams({ live_preview: hash });
+                setConfigFromParams({
+                    live_preview: hash,
+                    content_type_uid: contentTypeUid,
+                    entry_uid: entryUid,
+                });
 
                 if (config.ssr) {
                     // Get the content from the server and replace the body
@@ -326,11 +299,8 @@ export default class LivePreview {
                             });
                         });
                 } else {
-                    this.handleUserChange({
-                        content_type_uid: contentTypeUid,
-                        entry_uid: entryUid,
-                        hash: hash,
-                    });
+                    const config = Config.get();
+                    config.onChange();
                 }
                 break;
             }
@@ -411,9 +381,10 @@ export default class LivePreview {
     // Request parent for data sync when document loads
     private requestDataSync() {
         const config = Config.get();
-        this.handleUserChange({
-            live_preview: "init", // this is the hash of the live previewd
-        });
+
+        //! TODO: we replaced the handleOnChange() with this.
+        //! I don't think we need this. Confirm and remove it.
+        config.onChange();
 
         // add edit tooltip
         this.createCslpTooltip();