sprae 11.0.0 → 11.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "11.0.0",
+  "version": "11.0.2",
   "main": "./sprae.js",
   "module": "./sprae.js",
   "unpkg": "dist/sprae.umd.min.js",

package/readme.md

@@ -171,13 +171,16 @@ Run effect, not changing any attribute.
 Get reference to element (instead of `this`).
 
 ```html
-<!-- initialize el (oninit) -->
-<textarea :ref="el => autoResize(el)" placeholder="Enter text..."></textarea>
+<!-- initialize element -->
+<textarea :ref="el => (/* onmount */, () => (/* onunmount */))" placeholder="Enter text..."></textarea>
 
 <!-- expose element in (sub)state -->
 <li :each="item in items" :with="{li:null}" :ref="el => li = el">
   <input :onfocus..onblur="e => (li.classList.add('editing'), e => li.classList.remove('editing'))"/>
 </li>
+
+<!-- set innerHTML -->
+<div :ref="el => el.innerHTML = '...'"></div>
 ```
 
 #### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
@@ -263,7 +266,7 @@ Trigger when element is connected / disconnected from DOM.
 ## Signals
 
 Sprae uses _preact-flavored signals_ for reactivity and can take _signal_ values as inputs.<br/>
-Signals can be switched to any preact/compatible implementation:
+Signals can be switched to an alternative preact/compatible implementation:
 
 ```js
 import sprae from 'sprae';
@@ -348,13 +351,13 @@ sprae.use({ compile })
 
 * To prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) add `<style>[:each],[:if],[:else] {visibility: hidden}</style>`.
 * Attributes order matters, eg. `<li :each="el in els" :text="el.name"></li>` is not the same as `<li :text="el.name" :each="el in els"></li>`.
-* Mind invalid self-closing tags, eg. `<a :text="item" />` will cause an error. Main valid self-closing tags are `li`, `p`, `dt`, `dd`, `option`, `tr`, `td`, `th`.
+* Invalid self-closing tags like `<a :text="item" />` will cause error. Valid self-closing tags are: `li`, `p`, `dt`, `dd`, `option`, `tr`, `td`, `th`.
 * Properties prefixed with `_` are untracked: `let state = sprae(el, {_x:2}); state._x++; // no effect`.
 * To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
 * State getters/setters work as computed effects, eg. `sprae(el, { x:1, get x2(){ return this.x * 2} })`.
-* `this` is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`.
-* `event` is not used, `:on*` attributes expect a function with event object as first argument `:onevt="event => handle()"`, see [#46](https://github.com/dy/sprae/issues/46).
-* `key` is not used, `:each` uses direct list mapping instead of dom diffing.
+* `this` is not used, to get access to current element use `<input :ref="el => (...)" />`.
+* `event` is not used, `:on*` attributes expect a function with event argument `:onevt="event => handle()"`, see [#46](https://github.com/dy/sprae/issues/46).
+* `key` is not used, `:each` uses direct list mapping instead of DOM diffing.
 * `await` is not supported in attributes, it’s a strong indicator you need to put these methods into state.
 
 ## Justification

package/store.js

@@ -21,7 +21,7 @@ export default function store(values, parent) {
 
   // proxy conducts prop access to signals
   const state = new Proxy(signals, {
-    get: (_, key) => key === _change ? _len : key === _signals ? signals : (signals[key]?.valueOf()),
+    get: (_, key) => key === _change ? _len : key === _signals ? signals : signals[key]?.valueOf(),
     set: (_, key, v, s) => (s = signals[key], set(signals, key, v), s ?? (++_len.value), 1), // bump length for new signal
     deleteProperty: (_, key) => (signals[key] && (del(signals, key), _len.value--), 1),
     ownKeys() {
@@ -72,7 +72,6 @@ export function list(values) {
       // covers Symbol.isConcatSpreadable etc.
       if (typeof key === 'symbol') return key === _change ? _len : key === _signals ? signals : signals[key]
 
-      // console.log('get', key)
       // if .length is read within .push/etc - peek signal to avoid recursive subscription
       if (key === 'length') return mut[lastProp] ? _len.peek() : _len.value;
 
@@ -85,7 +84,6 @@ export function list(values) {
     },
 
     set(_, key, v) {
-      // console.log('set', key, v)
       // .length
       if (key === 'length') {
         // force cleaning up tail