Corset

CorsetはCSSライクに書けるオープンソースのデータバインディングJavaScriptライブラリです。CSSライクな構文を使ってコンテンツを拡張する事が出来ます。

CSSライクに書けるJS、と言われてもピンと来ない方も少なくないと思いますが、コードを見れば一目瞭然です👇

import sheet, { mount } from 'https://cdn.corset.dev/v1';
mount(document, class {
  count = 0;
 
  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }
      .count {
        text: var(--count);
      }
      .increment {
        event[click]: var(--inc);
      }
      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});

CSS変数を書く要領で手軽にDOMにバインドする事が出来ます。最初は戸惑うかもしれませんが、元々CSSを書きなれている方ならすぐに書けるようになると思います。

需要の有無は分かりませんがユニークな方法だと思ったので備忘録として。ライセンスはBSD-2-Clauseです。

Corset