0.0.3 • Published 8 years ago
elx v0.0.3
elx
Install
$ npm install --save elx
Usage
import {elx} from 'elx'
// a counter in 4 lines
elx('button', 0)
.fromDOMEvent('click', 1)
.reduce((state, received) => state + received)
.subscribe((el, state) => el.textContent = state)
Concepts
Initial State
Every element has its initial state.
// for the counter example
const initialState = 0
const source = elx('button', initialState)
Handler for events
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))
})
Handler for actions
Abosolutely 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! Action names are all caps.
Reducer
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)
Subscribe
Trigger when element's state got changed.
source.subscribe((el, newState) => {
el.textContent = newState
})
Contributing
- 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