tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: builds live preview sdk (#3441)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-05 12:13:19 -04:00
committed by GitHub
parent 617ca9f85f
commit b7d983f30a
24 changed files with 456 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/live-preview-react/.eslintignore Normal file
View File

@@ -0,0 +1,10 @@
.tmp
**/.git
**/.hg
**/.pnp.*
**/.svn
**/.yarn/**
**/build
**/dist/**
**/node_modules
**/temp

37
packages/live-preview-react/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,37 @@
/** @type {import('prettier').Config} */
module.exports = {
extends: ['@payloadcms'],
overrides: [
{
extends: ['plugin:@typescript-eslint/disable-type-checked'],
files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
},
{
files: ['package.json', 'tsconfig.json'],
rules: {
'perfectionist/sort-array-includes': 'off',
'perfectionist/sort-astro-attributes': 'off',
'perfectionist/sort-classes': 'off',
'perfectionist/sort-enums': 'off',
'perfectionist/sort-exports': 'off',
'perfectionist/sort-imports': 'off',
'perfectionist/sort-interfaces': 'off',
'perfectionist/sort-jsx-props': 'off',
'perfectionist/sort-keys': 'off',
'perfectionist/sort-maps': 'off',
'perfectionist/sort-named-exports': 'off',
'perfectionist/sort-named-imports': 'off',
'perfectionist/sort-object-types': 'off',
'perfectionist/sort-objects': 'off',
'perfectionist/sort-svelte-attributes': 'off',
'perfectionist/sort-union-types': 'off',
'perfectionist/sort-vue-attributes': 'off',
},
},
],
parserOptions: {
project: ['./tsconfig.json'],
tsconfigRootDir: __dirname,
},
root: true,
}

10
packages/live-preview-react/.prettierignore Normal file
View File

@@ -0,0 +1,10 @@
.tmp
**/.git
**/.hg
**/.pnp.*
**/.svn
**/.yarn/**
**/build
**/dist/**
**/node_modules
**/temp

15
packages/live-preview-react/.swcrc Normal file
View File

@@ -0,0 +1,15 @@
{
"$schema": "https://json.schemastore.org/swcrc",
"sourceMaps": "inline",
"jsc": {
"target": "esnext",
"parser": {
"syntax": "typescript",
"tsx": true,
"dts": true
}
},
"module": {
"type": "commonjs"
}
}

44
packages/live-preview-react/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "@payloadcms/live-preview-react",
"version": "1.0.0-beta.0",
"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": "./src/index.ts",
"types": "./src/index.ts",
"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/",
"prepublishOnly": "pnpm clean && pnpm build"
},
"dependencies": {
"react": "18.2.0",
"@payloadcms/live-preview": "workspace:*"
},
"devDependencies": {
"@payloadcms/eslint-config": "workspace:*",
"@types/node": "20.5.7",
"@types/react": "18.2.15",
"payload": "workspace:*"
},
"exports": {
".": {
"default": "./src/index.ts",
"types": "./src/index.ts"
}
},
"publishConfig": {
"exports": null,
"main": "./dist/index.js",
"registry": "https://registry.npmjs.org/",
"types": "./dist/index.d.ts"
},
"files": [
"dist"
]
}

43
packages/live-preview-react/src/index.ts Normal file
View File

@@ -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
initialPage: T
serverURL: string
}): {
data: T
isLoading: boolean
} => {
const { depth = 0, initialPage, serverURL } = props
const [data, setData] = useState<T>(initialPage)
const [isLoading, setIsLoading] = useState<boolean>(true)
const onChange = useCallback((mergedData) => {
setData(mergedData)
setIsLoading(false)
}, [])
useEffect(() => {
const subscription = subscribe({
callback: onChange,
depth,
initialData: initialPage,
serverURL,
})
return () => {
unsubscribe(subscription)
}
}, [serverURL, onChange, depth, initialPage])
return {
data,
isLoading,
}
}

