$ npm install --save elx
import {elx} from 'elx'
// a counter in 4 lines
const button = elx('button', 0)
.fromDOMEvent('click', 1)
.reduce((state, received) => state + received)
.subscribe((el, state) => el.textContent = state)
// button is reusable
// listen for a custom action
button.fromAction('clear')
.subscribe(el => el.textContent = 0)
Every element has its initial state.
// for the counter example
const initialState = 0
const source = elx('button', initialState)
Notify your element with some data, of course it does not know how to handle the data for now.
source.fromDOMEvent('click', 1)
Sure the event handler can be a function or even a Promise that resolves the data.
source.fromDOMEvent('click', () => {
return new Promise(resolve => setTimeout(() => {
resolve(1)
}, 1000))
})
Absolutely you can use custom actions, because you need cross-element communications!
source.fromAction('increment', 1)
If you are using custom action, you can use source.dispatch(action)
to trigger that action!
Tell your element how to get the new state after received data from event hander.
// since it's just a counter
// we simply add the received data in event handler
// to the currentState
const reducer = (currentState, received) => currentState + received
source.reduce(reducer)
Trigger when element's state got changed.
source.subscribe((el, newState) => {
el.textContent = newState
})
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D