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

chore(deps): upgrades react-diff-viewer-continued to v4.0.4 to suppress react 19 warnings and use ESM imports (#10834)

Browse Source 
The `react-diff-viewer-continued` package now includes React 19 in its
peer dependencies thanks to
https://github.com/Aeolun/react-diff-viewer-continued/pull/56. This new
version also exports as ESM by default ftw.
This commit is contained in:
Jacob Fletcher
2025-01-28 11:31:33 -05:00
committed by GitHub
parent 9c31a52329
commit 57f72185f8
9 changed files with 3310 additions and 8874 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/next/package.json
View File

@@ -93,7 +93,7 @@
"http-status": "2.1.0",
"path-to-regexp": "6.3.0",
"qs-esm": "7.0.2",
"react-diff-viewer-continued": "3.2.6",
"react-diff-viewer-continued": "4.0.4",
"sass": "1.77.4",
"sonner": "^1.7.0",
"uuid": "10.0.0"

5
packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
View File

@@ -5,7 +5,7 @@ import { getTranslation } from '@payloadcms/translations'
import { useConfig } from '@payloadcms/ui'
import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared'
import React from 'react'
import ReactDiffViewerImport from 'react-diff-viewer-continued'
import ReactDiffViewer from 'react-diff-viewer-continued'
import type { DiffComponentProps } from '../types.js'
@@ -13,9 +13,6 @@ import Label from '../../Label/index.js'
import { diffStyles } from '../styles.js'
import './index.scss'
const ReactDiffViewer = (ReactDiffViewerImport.default ||
ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
const baseClass = 'relationship-diff'
type RelationshipValue = Record<string, any>

5
packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.tsx
View File

@@ -1,9 +1,6 @@
'use client'
import React from 'react'
import ReactDiffViewerImport, { DiffMethod } from 'react-diff-viewer-continued'
const ReactDiffViewer = (ReactDiffViewerImport.default ||
ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
export const DiffViewer: React.FC<{
comparisonToRender: string

4
packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/DiffViewer/index.tsx
View File

@@ -1,9 +1,7 @@
'use client'
import React from 'react'
import ReactDiffViewerImport, { DiffMethod } from 'react-diff-viewer-continued'
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
const ReactDiffViewer = (ReactDiffViewerImport.default ||
ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
export const DiffViewer: React.FC<{
comparisonToRender: string
diffMethod: string

3
packages/next/src/views/Version/RenderFieldsToDiff/fields/styles.ts
View File

@@ -1,4 +1,7 @@
export const diffStyles = {
diffContainer: {
minWidth: 'unset',
},
variables: {
dark: {
addedBackground: 'var(--theme-success-900)',

4
packages/next/src/views/Version/RenderFieldsToDiff/index.scss
View File

@@ -6,6 +6,10 @@
flex-direction: column;
gap: var(--base);
[role='banner'] {
display: none !important;
}
&__field {
overflow-wrap: anywhere;
display: flex;

251
packages/next/src/views/Version/RenderFieldsToDiff/index.tsx
View File

@@ -1,8 +1,9 @@
'use client'
import type { DiffMethod } from 'react-diff-viewer-continued'
import { ShimmerEffect, StaggeredShimmers } from '@payloadcms/ui'
import { fieldAffectsData, fieldIsID } from 'payload/shared'
import React from 'react'
import React, { Fragment, useEffect } from 'react'
import type { diffComponents as _diffComponents } from './fields/index.js'
import type { FieldDiffProps, Props } from './types.js'
@@ -25,129 +26,145 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
// Without it, you could pass a UI field to the Tabs component, without it erroring
const diffComponents: typeof _diffComponents = __diffComponents as typeof _diffComponents
const [hasMounted, setHasMounted] = React.useState(false)
// defer rendering until after the first mount as the CSS is loaded with Emotion
// this will ensure that the CSS is loaded before rendering the diffs and prevent CLS
useEffect(() => {
setHasMounted(true)
}, [])
return (
<div className={baseClass}>
{fields?.map((field, i) => {
if (fieldIsID(field)) {
return null
}
const Component = diffComponents[field.type]
const isRichText = field.type === 'richText'
const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS'
if (Component) {
if (fieldAffectsData(field)) {
const fieldName = field.name
const valueIsObject = field.type === 'code' || field.type === 'json'
const versionValue = valueIsObject
? JSON.stringify(version?.[fieldName])
: version?.[fieldName]
const comparisonValue = valueIsObject
? JSON.stringify(comparison?.[fieldName])
: comparison?.[fieldName]
const hasPermission =
fieldPermissions === true ||
fieldPermissions?.[fieldName] === true ||
fieldPermissions?.[fieldName]?.read
const subFieldPermissions =
fieldPermissions === true ||
fieldPermissions?.[fieldName] === true ||
fieldPermissions?.[fieldName]?.fields
if (!hasPermission) {
{!hasMounted ? (
<Fragment>
<ShimmerEffect height="8rem" width="100%" />
</Fragment>
) : (
<Fragment>
{fields?.map((field, i) => {
if (fieldIsID(field)) {
return null
}
const baseCellProps: FieldDiffProps = {
comparison: comparisonValue,
diffComponents,
diffMethod,
field,
fieldPermissions: subFieldPermissions,
fields: 'fields' in field ? field?.fields : fields,
i18n,
isRichText,
locales,
version: versionValue,
const Component = diffComponents[field.type]
const isRichText = field.type === 'richText'
const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS'
if (Component) {
if (fieldAffectsData(field)) {
const fieldName = field.name
const valueIsObject = field.type === 'code' || field.type === 'json'
const versionValue = valueIsObject
? JSON.stringify(version?.[fieldName])
: version?.[fieldName]
const comparisonValue = valueIsObject
? JSON.stringify(comparison?.[fieldName])
: comparison?.[fieldName]
const hasPermission =
fieldPermissions === true ||
fieldPermissions?.[fieldName] === true ||
fieldPermissions?.[fieldName]?.read
const subFieldPermissions =
fieldPermissions === true ||
fieldPermissions?.[fieldName] === true ||
fieldPermissions?.[fieldName]?.fields
if (!hasPermission) {
return null
}
const baseCellProps: FieldDiffProps = {
comparison: comparisonValue,
diffComponents,
diffMethod,
field,
fieldPermissions: subFieldPermissions,
fields: 'fields' in field ? field?.fields : fields,
i18n,
isRichText,
locales,
version: versionValue,
}
if (field.localized) {
return (
<div className={`${baseClass}__field`} key={i}>
{locales.map((locale, index) => {
const versionLocaleValue = versionValue?.[locale]
const comparisonLocaleValue = comparisonValue?.[locale]
const cellProps = {
...baseCellProps,
comparison: comparisonLocaleValue,
version: versionLocaleValue,
}
return (
<div className={`${baseClass}__locale`} key={[locale, index].join('-')}>
<div className={`${baseClass}__locale-value`}>
<Component {...cellProps} locale={locale} />
</div>
</div>
)
})}
</div>
)
}
return (
<div className={`${baseClass}__field`} key={i}>
<Component {...baseCellProps} />
</div>
)
}
if (field.type === 'tabs' && 'tabs' in field) {
const Tabs = diffComponents.tabs
return (
<Tabs
comparison={comparison}
diffComponents={diffComponents}
field={field}
fieldPermissions={fieldPermissions}
fields={[]}
i18n={i18n}
key={i}
locales={locales}
version={version}
/>
)
}
// At this point, we are dealing with a field with subfields but no
// nested data, eg. row, collapsible, etc.
if ('fields' in field) {
return (
<Component
comparison={comparison}
diffComponents={diffComponents}
field={field}
fieldPermissions={fieldPermissions}
fields={field.fields}
i18n={i18n}
key={i}
locales={locales}
version={version}
/>
)
}
}
if (field.localized) {
return (
<div className={`${baseClass}__field`} key={i}>
{locales.map((locale, index) => {
const versionLocaleValue = versionValue?.[locale]
const comparisonLocaleValue = comparisonValue?.[locale]
const cellProps = {
...baseCellProps,
comparison: comparisonLocaleValue,
version: versionLocaleValue,
}
return (
<div className={`${baseClass}__locale`} key={[locale, index].join('-')}>
<div className={`${baseClass}__locale-value`}>
<Component {...cellProps} locale={locale} />
</div>
</div>
)
})}
</div>
)
}
return (
<div className={`${baseClass}__field`} key={i}>
<Component {...baseCellProps} />
</div>
)
}
if (field.type === 'tabs' && 'tabs' in field) {
const Tabs = diffComponents.tabs
return (
<Tabs
comparison={comparison}
diffComponents={diffComponents}
field={field}
fieldPermissions={fieldPermissions}
fields={[]}
i18n={i18n}
key={i}
locales={locales}
version={version}
/>
)
}
// At this point, we are dealing with a field with subfields but no
// nested data, eg. row, collapsible, etc.
if ('fields' in field) {
return (
<Component
comparison={comparison}
diffComponents={diffComponents}
field={field}
fieldPermissions={fieldPermissions}
fields={field.fields}
i18n={i18n}
key={i}
locales={locales}
version={version}
/>
)
}
}
return null
})}
return null
})}
</Fragment>
)}
</div>
)
}

11908
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
tsconfig.base.json
View File

@@ -31,7 +31,7 @@
}
],
"paths": {
"@payload-config": ["./test/hooks/config.ts"],
"@payload-config": ["./test/versions/config.ts"],
"@payloadcms/live-preview": ["./packages/live-preview/src"],
"@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
"@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],