25
packages/live-preview-react/tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"composite": true, // Make sure typescript knows that this module depends on their references
"noEmit": false /* Do not emit outputs. */,
"emitDeclarationOnly": true,
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
"rootDir": "./src" /* Specify the root folder within your source files. */,
"jsx": "react"
},
"exclude": [
"dist",
"build",
"tests",
"test",
"node_modules",
".eslintrc.js",
"src/**/*.spec.js",
"src/**/*.spec.jsx",
"src/**/*.spec.ts",
"src/**/*.spec.tsx"
],
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
"references": [{ "path": "../payload" }] // db-mongodb depends on payload
}

10
packages/live-preview/.eslintignore Normal file
View File

@@ -0,0 +1,10 @@
.tmp
**/.git
**/.hg
**/.pnp.*
**/.svn
**/.yarn/**
**/build
**/dist/**
**/node_modules
**/temp

37
packages/live-preview/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,37 @@
/** @type {import('prettier').Config} */
module.exports = {
extends: ['@payloadcms'],
overrides: [
{
extends: ['plugin:@typescript-eslint/disable-type-checked'],
files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
},
{
files: ['package.json', 'tsconfig.json'],
rules: {
'perfectionist/sort-array-includes': 'off',
'perfectionist/sort-astro-attributes': 'off',
'perfectionist/sort-classes': 'off',
'perfectionist/sort-enums': 'off',
'perfectionist/sort-exports': 'off',
'perfectionist/sort-imports': 'off',
'perfectionist/sort-interfaces': 'off',
'perfectionist/sort-jsx-props': 'off',
'perfectionist/sort-keys': 'off',
'perfectionist/sort-maps': 'off',
'perfectionist/sort-named-exports': 'off',
'perfectionist/sort-named-imports': 'off',
'perfectionist/sort-object-types': 'off',
'perfectionist/sort-objects': 'off',
'perfectionist/sort-svelte-attributes': 'off',
'perfectionist/sort-union-types': 'off',
'perfectionist/sort-vue-attributes': 'off',
},
},
],
parserOptions: {
project: ['./tsconfig.json'],
tsconfigRootDir: __dirname,
},
root: true,
}

10
packages/live-preview/.prettierignore Normal file
View File

@@ -0,0 +1,10 @@
.tmp
**/.git
**/.hg
**/.pnp.*
**/.svn
**/.yarn/**
**/build
**/dist/**
**/node_modules
**/temp

15
packages/live-preview/.swcrc Normal file
View File

@@ -0,0 +1,15 @@
{
"$schema": "https://json.schemastore.org/swcrc",
"sourceMaps": "inline",
"jsc": {
"target": "esnext",
"parser": {
"syntax": "typescript",
"tsx": true,
"dts": true
}
},
"module": {
"type": "commonjs"
}
}

43
packages/live-preview/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "@payloadcms/live-preview",
"version": "1.0.0-beta.0",
"description": "The official live preview JavaScript SDK for Payload",
"repository": "https://github.com/payloadcms/payload",
"license": "MIT",
"homepage": "https://payloadcms.com",
"author": "Payload CMS, Inc.",
"main": "./src/index.ts",
"types": "./src/index.ts",
"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/",
"prepublishOnly": "pnpm clean && pnpm build"
},
"dependencies": {
"react": "18.2.0"
},
"devDependencies": {
"@payloadcms/eslint-config": "workspace:*",
"@types/node": "20.5.7",
"@types/react": "18.2.15",
"payload": "workspace:*"
},
"exports": {
".": {
"default": "./src/index.ts",
"types": "./src/index.ts"
}
},
"publishConfig": {
"exports": null,
"main": "./dist/index.js",
"registry": "https://registry.npmjs.org/",
"types": "./dist/index.d.ts"
},
"files": [
"dist"
]
}

26
packages/live-preview/src/handleMessage.ts Normal file
View File

@@ -0,0 +1,26 @@
import { mergeData } from '.'
export const handleMessage = async <T>(args: {
depth: number
event: MessageEvent
initialData: T
serverURL: string
}): Promise<T> => {
const { depth, event, initialData, serverURL } = args
if (event.origin === serverURL && event.data) {
const eventData = JSON.parse(event?.data)
if (eventData.type === 'livePreview') {
const mergedData = await mergeData<T>({
depth,
fieldSchema: eventData.fieldSchemaJSON,
incomingData: eventData.data,
initialData,
serverURL,
})
return mergedData
}
}
}

