sprae 2.8.1 → 2.8.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",

package/r&d.md

@@ -343,10 +343,13 @@
     + can let means to enhance subscript's logs
   + that "unlimits" returned struct, so that any property can be added/deleted.
   - doesn't really save from `new (()=>{}).constructor` hack: we gotta substitute objects too.
+    ~ Proxy doesn't save from that either
   + allows easier handle of `:with="a=1,b=2,c=3"` - we just naturally get local variables without messup with global
     + we can even define locals without `let`...
   - not having "comfy" compatible JS at hand: cognitive load of whole language "layer" in-between
   + allows `let a = 1; a;` case instead of `let a = 1; return a;`
+  - we can't identify dynamic parts like `x[y]`, whereas signals subscribe dynamically
+    ~ we can detect dynamic parts and handle them on proxy
 
 -> We can benchmark if updating set of known dependencies is faster than using preact subscriptions.
   + it seems more logical min-ground to know in advance what we depend on, rather than detect by-call as signals do.

package/readme.md

@@ -56,7 +56,7 @@ Control flow of elements.
 
 #### `:each="item, index in items"`
 
-Multiply element. `index` value starts from 1. Use `:key` as caching key to avoid rerendering.
+Multiply element. `index` value starts from 1.
 
 ```html
 <ul>
@@ -72,6 +72,9 @@ Multiply element. `index` value starts from 1. Use `:key` as caching key to avoi
 <li :if="items" :each="item in items" :text="item" />
 <li :else>Empty list</li>
 
+<!-- Key items to reuse elements -->
+<li :each="item in items" :key="item.id" :text="item.value" />
+
 <!-- To avoid FOUC -->
 <style>[:each]{visibility: hidden}</style>
 ```
@@ -86,7 +89,7 @@ Welcome, <span :text="user.name">Guest</span>.
 
 #### `:class="value"`
 
-Set class value from either string, array or object. Extends direct class, rather than replaces.
+Set class value from either string, array or object. Appends existing `class` attribute, if any.
 
 ```html
 <div :class="`foo ${bar}`"></div>
@@ -101,7 +104,7 @@ Set class value from either string, array or object. Extends direct class, rathe
 
 #### `:style="value"`
 
-Set style value from object or a string. Extends style.
+Set style value from object or a string. Extends existing `style` attribute, if any.
 
 ```html
 <div :style="foo: bar"></div>
@@ -291,7 +294,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 
 <script type="module">
   import sprae from 'sprae';
-  import { signals } from '@preact/signals';
+  import { signal } from '@preact/signals';
 
   // <div id="done">...</div>
 
@@ -343,7 +346,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 
 ## Justification
 
-_Sprae_ is lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [templize](https://github.com/dy/templize) or JSX with better ergonomics[*](#justification).
+_Sprae_ is lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [templize](https://github.com/dy/templize) or JSX with better ergonomics.
 
 * [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.
 * [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence: perfection is when there's nothing to take away, not add. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.

package/src/core.js

@@ -24,7 +24,7 @@ export default function sprae(container, values) {
       if (el.hasAttribute?.(attrName)) {
         let expr = el.getAttribute(attrName)
         el.removeAttribute(attrName)
-        if (!expr) continue
+
         updates.push(primary[name](el, expr, state, name))
 
         // stop if element was spraed by directive or skipped (detached)
@@ -39,7 +39,7 @@ export default function sprae(container, values) {
         if (attr.name[0] !== ':') {i++; continue}
         el.removeAttribute(attr.name)
         let expr = attr.value
-        if (!expr) continue
+
         // multiple attributes like :id:for=""
         let attrNames = attr.name.slice(1).split(':')
         for (let attrName of attrNames) {

package/src/directives.js

@@ -252,13 +252,12 @@ export default (el, expr, state, name) => {
 
   if (!evaluate) return
 
-  if (evt) return state => {
-    let value = evaluate(state)
-    if (value) {
-      addListener(el, evt, value)
-      return () => removeListener(el, evt, value)
-    }
-  }
+  if (evt) return (state => {
+    // we need anonymous callback to enable modifiers like prevent
+    let value = evaluate(state) || (()=>{})
+    addListener(el, evt, value)
+    return () => removeListener(el, evt, value)
+  })
 
   return state => attr(el, name, evaluate(state))
 }

package/test/test.js

@@ -625,7 +625,7 @@ test('on: keys', e => {
 })
 
 test('on: keys with prevent', e => {
-  let el = h`<y :onkeydown="e=>log.push(e.key)"><x :ref="x" :onkeydown.enter.stop="e=>1"></x></y>`
+  let el = h`<y :onkeydown="e=>log.push(e.key)"><x :ref="x" :onkeydown.enter.stop></x></y>`
   let state = sprae(el, {log:[]})
   state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
   state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));