Prop should have the same propeties that props in vue has
type (already have)
required
default (should be callback)
validation
All of this is already within stencil :)
@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>
@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
Right, thanks @Hotell!
Reminds me to add this to the docs.
Most helpful comment
All of this is already within stencil :)
default values
will render ->
<x-greet><div>Hello World !</div></x-greet>required / validations
also I would definitely enable those validations only for Development env