sprae 8.1.3 → 9.0.0

package/readme.md

@@ -1,295 +1,464 @@
 # ∴ spræ [![tests](https://github.com/dy/sprae/actions/workflows/node.js.yml/badge.svg)](https://github.com/dy/sprae/actions/workflows/node.js.yml) [![size](https://img.shields.io/bundlephobia/minzip/sprae?label=size)](https://bundlephobia.com/result?p=sprae) [![npm](https://img.shields.io/npm/v/sprae?color=orange)](https://npmjs.org/sprae)
 
-> DOM tree hydration with reactivity.
+> DOM tree microhydration
 
-_Sprae_ is compact ergonomic progressive enhancement framework.<br/>
-It provides reactive `:`-attributes that enable simple markup logic without need for complex scripts.<br/>
-Perfect for small-scale websites, prototypes or UI logic.<br/>
-It is tiny, performant and open alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue) or [template-parts](https://github.com/github/template-parts).
+_Sprae_ is a compact & ergonomic progressive enhancement framework.<br/>
+It provides `:`-attributes for inline markup logic with _signals_-based reactivity.<br/>
+Perfect for small-scale websites, prototypes, or lightweight UI.<br/>
 
-## Usage
-
-### Autoinit
-
-To autoinit document, include [`sprae.auto.js`](./sprae.auto.js):
-
-```html
-<!-- <script src="https://cdn.jsdelivr.net/npm/sprae/dist/sprae.auto.js" defer></script> -->
-<script defer src="./path/to/sprae.auto.js"></script>
-
-<ul>
-  <li :each="item in ['apple', 'bananas', 'citrus']"">
-    <a :href="`#${item}`" :text="item" />
-  </li>
-</ul>
-```
-
-### Manual init
 
-To init manually as module, import [`sprae.js`](./sprae.js):
+## Usage
 
 ```html
 <div id="container" :if="user">
-  Logged in as <span :text="user.name">Guest.</span>
+  Hello <span :text="user.name">World</span>.
 </div>
 
 <script type="module">
-  // import sprae from 'https://cdn.jsdelivr.net/npm/sprae/dist/sprae.js';
-  import sprae from './path/to/sprae.js';
+  import sprae, { signal } from 'sprae'
+
+  const name = signal('Kitty')
+  sprae(container, { user: { name } }) // init
 
-  const state = sprae(container, { user: { name: 'Dmitry Ivanov' } });
-  state.user.name = 'dy'; // updates DOM
+  name.value = 'Dolly' // update
 </script>
 ```
 
-Sprae evaluates `:`-attributes and evaporates them.<br/>
+Sprae evaluates `:`-directives and evaporates them, attaching state to html.
 
-## State
 
-Sprae creates reactive state that mirrors current DOM values.<br/>
-It is based on [signals](https://github.com/preactjs/signals) and can take them as inputs.
+## Directives
 
-```js
-import { signal } from '@preact/signals-core'
+<details>
+  <summary><strong>:if, :else</strong></summary>
 
-const version = signal('alpha')
+  #### `:if="condition"`, `:else`
 
-// Sprae container with initial state values
-const state = sprae(container, { foo: 'bar', version })
+  Control flow of elements.
 
-// Modify state property 'foo', triggering a DOM update
-state.foo = 'baz'
+  ```html
+  <span :if="foo">foo</span>
+  <span :else :if="bar">bar</span>
+  <span :else>baz</span>
 
-// Update the version signal, which also triggers a DOM refresh
-version.value = 'beta'
+  <!-- fragment -->
+  <template :if="foo">
+    foo <span>bar</span> baz
+  </template>
+  ```
+</details>
 
-// For batch update, re-sprae with new state values
-sprae(container, { foo: 'qux', version: 'gamma' })
-```
+<details>
+  <summary><strong>:each</strong></summary>
 
-## Attributes
+  #### `:each="item, index in items"`
 
-#### `:if="condition"`, `:else`
+  Multiply element. Item is identified either by `item.id` or `item.key`.
 
-Control flow of elements.
+  ```html
+  <ul><li :each="item in items" :text="item"/></ul>
 
-```html
-<span :if="foo">foo</span>
-<span :else :if="bar">bar</span>
-<span :else>baz</span>
-```
+  <!-- cases -->
+  <li :each="item, idx in list" />
+  <li :each="val, key in obj" />
+  <li :each="idx in number" />
 
-#### `:each="item, index in items"`
+  <!-- by condition -->
+  <li :if="items" :each="item in items" :text="item" />
+  <li :else>Empty list</li>
 
-Multiply element.
+  <!-- fragment -->
+  <template :each="item in items">
+    <dt :text="item.term"/>
+    <dd :text="item.definition"/>
+  </template>
 
-```html
-<ul><li :each="item in items" :text="item"></ul>
+  <!-- prevent FOUC -->
+  <style>[:each] {visibility: hidden}</style>
+  ```
+</details>
 
-<!-- Cases -->
-<li :each="item, idx in list" />
-<li :each="val, key in obj" />
-<li :each="idx in number" />
+<details>
+  <summary><strong>:text</strong></summary>
 
-<!-- Loop by condition -->
-<li :if="items" :each="item in items" :text="item" />
-<li :else>Empty list</li>
-```
+  #### `:text="value"`
 
-#### `:text="value"`
+  Set text content of an element.
 
-Set text content of an element. Default text can be used as fallback:
+  ```html
+  Welcome, <span :text="user.name">Guest</span>.
 
-```html
-Welcome, <span :text="user.name">Guest</span>.
-```
+  <!-- fragment -->
+  Welcome, <template :text="user.name" />.
+  ```
+</details>
 
-#### `:class="value"`
+<details>
+  <summary><strong>:class</strong></summary>
 
-Set class value from either a string, array or object.
+  #### `:class="value"`
 
-```html
-<!-- set from string -->
-<div :class="`foo ${bar}`"></div>
+  Set class value, extends existing `class`.
 
-<!-- extends existing class as "foo bar" -->
-<div class="foo" :class="`bar`"></div>
+  ```html
+  <!-- string with interpolation -->
+  <div :class="'foo $<bar>'"></div>
 
-<!-- clsx: object / list -->
-<div :class="[foo && 'foo', {bar: bar}]"></div>
-```
+  <!-- array/object a-la clsx -->
+  <div :class="[foo && 'foo', {bar: bar}]"></div>
+  ```
+</details>
 
-#### `:style="value"`
+<details>
+  <summary><strong>:style</strong></summary>
 
-Set style value from an object or a string. Extends existing `style` attribute, if any.
+  #### `:style="value"`
 
-```html
-<!-- from string -->
-<div :style="`foo: ${bar}`"></div>
+  Set style value, extends existing `style`.
 
-<!-- from object -->
-<div :style="{foo: 'bar'}"></div>
+  ```html
+  <!-- string with interpolation -->
+  <div :style="'foo: $<bar>'"></div>
 
-<!-- set CSS variable -->
-<div :style="{'--baz': qux}"></div>
-```
+  <!-- object -->
+  <div :style="{foo: 'bar'}"></div>
 
-#### `:value="value"`
+  <!-- CSS variable -->
+  <div :style="{'--baz': qux}"></div>
+  ```
+</details>
 
-Set value of an input, textarea or select. Takes handle of `checked` and `selected` attributes.
+<details>
+  <summary><strong>:value</strong></summary>
 
-```html
-<!-- set from value -->
-<input :value="value" />
-<textarea :value="value" />
-
-<!-- selects right option -->
-<select :value="selected">
-  <option :each="i in 5" :value="i" :text="i"></option>
-</select>
-```
+  #### `:value="value"`
 
-#### `:with="data"`
+  Set value of an input, textarea or select. Takes handle of `checked` and `selected` attributes.
 
-Define or extend data scope for a subtree.
+  ```html
+  <input :value="value" />
+  <textarea :value="value" />
 
-```html
-<!-- Inline data -->
-<x :with="{ foo: 'bar' }" :text="foo"></x>
+  <!-- selects right option -->
+  <select :value="selected">
+    <option :each="i in 5" :value="i" :text="i"></option>
+  </select>
+  ```
+</details>
 
-<!-- External data -->
-<y :with="data"></y>
+<details>
+  <summary><strong>:*</strong></summary>
 
-<!-- Extend scope -->
-<x :with="{ foo: 'bar' }">
-  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
-</x>
-```
+  #### `:*="value"`, `:="values"`
 
-#### `:<prop>="value?"`
+  Set any attribute(s).
 
-Set any attribute value or run an effect.
+  ```html
+  <label :for="name" :text="name" />
 
-```html
-<!-- Single property -->
-<label :for="name" :text="name" />
+  <!-- multiple attributes -->
+  <input :id:name="name" />
 
-<!-- Multiple properties -->
-<input :id:name="name" />
+  <!-- spread attributes -->
+  <input :="{ id: name, name, type: 'text', value }" />
+  ```
+</details>
 
-<!-- Effect - returns undefined, triggers any time bar changes -->
-<div :fx="void bar()" ></div>
+<details>
+  <summary><strong>:scope</strong></summary>
 
-<!-- Raw event listener (see events) -->
-<div :onclick="e=>e.preventDefault()"></div>
-```
+  #### `:scope="data"`
 
-#### `:="props?"`
+  Define or extend data scope for a subtree.
 
-Spread multiple attibures.
+  ```html
+  <x :scope="{ foo: signal('bar') }">
+    <!-- extends parent scope -->
+    <y :scope="{ baz: 'qux' }" :text="foo + baz"></y>
+  </x>
+  ```
+</details>
 
-```html
-<input :="{ id: name, name, type:'text', value }" />
-```
+<details>
+  <summary><strong>:ref</strong></summary>
 
-#### `:ref="id"`
+  #### `:ref="name"`
 
-Expose element to current data scope with the `id`:
+  Expose element to current scope with `name`.
 
-```html
-<!-- single item -->
-<textarea :ref="text" placeholder="Enter text..."></textarea>
-<span :text="text.value"></span>
+  ```html
+  <textarea :ref="text" placeholder="Enter text..."></textarea>
 
-<!-- iterable items -->
-<ul>
+  <!-- iterable items -->
   <li :each="item in items" :ref="item">
-    <input @focus="item.classList.add('editing')" @blur="item.classList.remove('editing')"/>
+    <input :onfocus..onblur=="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
   </li>
-</ul>
-```
+  ```
+</details>
+
+<details>
+  <summary><strong>:fx</strong></summary>
+
+  #### `:fx="values"`
+
+  Run effect, not changing any attribute.<br/>Optional cleanup is called in-between effect calls or on disposal.
+
+  ```html
+  <div :fx="a.value ? foo() : bar()" />
+
+  <!-- cleanup function -->
+  <div :fx="id = setInterval(tick, interval), () => clearInterval(tick)" />
+  ```
+</details>
+
+<details>
+  <summary><strong>:on*</strong></summary>
+
+  #### `:on<event>.<mod>="handler"`, `:on<in>..on<out>="handler"`
+
+  Attach event(s) listener with possible modifiers.
+
+  ```html
+  <input type="checkbox" :onchange="e => isChecked = e.target.value">
+
+  <!-- multiple events -->
+  <input :value="text" :oninput:onchange="e => text = e.target.value">
+
+  <!-- events sequence -->
+  <button :onfocus..onblur="e => ( handleFocus(), e => handleBlur())">
+
+  <!-- event modifiers -->
+  <button :onclick.throttle-500="handler">Not too often</button>
+  ```
+
+  ##### Modifiers:
+
+  * `.once`, `.passive`, `.capture` – listener [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options).
+  * `.prevent`, `.stop` – prevent default or stop propagation.
+  * `.window`, `.document`, `.outside`, `.self` – specify event target.
+  * `.throttle-<ms>`, `.debounce-<ms>` – defer function call with one of the methods.
+  * `.ctrl`, `.shift`, `.alt`, `.meta`, `.arrow`, `.enter`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete`, `.digit`, `.letter`, `.character` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
+  * `.ctrl-<key>, .alt-<key>, .meta-<key>, .shift-<key>` – key combinations, eg. `.ctrl-alt-delete` or `.meta-x`.
+  * `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).
+
+</details>
 
-#### `:render="ref"`
 
-Include template as element content.
+<details>
+  <summary><strong>:html</strong> 🔌</summary>
+
+  #### `:html="element"`
+
+  > Include as `import 'sprae/directive/html'`.
+
+  Set html content of an element or instantiate a template.
+
+  ```html
+  Hello, <span :html="userElement">Guest</span>.
+
+  <!-- fragment -->
+  Hello, <template :html="user.name">Guest</template>.
+
+  <!-- instantiate template -->
+  <template :ref="tpl"><span :text="foo"></span></template>
+  <div :html="tpl" :scope="{foo:'bar'}">...inserted here...</div>
+  ```
+</details>
+
+
+<details>
+  <summary><strong>:data</strong> 🔌</summary>
+
+  #### `:data="values"`
+
+  > Include as `import 'sprae/directive/data'`.
+
+  Set `data-*` attributes. CamelCase is converted to dash-case.
+
+  ```html
+  <input :data="{foo: 1, barBaz: true}" />
+  <!-- <input data-foo="1" data-bar-baz /> -->
+  ```
+</details>
+
+
+<details>
+  <summary><strong>:aria</strong> 🔌</summary>
+
+  #### `:aria="values"`
+
+  > Include as `import 'sprae/directive/aria'`.
+
+  Set `aria-*` attributes. Boolean values are stringified.
+
+  ```html
+  <input role="combobox" :aria="{
+    controls: 'joketypes',
+    autocomplete: 'list',
+    expanded: false,
+    activeOption: 'item1',
+    activedescendant: ''
+  }" />
+  <!--
+  <input role="combobox" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant>
+  -->
+  ```
+</details>
+
+<!--
+#### `:onvisible..oninvisible="e => e => {}"`
+
+Trigger when element is in/out of the screen.
 
 ```html
