https://github.com/RienNeVaPlus/stencil-reflector

🔌 Reflect decorated properties of classes back to stencil components in order to keep them synchronized
https://github.com/RienNeVaPlus/stencil-reflector

mobx observable observe redux reflect state state-management stencil stencil-mobx stenciljs store sync synchronize

Last synced: 4 days ago
JSON representation

🔌 Reflect decorated properties of classes back to stencil components in order to keep them synchronized

• Host: GitHub
• URL: https://github.com/RienNeVaPlus/stencil-reflector
• Owner: RienNeVaPlus
• Created: 2019-03-02T06:22:47.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-12T11:07:26.000Z (about 2 years ago)
• Last Synced: 2024-09-21T22:18:38.356Z (about 2 months ago)
• Topics: mobx, observable, observe, redux, reflect, state, state-management, stencil, stencil-mobx, stenciljs, store, sync, synchronize
• Language: TypeScript
• Homepage:
• Size: 29.3 KB
• Stars: 10
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-stenciljs - Stencil Reflector - mobx) (List of Awesome Components Made using StencilJS / Individual Components)

README

        


  





    stencil-reflector





    Reflects properties decorated with @reflect back to their parent stencil component.



## Why reflect?

> Stencil only compares references for changes, and will not re-render when data inside of an array or object changes. [ [1]](https://stenciljs.com/docs/reactive-data)

`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**

```tsx

class Todo extends Reflector {

    @reflect text: string

    @reflect isDone: boolean

    

    complete(){

        // will re-render 

        this.isDone = true

    }

}

```

**my-components.ts**

```jsx

@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' :

                 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`.

```ts

class Todo extends Reflector {}

const todo = new Todo(myComponentElement)

console.log('Will reflect decorated properties to:', todo.el)

```

### Thanks to

- [stencil](https://github.com/ionic-team/stencil)

- [RomkeVdMeulen](https://gist.github.com/RomkeVdMeulen/e45ee89ce848e7fda140635a4d29892b)