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

package/dist/RefreshRouteOnSave.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+export declare const RefreshRouteOnSave: React.FC<{
+    apiRoute?: string;
+    depth?: number;
+    refresh: () => void;
+    serverURL: string;
+}>;
+//# sourceMappingURL=RefreshRouteOnSave.d.ts.map

package/dist/RefreshRouteOnSave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshRouteOnSave.d.ts","sourceRoot":"","sources":["../src/RefreshRouteOnSave.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB,CAuCA,CAAA"}

package/dist/RefreshRouteOnSave.js

@@ -0,0 +1,44 @@
+'use client';
+import { isDocumentEvent, ready } from '@payloadcms/live-preview';
+import { useCallback, useEffect, useRef } from 'react';
+export const RefreshRouteOnSave = (props)=>{
+    const { apiRoute, depth, refresh, serverURL } = props;
+    const hasSentReadyMessage = useRef(false);
+    const onMessage = useCallback((event)=>{
+        if (isDocumentEvent(event, serverURL)) {
+            if (typeof refresh === 'function') {
+                refresh();
+            } else {
+                // eslint-disable-next-line no-console
+                console.error('You must provide a refresh function to `RefreshRouteOnSave`');
+            }
+        }
+    }, [
+        refresh,
+        serverURL
+    ]);
+    useEffect(()=>{
+        if (typeof window !== 'undefined') {
+            window.addEventListener('message', onMessage);
+        }
+        if (!hasSentReadyMessage.current) {
+            hasSentReadyMessage.current = true;
+            ready({
+                serverURL
+            });
+        }
+        return ()=>{
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('message', onMessage);
+            }
+        };
+    }, [
+        serverURL,
+        onMessage,
+        depth,
+        apiRoute
+    ]);
+    return null;
+};
+
+//# sourceMappingURL=RefreshRouteOnSave.js.map