-<!-- assign template element to foo variable -->
-<template :ref="foo"><span :text="foo"></span></template>
+<div :onvisible..oninvisible="e => (
+  e.target.classList.add('visible'),
+  e => e.target.classlist.remove('visible')
+)"/>
+```
 
-<!-- rended template as content -->
-<div :render="foo" :with="{foo:'bar'}">...inserted here...</div>
-<div :render="foo" :with="{foo:'baz'}">...inserted here...</div>
+#### `:onmount..onunmount="e => e => {}"`
+
+Trigger when element is connected / disconnected from DOM.
+
+```html
+<div :onmount..onunmount="e => (dispose = init(), e => dispose())"/>
 ```
+-->
 
 
-## Events
+## Expressions
 
-#### `@<event>="handle"`, `@<foo>@<bar>.<baz>="handle"`
+Expressions use [_justin_](https://github.com/dy/subscript?tab=readme-ov-file#justin), a minimal JS subset. It avoids "unsafe-eval" CSP and provides sandboxing. Also it's _fast_.
 
-Attach event(s) listener with possible modifiers. `event` variable holds current event. Allows async handlers.
+###### Operators:
 
-```html
-<!-- Single event -->
-<input type="checkbox" @change="isChecked = event.target.value">
+`++ -- ! - + ** * / %  && || ??`<br/>
+`= < <= > >= == != === !==`<br/>
+`<< >> & ^ | ~ ?: . ?. [] ()=>{} in`
 
