# usestate

usestate gives the webcomponents a new life cycle.

It is effective when doing data binding.

```
$ npm i -S usestate
```

## Usage

```javascript
import useState from 'usestate';

class Component extends HTMLElement {
	/* ... */
}

export default useState(Component)
```

or

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

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

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