@payloadcms/live-preview-react - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 3.0.0-beta.16

dist/index.d.ts

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

dist/index.js

@@ -1,23 +0,19 @@
-"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,
@@ -28,4 +24,10 @@ depth,
         });
+        if (!hasSentReadyMessage.current) {
+            hasSentReadyMessage.current = true;
+            ready({
+                serverURL
+            });
+        }
         return ()=>{
-            (0, _livepreview.unsubscribe)(subscription);
+            unsubscribe(subscription);
         };
@@ -36,3 +38,4 @@ }, [
         depth,
-        initialData
+        initialData,
+        apiRoute
     ]);
@@ -45,2 +48,2 @@ return {
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdWJzY3JpYmUsIHVuc3Vic2NyaWJlIH0gZnJvbSAnQHBheWxvYWRjbXMvbGl2ZS1wcmV2aWV3J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuLy8gVG8gcHJldmVudCB0aGUgZmxpY2tlciBvZiBtaXNzaW5nIGRhdGEgb24gaW5pdGlhbCBsb2FkLFxuLy8geW91IGNhbiBwYXNzIGluIHRoZSBpbml0aWFsIHBhZ2UgZGF0YSBmcm9tIHRoZSBzZXJ2ZXJcbi8vIFRvIHByZXZlbnQgdGhlIGZsaWNrZXIgb2Ygc3RhbGUgZGF0YSB3aGlsZSB0aGUgcG9zdCBtZXNzYWdlIGlzIGJlaW5nIHNlbnQsXG4vLyB5b3UgY2FuIGNvbmRpdGlvbmFsbHkgcmVuZGVyIGxvYWRpbmcgVUkgYmFzZWQgb24gdGhlIGBpc0xvYWRpbmdgIHN0YXRlXG5cbmV4cG9ydCBjb25zdCB1c2VMaXZlUHJldmlldyA9IDxUIGV4dGVuZHMgYW55Pihwcm9wczoge1xuICBkZXB0aD86IG51bWJlclxuICBpbml0aWFsRGF0YTogVFxuICBzZXJ2ZXJVUkw6IHN0cmluZ1xufSk6IHtcbiAgZGF0YTogVFxuICBpc0xvYWRpbmc6IGJvb2xlYW5cbn0gPT4ge1xuICBjb25zdCB7IGRlcHRoID0gMCwgaW5pdGlhbERhdGEsIHNlcnZlclVSTCB9ID0gcHJvcHNcbiAgY29uc3QgW2RhdGEsIHNldERhdGFdID0gdXNlU3RhdGU8VD4oaW5pdGlhbERhdGEpXG4gIGNvbnN0IFtpc0xvYWRpbmcsIHNldElzTG9hZGluZ10gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKVxuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soKG1lcmdlZERhdGEpID0+IHtcbiAgICBzZXREYXRhKG1lcmdlZERhdGEpXG4gICAgc2V0SXNMb2FkaW5nKGZhbHNlKVxuICB9LCBbXSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHN1YnNjcmlwdGlvbiA9IHN1YnNjcmliZSh7XG4gICAgICBjYWxsYmFjazogb25DaGFuZ2UsXG4gICAgICBkZXB0aCxcbiAgICAgIGluaXRpYWxEYXRhLFxuICAgICAgc2VydmVyVVJMLFxuICAgIH0pXG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgdW5zdWJzY3JpYmUoc3Vic2NyaXB0aW9uKVxuICAgIH1cbiAgfSwgW3NlcnZlclVSTCwgb25DaGFuZ2UsIGRlcHRoLCBpbml0aWFsRGF0YV0pXG5cbiAgcmV0dXJuIHtcbiAgICBkYXRhLFxuICAgIGlzTG9hZGluZyxcbiAgfVxufVxuIl0sIm5hbWVzIjpbInVzZUxpdmVQcmV2aWV3IiwicHJvcHMiLCJkZXB0aCIsImluaXRpYWxEYXRhIiwic2VydmVyVVJMIiwiZGF0YSIsInNldERhdGEiLCJ1c2VTdGF0ZSIsImlzTG9hZGluZyIsInNldElzTG9hZGluZyIsIm9uQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJtZXJnZWREYXRhIiwidXNlRWZmZWN0Iiwic3Vic2NyaXB0aW9uIiwic3Vic2NyaWJlIiwiY2FsbGJhY2siLCJ1bnN1YnNjcmliZSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFRYUE7OztlQUFBQTs7OzZCQVIwQjt1QkFDVTtBQU8xQyxNQUFNQSxpQkFBaUIsQ0FBZ0JDO0lBUTVDLE1BQU0sRUFBRUMsUUFBUSxDQUFDLEVBQUVDLFdBQVcsRUFBRUMsU0FBUyxFQUFFLEdBQUdIO0lBQzlDLE1BQU0sQ0FBQ0ksTUFBTUMsUUFBUSxHQUFHQyxJQUFBQSxlQUFRLEVBQUlKO0lBQ3BDLE1BQU0sQ0FBQ0ssV0FBV0MsYUFBYSxHQUFHRixJQUFBQSxlQUFRLEVBQVU7SUFFcEQsTUFBTUcsV0FBV0MsSUFBQUEsa0JBQVcsRUFBQyxDQUFDQztRQUM1Qk4sUUFBUU07UUFDUkgsYUFBYTtJQUNmLEdBQUcsRUFBRTtJQUVMSSxJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsTUFBTUMsZUFBZUMsSUFBQUEsc0JBQVMsRUFBQztZQUM3QkMsVUFBVU47WUFDVlI7WUFDQUM7WUFDQUM7UUFDRjtRQUVBLE9BQU87WUFDTGEsSUFBQUEsd0JBQVcsRUFBQ0g7UUFDZDtJQUNGLEdBQUc7UUFBQ1Y7UUFBV007UUFBVVI7UUFBT0M7S0FBWTtJQUU1QyxPQUFPO1FBQ0xFO1FBQ0FHO0lBQ0Y7QUFDRiJ9
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@payloadcms/live-preview-react",
-  "version": "1.0.0-beta.3",
+  "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",
@@ -11,13 +15,21 @@ "homepage": "https://payloadcms.com",
   "types": "./dist/index.d.ts",
+  "type": "module",
   "dependencies": {
-    "react": "18.2.0",
-    "@payloadcms/live-preview": "1.0.0-beta.3"
+    "@payloadcms/live-preview": "^0.x"
   },
   "devDependencies": {
-    "@types/node": "20.5.7",
-    "@types/react": "18.2.15",
-    "payload": "2.0.0-beta.30",
-    "@payloadcms/eslint-config": "0.0.1"
+    "@types/react": "18.2.74",
+    "@payloadcms/eslint-config": "3.0.0-beta.16",
+    "payload": "3.0.0-beta.16"
   },
-  "exports": null,
+  "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": {
@@ -24,0 +36,0 @@ "registry": "https://registry.npmjs.org/"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

3

decreased by-25%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

5852

decreased by-7.62%

Lines of code

53

decreased by-38.37%

Dependency changes

• + Added@payloadcms/live-preview@0.2.2(transitive)

• + Addedreact@18.3.1(transitive)

• - Removedreact@18.2.0

• - Removed@payloadcms/live-preview@1.0.0-beta.3(transitive)

• - Removedreact@18.2.0(transitive)

• Updated@payloadcms/live-preview@^0.x