Skip to content

@Prop decorator does not work on a getter/setter #1359

@apillard

Description

@apillard

Stencil version:

 @stencil/core@0.17.2

I'm submitting a:

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When adding a @prop decorator to a getter/setter property, the code compiles, and the property is added to the generated interface, but accessing the prop in the client js does not execute the getter, and setting the value does not execute the setter.

To give you an example of where this would be useful, I'm working on a set of mapping components and have a property for the zoom level. The zoom property allows the user to set a zoom programatically and also exposes the current zoom that may be a result of end user mouse interaction with the map. Using the scroll wheel will change the zoom level too.

Currently every time the map is zoomed by mouse interaction, I have to sync the stencil zoom prop with the zoom from my internal mapping api. This causes complications because the @Watch decorator also fires when the value is modified by the component internally. See StackOverflow link below. If getter/setter was supported, the stencil prop could act as a more direct passthrough, and I could fetch the zoom level from the internal api only when it's requested.

Expected behavior:

Steps to reproduce:

Related code:

@Prop()
get zoom(): number {
return 10;
}
set zoom(newZoom: number) {
console.log('setting the zoom')
}

Other information:

Follow up to discussion here: #230
Opening this as a new ticket because it should be a @prop decorator and not a @watch

Also see this StackOverflow post that describes problems you run into when you have to make the prop mutable and sync it by modifying the value. https://stackoverflow.com/questions/52229575/how-to-mutate-a-property-within-a-stenciljs-component-without-triggering-watch

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions