What is the correct way to validate properties ?

[Mushr0000m]

I'm creating my first Custom Component and everything works great except that now I have to validate the properties/attributes added to it. For example having this code (it's an example in real life I have like 10 html attributes for the component) :

@property({type: Array, reflect: true})
public values: number[] = [];
@property({type: Number, reflect: true})
public size: number | null = null;
@property({type: Number, reflect: true})
public max: number | null = null;

If I always want to have values containing an array of numbers and nothing else, also if size must always be a positive number, etc. How should I validate them, for example if the user type :

<my-component values="['baz', 3, 4]" size="-10"></my-component>

My aim is to be able to have some logic to validate these properties and changes them to a default value as a fallback that is reflected on the attribute. From this example it would be to delete the 'baz' value from values and change the size to 0. I tried with a custom converter because it looked like a good place to store this logic to make it reusable (because I have like 5 properties that should always be a positive number or falllback to 0), but it's not working as expected.

If you have real life examples or advices it would be great !

[augustjk]

Custom converters only apply if users are providing the properties as attributes as that's when a converter would be called. If users are providing them as properties, you have a couple of options:

1. Use willUpdate() lifecycle to read the value and make any necessary changes before update/rendering. https://lit.dev/docs/components/lifecycle/#willupdate

2. Create custom property accessors (getters and setters) and do the validation on the setter. https://lit.dev/docs/components/properties/#accessors-custom

[Mushr0000m]

Thanks for your answer I didn't think of the difference between setting the values as attributes vs properties... My "problem" if using willUpdate is that it implies repeating the same code multiple times to do the same action on multiple properties. As I said I must ensure that 5 properties are always positive integer, and wrintting something like this looks a little verbose :

  if (changedProperties.has('myprop1')) {
     this.myprop1 = // Check it's a number and it's positive or fallback to 0
  }
  if (changedProperties.has('myprop2')) {
     this.myprop2 = // Check it's a number and it's positive or fallback to 0
  }

I read the doc on computed properties (https://lit.dev/articles/lit-for-polymer-users/#computed-properties-and-observers) and as you said I should place the code inside the willUpdate method, but do you have any suggestion to optimize this checks ?

[augustjk]

Errm.. not sure if it's the best way but maybe something like this?

for (const p of ['myprop1', 'myprop2']) {
  if (changedProperties.has(p)) {
    if (isNaN(this[p]) || Number(this[p]) < 0) {
      this[p] = 0;
    }
  }
}

Might need some type tweaking to makes sure TS is happy with the property access.