@payloadcms/live-preview-react 3.73.0-internal.e61e2ce → 3.73.0-internal.ff401d9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/useLivePreview.d.ts +34 -0
  2. package/dist/useLivePreview.d.ts.map +1 -1
  3. package/dist/useLivePreview.js +32 -2
  4. package/dist/useLivePreview.js.map +1 -1
  5. package/package.json +6 -6
package/dist/useLivePreview.d.ts CHANGED
@@ -1,6 +1,35 @@
1
+ import type { CollectionPopulationRequestHandler } from '@payloadcms/live-preview';
1
2
  /**
2
3
  * This is a React hook to implement {@link https://payloadcms.com/docs/live-preview/overview Payload Live Preview}.
3
4
  *
5
+ * @example
6
+ * ```tsx
7
+ * // Basic usage
8
+ * const { data, isLoading } = useLivePreview({
9
+ * initialData: pageData,
10
+ * serverURL: 'https://your-payload-server.com',
11
+ * depth: 2,
12
+ * })
13
+ * ```
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * // Custom request handler (e.g., routing through middleware)
18
+ * const customHandler: CollectionPopulationRequestHandler = async ({ endpoint, data }) => {
19
+ * return fetch(`https://api.example.com/preview/${endpoint}`, {
20
+ * method: 'POST',
21
+ * body: JSON.stringify(data),
22
+ * credentials: 'include',
23
+ * })
24
+ * }
25
+ *
26
+ * const { data, isLoading } = useLivePreview({
27
+ * initialData: pageData,
28
+ * serverURL: 'https://your-payload-server.com',
29
+ * requestHandler: customHandler,
30
+ * })
31
+ * ```
32
+ *
4
33
  * @link https://payloadcms.com/docs/live-preview/frontend
5
34
  */
