sprae 2.3.2 → 2.4.0

package/package.json

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

package/plan.md

@@ -29,8 +29,11 @@
   * [x] Make sure `false` gets serialized, not removes attr
 * [ ] Sandbox expressions: no global, no "scope" object name, no "arguments"
 * ~~[x] report usignal problem~~ author is not really interested
-* [ ] :oninit
+* [x] `this` doesn't refer to element/scope in event handlers
+* [x] :text="" empty values shouldn't throw
+* [ ] implement :with
 * [ ] frameworks benchmark
 * [ ] examples
   * [x] todomvc
-  * [ ] wave-edit
+  * [ ] wave-edit
+* [ ] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives

package/r&d.md

@@ -97,17 +97,40 @@
 
 -> possibly we have to just subscribe via mechanism of signals-like deps, and :with just initializes subtree with extended object
 
-## [x] Get rid of :with? -> let's get rid of until really necessary
-
-+ with is bad JS practice/association
-+? is there a bona-fide use case?
-+ the implementation is heavy/unoptimal: two assign-updates happen: for root, for children
-+ it is exception blocking streamline implementation of refs
-+ it shadows data which creates all sorts of nasty debugging effects / states. Isn't it better to keep data/state transparent?
-  + it even enables transparency of :each scopes, since they inherit root scope
-+ it's easier to look out for data in one single place (state init), rather than in a bunch of markup locations
-+?! can be replaced with sort of `<x :xyz="xyz=...calc"></x>`, no?
-  -> would need wrapping noname scope access
+## [ ] :with? ->
+
+  1. Get rid of :with
+    + with is bad JS practice/association
+    +? is there a bona-fide use case?
+    + the implementation is heavy/unoptimal: two assign-updates happen: for root, for children
+    + it is exception blocking streamline implementation of refs
+    + it shadows data which creates all sorts of nasty debugging effects / states. Isn't it better to keep data/state transparent?
+      + it even enables transparency of :each scopes, since they inherit root scope
+    + it's easier to look out for data in one single place (state init), rather than in a bunch of markup locations
+    +?! can be replaced with sort of `<x :xyz="xyz=...calc"></x>`, no?
+      -> would need wrapping noname scope access
+    + `:with` defines too many concerns:
+      * binds root updates -> child updates;
+      * binds child updates to root updates (writes);
+      * defines local variables
+      * aliases root variables
+      ? is there value in all of these concerns? It seems we need only local variables, isn't it? Is there a chance partial extension can be required?
+    - `:with` can provide situational variables that are useful for props precalculation (since these variables can be reactive.)
+      * eg. `<span class="preloader" :with="{str: ''}" :init="setTimeout(() => str+='.', 500)" :text="str" />`
+      * that plays role of watch that doesn't require to be outside of local component state.
+    - `:with` allows local component state not cluttering global state. There's really no way to define local state that doesn't affect global state.
+  1.1 Slim `:with="{a,b,c}"` - just initializes vars
+    - Doesn't enable easy init syntax
+  2. Use `:let="x, y=2"`?
+    + Doesn't pollute scope but instead cleanly declares local variables
+    + Indicates only local initializer, not subscription
+    + Liquid has `assign` tag `{% assign myVar = false %}` - it only initializes variable
+    + Django `with` performs only alias / complex calc access https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#with - it doesn't sync up global state.
+    ? call it `:define="x, y, z"`?
+      -> it seems `:with="x=1, y=2"` works well. `:let` has dissonance with js'y let.
+    ? how to extend state
+  3. `:with.x="1", :with.y="2"`
+    + easier to parse, since init code can be _messy_
 
 ## [x] Should we inherit values from `init` in `sprae(el, init)`, instead of creating a snapshot of reactive values in `init`? -> nah, nice idea but too little use. Better create signals struct.
 
@@ -191,11 +214,24 @@
     + methods provided in `init` may not have access to scope _yet_.
       ~- not reliable way to obtain scope via `this.x` - better be explicit as `state.x`
 
-## [x] :onconnected/:ondisconnected? -> let's move to plugins for now
+## [x] :onconnected/:ondisconnected? -> nah, just use noname effect or external functionality eg fast-on-load
 
-  -> waiting for use-case
+  + can be useful for :if, :each handlers, eg to start animation when element appears in DOM.
+  - it is not connected-disconnected: it has nothing to do with document: it attaches/detaches from parent.
+  - connected-disconnected is too long name
+  ? attach-detach?
+  ? onmount-onunmount?
+    - slows down domdiff
+    - can be solved as `<x :if="xxx" :="xxx ? (...) : '">` automatically
+
+## [x] :focus="direct code", :evt="direct code" -> nah, too messy.
+
+  + makes proper use-case for direct code events
+  - doesn't make sense for rective properties inside
+  + better fit for special props like `:mount`
+  - tons of new special-meaning namespace props
 
-## [x] Chain of events: often useful to have shared context. -> Try `:onevent-onanotherevent`
+## [x] Chain of events: often useful to have shared context. -> Try `:onstart..onend`
 
   * focus/blur, connected/disconnected, mousedown/mouseup, keydown/keyup, touchstart/touchmove/touchend, dragstart/dragover/dragend, animationstart/animationover/animationend, transitionstart/transitionend
   ? is there a way to organize handlers for chains of events?
@@ -208,14 +244,35 @@
       - ? why not :on-focus-blur
       - ? why not :onfocus-onblur
       + can be converted from on="{ focusBlur: event }" via dash notation
+        - messy error messages
       + less :on prefixes
       + has better "flowy" meaning
     * 2.1 :onfocus-onblur="e => e => {}"
       + distinctive visually as 1
       + flowy nature of 2
