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

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,10 +1,3 @@
-export declare const useLivePreview: <T extends unknown>(props: {
-    apiRoute?: string;
-    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,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"}
+{"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,46 +1,4 @@
-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
-    };
-};
+export { RefreshRouteOnSave } from './RefreshRouteOnSave.js';
+export { useLivePreview } from './useLivePreview.js';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"}
+{"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,42 +1,42 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.27",
   "description": "The official live preview React SDK for Payload",
+  "homepage": "https://payloadcms.com",
   "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.",
+  "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",
-  "type": "module",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@payloadcms/live-preview": "^0.x"
   },
   "devDependencies": {
     "@types/react": "18.2.74",
-    "@payloadcms/eslint-config": "3.0.0-beta.16",
-    "payload": "3.0.0-beta.16"
+    "payload": "3.0.0-beta.27",
+    "@payloadcms/eslint-config": "1.1.1"
   },
   "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"
-    }
-  },
   "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",