Skip to content

Commit f7d0d04

Browse files
AlessioGrAlessioGr
authored
refactor!: rename widget ComponentPath to Component for consistency (#15780)
- Renames `Widget.ComponentPath` to `Widget.Component` and types it as `PayloadComponent` instead of `string` - This aligns dashboard widgets with every other component reference in Payload (collections, globals, fields, admin components) - none of them use _path_ in the property name, and all of them are typed as `PayloadComponent` - Enables new [typescript plugin](#15779) to work for widget paths (the plugin uses `PayloadComponent` contextual type detection - `string`-typed properties were invisible to it) ## Breaking Change `Widget.ComponentPath` has been renamed to `Widget.Component`. ### Migration Find and replace in your Payload config: ```diff widgets: [ { slug: 'my-widget', - ComponentPath: './components/MyWidget#MyWidget', + Component: './components/MyWidget#MyWidget', }, ] ```
1 parent ba3bd74 commit f7d0d04

File tree

9 files changed

+22
-22
lines changed

9 files changed

+22
-22
lines changed

‎docs/custom-components/dashboard.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default buildConfig({
3333
widgets: [
3434
{
3535
slug: 'sales-summary',
36-
ComponentPath: './components/SalesSummary.tsx#default',
36+
Component: './components/SalesSummary.tsx#default',
3737
fields: [
3838
{ name: 'title', type: 'text' },
3939
{
@@ -54,13 +54,13 @@ export default buildConfig({
5454

5555
### Widget Configuration
5656

57-
| Property | Type | Description |
58-
| ------------------ | ------------- | -------------------------------------------------------------------- |
59-
| `slug` \* | `string` | Unique identifier for the widget |
60-
| `ComponentPath` \* | `string` | Path to the widget component (supports `#` syntax for named exports) |
61-
| `fields` | `Field[]` | Optional widget-specific form fields shown in the edit drawer |
62-
| `minWidth` | `WidgetWidth` | Minimum width the widget can be resized to (default: `'x-small'`) |
63-
| `maxWidth` | `WidgetWidth` | Maximum width the widget can be resized to (default: `'full'`) |
57+
| Property | Type | Description |
58+
| -------------- | ------------- | -------------------------------------------------------------------- |
59+
| `slug` \* | `string` | Unique identifier for the widget |
60+
| `Component` \* | `string` | Path to the widget component (supports `#` syntax for named exports) |
61+
| `fields` | `Field[]` | Optional widget-specific form fields shown in the edit drawer |
62+
| `minWidth` | `WidgetWidth` | Minimum width the widget can be resized to (default: `'x-small'`) |
63+
| `maxWidth` | `WidgetWidth` | Maximum width the widget can be resized to (default: `'full'`) |
6464

6565
**WidgetWidth Values:** `'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'`.
6666

‎packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export async function ModularDashboard(props: DashboardViewServerProps) {
3535

3636
return {
3737
component: RenderServerComponent({
38-
Component: widgetConfig?.ComponentPath,
38+
Component: widgetConfig?.Component,
3939
importMap,
4040
serverProps: {
4141
cookies,
@@ -52,7 +52,7 @@ export async function ModularDashboard(props: DashboardViewServerProps) {
5252

5353
// Resolve function labels to static labels for client components
5454
const clientWidgets: ClientWidget[] = widgets.map((widget) => {
55-
const { ComponentPath: _, fields: __, label, ...rest } = widget
55+
const { Component: _, fields: __, label, ...rest } = widget
5656
return {
5757
...rest,
5858
label: typeof label === 'function' ? label({ i18n, t: i18n.t as TFunction }) : label,

‎packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const getDefaultLayoutHandler: ServerFunction<
3737
const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'))
3838
return {
3939
component: RenderServerComponent({
40-
Component: widgets.find((widget) => widget.slug === widgetSlug)?.ComponentPath,
40+
Component: widgets.find((widget) => widget.slug === widgetSlug)?.Component,
4141
importMap,
4242
serverProps: {
4343
cookies,

‎packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const renderWidgetHandler: ServerFunction<
7373

7474
// Render the widget server component
7575
const component = RenderServerComponent({
76-
Component: widgetConfig.ComponentPath,
76+
Component: widgetConfig.Component,
7777
importMap,
7878
serverProps,
7979
})

‎packages/payload/src/bin/generateImportMap/iterateConfig.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export function iterateConfig({
8484

8585
if (config.admin?.dashboard?.widgets?.length) {
8686
for (const dashboardWidget of config.admin.dashboard.widgets) {
87-
addToImportMap(dashboardWidget.ComponentPath)
87+
addToImportMap(dashboardWidget.Component)
8888
if (dashboardWidget.fields?.length) {
8989
genImportMapIterateFields({
9090
addToImportMap,

‎packages/payload/src/config/client.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const createClientConfig = ({
183183
if (config.admin.dashboard?.widgets) {
184184
;(clientConfig.admin.dashboard ??= {}).widgets = config.admin.dashboard.widgets.map(
185185
(widget) => {
186-
const { ComponentPath: _, fields, label, ...rest } = widget
186+
const { Component: _, fields, label, ...rest } = widget
187187
return {
188188
...rest,
189189
...(fields?.length

‎packages/payload/src/config/sanitize.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const sanitizeAdminConfig = (configToSanitize: Config): Partial<SanitizedConfig>
5858
}
5959
;(sanitizedConfig.admin!.dashboard ??= { widgets: [] }).widgets.push({
6060
slug: 'collections',
61-
ComponentPath: '@payloadcms/next/rsc#CollectionCards',
61+
Component: '@payloadcms/next/rsc#CollectionCards',
6262
minWidth: 'full',
6363
})
6464
sanitizedConfig.admin!.dashboard.defaultLayout ??= [

‎packages/payload/src/config/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -753,7 +753,7 @@ export type AfterErrorHook = (
753753
export type WidgetWidth = 'full' | 'large' | 'medium' | 'small' | 'x-large' | 'x-small'
754754

755755
export type Widget = {
756-
ComponentPath: string
756+
Component: PayloadComponent
757757
fields?: Field[]
758758
/**
759759
* Human-friendly label for the widget.
@@ -807,7 +807,7 @@ export type DashboardConfig = {
807807
}
808808

809809
export type SanitizedDashboardConfig = {
810-
widgets: Array<Omit<Widget, 'ComponentPath'>>
810+
widgets: Array<Omit<Widget, 'Component'>>
811811
}
812812

813813
/**

‎test/dashboard/config.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default buildConfigWithDefaults({
6464
widgets: [
6565
{
6666
slug: 'count',
67-
ComponentPath: './components/Count.tsx#default',
67+
Component: './components/Count.tsx#default',
6868
fields: [
6969
{
7070
name: 'title',
@@ -94,24 +94,24 @@ export default buildConfigWithDefaults({
9494
},
9595
{
9696
slug: 'private',
97-
ComponentPath: './components/Private.tsx#default',
97+
Component: './components/Private.tsx#default',
9898
label: 'Private Widget',
9999
},
100100
{
101101
slug: 'revenue',
102-
ComponentPath: './components/Revenue.tsx#default',
102+
Component: './components/Revenue.tsx#default',
103103
// Demonstrates function form with i18n - returns localized label via t()
104104
label: ({ i18n }) => (i18n.language === 'es' ? 'Gráfico de Ingresos' : 'Revenue Chart'),
105105
minWidth: 'medium',
106106
},
107107
{
108108
slug: 'page-query',
109-
ComponentPath: './components/PageQuery.tsx#default',
109+
Component: './components/PageQuery.tsx#default',
110110
label: 'Page Query Widget',
111111
},
112112
{
113113
slug: 'configurable',
114-
ComponentPath: './components/Configurable.tsx#default',
114+
Component: './components/Configurable.tsx#default',
115115
fields: [
116116
{
117117
name: 'title',

0 commit comments

Comments
 (0)