Create reactive web components using generator functions.
npm install snugjs
A work-in-progress implementation of TodoMVC using
snugjs and @snugjs/html can be
found here.
import {createElement} from '@snugjs/html';
import {CustomElement, createElementRef} from 'snugjs';
export const Counter = CustomElement.define(
`x-counter`,
{initialCount: `number?`},
function* ({next, signal}) {
const decrementButton = createElementRef(`button`);
const incrementButton = createElementRef(`button`);
let count = this.props.initialCount ?? 0;
decrementButton.element.addEventListener(
`click`,
() => {
count -= 1;
next();
},
{signal},
);
incrementButton.element.addEventListener(
`click`,
() => {
count += 1;
next();
},
{signal},
);
while (true) {
this.replaceChildren(
<button key={decrementButton.key}>-</button>,
<button key={incrementButton.key}>+</button>,
<b>{count}</b>,
);
yield;
}
},
);document.body.appendChild(<Counter initialCount={42} />);<html>
<body>
<x-counter initialCount="42"></x-counter>
</body>
</html>