usestate

usestate gives the webcomponents a new life cycle.

It is effective when doing data binding.

$ npm i -S usestate

Usage

import useState from 'usestate';
 
class Component extends HTMLElement {
    /* ... */
}
 
export default useState(Component)

or

import useState from 'usestate';
 
@useState
export default class Component extends HTMLElement {
    /* ... */
}

What can I do with it?

A component with usestate can use the following methods.

• getState()
• setState(object)
• stateChangedCallback(stateName, oldValue, newValue)
• static get observedState

stateChangedCallback() is called when a state is changed. Only called for observed state. So stateChangedCallback() is like attributeChangedCallback().

You can use setState() to change a state. setState() find the difference of state.

You should define the state to be observed by observedState() method.

observedState() method is a static getter method that returns an array of state names like observedAttributes().

example

import useState from 'usestate'
 
class HelloElement extends HTMLElement {
    constructor() {
        super();
        
        const input = document.createElement('input');
        input.type = 'text';
        input.onkeyup = (e) => {
            this.setState({ name: e.target.value });
        }
        this.appendChild(input);
        
        this.p = document.createElement('p');
        this.appendChild(this.p);
    }
 
    stateChangedCallback(stateName, oldValue, newValue) {
        switch(stateName) {
            case 'name':
                this.p.textContent = `Hello, ${newValue}`;
        }
    }
 
    static get observedState() { return ['name']; }
}
 
customElements.define('hello-element', HelloElement);
 
const helloElement = new (useState(HelloElement));
document.body.appendChild(helloElement);
 
helloElement.setState({ name: 'world' });

With flux.

import EventEmitter from 'events'
import useState from 'usestate'
 
const dispatcher = new EventEmitter();
 
class Store extends EventEmitter {
    constructor() {
        super();
 
        this.name = '';
 
        dispatcher.on('inputName', (value) => {
            this.name = value;
            this.emit('CHANGE');
        });
    }
}
const store = new Store()
 
class HelloElement extends HTMLElement {
    constructor() {
        super();
 
        this.handleStoreChange = this.handleStoreChange.bind(this);
        
        const input = document.createElement('input');
        input.type = 'text';
        input.onkeyup = (e) => {
            dispatcher.emit('inputName', input.value);
        }
        this.appendChild(input);
        
        this.p = document.createElement('p');
        this.appendChild(this.p);
    }
 
    handleStoreChange() {
        this.setState(store);
    }
 
    connectedCallback() {
        store.on('CHANGE', this.handleStoreChange);
        //initialization
        this.handleStoreChange();
    }
 
    disconnectedCallback() {
        store.removeListener('CHANGE', this.handleStoreChange);
    }
 
    stateChangedCallback(stateName, oldValue, newValue) {
        switch(stateName) {
            case 'name':
                this.p.textContent = `Hello, ${newValue}`;
        }
    }
 
    static get observedState() { return ['name']; }
}
 
customElements.define('hello-element', HelloElement);
 
const helloElement = new (useState(HelloElement));
document.body.appendChild(helloElement);

License

ISC