diff --git a/.changeset/great-badgers-build.md b/.changeset/great-badgers-build.md new file mode 100644 index 0000000000..bfabf1236e --- /dev/null +++ b/.changeset/great-badgers-build.md @@ -0,0 +1,48 @@ +--- +"@patternfly/pfe-core": major +--- +`@cascades`: deprecated `@cascades` decorator and `CascadeController`. Use context instead. + +**BEFORE**: The element in charge of the context cascades data down to +specifically named children. + +```ts +import { LitElement } from 'lit'; +import { property } from 'lit/decorators/property.js'; +import { cascades } from '@patternfly/pfe-core/decorators/cascades.js'; + +class MyMood extends LitElement { + @cascades('my-eyes', 'my-mouth') + @property() mood: 'happy'|'sad'|'mad'|'glad'; +} +``` + +**AFTER**: children subscribe to updates from the context provider. + +```ts +import { LitElement } from 'lit'; +import { property } from 'lit/decorators/property.js'; +import { provide } from '@lit/context'; +import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js'; + +export type Mood = 'happy'|'sad'|'mad'|'glad'; + +export const moodContext = createContextWithRoot(Symbol('mood')); + +class MyMood extends LitElement { + @provide({ context: moodContext }) + @property() mood: Mood; +} +``` + +```ts +import { LitElement } from 'lit'; +import { property } from 'lit/decorators/property.js'; +import { consume } from '@lit/context'; +import { moodContext, type Mood } from './my-mood.js'; + +class MyEyes extends LitElement { + @consume({ context: moodContext, subscribe: true }) + @state() private mood: Mood; +} +``` diff --git a/core/pfe-core/controllers/cascade-controller.ts b/core/pfe-core/controllers/cascade-controller.ts index 4df9c15ddc..2f06b19ae7 100644 --- a/core/pfe-core/controllers/cascade-controller.ts +++ b/core/pfe-core/controllers/cascade-controller.ts @@ -4,11 +4,17 @@ import { bound } from '../decorators/bound.js'; import { debounce } from '../functions/debounce.js'; import { Logger } from './logger.js'; +/** + * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`; + */ export interface Options { properties: Partial>; prefix?: string; } +/** + * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`; + */ export class CascadeController implements ReactiveController { private class: typeof ReactiveElement; diff --git a/core/pfe-core/decorators/cascades.ts b/core/pfe-core/decorators/cascades.ts index 0856471aec..f800aa93bf 100644 --- a/core/pfe-core/decorators/cascades.ts +++ b/core/pfe-core/decorators/cascades.ts @@ -4,6 +4,7 @@ import { CascadeController } from '../controllers/cascade-controller.js'; /** * Cascades the decorated attribute to children + * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`; */ export function cascades(...items: string[]): PropertyDecorator { return function(proto: T, key: string & keyof T) {