@payloadcms/live-preview-react 1.0.0-beta.1

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,43 @@
+"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
+    };
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdWJzY3JpYmUsIHVuc3Vic2NyaWJlIH0gZnJvbSAnQHBheWxvYWRjbXMvbGl2ZS1wcmV2aWV3J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuLy8gVG8gcHJldmVudCB0aGUgZmxpY2tlciBvZiBtaXNzaW5nIGRhdGEgb24gaW5pdGlhbCBsb2FkLFxuLy8geW91IGNhbiBwYXNzIGluIHRoZSBpbml0aWFsIHBhZ2UgZGF0YSBmcm9tIHRoZSBzZXJ2ZXJcbi8vIFRvIHByZXZlbnQgdGhlIGZsaWNrZXIgb2Ygc3RhbGUgZGF0YSB3aGlsZSB0aGUgcG9zdCBtZXNzYWdlIGlzIGJlaW5nIHNlbnQsXG4vLyB5b3UgY2FuIGNvbmRpdGlvbmFsbHkgcmVuZGVyIGxvYWRpbmcgVUkgYmFzZWQgb24gdGhlIGBpc0xvYWRpbmdgIHN0YXRlXG5cbmV4cG9ydCBjb25zdCB1c2VMaXZlUHJldmlldyA9IDxUIGV4dGVuZHMgYW55Pihwcm9wczoge1xuICBkZXB0aD86IG51bWJlclxuICBpbml0aWFsRGF0YTogVFxuICBzZXJ2ZXJVUkw6IHN0cmluZ1xufSk6IHtcbiAgZGF0YTogVFxuICBpc0xvYWRpbmc6IGJvb2xlYW5cbn0gPT4ge1xuICBjb25zdCB7IGRlcHRoID0gMCwgaW5pdGlhbERhdGEsIHNlcnZlclVSTCB9ID0gcHJvcHNcbiAgY29uc3QgW2RhdGEsIHNldERhdGFdID0gdXNlU3RhdGU8VD4oaW5pdGlhbERhdGEpXG4gIGNvbnN0IFtpc0xvYWRpbmcsIHNldElzTG9hZGluZ10gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKVxuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soKG1lcmdlZERhdGEpID0+IHtcbiAgICBzZXREYXRhKG1lcmdlZERhdGEpXG4gICAgc2V0SXNMb2FkaW5nKGZhbHNlKVxuICB9LCBbXSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHN1YnNjcmlwdGlvbiA9IHN1YnNjcmliZSh7XG4gICAgICBjYWxsYmFjazogb25DaGFuZ2UsXG4gICAgICBkZXB0aCxcbiAgICAgIGluaXRpYWxEYXRhLFxuICAgICAgc2VydmVyVVJMLFxuICAgIH0pXG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgdW5zdWJzY3JpYmUoc3Vic2NyaXB0aW9uKVxuICAgIH1cbiAgfSwgW3NlcnZlclVSTCwgb25DaGFuZ2UsIGRlcHRoLCBpbml0aWFsRGF0YV0pXG5cbiAgcmV0dXJuIHtcbiAgICBkYXRhLFxuICAgIGlzTG9hZGluZyxcbiAgfVxufVxuIl0sIm5hbWVzIjpbInVzZUxpdmVQcmV2aWV3IiwicHJvcHMiLCJkZXB0aCIsImluaXRpYWxEYXRhIiwic2VydmVyVVJMIiwiZGF0YSIsInNldERhdGEiLCJ1c2VTdGF0ZSIsImlzTG9hZGluZyIsInNldElzTG9hZGluZyIsIm9uQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJtZXJnZWREYXRhIiwidXNlRWZmZWN0Iiwic3Vic2NyaXB0aW9uIiwic3Vic2NyaWJlIiwiY2FsbGJhY2siLCJ1bnN1YnNjcmliZSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFRYUE7OztlQUFBQTs7OzZCQVIwQjt1QkFDVTtBQU8xQyxNQUFNQSxpQkFBaUIsQ0FBZ0JDO0lBUTVDLE1BQU0sRUFBRUMsUUFBUSxDQUFDLEVBQUVDLFdBQVcsRUFBRUMsU0FBUyxFQUFFLEdBQUdIO0lBQzlDLE1BQU0sQ0FBQ0ksTUFBTUMsUUFBUSxHQUFHQyxJQUFBQSxlQUFRLEVBQUlKO0lBQ3BDLE1BQU0sQ0FBQ0ssV0FBV0MsYUFBYSxHQUFHRixJQUFBQSxlQUFRLEVBQVU7SUFFcEQsTUFBTUcsV0FBV0MsSUFBQUEsa0JBQVcsRUFBQyxDQUFDQztRQUM1Qk4sUUFBUU07UUFDUkgsYUFBYTtJQUNmLEdBQUcsRUFBRTtJQUVMSSxJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsTUFBTUMsZUFBZUMsSUFBQUEsc0JBQVMsRUFBQztZQUM3QkMsVUFBVU47WUFDVlI7WUFDQUM7WUFDQUM7UUFDRjtRQUVBLE9BQU87WUFDTGEsSUFBQUEsd0JBQVcsRUFBQ0g7UUFDZDtJQUNGLEdBQUc7UUFBQ1Y7UUFBV007UUFBVVI7UUFBT0M7S0FBWTtJQUU1QyxPQUFPO1FBQ0xFO1FBQ0FHO0lBQ0Y7QUFDRiJ9

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@payloadcms/live-preview-react",
+  "version": "1.0.0-beta.1",
+  "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.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "react": "18.2.0",
+    "@payloadcms/live-preview": "1.0.0-beta.1"
+  },
+  "devDependencies": {
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.15",
+    "payload": "2.0.0-beta.15",
+    "@payloadcms/eslint-config": "0.0.1"
+  },
+  "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",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/"
+  }
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+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,
+  }
+}