DEV: Support @debounce decorator in native class syntax (#20521)

The implementation previously generated a descriptor with an `initializer()`, and bound the function to the `this` context of the initializer. In native class syntax, the initializer of a descriptor is only called once, with a `this` context of the constructor, not the instance.

This commit updates the implementation so that it generates the bound function on-demand using a getter. This is the same strategy employed by ember's built-in `@action` decorator.

Unfortunately, this use of a getter means that the `@observes` decorator does not support being directly chained to `@debounce`. It throws the error "`observer must be provided a function or an observer definition`". The workaround is to put the observer on its own function, which then calls the debounced function. Given that we're aiming to reduce our usage of `@observes`, we've accepted the need for this workaround rather than spending the time to patch the implementation of `@observes`.
This commit is contained in:
David Taylor
2023-03-03 11:48:58 +00:00
committed by GitHub
parent 36ad653fa9
commit e08a0b509d
7 changed files with 73 additions and 11 deletions

View File

@ -61,6 +61,10 @@ export default Component.extend({
},
@observes("computedConfig.{from,to,options}", "options", "isValid", "isRange")
configChanged() {
this._renderPreview();
},
@debounce(INPUT_DELAY)
async _renderPreview() {
if (this.markup) {