Skip to content

dy/sprae

Repository files navigation

spræ tests size npm

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>

why

Wanted alpine but with less syntax and magic, and with open state.

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

watr, wavearea

alternatives

alpine, petite-vue, lucia, nuejs, hmpl, unpoly, dagger