sprae 5.2.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.2.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

@@ -225,13 +225,14 @@
     - slows down domdiff
     - can be solved as `<x :if="xxx" :="xxx && (...)'">` automatically
 
-## [x] :onmount/onunmount? -> for now no reasons
+## [ ] :onmount/onunmount? ->
 
   + useful for :if, :each
   + useful to dispose listeners via :onunmount (opposed to hidden symbols)
   - doesn't really solve disposal: if element is attached again, it would need to reattach removed listeners
     -> can be dolved via teardowns returned from updators
     -> nah, event listeners don't need collection, just make sure no refs to element remain
+  + can be useful for lazy-loadings
 
 ## [x] :focus="direct code", :evt="direct code" -> nah, too messy.
 
@@ -374,7 +375,63 @@
     - still need that syntax for filters, maps etc
   + can be made async by default
   - illicit `event` object
+    + we don't seem to ever need that event argument, many cases are covered by `.prevent` or `.stop`
+    ~+ generally `e=>` seem to conflict logically with modifiers sense
+  + `e=>` brings syntax burden - we may not ever need functions
+    + 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
 
@@ -501,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,32 +2,24 @@
 
 > DOM microhydration with `:` attributes.
 
-_Sprae_ is tiny progressive enhancement lib, a minimal essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue) or [template-parts](https://github.com/github/template-parts) with improved ergonomics. It enables simple markup logic without external scripts. Perfect for small websites or prototypes.
+_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.
 
-## Install
+## Use
+
+### Autoinit
 
-To autoinit on document, include [`sprae.auto.js`](./sprae.auto.js):
+To autoinit document, include [`sprae.auto.js`](./sprae.auto.js):
 
 ```html
 <!-- <script src="https://cdn.jsdelivr.net/npm/sprae/sprae.auto.js" defer></script> -->
 <script src="./path/to/sprae.auto.js" defer></script>
 
-<a :each="id in ['a','b','c']" :href="`#${id}`"></a>
+<a :each="id in ['a','b','c']" :href="`#${id}`" :text="id"></a>
 ```
 
-To use as module, import [`sprae.js`](./sprae.js):
+### Manual init
 
-```html
-<script type="module">
-  // import sprae from 'https://cdn.jsdelivr.net/npm/sprae/sprae.js';
-  import sprae from './path/to/sprae.js';
-  sprae(el, {foo: 'bar'});
-</script>
-```
-
-## Use
-
-Sprae evaluates attributes starting with `:`:
+To use as module, import [`sprae.js`](./sprae.js):
 
 ```html
 <div id="container" :if="user">
@@ -35,15 +27,15 @@ Sprae evaluates attributes starting with `:`:
 </div>
 
 <script type="module">
-  import sprae from 'sprae';
+  // import sprae from 'https://cdn.jsdelivr.net/npm/sprae/sprae.js';
+  import sprae from './path/to/sprae.js';
 
   const state = sprae(container, { user: { displayName: 'Dmitry Ivanov' } });
-  state.user.displayName = 'dy'; // automatically updates DOM
+  state.user.displayName = 'dy'; // updates DOM
 </script>
 ```
 
-* `sprae` initializes container's subtree with data and immediately evaporates `:` attrs.
-* `state` object reflects current values, changing any props rerenders subtree next tick.
+Sprae evaluates `:`-attributes and evaporates them. Reactive `state` reflects current values, can be updated directly.
 
 
 ## Attributes
@@ -68,7 +60,7 @@ Multiply element. `index` value starts from 1.
 <!-- Cases -->
 <li :each="item, idx in list" />
 <li :each="val, key in obj" />
-<li :each="idx1, idx0 in number" />
+<li :each="idx0, idx in number" />
 
 <!-- Loop by condition -->
 <li :if="items" :each="item in items" :text="item" />
@@ -124,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.
@@ -205,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"`
@@ -221,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/>
@@ -253,13 +243,13 @@ To avoid _flash of unstyled content_, you can hide sprae attribute or add a cust
 * Wavearea: [demo](https://dy.github.io/wavearea?src=//cdn.freesound.org/previews/586/586281_2332564-lq.mp3), [code](https://github.com/dy/wavearea)
 * Prostogreen [demo](http://web-being.org/prostogreen/), [code](https://github.com/web-being/prostogreen/)
 
-## Justification
+## 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) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence: perfection is when there's nothing to take away, not add. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.
+* [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 convention of _templize directives_ (_alpine_/_vue_ attrs) and builds upon <del>[_@preact/signals_](https://ghub.io/@preact/signals)</del> simple reactive state.
+_Sprae_ takes idea of _templize directives_/_alpine_/_vue_ attrs and builds upon <del>[_@preact/signals_](https://ghub.io/@preact/signals)</del> simple reactive state.
 
 * It doesn't break or modify static html markup.
 * It falls back to element content if uninitialized.

package/sprae.auto.js

@@ -223,12 +223,6 @@
       }
     };
   };
-  primary["with"] = (el, expr, rootState) => {
-    let evaluate = parseExpr(el, expr, ":with");
-    const localState = evaluate(rootState);
-    let state2 = state(localState, rootState);
-    sprae(el, state2);
-  };
   var _each = Symbol(":each");
   primary["each"] = (tpl, expr) => {
     let each = parseForExpression(expr);
@@ -249,7 +243,7 @@
       if (!list)
         list = [];
       else if (typeof list === "number")
-        list = Array.from({ length: list }, (_, i) => [i, i + 1]);
+        list = Array.from({ length: list }, (_, i) => [i + 1, i]);
       else if (Array.isArray(list))
         list = list.map((item, i) => [i + 1, item]);
       else if (typeof list === "object")
@@ -279,6 +273,12 @@
       }
     };
   };
+  primary["with"] = (el, expr, rootState) => {
+    let evaluate = parseExpr(el, expr, ":with");
+    const localState = evaluate(rootState);
+    let state2 = state(localState, rootState);
+    sprae(el, state2);
+  };
   primary["ref"] = (el, expr, state2) => {
     state2[expr] = el;
   };
@@ -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))}},g.with=(e,t,r)=>{const n=j(e,t,":with")(r);O(e,p(n,r))};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,t+1])):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.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)})();