4
packages/live-preview/src/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { handleMessage } from './handleMessage'
export { mergeData } from './mergeData'
export { subscribe } from './subscribe'
export { unsubscribe } from './unsubscribe'

8
packages/payload/src/admin/components/views/LivePreview/useLivePreview/mergeData.ts → packages/live-preview/src/mergeData.ts
View File

@@ -3,21 +3,21 @@ import { traverseFields } from './traverseFields'
export type MergeLiveDataArgs<T> = {
apiRoute?: string
depth: number
existingData: T
fieldSchema: Record<string, unknown>[]
incomingData: T
initialData: T
serverURL: string
}
export const mergeLivePreviewData = async <T>({
export const mergeData = async <T>({
apiRoute,
depth,
existingData,
fieldSchema,
incomingData,
initialData,
serverURL,
}: MergeLiveDataArgs<T>): Promise<T> => {
const result = { ...existingData }
const result = { ...initialData }
const populationPromises: Promise<void>[] = []

1
packages/payload/src/admin/components/views/LivePreview/useLivePreview/promise.ts → packages/live-preview/src/promise.ts
View File

@@ -17,7 +17,6 @@ export const promise = async ({
ref,
serverURL,
}: Args): Promise<void> => {
// TODO: get dynamic `api` route from config
const res: any = await fetch(
`${serverURL}${apiRoute || '/api'}/${collection}/${id}?depth=${depth}`,
).then((res) => res.json())

22
packages/live-preview/src/subscribe.ts Normal file
View File

@@ -0,0 +1,22 @@
import { handleMessage } from '.'
export const subscribe = <T>(args: {
callback: (data: T) => void
depth: number
initialData: T
serverURL: string
}): ((event: MessageEvent) => void) => {
const { callback, depth, initialData, serverURL } = args
if (typeof window !== 'undefined') {
const handleMessageCallback = async (event: MessageEvent) => {
const mergedData = await handleMessage({ depth, event, initialData, serverURL })
callback(mergedData)
}
window.addEventListener('message', handleMessageCallback)
window.parent.postMessage('ready', serverURL)
return handleMessageCallback
}
}

0
packages/payload/src/admin/components/views/LivePreview/useLivePreview/traverseFields.ts → packages/live-preview/src/traverseFields.ts
View File

3
packages/live-preview/src/types.ts Normal file
View File

@@ -0,0 +1,3 @@
export type LivePreviewArgs = {}
export type LivePreview = void

5
packages/live-preview/src/unsubscribe.ts Normal file
View File

@@ -0,0 +1,5 @@
export const unsubscribe = (callback: (event: MessageEvent) => void) => {
if (typeof window !== 'undefined') {
window.removeEventListener('message', callback)
}
}

24
packages/live-preview/tsconfig.json Normal file
View File

@@ -0,0 +1,24 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"composite": true, // Make sure typescript knows that this module depends on their references
"noEmit": false /* Do not emit outputs. */,
"emitDeclarationOnly": true,
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
"rootDir": "./src" /* Specify the root folder within your source files. */
},
"exclude": [
"dist",
"build",
"tests",
"test",
"node_modules",
".eslintrc.js",
"src/**/*.spec.js",
"src/**/*.spec.jsx",
"src/**/*.spec.ts",
"src/**/*.spec.tsx"
],
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
"references": [{ "path": "../payload" }] // db-postgres depends on payload
}

58
packages/payload/src/admin/components/views/LivePreview/useLivePreview/index.ts
View File

@@ -1,58 +0,0 @@
import { useCallback, useEffect, useState } from 'react'
import { mergeLivePreviewData } from './mergeData'
// 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
initialPage: T
serverURL: string
}): {
data: T
isLoading: boolean
} => {
const { depth = 0, initialPage, serverURL } = props
const [data, setData] = useState<T>(initialPage)
const [isLoading, setIsLoading] = useState<boolean>(true)
const handleMessage = useCallback(
async (event: MessageEvent) => {
if (event.origin === serverURL && event.data) {
const eventData = JSON.parse(event?.data)
if (eventData.type === 'livePreview') {
const mergedData = await mergeLivePreviewData<T>({
depth,
existingData: data,
fieldSchema: eventData.fieldSchemaJSON,
incomingData: eventData.data,
serverURL,
})
setData(mergedData)
setIsLoading(false)
}
}
},
[serverURL, data, depth],
)
useEffect(() => {
window.addEventListener('message', handleMessage)
window.parent.postMessage('ready', serverURL)
return () => {
window.removeEventListener('message', handleMessage)
}
}, [serverURL, handleMessage])
return {
data,
isLoading,
}
}

