∴ spræ

Microhydration for HTML/JSX tree.

usage

<!-- Day/Night switch -->
<div :scope="{ isDark: false }">
  <button :onclick="isDark = !isDark">
    <span :text="isDark ? '🌙' : '☀️'"></span>
  </button>
  <div :class="isDark ? 'dark' : 'light'">Welcome to Spræ!</div>
</div>

<style>
  .light { background: #fff; color: #000; }
  .dark { background: #333; color: #fff; }
</style>

<script type="module" src="//unpkg.com/sprae"></script>

<!-- Modifiers: debounce, throttle, key filters, event targets -->
<input :oninput.debounce-300="search()" placeholder="Search..." />
<button :onclick.once="init()">Initialize</button>
<div :onkeydown.window.escape="close()">Press Esc to close</div>
<form :onsubmit.prevent="save()">...</form>

docs

directives

:text :class :style :value :<attr> :if :else :each :scope :fx :ref :hidden :portal :on<event>

modifiers

.debounce .throttle .delay .once
.window .document .root .body .parent .self .away
.passive .capture .prevent .stop .<key>

core

start store signals config evaluator jsx build hints

used by

settings-panel, wavearea, watr

alternatives

^{alpine, petite-vue, lucia, nuejs, hmpl, unpoly, dagger}

ॐ