package/dist/RefreshRouteOnSave.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RefreshRouteOnSave.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { isDocumentEvent, ready } from '@payloadcms/live-preview'\nimport { useCallback, useEffect, useRef } from 'react'\n\nexport const RefreshRouteOnSave: React.FC<{\n  apiRoute?: string\n  depth?: number\n  refresh: () => void\n  serverURL: string\n}> = (props) => {\n  const { apiRoute, depth, refresh, serverURL } = props\n  const hasSentReadyMessage = useRef<boolean>(false)\n\n  const onMessage = useCallback(\n    (event: MessageEvent) => {\n      if (isDocumentEvent(event, serverURL)) {\n        if (typeof refresh === 'function') {\n          refresh()\n        } else {\n          // eslint-disable-next-line no-console\n          console.error('You must provide a refresh function to `RefreshRouteOnSave`')\n        }\n      }\n    },\n    [refresh, serverURL],\n  )\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      window.addEventListener('message', onMessage)\n    }\n\n    if (!hasSentReadyMessage.current) {\n      hasSentReadyMessage.current = true\n\n      ready({\n        serverURL,\n      })\n    }\n\n    return () => {\n      if (typeof window !== 'undefined') {\n        window.removeEventListener('message', onMessage)\n      }\n    }\n  }, [serverURL, onMessage, depth, apiRoute])\n\n  return null\n}\n"],"names":["isDocumentEvent","ready","useCallback","useEffect","useRef","RefreshRouteOnSave","props","apiRoute","depth","refresh","serverURL","hasSentReadyMessage","onMessage","event","console","error","window","addEventListener","current","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,eAAe,EAAEC,KAAK,QAAQ,2BAA0B;AACjE,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEtD,OAAO,MAAMC,qBAKR,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGJ;IAChD,MAAMK,sBAAsBP,OAAgB;IAE5C,MAAMQ,YAAYV,YAChB,CAACW;QACC,IAAIb,gBAAgBa,OAAOH,YAAY;YACrC,IAAI,OAAOD,YAAY,YAAY;gBACjCA;YACF,OAAO;gBACL,sCAAsC;gBACtCK,QAAQC,KAAK,CAAC;YAChB;QACF;IACF,GACA;QAACN;QAASC;KAAU;IAGtBP,UAAU;QACR,IAAI,OAAOa,WAAW,aAAa;YACjCA,OAAOC,gBAAgB,CAAC,WAAWL;QACrC;QAEA,IAAI,CAACD,oBAAoBO,OAAO,EAAE;YAChCP,oBAAoBO,OAAO,GAAG;YAE9BjB,MAAM;gBACJS;YACF;QACF;QAEA,OAAO;YACL,IAAI,OAAOM,WAAW,aAAa;gBACjCA,OAAOG,mBAAmB,CAAC,WAAWP;YACxC;QACF;IACF,GAAG;QAACF;QAAWE;QAAWJ;QAAOD;KAAS;IAE1C,OAAO;AACT,EAAC"}

package/dist/index.d.ts

@@ -1,9 +1,3 @@
-export declare const useLivePreview: <T extends unknown>(props: {
-    depth?: number;
-    initialData: T;
-    serverURL: string;
-}) => {
-    data: T;
-    isLoading: boolean;
-};
+export { RefreshRouteOnSave } from './RefreshRouteOnSave.js';
+export { useLivePreview } from './useLivePreview.js';
 //# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -1,43 +1,4 @@
-"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)=>{
-        setData(mergedData);
-        setIsLoading(false);
-    }, []);
-    (0, _react.useEffect)(()=>{
-        const subscription = (0, _livepreview.subscribe)({
-            callback: onChange,
-            depth,
-            initialData,
-            serverURL
-        });
-        return ()=>{
-            (0, _livepreview.unsubscribe)(subscription);
-        };
-    }, [
-        serverURL,
-        onChange,
-        depth,
-        initialData
-    ]);
-    return {
-        data,
-        isLoading
-    };
-};
+export { RefreshRouteOnSave } from './RefreshRouteOnSave.js';
+export { useLivePreview } from './useLivePreview.js';
 
-//# 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":["export { RefreshRouteOnSave } from './RefreshRouteOnSave.js'\nexport { useLivePreview } from './useLivePreview.js'\n"],"names":["RefreshRouteOnSave","useLivePreview"],"rangeMappings":";","mappings":"AAAA,SAASA,kBAAkB,QAAQ,0BAAyB;AAC5D,SAASC,cAAc,QAAQ,sBAAqB"}

package/dist/useLivePreview.d.ts

@@ -0,0 +1,10 @@
+export declare const useLivePreview: <T extends unknown>(props: {
+    apiRoute?: string;
+    depth?: number;
+    initialData: T;
+    serverURL: string;
+}) => {
+    data: T;
+    isLoading: boolean;
+};
+//# sourceMappingURL=useLivePreview.d.ts.map

package/dist/useLivePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLivePreview.d.ts","sourceRoot":"","sources":["../src/useLivePreview.ts"],"names":[],"mappings":"AASA,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/useLivePreview.js

@@ -0,0 +1,47 @@
+'use client';
+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);
+    }, []);
+    useEffect(()=>{
+        const subscription = subscribe({
+            apiRoute,
+            callback: onChange,
+            depth,
+            initialData,
+            serverURL
+        });
+        if (!hasSentReadyMessage.current) {
+            hasSentReadyMessage.current = true;
+            ready({
+                serverURL
+            });
+        }
+        return ()=>{
+            unsubscribe(subscription);
+        };
+    }, [
+        serverURL,
+        onChange,
+        depth,
+        initialData,
+        apiRoute
+    ]);
+    return {
+        data,
+        isLoading
+    };
+};
+
+//# sourceMappingURL=useLivePreview.js.map

package/dist/useLivePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useLivePreview.ts"],"sourcesContent":["'use client'\nimport { 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;AACA,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,30 +1,42 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "1.0.0-beta.2",
+  "version": "3.0.0-alpha.70",
   "description": "The official live preview React SDK for Payload",
-  "repository": "https://github.com/payloadcms/payload",
-  "license": "MIT",
   "homepage": "https://payloadcms.com",
-  "author": "Payload CMS, Inc.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms/payload.git",
+    "directory": "packages/live-preview-react"
+  },
+  "license": "MIT",
+  "author": "Payload <dev@payloadcms.com> (https://payloadcms.com)",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "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": "1.1.1",
+    "payload": "3.0.0-alpha.70"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "exports": null,
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",

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,
-  }
-}