unistore + lit-html

*lit-html + unistore.md

lit-html + unistore

import { html, render } from 'lit'
import { provide, connect } from './unlit'

const app = provide(store)( () => html`<div>${counter}</div>` )

const counter = connect('count', {
	add: ({ count }) => ({ count: count+1 })
})( ({ count, actions }) => html`
	<button on-click="${actions.add}">${count}</button>
`);

render(app, document.body)

unlit.js

import { select, mapActions } from '../util';  // ~unistore/src/util
import { directive } from 'lit-html';

export function connect(mapState, createActions) {
	if (typeof mapState!=='function') mapState = select(mapState || [])
	return comp => props => {
		let actions = createActions ? mapActions(createActions, props.store) : {}
		let upd = state => comp({ actions, ...mapState(state, props), ...props })
		return directive(part => {
			store.subscribe( state => part.setValue(upd(state)) )
			return upd(store.getState())
		})
	}
}

export const provide = store => comp => props => comp({ ...props, store });