6
35
  export declare const useLivePreview: <T extends Record<string, any>>(props: {
@@ -11,6 +40,11 @@ export declare const useLivePreview: <T extends Record<string, any>>(props: {
11
40
  * you can pass in the initial page data from the server.
12
41
  */
13
42
  initialData: T;
43
+ /**
44
+ * Custom handler to intercept and modify data fetching.
45
+ * Useful for routing requests through middleware or applying transformations.
46
+ */
47
+ requestHandler?: CollectionPopulationRequestHandler;
14
48
  serverURL: string;
15
49
  }) => {
16
50
  data: T;
package/dist/useLivePreview.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useLivePreview.d.ts","sourceRoot":"","sources":["../src/useLivePreview.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,SAAS;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,WAAW,EAAE,CAAC,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG;IACF,IAAI,EAAE,CAAC,CAAA;IACP;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAA;CAsCnB,CAAA"}
1
+ {"version":3,"file":"useLivePreview.d.ts","sourceRoot":"","sources":["../src/useLivePreview.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,0BAA0B,CAAA;AAKlF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,SAAS;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,WAAW,EAAE,CAAC,CAAA;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAA;IACnD,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG;IACF,IAAI,EAAE,CAAC,CAAA;IACP;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAA;CAuCnB,CAAA"}
package/dist/useLivePreview.js CHANGED
@@ -4,10 +4,38 @@ import { useCallback, useEffect, useRef, useState } from 'react';
4
4
  /**
5
5
  * This is a React hook to implement {@link https://payloadcms.com/docs/live-preview/overview Payload Live Preview}.
6
6
  *
7
+ * @example
8
+ * ```tsx
9
+ * // Basic usage
10
+ * const { data, isLoading } = useLivePreview({
11
+ * initialData: pageData,
12
+ * serverURL: 'https://your-payload-server.com',
13
+ * depth: 2,
14
+ * })
15
+ * ```
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * // Custom request handler (e.g., routing through middleware)
20
+ * const customHandler: CollectionPopulationRequestHandler = async ({ endpoint, data }) => {
21
+ * return fetch(`https://api.example.com/preview/${endpoint}`, {
22
+ * method: 'POST',
23
+ * body: JSON.stringify(data),
24
+ * credentials: 'include',
25
+ * })
26
+ * }
27
+ *
28
+ * const { data, isLoading } = useLivePreview({
29
+ * initialData: pageData,
30
+ * serverURL: 'https://your-payload-server.com',
31
+ * requestHandler: customHandler,
32
+ * })
33
+ * ```
34
+ *
7
35
  * @link https://payloadcms.com/docs/live-preview/frontend
8
36
  */ // NOTE: cannot use Record<string, unknown> here bc generated interfaces will not satisfy the type constraint
9
37
  export const useLivePreview = (props)=>{
10
- const { apiRoute, depth, initialData, serverURL } = props;
38
+ const { apiRoute, depth, initialData, requestHandler, serverURL } = props;
11
39
  const [data, setData] = useState(initialData);
12
40
  const [isLoading, setIsLoading] = useState(true);
13
41
  const hasSentReadyMessage = useRef(false);
@@ -21,6 +49,7 @@ export const useLivePreview = (props)=>{
21
49
  callback: onChange,
22
50
  depth,
23
51
  initialData,
52
+ requestHandler,
24
53
  serverURL
25
54
  });
26
55
  if (!hasSentReadyMessage.current) {
@@ -37,7 +66,8 @@ export const useLivePreview = (props)=>{
37
66
  onChange,
38
67
  depth,
39
68
  initialData,
40
- apiRoute
69
+ apiRoute,
70
+ requestHandler
41
71
  ]);
42
72
  return {
43
73
  data,
package/dist/useLivePreview.js.map CHANGED
@@ -1 +1 @@
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/**\n * This is a React hook to implement {@link https://payloadcms.com/docs/live-preview/overview Payload Live Preview}.\n *\n * @link https://payloadcms.com/docs/live-preview/frontend\n */\n// NOTE: cannot use Record<string, unknown> here bc generated interfaces will not satisfy the type constraint\nexport const useLivePreview = <T extends Record<string, any>>(props: {\n apiRoute?: string\n depth?: number\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 */\n initialData: T\n serverURL: string\n}): {\n data: T\n /**\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 */\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: T) => {\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"],"mappings":"AAAA;AACA,SAASA,KAAK,EAAEC,SAAS,EAAEC,WAAW,QAAQ,2BAA0B;AACxE,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAEhE;;;;CAIC,GACD,6GAA6G;AAC7G,OAAO,MAAMC,iBAAiB,CAAgCC;IAiB5D,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"}
1
+ {"version":3,"sources":["../src/useLivePreview.ts"],"sourcesContent":["'use client'\nimport type { CollectionPopulationRequestHandler } from '@payloadcms/live-preview'\n\nimport { ready, subscribe, unsubscribe } from '@payloadcms/live-preview'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * This is a React hook to implement {@link https://payloadcms.com/docs/live-preview/overview Payload Live Preview}.\n *\n * @example\n * ```tsx\n * // Basic usage\n * const { data, isLoading } = useLivePreview({\n * initialData: pageData,\n * serverURL: 'https://your-payload-server.com',\n * depth: 2,\n * })\n * ```\n *\n * @example\n * ```tsx\n * // Custom request handler (e.g., routing through middleware)\n * const customHandler: CollectionPopulationRequestHandler = async ({ endpoint, data }) => {\n * return fetch(`https://api.example.com/preview/${endpoint}`, {\n * method: 'POST',\n * body: JSON.stringify(data),\n * credentials: 'include',\n * })\n * }\n *\n * const { data, isLoading } = useLivePreview({\n * initialData: pageData,\n * serverURL: 'https://your-payload-server.com',\n * requestHandler: customHandler,\n * })\n * ```\n *\n * @link https://payloadcms.com/docs/live-preview/frontend\n */\n// NOTE: cannot use Record<string, unknown> here bc generated interfaces will not satisfy the type constraint\nexport const useLivePreview = <T extends Record<string, any>>(props: {\n apiRoute?: string\n depth?: number\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 */\n initialData: T\n /**\n * Custom handler to intercept and modify data fetching.\n * Useful for routing requests through middleware or applying transformations.\n */\n requestHandler?: CollectionPopulationRequestHandler\n serverURL: string\n}): {\n data: T\n /**\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 */\n isLoading: boolean\n} => {\n const { apiRoute, depth, initialData, requestHandler, 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: T) => {\n setData(mergedData)\n setIsLoading(false)\n }, [])\n\n useEffect(() => {\n const subscription = subscribe({\n apiRoute,\n callback: onChange,\n depth,\n initialData,\n requestHandler,\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, requestHandler])\n\n return {\n data,\n isLoading,\n }\n}\n"],"names":["ready","subscribe","unsubscribe","useCallback","useEffect","useRef","useState","useLivePreview","props","apiRoute","depth","initialData","requestHandler","serverURL","data","setData","isLoading","setIsLoading","hasSentReadyMessage","onChange","mergedData","subscription","callback","current"],"mappings":"AAAA;AAGA,SAASA,KAAK,EAAEC,SAAS,EAAEC,WAAW,QAAQ,2BAA0B;AACxE,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,6GAA6G;AAC7G,OAAO,MAAMC,iBAAiB,CAAgCC;IAsB5D,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGL;IACpE,MAAM,CAACM,MAAMC,QAAQ,GAAGT,SAAYK;IACpC,MAAM,CAACK,WAAWC,aAAa,GAAGX,SAAkB;IACpD,MAAMY,sBAAsBb,OAAgB;IAE5C,MAAMc,WAAWhB,YAAY,CAACiB;QAC5BL,QAAQK;QACRH,aAAa;IACf,GAAG,EAAE;IAELb,UAAU;QACR,MAAMiB,eAAepB,UAAU;YAC7BQ;YACAa,UAAUH;YACVT;YACAC;YACAC;YACAC;QACF;QAEA,IAAI,CAACK,oBAAoBK,OAAO,EAAE;YAChCL,oBAAoBK,OAAO,GAAG;YAE9BvB,MAAM;gBACJa;YACF;QACF;QAEA,OAAO;YACLX,YAAYmB;QACd;IACF,GAAG;QAACR;QAAWM;QAAUT;QAAOC;QAAaF;QAAUG;KAAe;IAEtE,OAAO;QACLE;QACAE;IACF;AACF,EAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/live-preview-react",
3
- "version": "3.73.0-internal.e61e2ce",
3
+ "version": "3.73.0-internal.ff401d9",
4
4
  "description": "The official React SDK for Payload Live Preview",
5
5
  "homepage": "https://payloadcms.com",
6
6
  "repository": {
@@ -32,13 +32,13 @@
32
32
  "dist"
33
33
  ],
34
34
  "dependencies": {
35
- "@payloadcms/live-preview": "3.73.0-internal.e61e2ce"
35
+ "@payloadcms/live-preview": "3.73.0-internal.ff401d9"
36
36
  },
37
37
  "devDependencies": {
38
- "@types/react": "19.2.1",
39
- "@types/react-dom": "19.2.1",
40
- "payload": "3.73.0-internal.e61e2ce",
41
- "@payloadcms/eslint-config": "3.28.0"
38
+ "@types/react": "19.2.8",
39
+ "@types/react-dom": "19.2.3",
40
+ "@payloadcms/eslint-config": "3.28.0",
41
+ "payload": "3.73.0-internal.ff401d9"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.1 || ^19.1.2 || ^19.2.1",