dollars.js v0.6.2

;

Easily create reactive HTML documents thanks to $$, example:

Global

<script src="https://unpkg.com/dollars.js"></script>
<div>
  <button $on-click="count++">Increment</button>
  <strong $text="count"></strong>
  <button $on-click="count--">Decrement</button>
  <script>
    $$({ count: 0 });
  </script>
</div>

codepen

Module

ESM support depends on package.json#exports.

<div id="scope">
  <button $on-click="count++">Increment</button>
  <strong $text="count"></strong>
  <button $on-click="count--">Decrement</button>
  <script>
    import $$ from "http://esm.sh/dollars.js";
    $$(scope, { count: 0 });
  </script>
</div>

codepen

directives

$on-\<event>

add a handler to the node

<button $on-click="console.log('click!')">Click!</button>

$text

Print the state in text format inside the node

Static text <span $text="message"></span>

$html

Print the state in html format inside the node

Static html <span $html="message"></span>

$show

define display if the state is false

<button $show="show">Show?</button>

$toggle-\<type>-\<optional>

define or remove property according to state

<button $toggle-class-hidden="show">Show?</button>

$set-\<type>

define the property according to the state

<button $set-class="show?'hidden':null">Show?</button>

$each

iterates over an array and defines access to the loop variable to retrieve cursor properties

<ul>
  <template $each="data">
    <li>
      name: <span $text="loop.name"></span><br />
      email: <span $text="loop.email"></span><br />
    </li>
  </template>
</ul>