sprae 8.1.2 → 9.0.0

package/readme.md

@@ -1,287 +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[*](#justification--alternatives) 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 and performant 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/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/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
-const version = signal('alpha')
+<details>
+  <summary><strong>:if, :else</strong></summary>
 
-// Sprae container with initial state values
-const state = sprae(container, { foo: 'bar', version })
+  #### `:if="condition"`, `:else`
 
-// Modify state property 'foo', triggering a DOM update
-state.foo = 'baz'
+  Control flow of elements.
 
-// Update the version signal, which also triggers a DOM refresh
-version.value = 'beta'
+  ```html
+  <span :if="foo">foo</span>
+  <span :else :if="bar">bar</span>
+  <span :else>baz</span>
 
-// For batch update, re-sprae with new state values
-sprae(container, { foo: 'qux', version: 'gamma' })
-```
+  <!-- fragment -->
+  <template :if="foo">
+    foo <span>bar</span> baz
+  </template>
+  ```
+</details>
 
-## Attributes
+<details>
+  <summary><strong>:each</strong></summary>
 
-#### `:if="condition"`, `:else`
+  #### `:each="item, index in items"`
 
-Control flow of elements.
+  Multiply element. Item is identified either by `item.id` or `item.key`.
 
-```html
-<span :if="foo">foo</span>
-<span :else :if="bar">bar</span>
-<span :else>baz</span>
-```
+  ```html
+  <ul><li :each="item in items" :text="item"/></ul>
 
-#### `:each="item, index in items"`
+  <!-- cases -->
+  <li :each="item, idx in list" />
+  <li :each="val, key in obj" />
+  <li :each="idx in number" />
 
-Multiply element.
+  <!-- by condition -->
+  <li :if="items" :each="item in items" :text="item" />
+  <li :else>Empty list</li>
 
-```html
-<ul><li :each="item in items" :text="item"></ul>
+  <!-- fragment -->
+  <template :each="item in items">
+    <dt :text="item.term"/>
+    <dd :text="item.definition"/>
+  </template>
 
-<!-- Cases -->
-<li :each="item, idx in list" />
-<li :each="val, key in obj" />
-<li :each="idx in number" />
+  <!-- prevent FOUC -->
+  <style>[:each] {visibility: hidden}</style>
+  ```
+</details>
 
-<!-- Loop by condition -->
-<li :if="items" :each="item in items" :text="item" />
-<li :else>Empty list</li>
-```
+<details>
+  <summary><strong>:text</strong></summary>
 
-#### `:text="value"`
+  #### `:text="value"`
 
-Set text content of an element. Default text can be used as fallback:
+  Set text content of an element.
 
-```html
-Welcome, <span :text="user.name">Guest</span>.
-```
+  ```html
+  Welcome, <span :text="user.name">Guest</span>.
 
-#### `:class="value"`
+  <!-- fragment -->
+  Welcome, <template :text="user.name" />.
+  ```
+</details>
 
-Set class value from either a string, array or object.
+<details>
+  <summary><strong>:class</strong></summary>
 
-```html
-<!-- set from string -->
-<div :class="`foo ${bar}`"></div>
+  #### `:class="value"`
 
-<!-- extends existing class as "foo bar" -->
-<div class="foo" :class="`bar`"></div>
+  Set class value, extends existing `class`.
 
-<!-- clsx: object / list -->
-<div :class="[foo && 'foo', {bar: bar}]"></div>
-```
+  ```html
+  <!-- string with interpolation -->
+  <div :class="'foo $<bar>'"></div>
 
-#### `:style="value"`
+  <!-- array/object a-la clsx -->
+  <div :class="[foo && 'foo', {bar: bar}]"></div>
+  ```
+</details>
 
-Set style value from an object or a string. Extends existing `style` attribute, if any.
+<details>
+  <summary><strong>:style</strong></summary>
 
-```html
-<!-- from string -->
-<div :style="`foo: ${bar}`"></div>
+  #### `:style="value"`
 
-<!-- from object -->
-<div :style="{foo: 'bar'}"></div>
+  Set style value, extends existing `style`.
 
-<!-- set CSS variable -->
-<div :style="{'--baz': qux}"></div>
-```
+  ```html
+  <!-- string with interpolation -->
+  <div :style="'foo: $<bar>'"></div>
 
-#### `:value="value"`
+  <!-- object -->
+  <div :style="{foo: 'bar'}"></div>
 
-Set value of an input, textarea or select. Takes handle of `checked` and `selected` attributes.
+  <!-- CSS variable -->
+  <div :style="{'--baz': qux}"></div>
+  ```
+</details>
 
-```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>
-```
+<details>
+  <summary><strong>:value</strong></summary>
 
-#### `:with="data"`
+  #### `:value="value"`
 
-Define or extend data scope for a subtree.
+  Set value of an input, textarea or select. Takes handle of `checked` and `selected` attributes.
 
-```html
-<!-- Inline data -->
-<x :with="{ foo: 'bar' }" :text="foo"></x>
+  ```html
+  <input :value="value" />
+  <textarea :value="value" />
 
-<!-- External data -->
-<y :with="data"></y>
+  <!-- selects right option -->
+  <select :value="selected">
+    <option :each="i in 5" :value="i" :text="i"></option>
+  </select>
+  ```
+</details>
 
-<!-- Extend scope -->
-<x :with="{ foo: 'bar' }">
-  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
-</x>
-```
+<details>
+  <summary><strong>:*</strong></summary>
 
-#### `:<prop>="value?"`
+  #### `:*="value"`, `:="values"`
 
-Set any attribute value or run an effect.
+  Set any attribute(s).
 
-```html
-<!-- Single property -->
-<label :for="name" :text="name" />
+  ```html
+  <label :for="name" :text="name" />
 
-<!-- Multiple properties -->
-<input :id:name="name" />
+  <!-- multiple attributes -->
+  <input :id:name="name" />
 
-<!-- Effect - returns undefined, triggers any time bar changes -->
-<div :fx="void bar()" ></div>
+  <!-- spread attributes -->
+  <input :="{ id: name, name, type: 'text', value }" />
+  ```
+</details>
 
-<!-- Raw event listener (see events) -->
-<div :onclick="e=>e.preventDefault()"></div>
-```
+<details>
+  <summary><strong>:scope</strong></summary>
 
-#### `:="props?"`
+  #### `:scope="data"`
 
-Spread multiple attibures.
+  Define or extend data scope for a subtree.
 
-```html
-<input :="{ id: name, name, type:'text', value }" />
-```
+  ```html
+  <x :scope="{ foo: signal('bar') }">
+    <!-- extends parent scope -->
+    <y :scope="{ baz: 'qux' }" :text="foo + baz"></y>
+  </x>
+  ```
+</details>
 
-#### `:ref="id"`
+<details>
+  <summary><strong>:ref</strong></summary>
 
-Expose element to current data scope with the `id`:
+  #### `:ref="name"`
 
-```html
-<!-- single item -->
-<textarea :ref="text" placeholder="Enter text..."></textarea>
-<span :text="text.value"></span>
+  Expose element to current scope with `name`.
+
+  ```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>
 
-#### `:render="ref"`
+  #### `:fx="values"`
 
-Include template as element content.
+  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>
+
+
+<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')
+)"/>
+```
+
+#### `:onmount..onunmount="e => e => {}"`
 
-<!-- rended template as content -->
-<div :render="foo" :with="{foo:'bar'}">...inserted here...</div>
-<div :render="foo" :with="{foo:'baz'}">...inserted here...</div>
+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`
+
+###### Primitives:
 
-<!-- Multiple events -->
-<input :value="text" @input@change="text = event.target.value">
+`[] {} "" ''`<br/>
+`1 2.34 -5e6 0x7a`<br/>
+`true false null undefined NaN`
 
-<!-- Event modifiers -->
-<button @click.throttle-500="handler(event)">Not too often</button>
+
+## 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
 
-To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
+## v9 changes
 
-## Benchmark
+* 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><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>
 
@@ -292,7 +469,7 @@ npm run install-server
 npm start
 
 # build
-cd frameworks/keyed/sprae
+cd frameworks/non-keyed/sprae
 npm ci
 npm run build-prod
 
@@ -312,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>