179
pnpm-lock.yaml generated
View File

@@ -389,6 +389,47 @@ importers:
specifier: 1.15.0
version: 1.15.0(eslint@8.48.0)
packages/live-preview:
dependencies:
react:
specifier: 18.2.0
version: 18.2.0
devDependencies:
'@payloadcms/eslint-config':
specifier: workspace:*
version: link:../eslint-config-payload
'@types/node':
specifier: 20.5.7
version: 20.5.7
'@types/react':
specifier: 18.2.15
version: 18.2.15
payload:
specifier: workspace:*
version: link:../payload
packages/live-preview-react:
dependencies:
'@payloadcms/live-preview':
specifier: workspace:*
version: link:../live-preview
react:
specifier: 18.2.0
version: 18.2.0
devDependencies:
'@payloadcms/eslint-config':
specifier: workspace:*
version: link:../eslint-config-payload
'@types/node':
specifier: 20.5.7
version: 20.5.7
'@types/react':
specifier: 18.2.15
version: 18.2.15
payload:
specifier: workspace:*
version: link:../payload
packages/payload:
dependencies:
'@date-io/date-fns':
@@ -715,7 +756,7 @@ importers:
version: 2.0.3
'@types/mini-css-extract-plugin':
specifier: ^1.4.3
version: 1.4.3(@swc/core@1.3.76)
version: 1.4.3(@swc/core@1.3.76)(webpack-cli@4.10.0)
'@types/minimist':
specifier: 1.2.2
version: 1.2.2
@@ -859,10 +900,10 @@ importers:
version: 4.1.1(file-loader@6.2.0)(webpack@5.88.2)
vite:
specifier: ^4.4.9
version: 4.4.9(sass@1.64.0)(terser@5.19.2)
version: 4.4.9(@types/node@20.5.7)(sass@1.64.0)(terser@5.19.2)
webpack:
specifier: ^5.78.0
version: 5.88.2(@swc/core@1.3.76)
version: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
packages/richtext-lexical:
dependencies:
@@ -4173,7 +4214,7 @@ packages:
resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
dependencies:
'@types/connect': 3.4.36
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/body-scroll-lock@3.1.0:
@@ -4245,7 +4286,7 @@ packages:
/@types/express-serve-static-core@4.17.35:
resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
'@types/qs': 6.9.7
'@types/range-parser': 1.2.4
'@types/send': 0.17.1
@@ -4316,7 +4357,7 @@ packages:
/@types/ignore-styles@5.0.0:
resolution: {integrity: sha512-NHDTLx8xF/T/jIxvH+0wFHHDsPtz6ulSMdUQ8p66qk9vJZ25S4cUUSQcal3+JxcQikCEdpaG5gUW2bVQvmh7KA==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/is-hotkey@0.1.7:
@@ -4368,7 +4409,7 @@ packages:
/@types/jsonwebtoken@8.5.9:
resolution: {integrity: sha512-272FMnFGzAVMGtu9tkr29hRL6bZj4Zs1KZNeHLnKqAvp06tAIcarTMwOh8/8bz4FmKRcMxZhZNeUAQsNLoiPhg==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/keyv@3.1.4:
@@ -4395,23 +4436,10 @@ packages:
resolution: {integrity: sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==}
dev: true
/@types/mini-css-extract-plugin@1.4.3(@swc/core@1.3.76):
resolution: {integrity: sha512-jyOSVaF4ie2jUGr1uohqeyDrp7ktRthdFxDKzTgbPZtl0QI5geEopW7UKD/DEfn0XgV1KEq/RnZlUmnrEAWbmg==}
dependencies:
'@types/node': 20.5.7
tapable: 2.2.1
webpack: 5.88.2(@swc/core@1.3.76)
transitivePeerDependencies:
- '@swc/core'
- esbuild
- uglify-js
- webpack-cli
dev: true
/@types/mini-css-extract-plugin@1.4.3(@swc/core@1.3.76)(webpack-cli@4.10.0):
resolution: {integrity: sha512-jyOSVaF4ie2jUGr1uohqeyDrp7ktRthdFxDKzTgbPZtl0QI5geEopW7UKD/DEfn0XgV1KEq/RnZlUmnrEAWbmg==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
tapable: 2.2.1
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
transitivePeerDependencies:
@@ -4431,7 +4459,7 @@ packages:
/@types/mkdirp@1.0.2:
resolution: {integrity: sha512-o0K1tSO0Dx5X6xlU5F1D6625FawhC3dU3iqr25lluNv/+/QIVH8RLNEiVokgIZo+mz+87w/3Mkg/VvQS+J51fQ==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/mongoose-aggregate-paginate-v2@1.0.9:
@@ -4452,7 +4480,7 @@ packages:
/@types/node-fetch@2.6.4:
resolution: {integrity: sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
form-data: 3.0.1
/@types/node@18.17.17:
@@ -4468,7 +4496,7 @@ packages:
/@types/nodemailer@6.4.8:
resolution: {integrity: sha512-oVsJSCkqViCn8/pEu2hfjwVO+Gb3e+eTWjg3PcjeFKRItfKpKwHphQqbYmPQrlMk+op7pNNWPbsJIEthpFN/OQ==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/normalize-package-data@2.4.1:
@@ -4542,7 +4570,7 @@ packages:
resolution: {integrity: sha512-R5H3vw62gHNHrn+JGZbKejb+Z2D/6E5UNVlhCzIaBBLroMQMOFqy5Pap2gM+ZZHdqBtVU0/cx/M6to+mOJcoew==}
dependencies:
'@types/needle': 3.2.0
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/prop-types@15.7.5:
@@ -4650,14 +4678,14 @@ packages:
/@types/sharp@0.31.1:
resolution: {integrity: sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==}
dependencies:
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/shelljs@0.8.12:
resolution: {integrity: sha512-ZA8U81/gldY+rR5zl/7HSHrG2KDfEb3lzG6uCUDhW1DTQE9yC/VBQ45fXnXq8f3CgInfhZmjtdu/WOUlrXRQUg==}
dependencies:
'@types/glob': 7.2.0
'@types/node': 20.5.7
'@types/node': 20.6.2
dev: true
/@types/source-list-map@0.1.2:
@@ -6628,7 +6656,7 @@ packages:
postcss-value-parser: 4.2.0
schema-utils: 3.3.0
semver: 7.5.4
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/css-minimizer-webpack-plugin@5.0.1(webpack@5.88.2):
resolution: {integrity: sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==}
@@ -6661,7 +6689,7 @@ packages:
postcss: 8.4.27
schema-utils: 4.2.0
serialize-javascript: 6.0.1
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/css-prefers-color-scheme@9.0.0(postcss@8.4.27):
resolution: {integrity: sha512-03QGAk/FXIRseDdLb7XAiu6gidQ0Nd8945xuM7VFVPpc6goJsG9uIO8xQjTxwbPdPIIV4o4AJoOJyt8gwDl67g==}
@@ -8255,7 +8283,7 @@ packages:
dependencies:
loader-utils: 2.0.4
schema-utils: 3.3.0
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/file-type@16.5.4:
resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
@@ -9043,7 +9071,7 @@ packages:
lodash: 4.17.21
pretty-error: 4.0.0
tapable: 2.2.1
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
dev: false
/htmlparser2@6.1.0:
@@ -10905,7 +10933,7 @@ packages:
dependencies:
loader-utils: 2.0.4
schema-utils: 3.3.0
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
webpack-sources: 1.4.3
/mini-svg-data-uri@1.4.4:
@@ -12256,7 +12284,7 @@ packages:
klona: 2.0.6
postcss: 8.4.27
semver: 7.5.4
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/postcss-logical@7.0.0(postcss@8.4.27):
resolution: {integrity: sha512-zYf3vHkoW82f5UZTEXChTJvH49Yl9X37axTZsJGxrCG2kOUwtaAoz9E7tqYg0lsIoJLybaL8fk/2mOi81zVIUw==}
@@ -13632,7 +13660,7 @@ packages:
klona: 2.0.6
neo-async: 2.6.2
sass: 1.64.0
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/sass@1.64.0:
resolution: {integrity: sha512-m7YtAGmQta9uANIUJwXesAJMSncqH+3INc8kdVXs6eV6GUC8Qu2IYKQSN8PRLgiQfpca697G94klm2leYMxSHw==}
@@ -14344,7 +14372,7 @@ packages:
webpack: '>=2'
dependencies:
'@swc/core': 1.3.76
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
dev: false
/swc-minify-webpack-plugin@2.1.1(@swc/core@1.3.76)(webpack@5.88.2):
@@ -14410,7 +14438,7 @@ packages:
schema-utils: 3.3.0
serialize-javascript: 6.0.1
terser: 5.19.2
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/terser@5.19.2:
resolution: {integrity: sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==}
@@ -14955,7 +14983,7 @@ packages:
loader-utils: 2.0.4
mime-types: 2.1.35
schema-utils: 3.3.0
webpack: 5.88.2(@swc/core@1.3.76)
webpack: 5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0)
/url-parse@1.5.10:
resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
@@ -15089,44 +15117,6 @@ packages:
terser: 5.19.2
optionalDependencies:
fsevents: 2.3.3
dev: false
/vite@4.4.9(sass@1.64.0)(terser@5.19.2):
resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
lightningcss: ^1.21.0
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.18.20
postcss: 8.4.27
rollup: 3.29.2
sass: 1.64.0
terser: 5.19.2
optionalDependencies:
fsevents: 2.3.3
dev: true
/void-elements@3.1.0:
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
@@ -15279,45 +15269,6 @@ packages:
resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
engines: {node: '>=10.13.0'}
/webpack@5.88.2(@swc/core@1.3.76):
resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==}
engines: {node: '>=10.13.0'}
hasBin: true
peerDependencies:
webpack-cli: '*'
peerDependenciesMeta:
webpack-cli:
optional: true
dependencies:
'@types/eslint-scope': 3.7.4
'@types/estree': 1.0.1
'@webassemblyjs/ast': 1.11.6
'@webassemblyjs/wasm-edit': 1.11.6
'@webassemblyjs/wasm-parser': 1.11.6
acorn: 8.10.0
acorn-import-assertions: 1.9.0(acorn@8.10.0)
browserslist: 4.21.10
chrome-trace-event: 1.0.3
enhanced-resolve: 5.15.0
es-module-lexer: 1.3.1
eslint-scope: 5.1.1
events: 3.3.0
glob-to-regexp: 0.4.1
graceful-fs: 4.2.11
json-parse-even-better-errors: 2.3.1
loader-runner: 4.3.0
mime-types: 2.1.35
neo-async: 2.6.2
schema-utils: 3.3.0
tapable: 2.2.1
terser-webpack-plugin: 5.3.9(@swc/core@1.3.76)(webpack@5.88.2)
watchpack: 2.4.0
webpack-sources: 3.2.3
transitivePeerDependencies:
- '@swc/core'
- esbuild
- uglify-js
/webpack@5.88.2(@swc/core@1.3.76)(webpack-cli@4.10.0):
resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==}
engines: {node: '>=10.13.0'}

7
test/live-preview/next-app/app/page.client.tsx
View File

@@ -4,9 +4,10 @@ import React, { Fragment } from 'react'
import styles from './page.module.css'
import { PAYLOAD_SERVER_URL } from './api'
// The `useLivePreview` hook is imported from the monorepo for development purposes only
// in your own app you would import this hook directly from the payload package itself
// i.e. `import { useLivePreview } from 'payload'`
import { useLivePreview } from '../../../../packages/payload/src/admin/components/views/LivePreview/useLivePreview'
// in your own app you would import this hook directly from the package itself
// i.e. `import { useLivePreview } from '@payloadcms/live-preview-react'`
// If you are using another framework, look for the equivalent packages for your framework
import { useLivePreview } from '../../../../packages/live-preview-react'
import { Page as PageType } from '@/payload-types'
export type Props = {