Why reflect?

Stencil only compares references for changes, and will not re-render when data inside of an array or object changes. [1]

stencil-reflector is a minimalistic approach of solving the synchronisation issues when working with instances as properties of stencil web components.

Properties decorated with @reflect will cause the component to re-render. And that's about it.

Install

npm install stencil-reflector --save-dev

...or copy the decorator from index.ts, it's just a few lines of code.

The latest version works with Stencil >=2. For Stencil 1, use 0.0.6.

Example

Todo.ts

class Todo extends Reflector {
    @reflect text: string
    @reflect isDone: boolean
    
    complete(){
        // will re-render <my-component/>
        this.isDone = true
    }
}

my-components.ts

@Component({
    tagName: 'my-component'
})
export class MyComponent {
    @Element() el: HTMLStencilElement
    
    todo: Todo
    
    componenWillLoad(){
        // instances of Reflector require the components element as first parameter
        this.todo = new Todo(this.el, {
            text: 'Implement stencil-reflector',
            isDone: false
        })
    }
    
    render(){
        return [
            todo.text,
            todo.isDone ? 'completed' :
                <input type="checkbox" onInput={() => todo.complete()} />
        ]
    }
}

API

@reflect

Indicates that any change on the property should reflect back to the component. Requires the instance to have the component assigned to this.el.

Reflector

Can be used to inherit classes from, but is not required as long as this.el equals the HTMLStencilElement.

class Todo extends Reflector {}
const todo = new Todo(myComponentElement)
console.log('Will reflect decorated properties to:', todo.el)

Thanks to

• stencil
• RomkeVdMeulen