import { html, render } from '../node_modules/htm/preact/standalone.mjs';
import { context, useSelector, useAction } from 'swiss-redux';
import { compose, element, renderer } from 'swiss';
import { createStore } from 'redux';
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
const actions = {
decrement() {
return { type: 'DECREMENT' };
},
increment() {
return { type: 'INCREMENT' };
}
};
function Counter() {
const count = useSelector(state => state);
const increment = useAction(actions.increment);
const decrement = useAction(actions.decrement);
return html`
<div class="box level">
<div class="level-item">
<button class="button" onclick="${() => decrement()}">-</button>
</div>
<div class="level-item">
<h1 class="title">${count}</h1>
</div>
<div class="level-item">
<button class="button" onclick="${() => increment()}">+</button>
</div>
</div>
`;
}
context(createStore(counter));
const enhance = compose(
renderer(render)
);
element('s-counter', Counter, enhance);