sprae 5.3.0 → 6.0.0

package/examples/todomvc.html

@@ -14,39 +14,38 @@
   <section class="todoapp">
     <header class="header">
       <h1>todos</h1>
-      <input class="new-todo" placeholder="What needs to be done?" autofocus :onkeypress="e => {
-        if (e.key !== 'Enter') return
-        save(todos = [...todos, { text: e.target.value, done: false}])
-        e.target.value = ''
-      }">
+      <input class="new-todo" placeholder="What needs to be done?" autofocus @keypress.enter="
+        save(todos = [...todos, { text: this.value, done: false}])
+        this.value = ''
+      ">
     </header>
     <section class="main">
-      <input id="toggle-all" class="toggle-all" type="checkbox" :onclick="e => {
+      <input id="toggle-all" class="toggle-all" type="checkbox" @click="
         const all = todos.every(item => item.done)
         save(todos = todos.map(item => (item.done = !all, item)))
-      }">
+      ">
       <label for="toggle-all">Mark all as complete</label>
       <ul class="todo-list">
         <li :ref="li" :each="item in todos"
           :class="{completed: item.done}"
           :hidden="hash === '#/active' ? item.done : hash === '#/completed' ? !item.done : false"
-          :ondblclick="e => {
+          @dblclick="
             li.querySelector('.edit').focus()
             li.classList.add('editing')
-          }">
+          ">
           <div class="view">
             <input class="toggle" type="checkbox"
               :checked="item.done"
-              :onchange="e => (item.done = !item.done, save(todos))"
+              @change="item.done = !item.done, save(todos)"
             />
             <label :text="item.text"></label>
-            <button class="destroy" :onclick="e => (save(todos = todos.filter(i => i.text !== item.text)))"></button>
+            <button class="destroy" @click="save(todos = todos.filter(i => i.text !== item.text))"></button>
           </div>
           <input class=edit
             :value="item.text"
-            :oninput="e => {item.text = e.target.value; save(todos)}"
-            :onblur="e => li.classList.remove('editing');"
-            :onkeypress="(e) => { e.key === 'Enter' ? e.target.blur() : null }"
+            @input="item.text = this.value; save(todos)"
+            @blur="li.classList.remove('editing');"
+            @keypress.enter="this.blur()"
           />
         </li>
       </ul>
@@ -62,7 +61,7 @@
       </ul>
       <button class="clear-completed"
         :hidden="todos.every(item => !item.done)"
-        :onclick="e => save(todos = todos.filter(item => !item.done ? true : false))">
+        @click="save(todos = todos.filter(item => !item.done ? true : false))">
         Clear completed
       </button>
     </footer>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "5.3.0",
+  "version": "6.0.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
@@ -12,7 +12,7 @@
     "@preact/signals": "^1.1.3",
     "es-module-shims": "^1.6.2",
     "esbuild": "^0.15.14",
-    "hyperf": "^1.5.0",
+    "hyperf": "^1.6.2",
     "jsdom": "^21.1.0",
     "signal-struct": "^1.10.0",
     "terser": "^5.15.1",

package/r&d.md

@@ -381,12 +381,57 @@
     + less problem detecting `const/let` in code
   - conflicts with regular attrs logic: the code is immediately invoked and can assign a function.
   - `:oninput="e => (handleCaret(e), updateTimecodes())"`
+    ~ `:oninput="handleCaret(event), updateTimecodes()"`
   - `:onbeforeinput="handleBeforeInput"`
+    ~ `:onbeforeinput="handleBeforeInput(event)"`
   - `:ondragenter..ondragleave:ondragenter..ondrop="e=>(this.classList.add('w-dragover'),e=>this.classList.remove('w-dragover'))"`
+    ~ `:ondragenter..ondragleave:ondragenter..ondrop="this.classList.add('w-dragover'), e=>this.classList.remove('w-dragover')"`
   - `:ondrop="e=>console.log(e.dataTransfer.types)||e.preventDefault()"`
+    ~ `:ondrop.prevent="console.log(event.dataTransfer.types)"`
   - `:onfocus="e => (e.relatedTarget ? e.relatedTarget.focus() : e.target.blur())"`
+    ~ `:onfocus="event.relatedTarget ? event.relatedTarget.focus() : event.target.blur()"`
   - `:onpopstate.window="e => goto(e.state)"`
+    ~ `:onpopstate.window="goto(event.state)"`
   - `:onclick.toggle="play"`