-<!-- Multiple events -->
-<input :value="text" @input@change="text = event.target.value">
+###### Primitives:
 
-<!-- Event modifiers -->
-<button @click.throttle-500="handler(event)">Not too often</button>
+`[] {} "" ''`<br/>
+`1 2.34 -5e6 0x7a`<br/>
+`true false null undefined NaN`
+
+
+## Signals
+
+Sprae uses minimal signals based on [`ulive`](https://ghub.io/ulive). It can be switched to [`@preact/signals-core`](https://ghub.io/@preact/signals-core), [`@webreflection/signal`](https://ghib.io/@webreflection/signal), [`usignal`](https://ghib.io/usignal), which are better for complex states:
+
+```js
+import sprae, { signal, computed, effect, batch, untracked } from 'sprae';
+import * as signals from '@preact/signals-core';
+
+sprae.use(signals);
+
+sprae(el, { name: signal('Kitty') });
 ```
 
-##### Event modifiers
 
-* `.once`, `.passive`, `.capture` – listener [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options).
-* `.prevent`, `.stop` – prevent default or stop propagation.
-* `.window`, `.document`, `.outside`, `.self` – specify event target.
-* `.throttle-<ms>`, `.debounce-<ms>` – defer function call with one of the methods.
-* `.ctrl`, `.shift`, `.alt`, `.meta`, `.arrow`, `.enter`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete`, `.digit`, `.letter`, `.character` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
-* `.ctrl-<key>, .alt-<key>, .meta-<key>, .shift-<key>` – key combinations, eg. `.ctrl-alt-delete` or `.meta-x`.
-* `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).
+## Customization
 
