1.1.3 • Published 7 years ago
usestate v1.1.3
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