Skip to content

Commit 3766961

Browse files
authored
fix(core)!: deprecate cascades decorator (#2729)
Lit context provides us with an easier to manage and more robust alternative to the imperative cascades system, let's migrate to that and remove this in PFE 4
1 parent 02d7e71 commit 3766961

File tree

3 files changed

+55
-0
lines changed

3 files changed

+55
-0
lines changed

.changeset/great-badgers-build.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
"@patternfly/pfe-core": major
3+
---
4+
`@cascades`: deprecated `@cascades` decorator and `CascadeController`. Use context instead.
5+
6+
**BEFORE**: The element in charge of the context cascades data down to
7+
specifically named children.
8+
9+
```ts
10+
import { LitElement } from 'lit';
11+
import { property } from 'lit/decorators/property.js';
12+
import { cascades } from '@patternfly/pfe-core/decorators/cascades.js';
13+
14+
class MyMood extends LitElement {
15+
@cascades('my-eyes', 'my-mouth')
16+
@property() mood: 'happy'|'sad'|'mad'|'glad';
17+
}
18+
```
19+
20+
**AFTER**: children subscribe to updates from the context provider.
21+
22+
```ts
23+
import { LitElement } from 'lit';
24+
import { property } from 'lit/decorators/property.js';
25+
import { provide } from '@lit/context';
26+
import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
27+
28+
export type Mood = 'happy'|'sad'|'mad'|'glad';
29+
30+
export const moodContext = createContextWithRoot<Mood>(Symbol('mood'));
31+
32+
class MyMood extends LitElement {
33+
@provide({ context: moodContext })
34+
@property() mood: Mood;
35+
}
36+
```
37+
38+
```ts
39+
import { LitElement } from 'lit';
40+
import { property } from 'lit/decorators/property.js';
41+
import { consume } from '@lit/context';
42+
import { moodContext, type Mood } from './my-mood.js';
43+
44+
class MyEyes extends LitElement {
45+
@consume({ context: moodContext, subscribe: true })
46+
@state() private mood: Mood;
47+
}
48+
```

core/pfe-core/controllers/cascade-controller.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ import { bound } from '../decorators/bound.js';
44
import { debounce } from '../functions/debounce.js';
55
import { Logger } from './logger.js';
66

7+
/**
8+
* @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
9+
*/
710
export interface Options<E extends ReactiveElement> {
811
properties: Partial<Record<keyof E, string | string[]>>;
912
prefix?: string;
1013
}
1114

15+
/**
16+
* @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
17+
*/
1218
export class CascadeController<E extends ReactiveElement> implements ReactiveController {
1319
private class: typeof ReactiveElement;
1420

core/pfe-core/decorators/cascades.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { CascadeController } from '../controllers/cascade-controller.js';
44

55
/**
66
* Cascades the decorated attribute to children
7+
* @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
78
*/
89
export function cascades<T extends ReactiveElement>(...items: string[]): PropertyDecorator {
910
return function(proto: T, key: string & keyof T) {

0 commit comments

Comments
 (0)