+    ~ `:onclick.toggle="play()"`
+
+## [ ] Should we introduce `@click` for short-notation events?
+  + gives shorter code for majority of cases
+  + can be non-conflicting
+  + compatible with all frameworks (vue, alpine, lucia, lit)
+  + gives better meaning to modifiers - moves them outside of `:` attribute
+  - multiple events `@input@change="code"` is not nice
+    ~ that's fine and even meaningful
+  - chain of events `@focus..@blur="return (e)=>{}"` creates confusing `return` outside of body, as well as inconsistent chain pattern
+    ? remove that pattern
+      + it's still unsatisfactory: `@mousedown.document..@mouseup.document="e=> (isMouseDown = true, e=> isMouseDown = false)"` works, but what if we want to add `@touchstart..@touchend`, or
+        . `@click..@click="play" @keydown.alt-space..@keydown.alt-space="play"`, so in other words we need cross-reaction `@click_or_altspace..@click_or_altspace`, not just one single chain.
+        + actually here `@click@keydown.space..@click@keydown.space` is possible, unlike `:ona..onb` case, the question is how to provide sequence in attribute
+        + the thing is that local state, introduced by initiator events, is not useful by itself, detached from scope.
+          . the state is better reflected in data scope, rather than by initiator event.
+          ? what about temporaries like `@a..@b="id=setTimeout(),()=>clearTimeout(id)"` or `@a.toggle="stop=play(),stop"`
+            . use `:with={id:null} @a="id=setTimeout()" @b="clearTimeout(id)"`
+  - introduces illicit `event` variable ~ although compatible with standard, still obscure
+  - `@` prefix is unchangeable ~ can be removed, not set, but still on the verge.
+  - `@click.toggle="code"` has same problem as `@a..@b` - how can we make code separation in attribute?
+    + remove toggle
+  + overall less code
+
+## [x] Multiple chain events resolution -> redirect to main event for now
+  * Consider
+  ```
+  :onclick..onclick="play"
+  :onkeydown.document.alt-space..onkeydown.document.alt-space="play"
+  ```
+  * When started by click and ended by alt-space, it doesn't clear the onclick
+  * We actually want here `:onclick:onkeydown.document.alt-space..onclick:onkeydown.document.alt-space`.
+    - this makes inconsistency of `..onclick` - colon is missing
+    - also it makes precedence of `:` and `..` unclear - what comes before what after.
+
+  ? Can we use `:onclick.toggle="play"`?
+    - it doesn't help with switch-over
+  ? Some 'or' character `:onclick--onkeydown`
+  ? We can redirect to main event, that's it for now
 
 ## [x] Should getters convert to computed? -> yes, that's relatively cheap and useful
 
@@ -513,22 +558,6 @@
   5. `:x="this.x=value"`
     + yepyepyep
 
-## [x] Multiple chain events resolution -> redirect to main event for now
-  * Consider
-  ```
-  :onclick..onclick="play"
-  :onkeydown.document.alt-space..onkeydown.document.alt-space="play"
-  ```
-  * When started by click and ended by alt-space, it doesn't clear the onclick
-  * We actually want here `:onclick:onkeydown.document.alt-space..onclick:onkeydown.document.alt-space`.
-    - this makes inconsistency of `..onclick` - colon is missing
-    - also it makes precedence of `:` and `..` unclear - what comes before what after.
-
-  ? Can we use `:onclick.toggle="play"`?
-    - it doesn't help with switch-over
-  ? Some 'or' character `:onclick--onkeydown`
-  ? We can redirect to main event, that's it for now
-
 ## [x] Insert content by reusing the node/template -> use `:render="ref" :with="data"`
 
   * Makes easy use of repeatable fragments, instead of web-components

package/readme.md

@@ -2,7 +2,7 @@
 
 > DOM microhydration with `:` attributes.
 
