@payloadcms/live-preview-react 1.0.0-beta.2 → 3.0.0-beta.16

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export declare const useLivePreview: <T extends unknown>(props: {
+    apiRoute?: string;
     depth?: number;
     initialData: T;
     serverURL: string;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc;YACjB,MAAM;;eAEH,MAAM;;;eAGN,OAAO;CA4BnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,6BAA0B;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,CAAC,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG;IACF,IAAI,EAAE,CAAC,CAAA;IACP,SAAS,EAAE,OAAO,CAAA;CAsCnB,CAAA"}

package/dist/index.js

@@ -1,38 +1,41 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useLivePreview", {
-    enumerable: true,
-    get: function() {
-        return useLivePreview;
-    }
-});
-const _livepreview = require("@payloadcms/live-preview");
-const _react = require("react");
-const useLivePreview = (props)=>{
-    const { depth = 0, initialData, serverURL } = props;
-    const [data, setData] = (0, _react.useState)(initialData);
-    const [isLoading, setIsLoading] = (0, _react.useState)(true);
-    const onChange = (0, _react.useCallback)((mergedData)=>{
+import { ready, subscribe, unsubscribe } from '@payloadcms/live-preview';
+import { useCallback, useEffect, useRef, useState } from 'react';
+// To prevent the flicker of missing data on initial load,
+// you can pass in the initial page data from the server
+// To prevent the flicker of stale data while the post message is being sent,
+// you can conditionally render loading UI based on the `isLoading` state
+export const useLivePreview = (props)=>{
+    const { apiRoute, depth, initialData, serverURL } = props;
+    const [data, setData] = useState(initialData);
+    const [isLoading, setIsLoading] = useState(true);
+    const hasSentReadyMessage = useRef(false);
+    const onChange = useCallback((mergedData)=>{
         setData(mergedData);
         setIsLoading(false);
     }, []);
-    (0, _react.useEffect)(()=>{
-        const subscription = (0, _livepreview.subscribe)({
+    useEffect(()=>{
+        const subscription = subscribe({
+            apiRoute,
             callback: onChange,
             depth,
             initialData,
             serverURL
         });
+        if (!hasSentReadyMessage.current) {
+            hasSentReadyMessage.current = true;
+            ready({
+                serverURL
+            });
+        }
         return ()=>{
-            (0, _livepreview.unsubscribe)(subscription);
+            unsubscribe(subscription);
         };
     }, [
         serverURL,
         onChange,
         depth,
-        initialData
+        initialData,
+        apiRoute
     ]);
     return {
         data,
@@ -40,4 +43,4 @@ const useLivePreview = (props)=>{
     };
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdWJzY3JpYmUsIHVuc3Vic2NyaWJlIH0gZnJvbSAnQHBheWxvYWRjbXMvbGl2ZS1wcmV2aWV3J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuLy8gVG8gcHJldmVudCB0aGUgZmxpY2tlciBvZiBtaXNzaW5nIGRhdGEgb24gaW5pdGlhbCBsb2FkLFxuLy8geW91IGNhbiBwYXNzIGluIHRoZSBpbml0aWFsIHBhZ2UgZGF0YSBmcm9tIHRoZSBzZXJ2ZXJcbi8vIFRvIHByZXZlbnQgdGhlIGZsaWNrZXIgb2Ygc3RhbGUgZGF0YSB3aGlsZSB0aGUgcG9zdCBtZXNzYWdlIGlzIGJlaW5nIHNlbnQsXG4vLyB5b3UgY2FuIGNvbmRpdGlvbmFsbHkgcmVuZGVyIGxvYWRpbmcgVUkgYmFzZWQgb24gdGhlIGBpc0xvYWRpbmdgIHN0YXRlXG5cbmV4cG9ydCBjb25zdCB1c2VMaXZlUHJldmlldyA9IDxUIGV4dGVuZHMgYW55Pihwcm9wczoge1xuICBkZXB0aD86IG51bWJlclxuICBpbml0aWFsRGF0YTogVFxuICBzZXJ2ZXJVUkw6IHN0cmluZ1xufSk6IHtcbiAgZGF0YTogVFxuICBpc0xvYWRpbmc6IGJvb2xlYW5cbn0gPT4ge1xuICBjb25zdCB7IGRlcHRoID0gMCwgaW5pdGlhbERhdGEsIHNlcnZlclVSTCB9ID0gcHJvcHNcbiAgY29uc3QgW2RhdGEsIHNldERhdGFdID0gdXNlU3RhdGU8VD4oaW5pdGlhbERhdGEpXG4gIGNvbnN0IFtpc0xvYWRpbmcsIHNldElzTG9hZGluZ10gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKVxuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soKG1lcmdlZERhdGEpID0+IHtcbiAgICBzZXREYXRhKG1lcmdlZERhdGEpXG4gICAgc2V0SXNMb2FkaW5nKGZhbHNlKVxuICB9LCBbXSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHN1YnNjcmlwdGlvbiA9IHN1YnNjcmliZSh7XG4gICAgICBjYWxsYmFjazogb25DaGFuZ2UsXG4gICAgICBkZXB0aCxcbiAgICAgIGluaXRpYWxEYXRhLFxuICAgICAgc2VydmVyVVJMLFxuICAgIH0pXG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgdW5zdWJzY3JpYmUoc3Vic2NyaXB0aW9uKVxuICAgIH1cbiAgfSwgW3NlcnZlclVSTCwgb25DaGFuZ2UsIGRlcHRoLCBpbml0aWFsRGF0YV0pXG5cbiAgcmV0dXJuIHtcbiAgICBkYXRhLFxuICAgIGlzTG9hZGluZyxcbiAgfVxufVxuIl0sIm5hbWVzIjpbInVzZUxpdmVQcmV2aWV3IiwicHJvcHMiLCJkZXB0aCIsImluaXRpYWxEYXRhIiwic2VydmVyVVJMIiwiZGF0YSIsInNldERhdGEiLCJ1c2VTdGF0ZSIsImlzTG9hZGluZyIsInNldElzTG9hZGluZyIsIm9uQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJtZXJnZWREYXRhIiwidXNlRWZmZWN0Iiwic3Vic2NyaXB0aW9uIiwic3Vic2NyaWJlIiwiY2FsbGJhY2siLCJ1bnN1YnNjcmliZSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFRYUE7OztlQUFBQTs7OzZCQVIwQjt1QkFDVTtBQU8xQyxNQUFNQSxpQkFBaUIsQ0FBZ0JDO0lBUTVDLE1BQU0sRUFBRUMsUUFBUSxDQUFDLEVBQUVDLFdBQVcsRUFBRUMsU0FBUyxFQUFFLEdBQUdIO0lBQzlDLE1BQU0sQ0FBQ0ksTUFBTUMsUUFBUSxHQUFHQyxJQUFBQSxlQUFRLEVBQUlKO0lBQ3BDLE1BQU0sQ0FBQ0ssV0FBV0MsYUFBYSxHQUFHRixJQUFBQSxlQUFRLEVBQVU7SUFFcEQsTUFBTUcsV0FBV0MsSUFBQUEsa0JBQVcsRUFBQyxDQUFDQztRQUM1Qk4sUUFBUU07UUFDUkgsYUFBYTtJQUNmLEdBQUcsRUFBRTtJQUVMSSxJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsTUFBTUMsZUFBZUMsSUFBQUEsc0JBQVMsRUFBQztZQUM3QkMsVUFBVU47WUFDVlI7WUFDQUM7WUFDQUM7UUFDRjtRQUVBLE9BQU87WUFDTGEsSUFBQUEsd0JBQVcsRUFBQ0g7UUFDZDtJQUNGLEdBQUc7UUFBQ1Y7UUFBV007UUFBVVI7UUFBT0M7S0FBWTtJQUU1QyxPQUFPO1FBQ0xFO1FBQ0FHO0lBQ0Y7QUFDRiJ9
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { ready, subscribe, unsubscribe } from '@payloadcms/live-preview'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n// To prevent the flicker of missing data on initial load,\n// you can pass in the initial page data from the server\n// To prevent the flicker of stale data while the post message is being sent,\n// you can conditionally render loading UI based on the `isLoading` state\n\nexport const useLivePreview = <T extends any>(props: {\n  apiRoute?: string\n  depth?: number\n  initialData: T\n  serverURL: string\n}): {\n  data: T\n  isLoading: boolean\n} => {\n  const { apiRoute, depth, initialData, serverURL } = props\n  const [data, setData] = useState<T>(initialData)\n  const [isLoading, setIsLoading] = useState<boolean>(true)\n  const hasSentReadyMessage = useRef<boolean>(false)\n\n  const onChange = useCallback((mergedData) => {\n    setData(mergedData)\n    setIsLoading(false)\n  }, [])\n\n  useEffect(() => {\n    const subscription = subscribe({\n      apiRoute,\n      callback: onChange,\n      depth,\n      initialData,\n      serverURL,\n    })\n\n    if (!hasSentReadyMessage.current) {\n      hasSentReadyMessage.current = true\n\n      ready({\n        serverURL,\n      })\n    }\n\n    return () => {\n      unsubscribe(subscription)\n    }\n  }, [serverURL, onChange, depth, initialData, apiRoute])\n\n  return {\n    data,\n    isLoading,\n  }\n}\n"],"names":["ready","subscribe","unsubscribe","useCallback","useEffect","useRef","useState","useLivePreview","props","apiRoute","depth","initialData","serverURL","data","setData","isLoading","setIsLoading","hasSentReadyMessage","onChange","mergedData","subscription","callback","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,EAAEC,SAAS,EAAEC,WAAW,QAAQ,2BAA0B;AACxE,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAEhE,0DAA0D;AAC1D,wDAAwD;AACxD,6EAA6E;AAC7E,yEAAyE;AAEzE,OAAO,MAAMC,iBAAiB,CAAgBC;IAS5C,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ;IACpD,MAAM,CAACK,MAAMC,QAAQ,GAAGR,SAAYK;IACpC,MAAM,CAACI,WAAWC,aAAa,GAAGV,SAAkB;IACpD,MAAMW,sBAAsBZ,OAAgB;IAE5C,MAAMa,WAAWf,YAAY,CAACgB;QAC5BL,QAAQK;QACRH,aAAa;IACf,GAAG,EAAE;IAELZ,UAAU;QACR,MAAMgB,eAAenB,UAAU;YAC7BQ;YACAY,UAAUH;YACVR;YACAC;YACAC;QACF;QAEA,IAAI,CAACK,oBAAoBK,OAAO,EAAE;YAChCL,oBAAoBK,OAAO,GAAG;YAE9BtB,MAAM;gBACJY;YACF;QACF;QAEA,OAAO;YACLV,YAAYkB;QACd;IACF,GAAG;QAACR;QAAWM;QAAUR;QAAOC;QAAaF;KAAS;IAEtD,OAAO;QACLI;QACAE;IACF;AACF,EAAC"}

package/package.json

@@ -1,24 +1,36 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "1.0.0-beta.2",
+  "version": "3.0.0-beta.16",
   "description": "The official live preview React SDK for Payload",
-  "repository": "https://github.com/payloadcms/payload",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms/payload.git",
+    "directory": "packages/live-preview-react"
+  },
   "license": "MIT",
   "homepage": "https://payloadcms.com",
   "author": "Payload CMS, Inc.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "type": "module",
   "dependencies": {
-    "react": "18.2.0",
-    "@payloadcms/live-preview": "1.0.0-beta.2"
+    "@payloadcms/live-preview": "^0.x"
   },
   "devDependencies": {
-    "@types/node": "20.5.7",
-    "@types/react": "18.2.15",
-    "@payloadcms/eslint-config": "0.0.1",
-    "payload": "2.0.0-beta.15"
+    "@types/react": "18.2.74",
+    "@payloadcms/eslint-config": "3.0.0-beta.16",
+    "payload": "3.0.0-beta.16"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
   },
-  "exports": null,
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/index.ts

@@ -1,43 +0,0 @@
-import { subscribe, unsubscribe } from '@payloadcms/live-preview'
-import { useCallback, useEffect, useState } from 'react'
-
-// To prevent the flicker of missing data on initial load,
-// you can pass in the initial page data from the server
-// To prevent the flicker of stale data while the post message is being sent,
-// you can conditionally render loading UI based on the `isLoading` state
-
-export const useLivePreview = <T extends any>(props: {
-  depth?: number
-  initialData: T
-  serverURL: string
-}): {
-  data: T
-  isLoading: boolean
-} => {
-  const { depth = 0, initialData, serverURL } = props
-  const [data, setData] = useState<T>(initialData)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  const onChange = useCallback((mergedData) => {
-    setData(mergedData)
-    setIsLoading(false)
-  }, [])
-
-  useEffect(() => {
-    const subscription = subscribe({
-      callback: onChange,
-      depth,
-      initialData,
-      serverURL,
-    })
-
-    return () => {
-      unsubscribe(subscription)
-    }
-  }, [serverURL, onChange, depth, initialData])
-
-  return {
-    data,
-    isLoading,
-  }
-}