/snugjs

Create reactive web components using generator functions.

Primary LanguageTypeScriptMIT LicenseMIT

snugjs

Create reactive web components using generator functions.

Installation

npm install snugjs

TodoMVC

A work-in-progress implementation of TodoMVC using snugjs and @snugjs/html can be found here.

<Counter /> Element Factory

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>