Merge branch 'main' of https://github.com/dy/sprae

readme.md

@@ -105,13 +105,13 @@ Set style value.
 
 ```html
 <!-- extends style -->
-<div style="foo: bar" :style="'baz-baz: qux'">
+<div style="foo: bar" :style="'bar-baz: qux'">
 
 <!-- object -->
-<div :style="{bazBaz: 'qux'}"></div>
+<div :style="{barBaz: 'qux'}"></div>
 
 <!-- CSS variable -->
-<div :style="{'--baz-baz': qux}"></div>
+<div :style="{'--bar-baz': qux}"></div>
 ```
 
 #### `:value="value"`
@@ -163,8 +163,8 @@ Expose element with `name`.
 <textarea :ref="text" placeholder="Enter text..."></textarea>
 
 <!-- iterable items -->
-<li :each="item in items" :ref="item">
-  <input :onfocus..onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
+<li :each="item in items" :ref="li">
+  <input :onfocus..onblur="e => (li.classList.add('editing'), e => li.classList.remove('editing'))"/>
 </li>
 ```
 
@@ -176,7 +176,7 @@ Run effect, not changing any attribute.
 <div :fx="a.value ? foo() : bar()" />
 
 <!-- cleanup function -->
-<div :fx="id = setInterval(tick, interval), () => clearInterval(tick)" />
+<div :fx="id = setInterval(tick, 1000), () => clearInterval(id)" />
 ```
 
 #### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
@@ -375,6 +375,8 @@ sprae.use({ compile })
 * State getters/setters work as computed effects, eg. `sprae(el, { x:1, get x2(){ return this.x * 2} })`.
 * `this` keyword is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`.
 * Async/await is not supported in attributes, it's a strong indicator you need to put these methods into state.
+* `:each` doesn't need `key` since it uses direct mapping, see [#44](https://github.com/dy/sprae/issues/44).
+* Event attributes always expect a function value `:onevt="event => handle()"`, see [#46](https://github.com/dy/sprae/issues/46).
 
 ## Justification