sprae 6.1.2 → 7.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
@@ -13,6 +13,7 @@
     "src"
   ],
   "dependencies": {
+    "@preact/signals-core": "^1.5.0",
     "swapdom": "^1.1.1"
   },
   "devDependencies": {

package/readme.md

@@ -2,7 +2,7 @@
 
 > DOM tree hydration with reactivity.
 
-_Sprae_ is progressive enhancement framework, a tiny essential 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) with improved ergonomics[*](#justification--alternatives). It enables simple markup logic without external scripts. Perfect for small websites, prototypes or UI logic.
+_Sprae_ is progressive enhancement framework, a tiny essential 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) with enhanced ergonomics[*](#justification--alternatives). It enables simple markup logic without external scripts. Perfect for small websites, prototypes or UI logic.
 
 ## Use
 
@@ -12,7 +12,7 @@ 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 src="./path/to/sprae.auto.js" defer></script>
+<script defer src="./path/to/sprae.auto.js"></script>
 
 <ul>
   <li :each="item in ['apple', 'bananas', 'citrus']"">
@@ -40,8 +40,8 @@ To init manually as module, import [`sprae.js`](./sprae.js):
 ```
 
 Sprae evaluates `:`-attributes and evaporates them.<br/>
-Reactive `state` reflects current values, can be updated directly.<br/>
-It batches multiple updates internally for efficiency.
+Sprae creates reactive state representing current values in rendered DOM.<br/>
+It is based on [preact signals](https://github.com/preactjs/signals) and can take them as inputs.
 
 ## Attributes
 
@@ -252,13 +252,45 @@ To avoid _flash of unstyled content_, you can hide sprae attribute or add a cust
 <style>[:each],[:hidden] {visibility: hidden}</style>
 ```
 
+## Benchmark
+
+Done via [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark).
+
+```sh
+# prerequisite
+npm ci
+npm run install-server
+npm start
+
+# build
+cd frameworks/keyed/sprae
+npm ci
+npm run build-prod
+
+# bench
+cd ../../..
+cd webdriver-ts
+npm ci
+npm run compile
+npm run bench keyed/sprae
+
+# show results
+cd ..
+cd webdriver-ts-results
+npm ci
+cd ..
+cd webdriver-ts
+npm run results
+```
+
 ## Examples
 
 * TODO MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.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/)
 
-## Justification & alternatives
+
+## 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). 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.
@@ -281,5 +313,6 @@ It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), consid
 * [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>