+Sprae build can be tailored to project needs via `sprae/core` and `sprae/directive/*`:
 
-## Sandbox
+```js
+import sprae, { directive, compile } from 'sprae/core.js'
 
-Expressions are sandboxed, ie. don't access global/window scope by default (since sprae can be run in server environment).
+// include directives
+import 'sprae/directive/if.js';
+import 'sprae/directive/text.js';
 
-```html
-<div :x="scrollY"></div>
-<!-- scrollY is undefined -->
+// define custom directive
+directive.id = (el, expr, state) => {
+  const evaluate = compile(state, 'id') // expression string -> evaluator
+  return () => el.id = evaluate(state)  // return update function
+}
 ```
 
-Default sandbox provides most popular global objects: _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_,
-  _console_, _window_, _document_, _history_, _navigator_, _location_, _screen_, _localStorage_, _sessionStorage_,
-  _alert_, _prompt_, _confirm_, _fetch_, _performance_,
-  _setTimeout_, _setInterval_, _requestAnimationFrame_.
+<!--
+### DOM diffing
 
-Sandbox can be extended as `Object.assign(sprae.globals, { BigInt })`.
+DOM differ uses [swapdom](https://github.com/dy/swapdom), can be reconfigured to [list-difference](https://github.com/paldepind/list-difference/), [udomdiff](https://github.com/WebReflection/udomdiff), [domdiff](https://github.com/WebReflection/domdiff), [etc](https://github.com/luwes/js-diff-benchmark):
 
-## FOUC
+```js
+import sprae from 'sprae';
+import domdiff from 'list-difference';
 
