Add standard decorators to @lit-labs/context #4009
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,4 +3,5 @@ | |
| /node_modules/ | ||
| /lib/ | ||
| /index.* | ||
| /legacy-decorators.* | ||
| /std-decorators.* | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './lib/decorators/consume.js'; | ||
|
Collaborator
There was a problem hiding this comment. add a comment about keeping this in sync with decorators.ts? and do we need a license header? |
||
| export * from './lib/decorators/provide.js'; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2023 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import {ReactiveElement} from '@lit/reactive-element'; | ||
| import {ContextConsumer} from '../controllers/context-consumer.js'; | ||
| import {Context} from '../create-context.js'; | ||
|
|
||
| /** | ||
| * A property decorator that adds a ContextConsumer controller to the component | ||
|
Collaborator
There was a problem hiding this comment. Do we want to get more specific with the decorator type? "A field and accessor decorator" maybe? |
||
| * which will try and retrieve a value for the property via the Context API. | ||
| * | ||
| * @param context A Context identifier value created via `createContext` | ||
| * @param subscribe An optional boolean which when true allows the value to be | ||
| * updated multiple times. | ||
| * | ||
| * @example | ||
| * | ||
| * ```ts | ||
| * import {consume} from '@lit-labs/context/std-decorators/consume.js'; | ||
| * import {loggerContext, Logger} from 'community-protocols/logger'; | ||
| * | ||
| * class MyElement { | ||
| * @consume({context: loggerContext}) | ||
| * logger?: Logger; | ||
| * | ||
| * doThing() { | ||
| * this.logger?.log('thing was done'); | ||
| * } | ||
| * } | ||
| * ``` | ||
| * @category Decorator | ||
| */ | ||
| export function consume<Provided>({ | ||
| context, | ||
| subscribe, | ||
| }: { | ||
| context: Context<unknown, Provided>; | ||
| subscribe?: boolean; | ||
| }) { | ||
| return <This extends ReactiveElement, Consuming>( | ||
| _target: unknown, | ||
| decoratorContext: | ||
| | ClassFieldDecoratorContext<This, Consuming> | ||
| | ClassAccessorDecoratorContext<This, Consuming> | ||
| ): EnforceTypesMatch<Provided, Consuming, void> => { | ||
| decoratorContext.addInitializer(function (this: This) { | ||
|
Collaborator
There was a problem hiding this comment. This is cool! I'm looking forward to getting rid of our own |
||
| new ContextConsumer(this, { | ||
| context, | ||
| callback: (value: Provided) => { | ||
| decoratorContext.access.set(this, value as unknown as Consuming); | ||
| }, | ||
| subscribe, | ||
| }); | ||
| }); | ||
| return undefined as unknown as EnforceTypesMatch<Provided, Consuming, void>; | ||
| }; | ||
| } | ||
|
|
||
| type EnforceTypesMatch<Provided, Consuming, Ok> = [Provided] extends [Consuming] | ||
| ? Ok | ||
| : { | ||
| message: "the provided type isn't assignable to the consuming field"; | ||
| provided: Provided; | ||
| consuming: Consuming; | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,100 @@ | ||||||
| /** | ||||||
| * @license | ||||||
| * Copyright 2017 Google LLC | ||||||
| * SPDX-License-Identifier: BSD-3-Clause | ||||||
| */ | ||||||
|
|
||||||
| import {ReactiveElement} from '@lit/reactive-element'; | ||||||
| import {Context} from '../create-context.js'; | ||||||
| import {ContextProvider} from '../controllers/context-provider.js'; | ||||||
|
|
||||||
| /* | ||||||
| * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all | ||||||
| * property decorators (but not class decorators) in this file that have | ||||||
| * an @ExportDecoratedItems annotation must be defined as a regular function, | ||||||
| * not an arrow function. | ||||||
| */ | ||||||
|
|
||||||
| /** | ||||||
| * A property decorator that adds a ContextConsumer controller to the component | ||||||
|
Collaborator
There was a problem hiding this comment.
Suggested change
Not sure fi this needs to be done in the existing decorators too |
||||||
| * which will try and retrieve a value for the property via the Context API. | ||||||
| * | ||||||
| * @param context A Context identifier value created via `createContext` | ||||||
| * @param multiple An optional boolean which when true allows the value to be updated | ||||||
|
|
||||||
| * multiple times. | ||||||
| * | ||||||
| * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector | ||||||
|
|
||||||
| * | ||||||
| * @example | ||||||
| * | ||||||
| * ```ts | ||||||
| * import {consume} from '@lit-labs/context'; | ||||||
| * import {loggerContext} from 'community-protocols/logger'; | ||||||
| * | ||||||
| * class MyElement { | ||||||
| * @provide({context: loggerContext}) | ||||||
| * logger; | ||||||
| * | ||||||
| * doThing() { | ||||||
| * this.logger.log('thing was done'); | ||||||
| * } | ||||||
| * } | ||||||
| * ``` | ||||||
| * @category Decorator | ||||||
|
Collaborator
There was a problem hiding this comment. should we make a new category for standard decorators? |
||||||
| */ | ||||||
| export function provide<Expected>({ | ||||||
| context: context, | ||||||
| }: { | ||||||
| context: Context<unknown, Expected>; | ||||||
| }) { | ||||||
| return <This extends ReactiveElement, Providing>( | ||||||
| target: ClassAccessorDecoratorTarget<This, Providing>, | ||||||
| decoratorContext: ClassAccessorDecoratorContext<This, Providing> | ||||||
| ): EnforceTypesMatch< | ||||||
| Expected, | ||||||
| Providing, | ||||||
| ClassAccessorDecoratorResult<This, Providing> | ||||||
| > => { | ||||||
| const controllerMap = new WeakMap< | ||||||
| This, | ||||||
| ContextProvider<Context<unknown, Providing>> | ||||||
| >(); | ||||||
| decoratorContext.addInitializer(function (this: This) { | ||||||
| controllerMap.set( | ||||||
| this, | ||||||
| new ContextProvider( | ||||||
| this, | ||||||
| // this cast is ok because we're already using the type system to | ||||||
| // ensure that Providing is assignable to Expected | ||||||
| {context: context as unknown as Context<unknown, Providing>} | ||||||
| ) | ||||||
| ); | ||||||
| }); | ||||||
| const result: ClassAccessorDecoratorResult<This, Providing> = { | ||||||
| get(this: This) { | ||||||
| return target.get.call(this); | ||||||
| }, | ||||||
| set(this: This, value: Providing) { | ||||||
| controllerMap.get(this)?.setValue(value); | ||||||
| return target.set.call(this, value); | ||||||
| }, | ||||||
| init(this: This, value: Providing) { | ||||||
| controllerMap.get(this)?.setValue(value); | ||||||
| return value; | ||||||
| }, | ||||||
| }; | ||||||
| return result as unknown as EnforceTypesMatch< | ||||||
| Expected, | ||||||
| Providing, | ||||||
| ClassAccessorDecoratorResult<This, Providing> | ||||||
| >; | ||||||
| }; | ||||||
| } | ||||||
|
|
||||||
| type EnforceTypesMatch<Expected, Providing, Ok> = [Providing] extends [Expected] | ||||||
| ? Ok | ||||||
| : { | ||||||
| message: "the providing field isn't assignable to this context"; | ||||||
| providing: Providing; | ||||||
| context: Expected; | ||||||
| }; | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './lib/std-decorators/consume.js'; | ||
| export * from './lib/std-decorators/provide.js'; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this needed now?