https://github.com/clebert/snugjs
Create reactive web components using generator functions.
https://github.com/clebert/snugjs
Last synced: about 1 year ago
JSON representation
Create reactive web components using generator functions.
- Host: GitHub
- URL: https://github.com/clebert/snugjs
- Owner: clebert
- License: mit
- Created: 2022-08-05T23:07:36.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T20:26:19.000Z (almost 3 years ago)
- Last Synced: 2025-04-02T05:43:46.395Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1.9 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# snugjs
> Create reactive web components using generator functions.
## Installation
```
npm install snugjs
```
## TodoMVC
A work-in-progress implementation of [TodoMVC](http://todomvc.com) using
`snugjs` and [`@snugjs/html`](https://github.com/clebert/snugjs-html) can be
found [here](https://github.com/clebert/snugjs-todomvc).
## `` Element Factory
```jsx
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(
-,
+,
{count},
);
yield;
}
},
);
```
```jsx
document.body.appendChild();
```
```html
```