Feature Request: Prop default value & validation & required

[MatanYadaev]

Prop should have the same propeties that props in vue has
type (already have)
required
default (should be callback)
validation

[Hotell]

All of this is already within stencil :)

default values

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who = 'World'
  render(){  return <div>Hello  {this.who} !</div>
}

<x-greet></x-greet>

will render -> <x-greet><div>Hello World !</div></x-greet>

required / validations

@Component({ tag: 'x-greet' })
class Hello {
  @Prop() who: string
  @PropWillChange('who')
  validateWho(newValue: string) {
    const isBlank = typeof newValue == null
    const atLeast2chars = typeof newValue === 'string' && newValue.length >= 2
    if (isBlank){ throw new Error('who: required') } 
    if ( !atLeast2chars ) { throw new Error('who: atLeast2chars')  }
  }
}

also I would definitely enable those validations only for Development env

[adamdbradley]

Right, thanks @Hotell!

[adamdbradley]

Reminds me to add this to the docs.

[leonheess]

Docs: https://stenciljs.com/docs/reactive-data#watch-decorator