Effector-DOM
Declarative stack-based DOM api
Usage
import {createStore, createEvent} from 'effector'import {using, spec, list, h} from 'effector-dom' using(document.body, () => { const addLine = createEvent() const code = createStore(['let foo = 0']).on(addLine, list => [ ...list, `foo += ${Math.random()}`, ]) const color = createStore('cornsilk').on(addLine, color => { switch (color) { case 'cornsilk': return 'aliceblue' case 'aliceblue': return 'cornsilk' } }) h('section', () => { spec({ style: { backgroundColor: color, padding: '1em', }, }) list(code, ({store}) => { h('div', {text: store}) }) }) h('section', () => { spec({data: {section: 'controls'}}) h('button', { handler: {click: addLine}, text: 'Add line', style: {padding: '1em'}, }) })})
Component is just a plain function
function VizionSectionHeader(text) { h('header', () => { spec({data: {vizionSectionHeader: true}}) h('h4', { text, }) })}