+      - blocks `:onfile-attached` and other dashed events
+        - `ona-onb` vs `ona-b-onc` is hard to parse mentally
     3. :onfocus.onblur="e => e => {}"
       - looks like a modifier
       - . can be used as event class onclick.x
+    4. `:onfocus--blur="e => e => {}"`
+      + reminds BEM
+      - reminds BEM
+    5. `:onfocus..blur="e => e => {}"`
+      + reminds range
+      + literally means start..end
+      + all pros of 2.
+      + reminds spray via dots
+      - can be confusing if `blur` is event or just property (can that be a property?)
+    6. `:onfocus..onblur="e => e => {}"`
+      + all props of 5.
+      + more obvious that blur is event.
+
+    4. `:onfocus="e => e => {}"` Keep registered pairs of events: just expect focus return blur, etc.
+      + Shorter syntax
+      + Avoids :onfile-attachment-accepted problem
+      - Less verbose and explicit
+      - No way to customize sequences, eg.  custom events
 
 ## [ ] Plugins
 
@@ -224,9 +281,10 @@
   - can be solved naturally, unless there's special meaning
 * @sprae/hcodes: `<x :hcode=""` – provide microformats
 * @sprae/with
-* @sprae/connected
+* @sprae/onconnected
+* @sprae/onvisible?
 
-## [x] Write any-attributes via :<prop>? -> yep
+## [x] Write any-attributes via `:<prop>? -> yep`
 
 + Since we support attr walking, maybe instead of :on and :prop just allow any attributes?
   + that would allow event and attr modifiers...
@@ -263,8 +321,10 @@
   + Provides precisely controlled sandbox
   - Some limited lang opportunities
     - need to match many syntax quirks, can be tedious
+      ~ can be fine to limit expressions to meaningful default: why Proxy, generators, awaits, global access etc.
   - Somewhat heavy to bundle
-  + Scope is easier to provide: no need for signal proxy essentially
+    ~ 1-2kb is not super-heavy, besides signal-struct kicks out
+  + Scope is easier to provide: no need for signal proxy
   + Can detect access errors in advance
   + Syntax-level access to signals can be inavoidable: external signals still "leak in" (via arrays or etc.).
   + Updating simple objects should also rerender the template parts, not just signals.
@@ -272,6 +332,9 @@
   - Screwed up debugging / stacktrace (unless errored)
   + 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.
+  + 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
 
 2. Use sandboxed proxy
   - tough evaluation
@@ -297,4 +360,33 @@
 ## [ ] Better :ref
   + :ref="`a-${1}`"
   + :id:ref="xyz"
-  ? maybe id should have same signature
+  ? maybe id should have same signature
+  ? should it be very similar mechanism to `:with="a=1,b=2"`
+
+## [ ] Event modifiers :ona.once, `:ona`
+
+  - .prevent,.stop - not needed since expects a function
+    ? or should we just trigger it for user?
+  ? :onclick.outside
+  ? :onclick.window, :onclick.document
+  ? :onclick.once
+  ? :onclick.debounce
+  ? :onclick.throttle.750ms
+  ? :onclick.self
+  ? :onspecial-event.camel, :onx-y.dot
+  ? :onclick.passive
+  ? :onkeypress.shift.enter
+    .shift	Shift
+    .enter	Enter
+    .space	Space
+    .ctrl	Ctrl
+    .cmd	Cmd
+    .meta	Cmd on Mac, Windows key on Windows
+    .alt	Alt
+    .up .down .left .right	Up/Down/Left/Right arrows
+    .escape	Escape
+    .tab	Tab
+    .caps-lock	Caps Lock
+    .equal	Equal, =
+    .period	Period, .
+    .slash	Foward Slash, /

package/readme.md

@@ -124,9 +124,9 @@ Set value of an input, textarea or select. Takes handle of `checked` and `select
 </select>
 ```
 
-#### `:<prop>="value"`, `:="props"`
+#### `:<prop>="value?"`, `:="props?"`
 
-Set any prop value.
+Set any prop value or run effect.
 
 ```html
 <!-- Single property -->
@@ -137,9 +137,12 @@ Set any prop value.
 
 <!-- Bulk properties -->
 <input :="{ id: name, name, type:'text', value }" />
+
+<!-- Effect (triggers any time foo or bar changes) -->
+<div :="if (foo) bar()" :fx="void bar()" ></div>
 ```
 
-#### `:on<event>="handler"`, `:on="events"`
+#### `:on<event>="handler"`, `:on="events"`, `:<in>..<out>="handler"`
 
 Add event listeners.
 
@@ -151,7 +154,7 @@ Add event listeners.
 <input :value="text" :oninput:onchange="e => text=e.target.value">
 
 <!-- Sequence of events -->