-To avoid _flash of unstyled content_, you can hide sprae attribute or add a custom effect, eg. `:hidden` - that will be removed once sprae is initialized:
+// swap(parentNode, prevEls, newEls, endNode?)
+sprae.use({ swap: domdiff });
+```
+-->
 
-```html
-<div :hidden></div>
-<style>[:each],[:hidden] {visibility: hidden}</style>
+<!--
+### Custom Build
+
+`sprae/core` exports bare-bones engine without directives, which allows tailoring build to project needs:
+
+```js
+import sprae, { directive, effect } from 'sprae/core'
+
+// include required directives
+import 'sprae/directive/if'
+import 'sprae/directive/text'
 ```
+-->
 
-## Dispose
 
-To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
+<!-- ## Dispose
 
-## Benchmark
+To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`. -->
 
-See [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/current.html#eyJmcmFtZXdvcmtzIjpbIm5vbi1rZXllZC9wZXRpdGUtdnVlIiwibm9uLWtleWVkL3NwcmFlIl0sImJlbmNobWFya3MiOlsiMDFfcnVuMWsiLCIwMl9yZXBsYWNlMWsiLCIwM191cGRhdGUxMHRoMWtfeDE2IiwiMDRfc2VsZWN0MWsiLCIwNV9zd2FwMWsiLCIwNl9yZW1vdmUtb25lLTFrIiwiMDdfY3JlYXRlMTBrIiwiMDhfY3JlYXRlMWstYWZ0ZXIxa194MiIsIjA5X2NsZWFyMWtfeDgiLCIyMV9yZWFkeS1tZW1vcnkiLCIyMl9ydW4tbWVtb3J5IiwiMjNfdXBkYXRlNS1tZW1vcnkiLCIyNV9ydW4tY2xlYXItbWVtb3J5IiwiMjZfcnVuLTEway1tZW1vcnkiLCIzMV9zdGFydHVwLWNpIiwiMzRfc3RhcnR1cC10b3RhbGJ5dGVzIiwiNDFfc2l6ZS11bmNvbXByZXNzZWQiLCI0Ml9zaXplLWNvbXByZXNzZWQiXSwiZGlzcGxheU1vZGUiOjF9).
 
+## v9 changes
+
+* No autoinit → use manual init via `import sprae from 'sprae'; sprae(document.body, state)`.
+* No default globals (`console`, `setTimeout` etc) - pass to state if required.
+* ``:class="`abc ${def}`"`` → `:class="'abc $<def>'"` (_justin_)
+* `:with={x:'x'}` -> `:scope={x:'x'}`
+* No reactive store → use signals for reactive values.
+* `:render="tpl"` → `:html="tpl"`
+* `@click="event.target"` → `:onclick="event => event.target"`
+* Async props / events are not supported, pass async functions via state.
+* Directives order matters, eg. `<a :if :each :scope />` !== `<a :scope :each :if />`
+* Only one directive per `<template>`, eg. `<template :each />`, not `<template :if :each/>`
+
+
+## Justification
+
+[Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`) and tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) (no access to data, own reactivity, own expressions, own domdiffer).
+
+_Sprae_ holds to open & minimalistic philosophy, combining _`:`-directives_ with _signals_.
+
+<!--
+|                       | [AlpineJS](https://github.com/alpinejs/alpine)          | [Petite-Vue](https://github.com/vuejs/petite-vue)        | Sprae            |
+|-----------------------|-------------------|-------------------|------------------|
+| _Size_              | ~10KB             | ~6KB              | ~5KB             |
+| _Memory_            | 5.05             | 3.16              | 2.78             |
+| _Performance_       | 2.64             | 2.43              | 1.76             |
+| _CSP_               | Limited                | No                | Yes              |
+| _SSR_ | No | No | No |
+| _Evaluation_        | [`new AsyncFunction`](https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L81) | [`new Function`](https://github.com/vuejs/petite-vue/blob/main/src/eval.ts#L20) | [`new Function`]() / [justin](https://github.com/dy/subscript)           |
+| _Reactivity_        | `Alpine.store`    | _@vue/reactivity_   | _signals_ |
+| _Sandboxing_        | No                | No                | Yes              |
+| _Directives_ | `:`, `x-`, `{}` | `:`, `v-`, `@`, `{}` | `:` |
+| _Magic_               | `$data` | `$app`   | - |
+| _Fragments_ | Yes | No | Yes |
+| _Plugins_ | Yes | No | Yes |
+| _Modifiers_ | Yes | No | Yes |
+-->
+
+<!--
 <details>
-<summary>Results table</summary>
+<summary><strong>Benchmark</strong></summary>
+
+See [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/current.html#eyJmcmFtZXdvcmtzIjpbIm5vbi1rZXllZC9wZXRpdGUtdnVlIiwibm9uLWtleWVkL3NwcmFlIl0sImJlbmNobWFya3MiOlsiMDFfcnVuMWsiLCIwMl9yZXBsYWNlMWsiLCIwM191cGRhdGUxMHRoMWtfeDE2IiwiMDRfc2VsZWN0MWsiLCIwNV9zd2FwMWsiLCIwNl9yZW1vdmUtb25lLTFrIiwiMDdfY3JlYXRlMTBrIiwiMDhfY3JlYXRlMWstYWZ0ZXIxa194MiIsIjA5X2NsZWFyMWtfeDgiLCIyMV9yZWFkeS1tZW1vcnkiLCIyMl9ydW4tbWVtb3J5IiwiMjNfdXBkYXRlNS1tZW1vcnkiLCIyNV9ydW4tY2xlYXItbWVtb3J5IiwiMjZfcnVuLTEway1tZW1vcnkiLCIzMV9zdGFydHVwLWNpIiwiMzRfc3RhcnR1cC10b3RhbGJ5dGVzIiwiNDFfc2l6ZS11bmNvbXByZXNzZWQiLCI0Ml9zaXplLWNvbXByZXNzZWQiXSwiZGlzcGxheU1vZGUiOjF9).
 
 ![Benchmark](./bench.png)
 </details>
+-->
 
+<!--
 <details>
 <summary>How to run</summary>
 
@@ -320,37 +489,31 @@ cd webdriver-ts
 npm run results
 ```
 </details>
+-->
 
-## Examples
+<!-- ## See also -->
 
-* TODO MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.html)
-* JS Framework Benchmark: [demo](https://dy.github.io/sprae/examples/js-framework-benchmark), [code](https://github.com/dy/sprae/blob/main/examples/js-framework-benchmark.html)
-* Wavearea: [demo](https://dy.github.io/wavearea?src=//cdn.freesound.org/previews/586/586281_2332564-lq.mp3), [code](https://github.com/dy/wavearea)
-* Prostogreen [demo](http://web-being.org/prostogreen/), [code](https://github.com/web-being/prostogreen/)
+<!--
+## Alternatives
 
-## Justification
+* [Alpine](https://github.com/alpinejs/alpine)
+* ~~[Lucia](https://github.com/aidenybai/lucia)~~ deprecated
+* [Petite-vue](https://github.com/vuejs/petite-vue)
+* [nuejs](https://github.com/nuejs/nuejs)
+ -->
 
-* [Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). Also ergonomics of `attr="{{}}"` is inferior to `:attr=""` since it creates flash of uninitialized values. Also it's just nice to keep `{{}}` generic, regardless of markup, and attributes as part of markup.
-* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escape native HTML quirks, but the syntax space (`:attr`, `v-*`,`x-*`, `l-*` `@evt`, `{{}}`) is too broad, as well as functionality. Perfection is when there's nothing to take away, not add (c). Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) making interop hard, invent own tooling or complex reactivity.
-* React / [preact](https://ghub.io/preact) does the job wiring up JS to HTML, but with an extreme of migrating HTML to JSX and enforcing SPA, which is not organic for HTML. Also it doesn't support reactive fields (needs render call).
 
-_Sprae_ takes idea of _templize_ / _alpine_ / _vue_ attributes and builds simple reactive state based on [_@preact/signals_](https://ghub.io/@preact/signals).
+## Examples
 
-* It doesn't break or modify static html markup.
-* It falls back to element content if uninitialized.
-* It doesn't enforce SPA nor JSX.
-* It enables island hydration.
-* It reserves minimal syntax space as `:` convention (keeping tree neatly decorated, not scattered).
-* Expressions are naturally reactive and incur minimal updates.
-* Elements / data API is open and enable easy interop.
+* ToDo MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.html)
+* JS Framework Benchmark: [demo](https://dy.github.io/sprae/examples/js-framework-benchmark), [code](https://github.com/dy/sprae/blob/main/examples/js-framework-benchmark.html)
+* Wavearea: [demo](https://dy.github.io/wavearea?src=//cdn.freesound.org/previews/586/586281_2332564-lq.mp3), [code](https://github.com/dy/wavearea)
+* Prostogreen [demo](http://web-being.org/prostogreen/), [code](https://github.com/web-being/prostogreen/)
 
-It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), considered a [buried treasure](https://github.com/bahrus/be-restated) by web-connoisseurs.
+<!--
+## See Also
 
-## Alternatives
+* [nadi](https://github.com/dy/nadi) - 101 signals. -->
 
-* [Alpine](https://github.com/alpinejs/alpine)
-* ~~[Lucia](https://github.com/aidenybai/lucia)~~ deprecated
-* [Petite-vue](https://github.com/vuejs/petite-vue)
-* [nuejs](https://github.com/nuejs/nuejs)
 
 <p align="center"><a href="https://github.com/krsnzd/license/">🕉</a></p>