Reject property updates when invalid values set

[chrisdarroch]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report [x] feature request [ ] support request

Preamble:

I'm trying to create a property + attribute combo that rejects new values if they do not validate. This is a similar behaviour to the HTML5 <progress> element:

p = document.createElement('progress')
p.max // 1
p.setAttribute('foo');
p.max // 1
p.max = 'foo' // throws Error

The problem:

I cannot recreate this behaviour using a @Prop annotation.

@Component({
    tag: 'my-progressbar',
});
export class MyComponent implements ComponentInterface {
  @Prop() max: number = 1;
}

Current behavior:

const element = // create the my-progressbar element
element.max; // 1
element.setAttribute('foo');
element.max == 1; // false; is NaN
element.max = 5;
element.max = 'foo';
element.max == 5; // false; is NaN

Expected behavior:

const element = // create the my-progressbar element
element.max; // 1
element.setAttribute('foo');
element.max == 1; // true
element.max = 5;
element.max = 'foo';
element.max == 5; // true

Additional info:

Use of @Watch is insufficient; it gets fired after hostRef.$instanceValues$.set(propName, newVal); is called.

Perhaps a new @Validate decorator could help here, so we could choose (on a per-property basis) to extend or substitute the implementation of parsePropertyValue?

[maxpatiiuk]

Resolving https://github.com/ionic-team/stencil/issues/1359 would resolve this too