A minimum viable front-end framework with added virtual DOM
Don't use this :-) It's really just an indulgent idea of how small a UI framework + virtual DOM can be. It's slightly better than Pion, but is good for... well, nothing much of anything really.
Xi has only a few concepts:
Views render HTML elements to the page:
h('div', { id: 'xi-app' }, 'Xi is super small!') // --> <div id='xi-app'>Xi is super small</div>
State is a single global state atom, a'la Redux and friends. You can update state with the convenient updateState
function passed in to all views.
function view (state = { title: 'Xi is cool' }, update) {
const updateTitle = () => update({title: 'Xi is AWESOME'})
return h('div', { onclick: updateTitle }, state.title)
}
There aren't any stateful components in Xi. However, if you want reusable bits of UI then use functions, just like React stateless functional components. Remember, state down, actions up!
See the examples
folder for a few ideas.
Eh, go use React or something better 😉