-_Sprae_ is tiny progressive enhancement framework, a minimal essential alternative to [alpine](https://github.com/alpinejs/alpine)/[lucia](https://github.com/aidenybai/lucia), [petite-vue](https://github.com/vuejs/petite-vue) or [template-parts](https://github.com/github/template-parts) with improved ergonomics[*](#justification). It enables simple markup logic without external scripts. Perfect for small websites, prototypes or UI logic.
+_Sprae_ is tiny progressive enhancement framework, a minimal essential alternative to [alpine](https://github.com/alpinejs/alpine)/[lucia](https://github.com/aidenybai/lucia), [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.
 
 ## Use
 
@@ -116,63 +116,6 @@ Set value of an input, textarea or select. Takes handle of `checked` and `select
 </select>
 ```
 
-#### `:<prop>="value?"`
-
-Set any attribute value or run an effect.
-
-```html
-<!-- Single property -->
-<label :for="name" :text="name" />
-
-<!-- Multiple properties -->
-<input :id:name="name" />
-
-<!-- Effect (triggers any time bar changes) -->
-<div :fx="void bar()" ></div>
-```
-
-#### `:="props?"`
-
-Spread multiple attibures.
-
-```html
-<input :="{ id: name, name, type:'text', value }" />
-```
-
-#### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
-
-Add event listener or events chain.
-
-```html
-<!-- Single event -->
-<input type="checkbox" :onchange="e => isChecked=e.target.value">
-
-<!-- Multiple events -->
-<input :value="text" :oninput:onchange="e => text=e.target.value">
-
-<!-- Sequence of events -->
-<button :onfocus..onblur="e => {
-  // onfocus
-  return e => {
-    // onblur
-  }
-}">
-
-<!-- Event modifiers -->
-<button :onclick.throttle-500="handler">Not too often</button>
-```
-
-##### Event modifiers
-
-* `.once`, `.passive`, `.capture` – listener [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options).
-* `.prevent`, `.stop` – prevent default or stop propagation.
-* `.window`, `.document`, `.outside`, `.self` – specify event target.
-* `.throttle-<ms>`, `.debounce-<ms>` – defer function call with one of the methods.
-* `.toggle` – run function and its result in turn.
-* `.ctrl`, `.shift`, `.alt`, `.meta`, `.arrow`, `.enter`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete`, `.digit`, `.letter`, `.character` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
-* `.ctrl-<key>, .alt-<key>, .meta-<key>, .shift-<key>` – key combinations, eg. `.ctrl-alt-delete` or `.meta-x`.
-* `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).
-
 #### `:with="data"`
 
 Define or extend data scope for a subtree.
@@ -197,8 +140,8 @@ Include template as element content.
 ```html
 <template :ref="foo"><span :text="foo"></span></template>
 
-<div :render="foo" :with="{foo:'bar'}">unknown</div>
-<div :render="foo" :with="{foo:'baz'}">unknown</div>
+<div :render="foo" :with="{foo:'bar'}">...inserted here...</div>
+<div :render="foo" :with="{foo:'baz'}">...inserted here...</div>
 ```
 
 #### `:ref="id"`
@@ -213,18 +156,73 @@ Expose element to current 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 @focus="item.classList.add('editing')" @blur="item.classList.remove('editing')"/>
   </li>
 </ul>
 ```
 
+#### `:="props?"`
+
+Spread multiple attibures.
+
+```html
+<input :="{ id: name, name, type:'text', value }" />
+```
+
+#### `:<prop>="value?"`
+
+Set any attribute value or run an effect.
+
+```html
+<!-- Single property -->
+<label :for="name" :text="name" />
+
+<!-- Multiple properties -->
+<input :id:name="name" />
+
+<!-- Effect - returns undefined, triggers any time bar changes -->
+<div :fx="void bar()" ></div>
+
+<!-- Raw event listener (see events) -->
+<div :onclick="e=>e.preventDefault()"></div>
+```
+
+
+## Events
+
+#### `@<event>="handler"`, `@<foo>@<bar>.<baz>="handler"`
+
+Attach event listener or multiple listeners with possible modifiers, `event` variable holds current event.
+
+```html
+<!-- Single event -->
+<input type="checkbox" @change="isChecked = event.target.value">
+
+<!-- Multiple events -->
+<input :value="text" @input@change="text = event.target.value">
+
+<!-- Event modifiers -->
+<button @click.throttle-500="handler(event)">Not too often</button>
+```
+
+##### Event modifiers
+
+* `.once`, `.passive`, `.capture` – listener [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options).
+* `.prevent`, `.stop` – prevent default or stop propagation.
+* `.window`, `.document`, `.outside`, `.self` – specify event target.
+* `.throttle-<ms>`, `.debounce-<ms>` – defer function call with one of the methods.
+* `.ctrl`, `.shift`, `.alt`, `.meta`, `.arrow`, `.enter`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete`, `.digit`, `.letter`, `.character` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
+* `.ctrl-<key>, .alt-<key>, .meta-<key>, .shift-<key>` – key combinations, eg. `.ctrl-alt-delete` or `.meta-x`.
+* `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).
+
+
 ## Sandbox
 
 Expressions are sandboxed, ie. have no access to global or window (since sprae can be run in server environment).
 
 ```html
-<div :x="window.x"></div>
-<!-- window is undefined -->
+<div :x="global.x"></div>
+<!-- global is undefined -->
 ```
 
 Default sandbox provides: _window_, _document_, _console_, _history_, _location_, _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _Set_, _Map_.<br/>
@@ -247,8 +245,8 @@ To avoid _flash of unstyled content_, you can hide sprae attribute or add a cust
 
 ## Justification & alternatives
 
-* [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) / [lucia](https://github.com/aidenybai/lucia) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `l-*` `@evt`, `{{}}` can be expressed with single convention. `{{}}` also conflicts with template-parts and liquid/django. 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.
+* [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) / [lucia](https://github.com/aidenybai/lucia) escape native HTML quirks, but the syntax (`:attr`, `v-*`,`x-*`, `l-*` `@evt`, `{{}}`) and 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, invent own tooling or complex reactivity.
 * React/[preact](https://ghub.io/preact) does the job wiring up JS to HTML, but with an extreme of migrating HTML to JSX and enforcing SPA, which is not organic for HTML. Also it doesn't support reactive fields (needs render call).
 
 _Sprae_ takes idea of _templize directives_/_alpine_/_vue_ attrs and builds upon <del>[_@preact/signals_](https://ghub.io/@preact/signals)</del> simple reactive state.
@@ -260,7 +258,6 @@ _Sprae_ takes idea of _templize directives_/_alpine_/_vue_ attrs and builds upon
 * It reserves minimal syntax space as `:` convention (keeping tree neatly decorated, not scattered).
 * Expressions are naturally reactive and incur minimal updates.
 * Elements / data API is open and enable easy interop.
-* It's just nice separation: attributes belong to client and template fields to server.
 
 It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), considered a [buried treasure](https://github.com/bahrus/be-restated) by web-connoisseurs.
 

package/sprae.auto.js

@@ -376,19 +376,6 @@
     } : (value) => el.value = value;
     return (state2) => update(evaluate(state2));
   };
-  secondary["on"] = (el, expr) => {
-    let evaluate = parseExpr(el, expr, ":on");
-    return (state2) => {
-      let listeners = evaluate(state2);
-      let offs = [];
-      for (let evt in listeners)
-        offs.push(on(el, evt, listeners[evt]));
-      return () => {
-        for (let off of offs)
-          off();
-      };
-    };
-  };
   var directives_default = (el, expr, state2, name) => {
     let evt = name.startsWith("on") && name.slice(2);
     let evaluate = parseExpr(el, expr, ":" + name);
@@ -402,43 +389,20 @@
       };
     return (state3) => attr(el, name, evaluate(state3));
   };
-  var on = (target, evt, origFn) => {
-    if (!origFn)
+  var on = (el, e, fn) => {
+    if (!fn)
       return;
-    let ctxs = evt.split("..").map((e) => {
-      let ctx = { evt: "", target, test: () => true };
-      ctx.evt = (e.startsWith("on") ? e.slice(2) : e).replace(
-        /\.(\w+)?-?([-\w]+)?/g,
-        (match, mod, param = "") => (ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test, "")
-      );
-      return ctx;
-    });
-    if (ctxs.length == 1)
-      return addListenerWithMods(origFn, ctxs[0]);
-    const onFn = (fn, cur = 0) => {
-      let off;
-      let curListener = (e) => {
-        if (cur)
-          off();
-        let nextFn = fn.call(target, e);
-        if (typeof nextFn !== "function")
-          nextFn = () => {
-          };
-        if (cur + 1 < ctxs.length)
-          onFn(nextFn, !cur ? 1 : cur + 1);
-      };
-      return off = addListenerWithMods(curListener, ctxs[cur]);
-    };
-    let rootOff = onFn(origFn);
-    return () => rootOff();
-    function addListenerWithMods(fn, { evt: evt2, target: target2, test, defer, stop, prevent, ...opts }) {
-      if (defer)
-        fn = defer(fn);
-      let cb = (e) => test(e) && (stop && e.stopPropagation(), prevent && e.preventDefault(), fn.call(target2, e));
-      target2.addEventListener(evt2, cb, opts);
-      return () => target2.removeEventListener(evt2, cb, opts);
-    }
-    ;
+    const ctx = { evt: "", target: el, test: () => true };
+    ctx.evt = (e.startsWith("on") ? e.slice(2) : e).replace(
+      /\.(\w+)?-?([-\w]+)?/g,
+      (match, mod, param = "") => (ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test, "")
+    );
+    const { evt, target, test, defer, stop, prevent, ...opts } = ctx;
+    if (defer)
+      fn = defer(fn);
+    const cb = (e2) => test(e2) && (stop && e2.stopPropagation(), prevent && e2.preventDefault(), fn.call(target, e2));
+    target.addEventListener(evt, cb, opts);
+    return () => target.removeEventListener(evt, cb, opts);
   };
   var mods = {
     prevent(ctx) {
@@ -462,9 +426,6 @@
     document(ctx) {
       ctx.target = document;
     },
-    toggle(ctx) {
-      ctx.defer = (fn, out) => (e) => out ? (out.call?.(ctx.target, e), out = null) : out = fn();
-    },
     throttle(ctx, limit) {
       ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108);
     },
@@ -606,18 +567,18 @@ ${directive}=${expression ? `"${expression}"
       }
       if (el.attributes) {
         for (let i = 0; i < el.attributes.length; ) {
-          let attr2 = el.attributes[i];
-          if (attr2.name[0] !== ":") {
+          let attr2 = el.attributes[i], prefix = attr2.name[0];
+          if (prefix === ":" || prefix === "@") {
+            el.removeAttribute(attr2.name);
+            let expr = prefix === "@" ? `event=>{${attr2.value}}` : attr2.value, names = attr2.name.slice(1).split(prefix);
+            for (let name of names) {
+              if (prefix === "@")
+                name = `on` + name;
+              let dir = secondary[name] || directives_default;
+              updates.push(dir(el, expr, state2, name));
+            }
+          } else
             i++;
-            continue;
-          }
-          el.removeAttribute(attr2.name);
-          let expr = attr2.value;
-          let attrNames = attr2.name.slice(1).split(":");
-          for (let attrName of attrNames) {
-            let dir = secondary[attrName] || directives_default;
-            updates.push(dir(el, expr, state2, attrName));
-          }
         }
       }
       for (let i = 0, child; child = el.children[i]; i++) {

package/sprae.auto.min.js

@@ -1 +1 @@
-(()=>{var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console,window:window,document:document,history:history,location:location},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(r in Object.prototype||Array.isArray(t)&&r in Array.prototype&&"length"!==r)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(!Array.isArray(e)&&Object.is(e[t],r))return!0;e[t]=r;let n=i.get(e)?.[t];if(n)for(let e of n)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);o.set(e,r),a.set(r,e);let n=Object.getOwnPropertyDescriptors(e);for(let t in n){let l=n[t];l.get&&l.get&&(l.get=l.get.bind(r),Object.defineProperty(e,t,l))}return e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},g={},d={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[j(e,t,":if")],l=[e],s=e;for(;(s=e.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(t=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),l.push(s),n.push(j(e,t,":else :if"))):(s.remove(),l.push(s),n.push((()=>1)));return e.replaceWith(s=r),e=>{let t=n.findIndex((t=>t(e)));l[t]!=s&&((s[m]||s).replaceWith(s=l[t]||r),O(s,e))}};var m=Symbol(":each");g.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),l=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),s=l.match(t);return s?[l.replace(t,"").trim(),s[1].trim(),n]:[l,"",n]}(t);if(!r)return E(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=j(e,r[2],":each"),i=e.getAttribute(":key"),o=i?j(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new l,c=new l;let f=[];return l=>{let i=s(l);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t+1,t])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):E(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let s,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?s=e.cloneNode(!0):(s=c.get(f))||c.set(f,s=e.cloneNode(!0)),y.push(s),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},l),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const l=new Map,s=new Map;let i,o;for(i=0;i<t.length;i++)l.set(t[i],i);for(i=0;i<r.length;i++)s.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=s.get(a),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)O(y[e],h[e])}},g.with=(e,t,r)=>{const n=j(e,t,":with")(r);O(e,p(n,r))},g.ref=(e,t,r)=>{r[t]=e},d.render=(e,t,r)=>{let n=j(e,t,":render")(r);n||E(new Error("Template not found"),e,t,":render");let l=n.content.cloneNode(!0);e.replaceChildren(l),O(e,r)},d.id=(e,t)=>{let r=j(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=j(e,t,":class"),n=e.getAttribute("class");return t=>{let l=r(t),s=[n];l&&("string"==typeof l?s.push(l):Array.isArray(l)?s.push(...l):s.push(...Object.entries(l).map((([e,t])=>t?e:"")))),(s=s.filter(Boolean).join(" "))?e.setAttribute("class",s):e.removeAttribute("class")}},d.style=(e,t)=>{let r=j(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let l=r(t);if("string"==typeof l)e.setAttribute("style",n+l);else{e.setAttribute("style",n);for(let t in l)e.style.setProperty(t,l[t])}}},d.text=(e,t)=>{let r=j(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=j(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},d.value=(e,t)=>{let r,n,l=j(e,t,":value"),s="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>s(l(e))},d.on=(e,t)=>{let r=j(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(v(e,t,n[t]));return()=>{for(let e of l)e()}}};var b=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=j(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return v(e,l,r)}:t=>x(e,n,s(t))},v=(e,t,r)=>{if(!r)return;let n=t.split("..").map((t=>{let r={evt:"",target:e,test:()=>!0};return r.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,n="")=>(r.test=A[t]?.(r,...n.split("-"))||r.test,""))),r}));if(1==n.length)return i(r,n[0]);const l=(t,r=0)=>{let s;return s=i((i=>{r&&s();let o=t.call(e,i);"function"!=typeof o&&(o=()=>{}),r+1<n.length&&l(o,r?r+1:1)}),n[r])};let s=l(r);return()=>s();function i(e,{evt:t,target:r,test:n,defer:l,stop:s,prevent:i,...o}){l&&(e=l(e));let a=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,a,o),()=>r.removeEventListener(t,a,o)}},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},toggle(e){e.defer=(t,r)=>n=>r?(r.call?.(e.target,n),r=null):r=t()},throttle(e,t){e.defer=e=>k(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>w.ctrl(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),shift:(e,...t)=>e=>w.shift(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),alt:(e,...t)=>e=>w.alt(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),meta:(e,...t)=>e=>w.meta(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),arrow:e=>w.arrow,enter:e=>w.enter,escape:e=>w.escape,tab:e=>w.tab,space:e=>w.space,backspace:e=>w.backspace,delete:e=>w.delete,digit:e=>w.digit,letter:e=>w.letter,character:e=>w.character},w={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},k=(e,t)=>{let r,n,l=s=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,l(s),e(s)}),t)};return t=>r?n=!0:(l(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function j(e,t,r){let n=S[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return E(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return E(n,e,t,r)}return s}}function E(e,t,n,l){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${l}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}O.globals=c;var N=new WeakMap;function O(e,t){if(!e.children)return;if(N.has(e))return Object.assign(N.get(e),t);const r=p(t||{}),n=[],l=(e,t=e.parentNode)=>{for(let l in g){let s=":"+l;if(e.hasAttribute?.(s)){let i=e.getAttribute(s);if(e.removeAttribute(s),n.push(g[l](e,i,r,l)),N.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let l=e.attributes[t];if(":"!==l.name[0]){t++;continue}e.removeAttribute(l.name);let s=l.value,i=l.name.slice(1).split(":");for(let t of i){let l=d[t]||b;n.push(l(e,s,r,t))}}for(let t,r=0;t=e.children[r];r++)!1===l(t,e)&&r--};l(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return N.set(e,r),r}document.currentScript&&O(document.documentElement)})();
+(()=>{var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,s=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},l=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console,window:window,document:document,history:history,location:location},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(r in Object.prototype||Array.isArray(t)&&r in Array.prototype&&"length"!==r)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(!Array.isArray(e)&&Object.is(e[t],r))return!0;e[t]=r;let n=i.get(e)?.[t];if(n)for(let e of n)l.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);o.set(e,r),a.set(r,e);let n=Object.getOwnPropertyDescriptors(e);for(let t in n){let s=n[t];s.get&&s.get&&(s.get=s.get.bind(r),Object.defineProperty(e,t,s))}return e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of l)e.call();l.clear(),t=!1})))},d={},g={};d.if=(e,t)=>{let r=document.createTextNode(""),n=[j(e,t,":if")],s=[e],l=e;for(;(l=e.nextElementSibling)&&l.hasAttribute(":else");)l.removeAttribute(":else"),(t=l.getAttribute(":if"))?(l.removeAttribute(":if"),l.remove(),s.push(l),n.push(j(e,t,":else :if"))):(l.remove(),s.push(l),n.push((()=>1)));return e.replaceWith(l=r),e=>{let t=n.findIndex((t=>t(e)));s[t]!=l&&((l[b]||l).replaceWith(l=s[t]||r),O(l,e))}};var b=Symbol(":each");d.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),s=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),l=s.match(t);return l?[s.replace(t,"").trim(),l[1].trim(),n]:[s,"",n]}(t);if(!r)return E(new Error,e,t,":each");const n=e[b]=document.createTextNode("");e.replaceWith(n);const l=j(e,r[2],":each"),i=e.getAttribute(":key"),o=i?j(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new s,c=new s;let f=[];return s=>{let i=l(s);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t+1,t])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):E(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let l,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?l=e.cloneNode(!0):(l=c.get(f))||c.set(f,l=e.cloneNode(!0)),y.push(l),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},s),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const s=new Map,l=new Map;let i,o;for(i=0;i<t.length;i++)s.set(t[i],i);for(i=0;i<r.length;i++)l.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=l.get(a),f=s.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)O(y[e],h[e])}},d.with=(e,t,r)=>{const n=j(e,t,":with")(r);O(e,p(n,r))},d.ref=(e,t,r)=>{r[t]=e},g.render=(e,t,r)=>{let n=j(e,t,":render")(r);n||E(new Error("Template not found"),e,t,":render");let s=n.content.cloneNode(!0);e.replaceChildren(s),O(e,r)},g.id=(e,t)=>{let r=j(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},g.class=(e,t)=>{let r=j(e,t,":class"),n=e.getAttribute("class");return t=>{let s=r(t),l=[n];s&&("string"==typeof s?l.push(s):Array.isArray(s)?l.push(...s):l.push(...Object.entries(s).map((([e,t])=>t?e:"")))),(l=l.filter(Boolean).join(" "))?e.setAttribute("class",l):e.removeAttribute("class")}},g.style=(e,t)=>{let r=j(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let s=r(t);if("string"==typeof s)e.setAttribute("style",n+s);else{e.setAttribute("style",n);for(let t in s)e.style.setProperty(t,s[t])}}},g.text=(e,t)=>{let r=j(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},g[""]=(e,t)=>{let r=j(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},g.value=(e,t)=>{let r,n,s=j(e,t,":value"),l="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>l(s(e))};var m=(e,t,r,n)=>{let s=n.startsWith("on")&&n.slice(2),l=j(e,t,":"+n);if(l)return s?t=>{let r=l(t)||(()=>{});return v(e,s,r)}:t=>x(e,n,l(t))},v=(e,t,r)=>{if(!r)return;const n={evt:"",target:e,test:()=>!0};n.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(n.test=A[t]?.(n,...r.split("-"))||n.test,"")));const{evt:s,target:l,test:i,defer:o,stop:a,prevent:u,...c}=n;o&&(r=o(r));const f=e=>i(e)&&(a&&e.stopPropagation(),u&&e.preventDefault(),r.call(l,e));return l.addEventListener(s,f,c),()=>l.removeEventListener(s,f,c)},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},throttle(e,t){e.defer=e=>k(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>w.ctrl(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),shift:(e,...t)=>e=>w.shift(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),alt:(e,...t)=>e=>w.alt(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),meta:(e,...t)=>e=>w.meta(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),arrow:e=>w.arrow,enter:e=>w.enter,escape:e=>w.escape,tab:e=>w.tab,space:e=>w.space,backspace:e=>w.backspace,delete:e=>w.delete,digit:e=>w.digit,letter:e=>w.letter,character:e=>w.character},w={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},k=(e,t)=>{let r,n,s=l=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,s(l),e(l)}),t)};return t=>r?n=!0:(s(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function j(e,t,r){let n=S[t];if(!n){let s=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${s.trim()} };`)}catch(n){return E(n,e,t,r)}}return s=>{let l;try{l=n.call(e,s)}catch(n){return E(n,e,t,r)}return l}}function E(e,t,n,s){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${s}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}O.globals=c;var N=new WeakMap;function O(e,t){if(!e.children)return;if(N.has(e))return Object.assign(N.get(e),t);const r=p(t||{}),n=[],s=(e,t=e.parentNode)=>{for(let s in d){let l=":"+s;if(e.hasAttribute?.(l)){let i=e.getAttribute(l);if(e.removeAttribute(l),n.push(d[s](e,i,r,s)),N.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let s=e.attributes[t],l=s.name[0];if(":"===l||"@"===l){e.removeAttribute(s.name);let t="@"===l?`event=>{${s.value}}`:s.value,i=s.name.slice(1).split(l);for(let s of i){"@"===l&&(s="on"+s);let i=g[s]||m;n.push(i(e,t,r,s))}}else t++}for(let t,r=0;t=e.children[r];r++)!1===s(t,e)&&r--};s(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return N.set(e,r),r}document.currentScript&&O(document.documentElement)})();

package/sprae.js

@@ -375,19 +375,6 @@ secondary["value"] = (el, expr) => {
   } : (value) => el.value = value;
   return (state2) => update(evaluate(state2));
 };
-secondary["on"] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":on");
-  return (state2) => {
-    let listeners = evaluate(state2);
-    let offs = [];
-    for (let evt in listeners)
-      offs.push(on(el, evt, listeners[evt]));
-    return () => {
-      for (let off of offs)
-        off();
-    };
-  };
-};
 var directives_default = (el, expr, state2, name) => {
   let evt = name.startsWith("on") && name.slice(2);
   let evaluate = parseExpr(el, expr, ":" + name);
@@ -401,43 +388,20 @@ var directives_default = (el, expr, state2, name) => {
     };
   return (state3) => attr(el, name, evaluate(state3));
 };
-var on = (target, evt, origFn) => {
-  if (!origFn)
+var on = (el, e, fn) => {
+  if (!fn)
     return;
-  let ctxs = evt.split("..").map((e) => {
-    let ctx = { evt: "", target, test: () => true };
-    ctx.evt = (e.startsWith("on") ? e.slice(2) : e).replace(
-      /\.(\w+)?-?([-\w]+)?/g,
-      (match, mod, param = "") => (ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test, "")
-    );
-    return ctx;
-  });
-  if (ctxs.length == 1)
-    return addListenerWithMods(origFn, ctxs[0]);
-  const onFn = (fn, cur = 0) => {
-    let off;
-    let curListener = (e) => {
-      if (cur)
-        off();
-      let nextFn = fn.call(target, e);
-      if (typeof nextFn !== "function")
-        nextFn = () => {
-        };
-      if (cur + 1 < ctxs.length)
-        onFn(nextFn, !cur ? 1 : cur + 1);
-    };
-    return off = addListenerWithMods(curListener, ctxs[cur]);
-  };
-  let rootOff = onFn(origFn);
-  return () => rootOff();
-  function addListenerWithMods(fn, { evt: evt2, target: target2, test, defer, stop, prevent, ...opts }) {
-    if (defer)
-      fn = defer(fn);
-    let cb = (e) => test(e) && (stop && e.stopPropagation(), prevent && e.preventDefault(), fn.call(target2, e));
-    target2.addEventListener(evt2, cb, opts);
-    return () => target2.removeEventListener(evt2, cb, opts);
-  }
-  ;
+  const ctx = { evt: "", target: el, test: () => true };
+  ctx.evt = (e.startsWith("on") ? e.slice(2) : e).replace(
+    /\.(\w+)?-?([-\w]+)?/g,
+    (match, mod, param = "") => (ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test, "")
+  );
+  const { evt, target, test, defer, stop, prevent, ...opts } = ctx;
+  if (defer)
+    fn = defer(fn);
+  const cb = (e2) => test(e2) && (stop && e2.stopPropagation(), prevent && e2.preventDefault(), fn.call(target, e2));
+  target.addEventListener(evt, cb, opts);
+  return () => target.removeEventListener(evt, cb, opts);
 };
 var mods = {
   prevent(ctx) {
@@ -461,9 +425,6 @@ var mods = {
   document(ctx) {
     ctx.target = document;
   },
-  toggle(ctx) {
-    ctx.defer = (fn, out) => (e) => out ? (out.call?.(ctx.target, e), out = null) : out = fn();
-  },
   throttle(ctx, limit) {
     ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108);
   },
@@ -605,18 +566,18 @@ function sprae(container, values) {
     }
     if (el.attributes) {
       for (let i = 0; i < el.attributes.length; ) {
-        let attr2 = el.attributes[i];
-        if (attr2.name[0] !== ":") {
+        let attr2 = el.attributes[i], prefix = attr2.name[0];
+        if (prefix === ":" || prefix === "@") {
+          el.removeAttribute(attr2.name);
+          let expr = prefix === "@" ? `event=>{${attr2.value}}` : attr2.value, names = attr2.name.slice(1).split(prefix);
+          for (let name of names) {
+            if (prefix === "@")
+              name = `on` + name;
+            let dir = secondary[name] || directives_default;
+            updates.push(dir(el, expr, state2, name));
+          }
+        } else
           i++;
-          continue;
-        }
-        el.removeAttribute(attr2.name);
-        let expr = attr2.value;
-        let attrNames = attr2.name.slice(1).split(":");
-        for (let attrName of attrNames) {
-          let dir = secondary[attrName] || directives_default;
-          updates.push(dir(el, expr, state2, attrName));
-        }
       }
     }
     for (let i = 0, child; child = el.children[i]; i++) {