[reactive-element] Adds decorators for @compute, @observe, and @listen
#1870
+1,031
−0
Conversation
This file contains 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
* Adds `@computed` decorator for creating computed properties. Decorator specifies an array of deps which are the names of dependent properties and a compute function which is called with dependency values and should return the computed property value. * Adds `@observe` decorator for observing property changes. Decorator specifies an observe function which receives the current and previous value of the property as well as the name of the property. Note, the observed property must be a reactive property. * Adds `@listen` decorator for declaratively adding event listeners. The decorator should be placed on an element property which is an event listener function. The decorator must provide an object which specifies the event `type`, `options`, and an optional `target`. The `target` defaults to the element itself or may be `root` to add the listener to the element's `renderRoot`, or an instance of `EventTarget`. If `target` is an `EventTarget`, the listener is dynamically added and removed when the element is connected and disconnected.
📊 Tachometer Benchmark ResultsSummarynop-update
render
update
update-reflect
Resultslit-element-list
render
update
update-reflect
lit-html-kitchen-sink
render
update
nop-update
lit-html-repeat
render
update
lit-html-template-heavy
render
update
reactive-element-list
render
update
update-reflect
|
|
@sorvell could we get this broken up into separate PRs per decorator? |
justinfagnani
changed the title
@compute, @observe, and @listen@compute, @observe, and @listen
jpzwarte
reviewed
May 26, 2021
| * private _clickHandler(e: Event) => { | ||
| * this.clickedOn = e.target.localName; | ||
| * } | ||
| * @listen('keydown', window, {capture: true})) |
There was a problem hiding this comment.
I noticed that the docs do not match the function definition.
listen('keydown', window, { capture: true })
vs
listen({ type: 'keydown', options: { capture: true }, target: window })
|
Pretty excited about these APIs. Betting there was some internal discussions on your end.. was kind of wondering about multi-property observers? |
|
@sorvell what is the status of this? Thanks! |
|
Curious if there is still a plan to add these decorators? They would be very handy, and i expect many component libraries end up implementing these themselves. I implemented an @property()
@observe(() => {
this.doSomething() // error `this` is undefined
})
foo: number = 0I guess maybe the code is no longer compatible with Lit 2? Since I couldn't workout a good approach to allow access to @property()
foo: number = 0
@observe("foo")
doSomething() {
}This also works with |
|
Also interested on this! |
|
Sharing interest! |
|
If anyone is interested in these features (excluding |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes #1873.
Adds
@computeddecorator for creating computed properties. Decorator specifies an array of deps which are the names of dependent properties and a compute function which is called with dependency values and should return the computed property value.Adds
@observedecorator for observing property changes. Decorator specifies an observe function which receives the current and previous value of the property as well as the name of the property. Note, the observed property must be a reactive property.Adds
@listendecorator for declaratively adding event listeners. The decorator should be placed on an element property which is an event listener function. The decorator must provide an object which specifies the eventtype,options, and an optionaltarget. Thetargetdefaults to the element itself or may berootto add the listener to the element'srenderRoot, or an instance ofEventTarget. Iftargetis anEventTarget,the listener is dynamically added and removed when the element is connected and disconnected.