-<button :onfocus-onblur="e => {
+<button :onfocus..onblur="e => {
   // onfocus
   let id = setInterval(track,200)
   return e => {
@@ -164,23 +167,6 @@ Add event listeners.
 <button :on="{ click: handler, touch: handler, special: handler }">Submit</button>
 ```
 
-<!--
-#### `:oninit="fn"`
-
-Create initializer handler - called whenever element is initialized by sprae.
-
-```html
-<div id="foo" :oninit="function(){ this === foo }"></div>
-```
-
-#### `:onconnect="fn"`, `:ondisconnect="fn"`
-
-Invoked when element is connected or disconnected from DOM.
-
-```html
-```
--->
-
 #### `:data="values"`
 
 Set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes. CamelCase is converted to dash-case.
@@ -220,9 +206,7 @@ Expose element to data scope with the `id`:
 <!-- iterable items -->
 <ul>
   <li :each="item in items" :ref="item">
-    <input
-      :onfocus-onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"
-    />
+    <input :onfocus..onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
   </li>
 </ul>
 

package/sprae.js

@@ -452,11 +452,14 @@ var primitive_pool_default = (key) => {
 // src/directives.js
 var directives = {};
 var directives_default = (el, expr, values, name) => {
-  if (name.startsWith("on")) {
-    return directives.on(el, `{"${name.split("-").map((n2) => n2.startsWith("on") ? n2.slice(2) : n2).join("-")}": ${expr}}`, values);
-  }
+  let evt = name.startsWith("on") && name.slice(2);
   let evaluate = parseExpr(el, expr, ":" + name);
-  return (state) => attr(el, name, evaluate(state));
+  let value;
+  return evt ? (state) => {
+    value && removeListener(el, evt, value);
+    value = evaluate(state);
+    value && addListener(el, evt, value);
+  } : (state) => attr(el, name, evaluate(state));
 };
 var attr = (el, name, v2) => {
   if (v2 == null || v2 === false)
@@ -482,6 +485,13 @@ directives["ref"] = (el, expr, values) => {
   ;
   values[expr] = el;
 };
+directives["with"] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, "with");
+  throw "Unimplemented";
+  let withValues = evaluate(rootState);
+  let newState = Object.assign(Object.create(rootState), withValues);
+  sprae(el, newState);
+};
 directives["if"] = (el, expr, values) => {
   let holder = document.createTextNode(""), clauses = [parseExpr(el, expr, ":if")], els = [el], cur = el;
   while (cur = el.nextElementSibling) {
@@ -620,35 +630,44 @@ directives["value"] = (el, expr, values) => {
   } : (value) => el.value = value;
   return (state) => update(evaluate(state));
 };
+var _stop = Symbol("stop");
 directives["on"] = (el, expr, values) => {
   let evaluate = parseExpr(el, expr, ":on");
   let listeners = {};
   return (state) => {
     for (let evt in listeners)
-      el.removeEventListener(evt, listeners[evt]);
+      removeListener(el, evt, listeners[evt]);
     listeners = evaluate(state);
-    for (let evt in listeners) {
-      const evts = evt.split("-");
-      if (evts.length === 1)
-        el.addEventListener(evt, listeners[evt]);
-      else {
-        const startFn = listeners[evt];
-        const nextEvt = (fn, cur = 0) => {
-          el.addEventListener(evts[cur], listeners[evt] = (e2) => {
-            fn = fn(e2);
-            el.removeEventListener(evts[cur], listeners[evt]);
-            if (++cur < evts.length && typeof fn === "function")
-              nextEvt(fn, cur);
-            else
-              nextEvt(startFn);
-          });
-        };
-        nextEvt(startFn);
-      }
-    }
-    ;
+    for (let evt in listeners)
+      addListener(el, evt, listeners[evt]);
   };
 };
+var addListener = (el, evt, startFn) => {
+  if (evt.indexOf("..") < 0)
+    el.addEventListener(evt, startFn);
+  else {
+    const evts = evt.split("..").map((e2) => e2.startsWith("on") ? e2.slice(2) : e2);
+    const nextEvt = (fn, cur = 0) => {
+      let curListener = (e2) => {
+        el.removeEventListener(evts[cur], curListener);
+        if (typeof (fn = fn.call(el, e2)) !== "function")
+          fn = () => {
+          };
+        if (++cur < evts.length)
+          nextEvt(fn, cur);
+        else if (!startFn[_stop])
+          console.log("reset"), nextEvt(startFn);
+      };
+      el.addEventListener(evts[cur], curListener);
+    };
+    nextEvt(startFn);
+  }
+};
+var removeListener = (el, evt, fn) => {
+  if (evt.indexOf("..") >= 0)
+    console.log("rewire"), fn[_stop] = true;
+  el.removeEventListener(evt, fn);
+};
 directives["data"] = (el, expr, values) => {
   let evaluate = parseExpr(el, expr, ":data");
   return (state) => {
@@ -720,6 +739,8 @@ function sprae(container, values) {
         }
         el.removeAttribute(attr2.name);
         let expr = attr2.value;
+        if (!expr)
+          continue;
         let attrNames = attr2.name.slice(1).split(":");
         for (let attrName of attrNames) {
           let dir = directives[attrName] || directives_default;

package/sprae.min.js

@@ -1 +1 @@
-function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==r;){var i=r;for(r=void 0,o++;void 0!==i;){var s=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&l(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function f(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function a(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function u(t){return new a(t)}function l(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function h(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function c(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function v(t){a.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function p(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,d(t),e}finally{i=o,e()}}}function d(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,p(t)}function y(t){if(i!==this)throw new Error("Out-of-order effect");c(this),i=t,this.f&=-2,8&this.f&&d(this),e()}function b(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function m(t){var e=new b(t);return e.c(),e.d.bind(e)}a.prototype.h=function(){return!0},a.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},a.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},a.prototype.subscribe=function(t){var e=this;return m((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},a.prototype.valueOf=function(){return this.value},a.prototype.toString=function(){return this.value+""},a.prototype.peek=function(){return this.v},Object.defineProperty(a.prototype,"value",{get:function(){var t=f(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(v.prototype=new a).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!l(this))return this.f&=-2,!0;var t=i;try{h(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,c(this),this.f&=-2,!0},v.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}a.prototype.S.call(this,t)},v.prototype.U=function(t){if(a.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},v.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},v.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(v.prototype,"value",{get:function(){1&this.f&&t();var e=f(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),b.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},b.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,p(this),h(this),n++;var e=i;return i=this,y.bind(this,e)},b.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},b.prototype.d=function(){this.f|=8,1&this.f||d(this)},Symbol.observable||=Symbol("observable");var g=new FinalizationRegistry((t=>t.call?.())),S=t=>t&&t.peek,x=Symbol("signal-struct");function w(t){if((e=t)&&e[x])return t;var e;let i,r;if(O(t)){i={},r={};let e=Object.getOwnPropertyDescriptors(t);for(let t in e)r[t]=A(i,t,e[t].get?new v(e[t].get.bind(i)):e[t].value);return Object.defineProperty(i,x,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>w(t))):t}function A(t,e,i){let r,n=S(i)?i:O(i)||Array.isArray(i)?u(w(i)):u((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,f,a,l,h,c;return r&&(f=t=>n.value=t,(s=i)&&(c=(s[Symbol.observable]?.()||s).subscribe?.(f,a,undefined),h=c&&(()=>c.unsubscribe?.())||s.set&&s.call?.(l,f)||(s.then?.((t=>{!l&&f(t)}),a)||(async t=>{try{for await(t of s){if(l)return;f(t)}}catch(t){}})())&&(t=>l=1),g.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:!S(i)&&O(i)?t=>t?Object.assign(n.value,t):n.value=w(t):t=>n.value=w(t),enumerable:!0,configurable:!1}),n}function O(t){return t&&t.constructor===Object}var j=(t,e,i,r=null)=>{let n,o,s,f=0,a=i.length,u=e.length,{remove:l,same:h,insert:c,replace:v}=j;for(;f<a&&f<u&&h(e[f],i[f]);)f++;for(;f<a&&f<u&&h(i[a-1],e[u-1]);)r=i[(--u,--a)];if(f==u)for(;f<a;)c(r,i[f++],t);else{for(n=e[f];f<a;)s=i[f++],o=n?n.nextSibling:r,h(n,s)?n=o:f<a&&h(i[f],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,l(n,t),n=o}return i};j.same=(t,e)=>t==e,j.replace=(t,e,i)=>i.replaceChild(e,t),j.insert=(t,e,i)=>i.insertBefore(e,t),j.remove=(t,e)=>e.removeChild(t);var N=j,E={},$={},W={},k={},C=(t,e,i,r)=>{if(r.startsWith("on"))return k.on(t,`{"${r.split("-").map((t=>t.startsWith("on")?t.slice(2):t)).join("-")}": ${e}}`,i);let n=D(t,e,":"+r);return e=>U(t,r,n(e))},U=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")};k[""]=(t,e,i)=>{let r=D(t,e,":");return e=>{let i=r(e);for(let e in i)U(t,M(e),i[e])}};var B=Symbol(":each"),L=Symbol(":ref");k.ref=(t,e,i)=>{t.hasAttribute(":each")?t[L]=e:i[e]=t},k.if=(t,e,i)=>{let r=document.createTextNode(""),n=[D(t,e,":if")],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(D(t,e,":else :if"))):(s.remove(),o.push(s),n.push((()=>1)));return t.replaceWith(s=r),t=>{let e=n.findIndex((e=>e(t)));o[e]!=s&&((s[B]||s).replaceWith(s=o[e]||r),F(s,t))}},k.each=(t,e,i)=>{let r=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r={};r.items=i[2].trim();let n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?(r.item=n.replace(e,"").trim(),r.index=o[1].trim()):r.item=n,r}(e);if(!r)return _(new Error,t,e);const n=t[B]=document.createTextNode("");t.replaceWith(n);const o=D(t,r.items,":each"),s=new WeakMap,f=new WeakMap;let a=[];return e=>{let i=o(e);i?"number"==typeof i?i=Array.from({length:i},((t,e)=>[e,e+1])):i.constructor===Object?i=Object.entries(i):Array.isArray(i)?i=i.map(((t,e)=>[e+1,t])):_(Error("Bad list value"),t,r.items,":each"):i=[];let u=[],l=[];for(let[n,o]of i){let i=null===(h=o)?$:void 0===h?W:"number"==typeof h||h instanceof Number?E[h]||(E[h]=new Number(h)):"string"==typeof h||h instanceof String?E[h]||(E[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?E[h]||(E[h]=new Boolean(h)):h,a=f.get(i);if(a||(a=t.cloneNode(!0),f.set(i,a)),u.push(a),!s.has(i)){let f=Object.create(e);f[r.item]=o,r.index&&(f[r.index]=n),t[L]&&(f[t[L]]=a),s.set(i,f)}l.push(s.get(i))}var h;N(n.parentNode,a,u,n),a=u;for(let t=0;t<u.length;t++)F(u[t],l[t])}},k.id=(t,e,i)=>{let r=D(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},k.class=(t,e,i)=>{let r=D(t,e,":class"),n=t.className;return e=>{let i=r(e);t.className=n+typeof i=="string"?i:(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},k.style=(t,e,i)=>{let r=D(t,e,":style"),n=t.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),e=>{let i=r(e);if("string"==typeof i)t.setAttribute("style",n+i);else for(let e in i)t.style[e]=i[e]}},k.text=(t,e,i)=>{let r=D(t,e,":text");return e=>{return i=r(e),void(t.textContent=null==i?"":i);var i}},k.value=(t,e,i)=>{let r=D(t,e,":value"),n="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"checkbox"===t.type?e=>(t.value=e?"on":"",U(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>n(r(t))},k.on=(t,e,i)=>{let r=D(t,e,":on"),n={};return e=>{for(let e in n)t.removeEventListener(e,n[e]);n=r(e);for(let e in n){const i=e.split("-");if(1===i.length)t.addEventListener(e,n[e]);else{const r=n[e],o=(s,f=0)=>{t.addEventListener(i[f],n[e]=a=>{s=s(a),t.removeEventListener(i[f],n[e]),++f<i.length&&"function"==typeof s?o(s,f):o(r)})};o(r)}}}},k.data=(t,e,i)=>{let r=D(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},k.aria=(t,e,i)=>{let r=D(t,e,":aria");return e=>(e=>{for(let i in e)U(t,"aria-"+M(i),null==e[i]?null:e[i]+"")})(r(e))};var P={};function D(t,e,i){if(P[e])return P[e];let r,n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=new Function("__scope",`with (__scope) { return (${n}) };`).bind(t)}catch(r){return _(r,t,e,i)}return P[e]=n=>{let o;try{o=r(n)}catch(r){return _(r,t,e,i)}return o}}function _(t,e,i,r){Object.assign(t,{element:e,expression:i}),console.warn(`∴ ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function M(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var T=new WeakMap;function F(t,e){if(!t.children)return;if(T.has(t))return T.get(t);e||={};const i=[],r=(t,n=t.parentNode)=>{if(t.attributes)for(let r=0;r<t.attributes.length;){let o=t.attributes[r];if(":"!==o.name[0]){r++;continue}t.removeAttribute(o.name);let s=o.value,f=o.name.slice(1).split(":");for(let r of f){let o=k[r]||C;if(i.push(o(t,s,e,r)||(()=>{})),T.has(t)||t.parentNode!==n)return!1}}for(let e,i=0;e=t.children[i];i++)!1===r(e,t)&&i--};r(t);const n=w(e);for(let t of i)m((()=>t(n)));return T.set(t,n),n}var I=F;export{I as default};
+function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==r;){var i=r;for(r=void 0,o++;void 0!==i;){var s=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&u(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function f(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function l(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function a(t){return new l(t)}function u(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function h(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function c(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function v(t){l.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function p(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,d(t),e}finally{i=o,e()}}}function d(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,p(t)}function y(t){if(i!==this)throw new Error("Out-of-order effect");c(this),i=t,this.f&=-2,8&this.f&&d(this),e()}function b(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function m(t){var e=new b(t);return e.c(),e.d.bind(e)}l.prototype.h=function(){return!0},l.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},l.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},l.prototype.subscribe=function(t){var e=this;return m((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},l.prototype.valueOf=function(){return this.value},l.prototype.toString=function(){return this.value+""},l.prototype.peek=function(){return this.v},Object.defineProperty(l.prototype,"value",{get:function(){var t=f(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(v.prototype=new l).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!u(this))return this.f&=-2,!0;var t=i;try{h(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,c(this),this.f&=-2,!0},v.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}l.prototype.S.call(this,t)},v.prototype.U=function(t){if(l.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},v.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},v.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(v.prototype,"value",{get:function(){1&this.f&&t();var e=f(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),b.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},b.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,p(this),h(this),n++;var e=i;return i=this,y.bind(this,e)},b.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},b.prototype.d=function(){this.f|=8,1&this.f||d(this)},Symbol.observable||=Symbol("observable");var g=new FinalizationRegistry((t=>t.call?.())),S=t=>t&&t.peek,w=Symbol("signal-struct");function x(t){if((e=t)&&e[w])return t;var e;let i,r;if(O(t)){i={},r={};let e=Object.getOwnPropertyDescriptors(t);for(let t in e)r[t]=A(i,t,e[t].get?new v(e[t].get.bind(i)):e[t].value);return Object.defineProperty(i,w,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>x(t))):t}function A(t,e,i){let r,n=S(i)?i:O(i)||Array.isArray(i)?a(x(i)):a((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,f,l,u,h,c;return r&&(f=t=>n.value=t,(s=i)&&(c=(s[Symbol.observable]?.()||s).subscribe?.(f,l,undefined),h=c&&(()=>c.unsubscribe?.())||s.set&&s.call?.(u,f)||(s.then?.((t=>{!u&&f(t)}),l)||(async t=>{try{for await(t of s){if(u)return;f(t)}}catch(t){}})())&&(t=>u=1),g.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:!S(i)&&O(i)?t=>t?Object.assign(n.value,t):n.value=x(t):t=>n.value=x(t),enumerable:!0,configurable:!1}),n}function O(t){return t&&t.constructor===Object}var j=(t,e,i,r=null)=>{let n,o,s,f=0,l=i.length,a=e.length,{remove:u,same:h,insert:c,replace:v}=j;for(;f<l&&f<a&&h(e[f],i[f]);)f++;for(;f<l&&f<a&&h(i[l-1],e[a-1]);)r=i[(--a,--l)];if(f==a)for(;f<l;)c(r,i[f++],t);else{for(n=e[f];f<l;)s=i[f++],o=n?n.nextSibling:r,h(n,s)?n=o:f<l&&h(i[f],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,u(n,t),n=o}return i};j.same=(t,e)=>t==e,j.replace=(t,e,i)=>i.replaceChild(e,t),j.insert=(t,e,i)=>i.insertBefore(e,t),j.remove=(t,e)=>e.removeChild(t);var N=j,E={},W={},k={},$={},U=(t,e,i,r)=>{let n,o=r.startsWith("on")&&r.slice(2),s=T(t,e,":"+r);return o?e=>{n&&_(t,o,n),n=s(e),n&&D(t,o,n)}:e=>C(t,r,s(e))},C=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")};$[""]=(t,e,i)=>{let r=T(t,e,":");return e=>{let i=r(e);for(let e in i)C(t,I(e),i[e])}};var B=Symbol(":each"),L=Symbol(":ref");$.ref=(t,e,i)=>{t.hasAttribute(":each")?t[L]=e:i[e]=t},$.with=(t,e,i)=>{throw T(t,e,"with"),"Unimplemented"},$.if=(t,e,i)=>{let r=document.createTextNode(""),n=[T(t,e,":if")],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(T(t,e,":else :if"))):(s.remove(),o.push(s),n.push((()=>1)));return t.replaceWith(s=r),t=>{let e=n.findIndex((e=>e(t)));o[e]!=s&&((s[B]||s).replaceWith(s=o[e]||r),R(s,t))}},$.each=(t,e,i)=>{let r=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r={};r.items=i[2].trim();let n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?(r.item=n.replace(e,"").trim(),r.index=o[1].trim()):r.item=n,r}(e);if(!r)return F(new Error,t,e);const n=t[B]=document.createTextNode("");t.replaceWith(n);const o=T(t,r.items,":each"),s=new WeakMap,f=new WeakMap;let l=[];return e=>{let i=o(e);i?"number"==typeof i?i=Array.from({length:i},((t,e)=>[e,e+1])):i.constructor===Object?i=Object.entries(i):Array.isArray(i)?i=i.map(((t,e)=>[e+1,t])):F(Error("Bad list value"),t,r.items,":each"):i=[];let a=[],u=[];for(let[n,o]of i){let i=null===(h=o)?W:void 0===h?k:"number"==typeof h||h instanceof Number?E[h]||(E[h]=new Number(h)):"string"==typeof h||h instanceof String?E[h]||(E[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?E[h]||(E[h]=new Boolean(h)):h,l=f.get(i);if(l||(l=t.cloneNode(!0),f.set(i,l)),a.push(l),!s.has(i)){let f=Object.create(e);f[r.item]=o,r.index&&(f[r.index]=n),t[L]&&(f[t[L]]=l),s.set(i,f)}u.push(s.get(i))}var h;N(n.parentNode,l,a,n),l=a;for(let t=0;t<a.length;t++)R(a[t],u[t])}},$.id=(t,e,i)=>{let r=T(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},$.class=(t,e,i)=>{let r=T(t,e,":class"),n=t.className;return e=>{let i=r(e);t.className=n+typeof i=="string"?i:(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},$.style=(t,e,i)=>{let r=T(t,e,":style"),n=t.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),e=>{let i=r(e);if("string"==typeof i)t.setAttribute("style",n+i);else for(let e in i)t.style[e]=i[e]}},$.text=(t,e,i)=>{let r=T(t,e,":text");return e=>{return i=r(e),void(t.textContent=null==i?"":i);var i}},$.value=(t,e,i)=>{let r=T(t,e,":value"),n="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"checkbox"===t.type?e=>(t.value=e?"on":"",C(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>n(r(t))};var P=Symbol("stop");$.on=(t,e,i)=>{let r=T(t,e,":on"),n={};return e=>{for(let e in n)_(t,e,n[e]);n=r(e);for(let e in n)D(t,e,n[e])}};var D=(t,e,i)=>{if(e.indexOf("..")<0)t.addEventListener(e,i);else{const r=e.split("..").map((t=>t.startsWith("on")?t.slice(2):t)),n=(e,o=0)=>{let s=f=>{t.removeEventListener(r[o],s),"function"!=typeof(e=e.call(t,f))&&(e=()=>{}),++o<r.length?n(e,o):i[P]||(console.log("reset"),n(i))};t.addEventListener(r[o],s)};n(i)}},_=(t,e,i)=>{e.indexOf("..")>=0&&(console.log("rewire"),i[P]=!0),t.removeEventListener(e,i)};$.data=(t,e,i)=>{let r=T(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},$.aria=(t,e,i)=>{let r=T(t,e,":aria");return e=>(e=>{for(let i in e)C(t,"aria-"+I(i),null==e[i]?null:e[i]+"")})(r(e))};var M={};function T(t,e,i){if(M[e])return M[e];let r,n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=new Function("__scope",`with (__scope) { return (${n}) };`).bind(t)}catch(r){return F(r,t,e,i)}return M[e]=n=>{let o;try{o=r(n)}catch(r){return F(r,t,e,i)}return o}}function F(t,e,i,r){Object.assign(t,{element:e,expression:i}),console.warn(`∴ ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function I(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var z=new WeakMap;function R(t,e){if(!t.children)return;if(z.has(t))return z.get(t);e||={};const i=[],r=(t,n=t.parentNode)=>{if(t.attributes)for(let r=0;r<t.attributes.length;){let o=t.attributes[r];if(":"!==o.name[0]){r++;continue}t.removeAttribute(o.name);let s=o.value;if(!s)continue;let f=o.name.slice(1).split(":");for(let r of f){let o=$[r]||U;if(i.push(o(t,s,e,r)||(()=>{})),z.has(t)||t.parentNode!==n)return!1}}for(let e,i=0;e=t.children[i];i++)!1===r(e,t)&&i--};r(t);const n=x(e);for(let t of i)m((()=>t(n)));return z.set(t,n),n}var Z=R;export{Z as default};

package/src/core.js

@@ -9,6 +9,7 @@ export default function sprae(container, values) {
   if (memo.has(container)) return memo.get(container)
 
   values ||= {};
+  // FIXME: init values must read "snapshot" of signals to avoid leaking actual signals to directives
 
   const updates = []
 
@@ -20,6 +21,7 @@ export default function sprae(container, values) {
         if (attr.name[0] !== ':') {i++; continue}
         el.removeAttribute(attr.name)
         let expr = attr.value
+        if (!expr) continue
         let attrNames = attr.name.slice(1).split(':')
         for (let attrName of attrNames) {
           let dir = directives[attrName] || defaultDirective;

package/src/directives.js

@@ -8,14 +8,16 @@ export const directives = {}
 
 // any-prop directives
 export default (el, expr, values, name) => {
-  if (name.startsWith('on')) {
-    // :ona:onb=x -> :on={a:x,b:x}
-    // :ona-onb=x -> :on={aB:x}
-    return directives.on(el, `{"${name.split('-').map(n=>n.startsWith('on')?n.slice(2):n).join('-')}": ${expr}}`, values)
-  }
+  let evt = name.startsWith('on') && name.slice(2)
   let evaluate = parseExpr(el, expr, ':'+name)
 
-  return (state) => attr(el, name, evaluate(state))
+  let value
+  return evt ? state => {
+    value && removeListener(el, evt, value)
+    value = evaluate(state)
+    value && addListener(el, evt, value)
+  }
+  : state => attr(el, name, evaluate(state))
 }
 
 // set attr
@@ -43,6 +45,30 @@ directives['ref'] = (el, expr, values) => {
   values[expr] = el;
 }
 
+directives['with'] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, 'with')
+
+  throw 'Unimplemented';
+
+  // prev iteration
+  // // Instead of extending signals (which is a bit hard since signal-struct internals is not uniform)
+  // // we bind updating
+  // const params = computed(() => Object.assign({}, rootState, evaluate(rootState)))
+
+  // // NOTE: initialized element doesn't proceed with its children
+  // let state = sprae(el, params.value)
+
+  // // but update is still called with parent state
+  // return (rootState) => batch(() => Object.assign(state, params.value))
+
+
+  // must be as simple as
+  // don't care if root state updates - we're subscribed to it via inheritance _or_ shadowing it
+  let withValues = evaluate(rootState);
+  let newState = Object.assign(Object.create(rootState), withValues)
+  sprae(el, newState)
+}
+
 directives['if'] = (el, expr, values) => {
   let holder = document.createTextNode(''),
       clauses = [parseExpr(el, expr, ':if')],
@@ -212,34 +238,42 @@ directives['value'] = (el, expr, values) => {
   return (state) => update(evaluate(state))
 }
 
+const _stop = Symbol('stop')
 directives['on'] = (el, expr, values) => {
   let evaluate = parseExpr(el, expr, ':on')
   let listeners = {}
 
   return (state) => {
-    for (let evt in listeners) el.removeEventListener(evt, listeners[evt]);
-
+    for (let evt in listeners) removeListener(el, evt, listeners[evt])
     listeners = evaluate(state);
+    for (let evt in listeners) addListener(el, evt, listeners[evt])
+  }
+}
 
-    for (let evt in listeners) {
-      const evts = evt.split('-')
-      if (evts.length===1) el.addEventListener(evt, listeners[evt]);
-      else {
-        const startFn = listeners[evt]
-        const nextEvt = (fn, cur=0) => {
-          el.addEventListener(evts[cur], listeners[evt] = e => {
-            fn = fn(e)
-            el.removeEventListener(evts[cur], listeners[evt])
-            if (++cur < evts.length && typeof fn === 'function') nextEvt(fn, cur)
-            else nextEvt(startFn)
-          })
-        }
-        nextEvt(startFn)
+const addListener = (el, evt, startFn) => {
+  if (evt.indexOf('..')<0) el.addEventListener(evt, startFn);
+
+  // sequences like `a..b`: fn
+  else {
+    const evts = evt.split('..').map(e => e.startsWith('on') ? e.slice(2) : e)
+    const nextEvt = (fn, cur=0) => {
+      let curListener = e => {
+        el.removeEventListener(evts[cur], curListener)
+        if (typeof (fn = fn.call(el,e)) !== 'function') fn = ()=>{}
+        if (++cur < evts.length) nextEvt(fn, cur);
+        else if (!startFn[_stop]) console.log('reset'), nextEvt(startFn); // update only if chain isn't stopped
       }
-    };
+      el.addEventListener(evts[cur],curListener)
+    }
+    nextEvt(startFn)
   }
 }
 
+const removeListener = (el, evt, fn) => {
+  if (evt.indexOf('..')>=0) console.log('rewire'), fn[_stop] = true
+  el.removeEventListener(evt, fn);
+}
+
 directives['data'] = (el, expr, values) => {
   let evaluate = parseExpr(el, expr, ':data')
 
@@ -301,4 +335,4 @@ export function exprError(error, element, expression, dir) {
 
 function dashcase(str) {
 	return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
-};
+};

package/test/test.js

@@ -44,6 +44,12 @@ test('common: reactive', async () => {
   is(el.outerHTML, `<label for="email">email</label><input id="email" name="email" type="email"><a href="//google.com"></a><img src="//google.com">`)
 })
 
+test('common: empty strings', async () => {
+  let el = h`<x :="" :x=""></x>`
+  sprae(el)
+  is(el.outerHTML, `<x></x>`)
+})
+
 test('style', async () => {
   let el = h`<x style="left: 1px" :style="style"></x>`
   let params = sprae(el, {style: "top: 1px"})
@@ -347,24 +353,40 @@ test('on: base', () => {
   is(log.value, ['click','x','xx']);
 })
 
+test('onevt: this context', e => {
+  let el = h`<div :onx="function(){log.push(this)}"></div>`
+  let state = sprae(el, {log: []})
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, [el])
+})
+
+test('on: this in chains refers to el', () => {
+  let el = h`<div :ona..onb="function(e){x=this; log.push(1); return () => log.push(2)}"></div>`
+  let state = sprae(el, {log:[], x:null})
+  el.dispatchEvent(new window.Event('a'));
+  is(state.log, [1])
+})
+
 test('on: multiple events', e => {
-  let el = h`<div :onscroll:onclick="e=>log.push(e.type)"></div>`
+  let el = h`<div :onscroll:onclick:onx="e=>log.push(e.type)"></div>`
   let state = sprae(el, {log:[]})
 
   el.dispatchEvent(new window.Event('click'));
   is(state.log, ['click'])
   el.dispatchEvent(new window.Event('scroll'));
   is(state.log, ['click','scroll'])
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, ['click','scroll','x'])
 })
 
 test('on: in-out events', e => {
   // let el = document.createElement('x');
-  // el.setAttribute(':onmousedown-onmouseup', 'e=>(log.push(e.type),e=>log.push(e.type))')
-  let el = h`<x :onmousedown-onmouseup="e=>(log.push(e.type),e=>log.push(e.type))"></x>`
-
-  let state = sprae(el, {log:[]})
+  // el.setAttribute(':onmousedown..onmouseup', 'e=>(log.push(e.type),e=>log.push(e.type))')
+  let el = h`<x :onmousedown..onmouseup="(e) => { x=this; log.push(e.type); return e=>log.push(e.type); }"></x>`
 
+  let state = sprae(el, {log:[],x:null})
   el.dispatchEvent(new window.Event('mousedown'));
+  is(state.x, el);
   is(state.log, ['mousedown'])
   el.dispatchEvent(new window.Event('mouseup'));
   is(state.log, ['mousedown','mouseup'])
@@ -374,7 +396,7 @@ test('on: in-out side-effects', e => {
   let log = []
 
   // 1. skip in event and do directly out
-  let el = h`<x :onin-onout="io"></x>`
+  let el = h`<x :onin..onout="io"></x>`
   sprae(el, { io(e) {
     log.push(e.type)
     return (e) => (log.push(e.type), [1,2,3])
@@ -401,7 +423,7 @@ test('on: in-out side-effects', e => {
 })
 
 test('on: chain of events', e => {
-  let el = h`<div :onmousedown-onmousemove-onmouseup="e=>(log.push(e.type),e=>(log.push(e.type),e=>log.push(e.type)))"></div>`
+  let el = h`<div :onmousedown..onmousemove..onmouseup="e=>(log.push(e.type),e=>(log.push(e.type),e=>log.push(e.type)))"></div>`
   let state = sprae(el, {log:[]})
 
   el.dispatchEvent(new window.Event('mousedown'));
@@ -412,7 +434,36 @@ test('on: chain of events', e => {
   is(state.log, ['mousedown','mousemove','mouseup'])
 })
 
-test.skip('with: inline', () => {
+test('on: state changes between chain of events', e => {
+  let el = h`<x :on="{'x..y':fn}"></x>`
+  let log = []
+  let state = sprae(el, {log, fn: () => console.log('log1')||log.push(1)})
+  console.log('xx')
+  el.dispatchEvent(new window.Event('x'));
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [1])
+  state.fn = () => (console.log('log1.1')||log.push(1.1), () => log.push(2))
+  is(log, [1])
+  // console.log('xx')
+  // NOTE: state update registers new chain listener before finishing prev chain
+  // el.dispatchEvent(new window.Event('x'));
+  // el.dispatchEvent(new window.Event('x'));
+  // is(log, [1])
+  console.log('yy')
+  el.dispatchEvent(new window.Event('y'));
+  el.dispatchEvent(new window.Event('y'));
+  is(log, [1])
+  console.log('xx')
+  el.dispatchEvent(new window.Event('x'));
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [1, 1.1])
+  console.log('yy')
+  el.dispatchEvent(new window.Event('y'));
+  el.dispatchEvent(new window.Event('y'));
+  is(log, [1, 1.1, 2])
+})
+
+test.todo('with: inline', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
@@ -420,7 +471,7 @@ test.skip('with: inline', () => {
   state.baz = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test.skip('with: inline reactive', () => {
+test.todo('with: inline reactive', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let baz = signal('qux')
   let state = sprae(el, {baz})
@@ -429,7 +480,7 @@ test.skip('with: inline reactive', () => {
   baz.value = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test.skip('with: data', () => {
+test.todo('with: data', () => {
   let el = h`<x :with="x"><y :text="foo"></y></x>`
   let state = sprae(el, {x:{foo:'bar'}})
   is(el.innerHTML, `<y>bar</y>`)
@@ -437,7 +488,7 @@ test.skip('with: data', () => {
   Object.assign(state, {x:{foo:'baz'}})
   is(el.innerHTML, `<y>baz</y>`)
 })
-test.skip('with: transparency', () => {
+test.todo('with: transparency', () => {
   // NOTE: y:text initializes through directive, not through parent
   // therefore by default :text uses parent's state, not defined by element itself
   let el = h`<x :with="{foo:'foo'}"><y :with="b" :text="foo+bar"></y></x>`
@@ -446,7 +497,7 @@ test.skip('with: transparency', () => {
   params.b.bar = 'baz'
   is(el.innerHTML, `<y>foobaz</y>`)
 })
-test.skip('with: reactive transparency', () => {
+test.todo('with: reactive transparency', () => {
   let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
   const bar = signal('2')
   sprae(el, {b:{c:{bar}}})
@@ -454,7 +505,7 @@ test.skip('with: reactive transparency', () => {
   bar.value = '3'
   is(el.innerHTML, `<y>13</y>`)
 })
-test.skip('with: writes to state', () => {
+test.todo('with: writes to state', () => {
   let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
@@ -492,13 +543,19 @@ test(':: reactive values', async () => {
   is(el.outerHTML, `<x>2</x>`)
 })
 
+test(':: null result does nothing', async () => {
+  let a = h`<x :="undefined"></x>`
+  sprae(a)
+  is(a.outerHTML, `<x></x>`)
+})
+
 test(':: scope refers to current element', async () => {
   let el = h`<x :text="log.push(this)"></x>`
   let state = sprae(el, {log:[]})
   is(state.log, [el])
 })
 
-test.skip(':: scope directives must come first', async () => {
+test.todo(':: scope directives must come first', async () => {
   // NOTE: we init attributes in order of definition
   let a = h`<x :text="y" :with="{y:1}" :ref="x"></x>`
   sprae(a, {})