sprae 3.1.0 → 4.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
@@ -23,9 +23,11 @@
   },
   "scripts": {
     "test": "node -r ./test/register.cjs test/test.js",
-    "build": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm && npm run min",
+    "build": "npm run build-esm && npm run build-iife && npm run min",
+    "build-esm": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm",
+    "build-iife": "esbuild --bundle ./src/index.js --outfile=sprae.auto.js --format=iife",
     "watch": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm --sourcemap --watch",
-    "min": "terser sprae.js -o sprae.min.js --module -c passes=3 -m"
+    "min": "terser sprae.js -o sprae.min.js --module -c passes=3 -m && terser sprae.auto.js -o sprae.auto.min.js --module -c passes=3 -m"
   },
   "repository": {
     "type": "git",

package/r&d.md

@@ -474,6 +474,7 @@
   * [ ] x.raf="abc" - run regularly?
   * [ ] x.watch-a-b-c - update by change of any of the deps
   * [ ] :x.always - update by _any_ dep change
+  * [ ] :class.active="active"
 
 ## [x] Writing props on elements (like ones in :each) -> nah, just use `:x="this.x=abc"`
 
@@ -526,3 +527,8 @@
 
   1. :use="ref-id"
   2. :
+
+## [x] Remove non-essential directives -> yep, less API friction
+  * :aria - can be defined via plain attributes
+  * :data - confusable with :scope, doesn't provide much value, can be used as `:data-x=""` etc
+  * :={} - what's the meaning? Can be replaced with multiple attributes, no? No: no easy way to spread attributes.

package/readme.md

@@ -1,11 +1,35 @@
 # ∴ spræ [![tests](https://github.com/dy/sprae/actions/workflows/node.js.yml/badge.svg)](https://github.com/dy/sprae/actions/workflows/node.js.yml) [![size](https://img.shields.io/bundlephobia/minzip/sprae?label=size)](https://bundlephobia.com/result?p=sprae) [![npm](https://img.shields.io/npm/v/sprae?color=orange)](https://npmjs.org/sprae)
 
-> DOM microhydration with `:` attributes
+> 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.
 
-## Usage
+## Install
 
-Sprae defines attributes starting with `:` as directives:
+To autoinit on 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>
+
+<div :scope="{foo:'bar'}">
+  <span :text="foo"></span>
+</div>
+```
+
+To use as module, import [`sprae.js`](./sprae.js):
+
+```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 `:`:
 
 ```html
 <div id="container" :if="user">
@@ -20,30 +44,28 @@ Sprae defines attributes starting with `:` as directives:
 </script>
 ```
 
-* `sprae` initializes subtree with data and immediately evaporates `:` attrs.
-* `state` is object reflecting current values, changing any of its props rerenders subtree.
-* To batch-update multiple properties `sprae` can be run repeatedly as: `sprae(container, newValues)`
+* `sprae` initializes container's subtree with data and immediately evaporates `:` attrs.
+* `state` object reflects current values, changing any props rerenders subtree next tick.
 
-<!--
-<details>
-<summary><strong>Autoinit</strong></summary>
 
-sprae can be used without build step or JS, autoinitializing document:
+## Attributes
 
-```html
-<script src="./sprae.js" defer init="{ count: 0 }"></script>
+#### `:scope="data"`
 
-<span :text="count">
-<button :on="{ click: e => count++ }">inc</button>
-```
+Define or extend data scope for a subtree.
 
-* `:with` defines data for regions of the tree to autoinit sprae on.
-* `init` attribute tells sprae to automatically initialize document.
+```html
+<!-- Inline data -->
+<x :scope="{ foo: 'bar' }" :text="foo"></x>
 
-</details>
--->
+<!-- External data -->
+<y :scope="data"></y>
 
-## Attributes
+<!-- Extend scope -->
+<x :scope="{ foo: 'bar' }">
+  <y :scope="{ baz: 'qux' }" :text="foo + baz"></y>
+</x>
+```
 
 #### `:if="condition"`, `:else`
 
@@ -90,17 +112,17 @@ Welcome, <span :text="user.name">Guest</span>.
 
 #### `:class="value"`
 
-Set class value from either string, array or object. Appends existing `class` attribute, if any.
+Set class value from either string, array or object. Extends existing `class` attribute, if any.
 
 ```html
 <div :class="`foo ${bar}`"></div>
-<div :class="['foo', 'bar']"></div>
-<div :class="{foo: true, bar: false}"></div>
 
-<div class="a" :class="['b', 'c']"></div>
-<!--
-<div class="a b c"></div>
--->
+<!-- extend existing class -->
+<div class="foo" :class="`bar`"></div>
+<!-- <div class="foo bar"></div> -->
+
+<!-- object with values -->
+<div :class="{foo:true, bar: false}"></div>
 ```
 
 #### `:style="value"`
@@ -183,54 +205,10 @@ Add event listeners.
 * `.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).
 
-#### `:data="values"`
-
-Set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes. CamelCase is converted to dash-case.
-
-```html
-<input :data="{foo: 1, barBaz: true}" />
-<!--
-<input data-foo="1" data-bar-baz="true" />
--->
-```
-
-#### `:aria="values"`
-
-Set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes. Boolean values are stringified.
-
-```html
-<input role="combobox" :aria="{
-  controls: 'joketypes',
-  autocomplete: 'list',
-  expanded: false,
-  activeOption: 'item1',
-  activedescendant: ''
-}" />
-<!--
-<input role="combobox" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">
--->
-```
-
-#### `:with="data"`
-
-Define variables for a subtree fragment scope.
-
-```html
-<!-- Inline data -->
-<x :with="{ foo: 'bar' }" :text="foo"></x>
-
-<!-- External data -->
-<y :with="data"></y>
-
-<!-- Transparency -->
-<x :with="{ foo: 'bar' }">
-  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
-</x>
-```
 
 #### `:ref="id"`
 
-Expose element to data scope with the `id`:
+Expose element to current data scope with the `id`:
 
 ```html
 <!-- single item -->
@@ -255,27 +233,23 @@ Expose element to data scope with the `id`:
 ## Sandbox
 
 Expressions are sandboxed, ie. have no access to global or window (since sprae can be run in server environment).
-
 Default sandbox provides: _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _console_.
-
-Sandbox can be extended via `Object.assign(sprae.globals, { BigInt, window, document })` etc.
+Sandbox can be extended as `Object.assign(sprae.globals, { BigInt, window, document })` etc.
 
 ## Examples
 
 * TODO MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.html)
-* Waveplay: [demo](https://dy.github.io/waveplay), [code](https://github.com/dy/waveedit)
+* Wavearea: [demo](https://dy.github.io/wavearea?src=//cdn.freesound.org/previews/586/586281_2332564-lq.mp3), [code](https://github.com/dy/wavearea)
 
 ## Justification
 
-_Sprae_ is lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [templize](https://github.com/dy/templize) or JSX with better ergonomics.
-
 * [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.
 * 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 [_@preact/signals_](https://ghub.io/@preact/signals).
+_Sprae_ takes convention of _templize directives_ (_alpine_/_vue_ attrs) and builds upon <del>[_@preact/signals_](https://ghub.io/@preact/signals)</del> simple reacti.
 
-* It doesn't break static html markup.
+* It doesn't break or modify initial static html markup.
 * It falls back to element content if uninitialized.
 * It doesn't enforce SPA nor JSX.
 * It enables island hydration.
@@ -284,7 +258,6 @@ _Sprae_ takes convention of _templize directives_ (_alpine_/_vue_ attrs) and bui
 * Input data may contain [signals](https://ghub.io/@preact/signals) or [reactive values](https://ghub.io/sube).
 * Elements / data API is open and enable easy interop.
 
-
 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

@@ -0,0 +1,617 @@
+(() => {
+  // src/state.js
+  var currentFx;
+  var batch = /* @__PURE__ */ new Set();
+  var pendingUpdate;
+  var targetFxs = /* @__PURE__ */ new WeakMap();
+  var targetProxy = /* @__PURE__ */ new WeakMap();
+  var proxyTarget = /* @__PURE__ */ new WeakMap();
+  var _parent = Symbol("parent");
+  var sandbox = {
+    Array,
+    Object,
+    Number,
+    String,
+    Boolean,
+    Date,
+    console
+  };
+  var handler = {
+    has() {
+      return true;
+    },
+    get(target, prop) {
+      if (typeof prop === "symbol")
+        return target[prop];
+      if (!(prop in target))
+        return target[_parent]?.[prop];
+      if (Array.isArray(target) && prop in Array.prototype)
+        return target[prop];
+      let value = target[prop];
+      if (currentFx) {
+        let propFxs = targetFxs.get(target);
+        if (!propFxs)
+          targetFxs.set(target, propFxs = {});
+        if (!propFxs[prop])
+          propFxs[prop] = [currentFx];
+        else if (!propFxs[prop].includes(currentFx))
+          propFxs[prop].push(currentFx);
+      }
+      if (value && value.constructor === Object || Array.isArray(value)) {
+        let proxy = targetProxy.get(value);
+        if (!proxy)
+          targetProxy.set(value, proxy = new Proxy(value, handler));
+        return proxy;
+      }
+      return value;
+    },
+    set(target, prop, value) {
+      if (!(prop in target) && (target[_parent] && prop in target[_parent]))
+        return target[_parent][prop] = value;
+      if (Array.isArray(target) && prop in Array.prototype)
+        return target[prop] = value;
+      const prev = target[prop];
+      if (Object.is(prev, value))
+        return true;
+      target[prop] = value;
+      let propFxs = targetFxs.get(target)?.[prop];
+      if (propFxs)
+        for (let fx2 of propFxs)
+          batch.add(fx2);
+      planUpdate();
+      return true;
+    },
+    deleteProperty(target, prop) {
+      target[prop] = void 0;
+      delete target[prop];
+      return true;
+    }
+  };
+  var state = (obj, parent) => {
+    if (targetProxy.has(obj))
+      return targetProxy.get(obj);
+    if (proxyTarget.has(obj))
+      return obj;
+    let proxy = new Proxy(obj, handler);
+    targetProxy.set(obj, proxy);
+    proxyTarget.set(proxy, obj);
+    obj[_parent] = parent ? state(parent) : sandbox;
+    return proxy;
+  };
+  var fx = (fn) => {
+    const call = () => {
+      let prev = currentFx;
+      currentFx = call;
+      fn();
+      currentFx = prev;
+    };
+    call();
+    return call;
+  };
+  var planUpdate = () => {
+    if (!pendingUpdate) {
+      pendingUpdate = true;
+      queueMicrotask(() => {
+        for (let fx2 of batch)
+          fx2.call();
+        batch.clear();
+        pendingUpdate = false;
+      });
+    }
+  };
+
+  // src/domdiff.js
+  function domdiff_default(parent, a, b, before) {
+    const aIdx = /* @__PURE__ */ new Map();
+    const bIdx = /* @__PURE__ */ new Map();
+    let i;
+    let j;
+    for (i = 0; i < a.length; i++) {
+      aIdx.set(a[i], i);
+    }
+    for (i = 0; i < b.length; i++) {
+      bIdx.set(b[i], i);
+    }
+    for (i = j = 0; i !== a.length || j !== b.length; ) {
+      var aElm = a[i], bElm = b[j];
+      if (aElm === null) {
+        i++;
+      } else if (b.length <= j) {
+        parent.removeChild(a[i]);
+        i++;
+      } else if (a.length <= i) {
+        parent.insertBefore(bElm, a[i] || before);
+        j++;
+      } else if (aElm === bElm) {
+        i++;
+        j++;
+      } else {
+        var curElmInNew = bIdx.get(aElm);
+        var wantedElmInOld = aIdx.get(bElm);
+        if (curElmInNew === void 0) {
+          parent.removeChild(a[i]);
+          i++;
+        } else if (wantedElmInOld === void 0) {
+          parent.insertBefore(
+            bElm,
+            a[i] || before
+          );
+          j++;
+        } else {
+          parent.insertBefore(
+            a[wantedElmInOld],
+            a[i] || before
+          );
+          a[wantedElmInOld] = null;
+          if (wantedElmInOld > i + 1)
+            i++;
+          j++;
+        }
+      }
+    }
+    return b;
+  }
+
+  // src/weakish-map.js
+  var refs = /* @__PURE__ */ new WeakMap();
+  var set = (value) => {
+    const ref = new WeakRef(value);
+    refs.set(value, ref);
+    return ref;
+  };
+  var get = (value) => refs.get(value) || set(value);
+  var WeakishMap = class extends Map {
+    #registry = new FinalizationRegistry((key) => super.delete(key));
+    get size() {
+      return [...this].length;
+    }
+    constructor(entries = []) {
+      super();
+      for (const [key, value] of entries)
+        this.set(key, value);
+    }
+    get(key) {
+      return super.get(key)?.deref();
+    }
+    set(key, value) {
+      let ref = super.get(key);
+      if (ref)
+        this.#registry.unregister(ref);
+      ref = get(value);
+      this.#registry.register(value, key, ref);
+      return super.set(key, ref);
+    }
+  };
+
+  // src/directives.js
+  var primary = {};
+  var secondary = {};
+  primary["if"] = (el, expr) => {
+    let holder = document.createTextNode(""), clauses = [parseExpr(el, expr, ":if")], els = [el], cur = el;
+    while (cur = el.nextElementSibling) {
+      if (cur.hasAttribute(":else")) {
+        cur.removeAttribute(":else");
+        if (expr = cur.getAttribute(":if")) {
+          cur.removeAttribute(":if"), cur.remove();
+          els.push(cur);
+          clauses.push(parseExpr(el, expr, ":else :if"));
+        } else {
+          cur.remove();
+          els.push(cur);
+          clauses.push(() => 1);
+        }
+      } else
+        break;
+    }
+    el.replaceWith(cur = holder);
+    return (state2) => {
+      let i = clauses.findIndex((f) => f(state2));
+      if (els[i] != cur) {
+        ;
+        (cur[_each] || cur).replaceWith(cur = els[i] || holder);
+        sprae(cur, state2);
+      }
+    };
+  };
+  primary["scope"] = (el, expr, rootState) => {
+    let evaluate = parseExpr(el, expr, "scope");
+    const localState = evaluate(rootState);
+    let state2 = state(localState, rootState);
+    sprae(el, state2);
+  };
+  var _each = Symbol(":each");
+  primary["each"] = (tpl, expr) => {
+    let each = parseForExpression(expr);
+    if (!each)
+      return exprError(new Error(), tpl, expr);
+    const holder = tpl[_each] = document.createTextNode("");
+    tpl.replaceWith(holder);
+    const evaluate = parseExpr(tpl, each[2], ":each");
+    const keyExpr = tpl.getAttribute(":key");
+    const itemKey = keyExpr ? parseExpr(null, keyExpr) : null;
+    tpl.removeAttribute(":key");
+    const refExpr = tpl.getAttribute(":ref");
+    const scopes = new WeakishMap();
+    const itemEls = new WeakishMap();
+    let curEls = [];
+    return (state2) => {
+      let list = evaluate(state2);
+      if (!list)
+        list = [];
+      else if (typeof list === "number")
+        list = Array.from({ length: list }, (_, i) => [i, i + 1]);
+      else if (Array.isArray(list))
+        list = list.map((item, i) => [i + 1, item]);
+      else if (typeof list === "object")
+        list = Object.entries(list);
+      else
+        exprError(Error("Bad list value"), tpl, expr, ":each", list);
+      let newEls = [], elScopes = [];
+      for (let [idx, item] of list) {
+        let el, scope, key = itemKey?.({ [each[0]]: item, [each[1]]: idx });
+        if (key == null)
+          el = tpl.cloneNode(true);
+        else
+          (el = itemEls.get(key)) || itemEls.set(key, el = tpl.cloneNode(true));
+        newEls.push(el);
+        if (key == null || !(scope = scopes.get(key))) {
+          scope = state({ [each[0]]: item, [refExpr || ""]: null, [each[1]]: idx }, state2);
+          if (key != null)
+            scopes.set(key, scope);
+        } else
+          scope[each[0]] = item;
+        elScopes.push(scope);
+      }
+      domdiff_default(holder.parentNode, curEls, newEls, holder);
+      curEls = newEls;
+      for (let i = 0; i < newEls.length; i++) {
+        sprae(newEls[i], elScopes[i]);
+      }
+    };
+  };
+  function parseForExpression(expression) {
+    let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
+    let stripParensRE = /^\s*\(|\)\s*$/g;
+    let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+    let inMatch = expression.match(forAliasRE);
+    if (!inMatch)
+      return;
+    let items = inMatch[2].trim();
+    let item = inMatch[1].replace(stripParensRE, "").trim();
+    let iteratorMatch = item.match(forIteratorRE);
+    if (iteratorMatch)
+      return [
+        item.replace(forIteratorRE, "").trim(),
+        iteratorMatch[1].trim(),
+        items
+      ];
+    return [item, "", items];
+  }
+  secondary["ref"] = (el, expr, state2) => {
+    state2[expr] = el;
+  };
+  secondary["id"] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":id");
+    const update = (v) => el.id = v || v === 0 ? v : "";
+    return (state2) => update(evaluate(state2));
+  };
+  secondary["class"] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":class");
+    let initClassName = el.className;
+    return (state2) => {
+      let v = evaluate(state2);
+      let className = typeof v === "string" ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k, v2]) => v2 ? k : "")).filter(Boolean).join(" ");
+      el.className = [initClassName, className].filter(Boolean).join(" ");
+    };
+  };
+  secondary["style"] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":style");
+    let initStyle = el.getAttribute("style") || "";
+    if (!initStyle.endsWith(";"))
+      initStyle += "; ";
+    return (state2) => {
+      let v = evaluate(state2);
+      if (typeof v === "string")
+        el.setAttribute("style", initStyle + v);
+      else {
+        el.setAttribute("style", initStyle);
+        for (let k in v)
+          el.style.setProperty(k, v[k]);
+      }
+    };
+  };
+  secondary["text"] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":text");
+    return (state2) => {
+      let value = evaluate(state2);
+      el.textContent = value == null ? "" : value;
+    };
+  };
+  secondary[""] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":");
+    if (evaluate)
+      return (state2) => {
+        let value = evaluate(state2);
+        for (let key in value)
+          attr(el, dashcase(key), value[key]);
+      };
+  };
+  secondary["value"] = (el, expr) => {
+    let evaluate = parseExpr(el, expr, ":value");
+    let from, to;
+    let update = el.type === "text" || el.type === "" ? (value) => el.setAttribute("value", el.value = value == null ? "" : value) : el.tagName === "TEXTAREA" || el.type === "text" || el.type === "" ? (value) => (from = el.selectionStart, to = el.selectionEnd, el.setAttribute("value", el.value = value == null ? "" : value), from && el.setSelectionRange(from, to)) : el.type === "checkbox" ? (value) => (el.value = value ? "on" : "", attr(el, "checked", value)) : el.type === "select-one" ? (value) => {
+      for (let option in el.options)
+        option.removeAttribute("selected");
+      el.value = value;
+      el.selectedOptions[0]?.setAttribute("selected", "");
+    } : (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);
+    if (!evaluate)
+      return;
+    if (evt)
+      return (state3) => {
+        let value = evaluate(state3) || (() => {
+        });
+        return on(el, evt, value);
+      };
+    return (state3) => attr(el, name, evaluate(state3));
+  };
+  var on = (target, evt, origFn) => {
+    if (!origFn)
+      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);
+    }
+    ;
+  };
+  var mods = {
+    prevent(ctx) {
+      ctx.prevent = true;
+    },
+    stop(ctx) {
+      ctx.stop = true;
+    },
+    once(ctx) {
+      ctx.once = true;
+    },
+    passive(ctx) {
+      ctx.passive = true;
+    },
+    capture(ctx) {
+      ctx.capture = true;
+    },
+    window(ctx) {
+      ctx.target = window;
+    },
+    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);
+    },
+    debounce(ctx, wait) {
+      ctx.defer = (fn) => debounce(fn, wait ? Number(wait) || 0 : 108);
+    },
+    outside: (ctx) => (e) => {
+      let target = ctx.target;
+      if (target.contains(e.target))
+        return false;
+      if (e.target.isConnected === false)
+        return false;
+      if (target.offsetWidth < 1 && target.offsetHeight < 1)
+        return false;
+      return true;
+    },
+    self: (ctx) => (e) => e.target === ctx.target,
+    ctrl: (ctx, ...param) => (e) => keys.ctrl(e) && param.every((p) => keys[p] ? keys[p](e) : e.key === p),
+    shift: (ctx, ...param) => (e) => keys.shift(e) && param.every((p) => keys[p] ? keys[p](e) : e.key === p),
+    alt: (ctx, ...param) => (e) => keys.alt(e) && param.every((p) => keys[p] ? keys[p](e) : e.key === p),
+    meta: (ctx, ...param) => (e) => keys.meta(e) && param.every((p) => keys[p] ? keys[p](e) : e.key === p),
+    arrow: (ctx) => keys.arrow,
+    enter: (ctx) => keys.enter,
+    escape: (ctx) => keys.escape,
+    tab: (ctx) => keys.tab,
+    space: (ctx) => keys.space,
+    backspace: (ctx) => keys.backspace,
+    delete: (ctx) => keys.delete,
+    digit: (ctx) => keys.digit,
+    letter: (ctx) => keys.letter,
+    character: (ctx) => keys.character
+  };
+  var keys = {
+    ctrl: (e) => e.ctrlKey || e.key === "Control" || e.key === "Ctrl",
+    shift: (e) => e.shiftKey || e.key === "Shift",
+    alt: (e) => e.altKey || e.key === "Alt",
+    meta: (e) => e.metaKey || e.key === "Meta" || e.key === "Command",
+    arrow: (e) => e.key.startsWith("Arrow"),
+    enter: (e) => e.key === "Enter",
+    escape: (e) => e.key.startsWith("Esc"),
+    tab: (e) => e.key === "Tab",
+    space: (e) => e.key === "\xA0" || e.key === "Space" || e.key === " ",
+    backspace: (e) => e.key === "Backspace",
+    delete: (e) => e.key === "Delete",
+    digit: (e) => /^\d$/.test(e.key),
+    letter: (e) => /^[a-zA-Z]$/.test(e.key),
+    character: (e) => /^\S$/.test(e.key)
+  };
+  var throttle = (fn, limit) => {
+    let pause, planned, block = (e) => {
+      pause = true;
+      setTimeout(() => {
+        pause = false;
+        if (planned)
+          return planned = false, block(e), fn(e);
+      }, limit);
+    };
+    return (e) => {
+      if (pause)
+        return planned = true;
+      block(e);
+      return fn(e);
+    };
+  };
+  var debounce = (fn, wait) => {
+    let timeout;
+    return (e) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        timeout = null;
+        fn(e);
+      }, wait);
+    };
+  };
+  var attr = (el, name, v) => {
+    if (v == null || v === false)
+      el.removeAttribute(name);
+    else
+      el.setAttribute(name, v === true ? "" : typeof v === "number" || typeof v === "string" ? v : "");
+  };
+  var evaluatorMemo = {};
+  function parseExpr(el, expression, dir) {
+    let evaluate = evaluatorMemo[expression];
+    if (!evaluate) {
+      let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /\b(let|const)\s/.test(expression) && !dir.startsWith(":on") ? `(() => {${expression}})()` : expression;
+      try {
+        evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { return ${rightSideSafeExpression.trim()} };`);
+      } catch (e) {
+        return exprError(e, el, expression, dir);
+      }
+    }
+    return (state2) => {
+      let result;
+      try {
+        result = evaluate.call(el, state2);
+      } catch (e) {
+        return exprError(e, el, expression, dir);
+      }
+      return result;
+    };
+  }
+  function exprError(error, element, expression, dir) {
+    Object.assign(error, { element, expression });
+    console.warn(`\u2234 ${error.message}
+
+${dir}=${expression ? `"${expression}"
+
+` : ""}`, element);
+    queueMicrotask(() => {
+      throw error;
+    }, 0);
+  }
+  function dashcase(str) {
+    return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase());
+  }
+
+  // src/core.js
+  sprae.globals = sandbox;
+  var memo = /* @__PURE__ */ new WeakMap();
+  function sprae(container, values) {
+    if (!container.children)
+      return;
+    if (memo.has(container))
+      return Object.assign(memo.get(container), values);
+    const state2 = state(values || {});
+    const updates = [];
+    const init = (el, parent = el.parentNode) => {
+      for (let name in primary) {
+        let attrName = ":" + name;
+        if (el.hasAttribute?.(attrName)) {
+          let expr = el.getAttribute(attrName);
+          el.removeAttribute(attrName);
+          updates.push(primary[name](el, expr, state2, name));
+          if (memo.has(el) || el.parentNode !== parent)
+            return false;
+        }
+      }
+      if (el.attributes) {
+        for (let i = 0; i < el.attributes.length; ) {
+          let attr2 = el.attributes[i];
+          if (attr2.name[0] !== ":") {
+            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));
+            if (memo.has(el) || el.parentNode !== parent)
+              return false;
+          }
+        }
+      }
+      for (let i = 0, child; child = el.children[i]; i++) {
+        if (init(child, el) === false)
+          i--;
+      }
+    };
+    init(container);
+    for (let update of updates)
+      if (update) {
+        let teardown;
+        fx(() => {
+          if (typeof teardown === "function")
+            teardown();
+          teardown = update(state2);
+        });
+      }
+    memo.set(container, state2);
+    return state2;
+  }
+
+  // src/index.js
+  var src_default = sprae;
+  if (document.currentScript)
+    sprae(document.documentElement);
+})();

package/sprae.auto.min.js

@@ -0,0 +1 @@
+(()=>{var e,t,r=new Set,n=new WeakMap,l=new WeakMap,s=new WeakMap,i=Symbol("parent"),a={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},o={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[i]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];let s=t[r];if(e){let l=n.get(t);l||n.set(t,l={}),l[r]?l[r].includes(e)||l[r].push(e):l[r]=[e]}if(s&&s.constructor===Object||Array.isArray(s)){let e=l.get(s);return e||l.set(s,e=new Proxy(s,o)),e}return s},set(e,t,l){if(!(t in e)&&e[i]&&t in e[i])return e[i][t]=l;if(Array.isArray(e)&&t in Array.prototype)return e[t]=l;const s=e[t];if(Object.is(s,l))return!0;e[t]=l;let a=n.get(e)?.[t];if(a)for(let e of a)r.add(e);return f(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},u=(e,t)=>{if(l.has(e))return l.get(e);if(s.has(e))return e;let r=new Proxy(e,o);return l.set(e,r),s.set(r,e),e[i]=t?u(t):a,r},c=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},f=()=>{t||(t=!0,queueMicrotask((()=>{for(let e of r)e.call();r.clear(),t=!1})))},p=new WeakMap,y=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=>p.get(e)||(e=>{const t=new WeakRef(e);return p.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},g={},h={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[x(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(x(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[d]||s).replaceWith(s=l[t]||r),j(s,e))}},g.scope=(e,t,r)=>{const n=x(e,t,"scope")(r);j(e,u(n,r))};var d=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 S(new Error,e,t);const n=e[d]=document.createTextNode("");e.replaceWith(n);const l=x(e,r[2],":each"),s=e.getAttribute(":key"),i=s?x(null,s):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),o=new y,c=new y;let f=[];return s=>{let p=l(s);p?"number"==typeof p?p=Array.from({length:p},((e,t)=>[t,t+1])):Array.isArray(p)?p=p.map(((e,t)=>[t+1,e])):"object"==typeof p?p=Object.entries(p):S(Error("Bad list value"),e,t,":each"):p=[];let y=[],g=[];for(let[t,n]of p){let l,f,p=i?.({[r[0]]:n,[r[1]]:t});null==p?l=e.cloneNode(!0):(l=c.get(p))||c.set(p,l=e.cloneNode(!0)),y.push(l),null!=p&&(f=o.get(p))?f[r[0]]=n:(f=u({[r[0]]:n,[a||""]:null,[r[1]]:t},s),null!=p&&o.set(p,f)),g.push(f)}!function(e,t,r,n){const l=new Map,s=new Map;let i,a;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=a=0;i!==t.length||a!==r.length;){var o=t[i],u=r[a];if(null===o)i++;else if(r.length<=a)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),a++;else if(o===u)i++,a++;else{var c=s.get(o),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),a++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,a++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)j(y[e],g[e])}},h.ref=(e,t,r)=>{r[t]=e},h.id=(e,t)=>{let r=x(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},h.class=(e,t)=>{let r=x(e,t,":class"),n=e.className;return t=>{let l=r(t),s="string"==typeof l?l:(Array.isArray(l)?l:Object.entries(l).map((([e,t])=>t?e:""))).filter(Boolean).join(" ");e.className=[n,s].filter(Boolean).join(" ")}},h.style=(e,t)=>{let r=x(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])}}},h.text=(e,t)=>{let r=x(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},h[""]=(e,t)=>{let r=x(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)W(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},h.value=(e,t)=>{let r,n,l=x(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":"",W(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))},h.on=(e,t)=>{let r=x(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(b(e,t,n[t]));return()=>{for(let e of l)e()}}};var m=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=x(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return b(e,l,r)}:t=>W(e,n,s(t))},b=(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=v[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 a=t.call(e,i);"function"!=typeof a&&(a=()=>{}),r+1<n.length&&l(a,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,...a}){l&&(e=l(e));let o=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,o,a),()=>r.removeEventListener(t,o,a)}},v={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=>A.ctrl(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),shift:(e,...t)=>e=>A.shift(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),alt:(e,...t)=>e=>A.alt(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),meta:(e,...t)=>e=>A.meta(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),arrow:e=>A.arrow,enter:e=>A.enter,escape:e=>A.escape,tab:e=>A.tab,space:e=>A.space,backspace:e=>A.backspace,delete:e=>A.delete,digit:e=>A.digit,letter:e=>A.letter,character:e=>A.character},A={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)}},W=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},N={};function x(e,t,r){let n=N[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=N[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return S(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return S(n,e,t,r)}return s}}function S(e,t,r,n){Object.assign(e,{element:t,expression:r}),console.warn(`∴ ${e.message}\n\n${n}=${r?`"${r}"\n\n`:""}`,t),queueMicrotask((()=>{throw e}),0)}j.globals=a;var E=new WeakMap;function j(e,t){if(!e.children)return;if(E.has(e))return Object.assign(E.get(e),t);const r=u(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)),E.has(e)||e.parentNode!==t)return!1}}if(e.attributes)for(let l=0;l<e.attributes.length;){let s=e.attributes[l];if(":"!==s.name[0]){l++;continue}e.removeAttribute(s.name);let i=s.value,a=s.name.slice(1).split(":");for(let l of a){let s=h[l]||m;if(n.push(s(e,i,r,l)),E.has(e)||e.parentNode!==t)return!1}}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;c((()=>{"function"==typeof t&&t(),t=e(r)}))}return E.set(e,r),r}document.currentScript&&j(document.documentElement)})();

package/sprae.js

@@ -212,8 +212,8 @@ primary["if"] = (el, expr) => {
     }
   };
 };
-primary["with"] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, "with");
+primary["scope"] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, "scope");
   const localState = evaluate(rootState);
   let state2 = state(localState, rootState);
   sprae(el, state2);
@@ -326,22 +326,6 @@ secondary["text"] = (el, expr) => {
     el.textContent = value == null ? "" : value;
   };
 };
-secondary["data"] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":data");
-  return (state2) => {
-    let value = evaluate(state2);
-    for (let key in value)
-      el.dataset[key] = value[key];
-  };
-};
-secondary["aria"] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":aria");
-  const update = (value) => {
-    for (let key in value)
-      attr(el, "aria-" + dashcase(key), value[key] == null ? null : value[key] + "");
-  };
-  return (state2) => update(evaluate(state2));
-};
 secondary[""] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":");
   if (evaluate)
@@ -627,6 +611,8 @@ function sprae(container, values) {
 
 // src/index.js
 var src_default = sprae;
+if (document.currentScript)
+  sprae(document.documentElement);
 export {
   src_default as default
 };

package/sprae.min.js

@@ -1 +1 @@
-var e,t,r=new Set,n=new WeakMap,l=new WeakMap,s=new WeakMap,a=Symbol("parent"),i={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},o={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[a]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];let s=t[r];if(e){let l=n.get(t);l||n.set(t,l={}),l[r]?l[r].includes(e)||l[r].push(e):l[r]=[e]}if(s&&s.constructor===Object||Array.isArray(s)){let e=l.get(s);return e||l.set(s,e=new Proxy(s,o)),e}return s},set(e,t,l){if(!(t in e)&&e[a]&&t in e[a])return e[a][t]=l;if(Array.isArray(e)&&t in Array.prototype)return e[t]=l;const s=e[t];if(Object.is(s,l))return!0;e[t]=l;let i=n.get(e)?.[t];if(i)for(let e of i)r.add(e);return f(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},u=(e,t)=>{if(l.has(e))return l.get(e);if(s.has(e))return e;let r=new Proxy(e,o);return l.set(e,r),s.set(r,e),e[a]=t?u(t):i,r},c=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},f=()=>{t||(t=!0,queueMicrotask((()=>{for(let e of r)e.call();r.clear(),t=!1})))},p=new WeakMap,y=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=>p.get(e)||(e=>{const t=new WeakRef(e);return p.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},h={},g={};h.if=(e,t)=>{let r=document.createTextNode(""),n=[N(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(N(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[d]||s).replaceWith(s=l[t]||r),M(s,e))}},h.with=(e,t,r)=>{const n=N(e,t,"with")(r);M(e,u(n,r))};var d=Symbol(":each");h.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 S(new Error,e,t);const n=e[d]=document.createTextNode("");e.replaceWith(n);const l=N(e,r[2],":each"),s=e.getAttribute(":key"),a=s?N(null,s):null;e.removeAttribute(":key");const i=e.getAttribute(":ref"),o=new y,c=new y;let f=[];return s=>{let p=l(s);p?"number"==typeof p?p=Array.from({length:p},((e,t)=>[t,t+1])):Array.isArray(p)?p=p.map(((e,t)=>[t+1,e])):"object"==typeof p?p=Object.entries(p):S(Error("Bad list value"),e,t,":each"):p=[];let y=[],h=[];for(let[t,n]of p){let l,f,p=a?.({[r[0]]:n,[r[1]]:t});null==p?l=e.cloneNode(!0):(l=c.get(p))||c.set(p,l=e.cloneNode(!0)),y.push(l),null!=p&&(f=o.get(p))?f[r[0]]=n:(f=u({[r[0]]:n,[i||""]:null,[r[1]]:t},s),null!=p&&o.set(p,f)),h.push(f)}!function(e,t,r,n){const l=new Map,s=new Map;let a,i;for(a=0;a<t.length;a++)l.set(t[a],a);for(a=0;a<r.length;a++)s.set(r[a],a);for(a=i=0;a!==t.length||i!==r.length;){var o=t[a],u=r[i];if(null===o)a++;else if(r.length<=i)e.removeChild(t[a]),a++;else if(t.length<=a)e.insertBefore(u,t[a]||n),i++;else if(o===u)a++,i++;else{var c=s.get(o),f=l.get(u);void 0===c?(e.removeChild(t[a]),a++):void 0===f?(e.insertBefore(u,t[a]||n),i++):(e.insertBefore(t[f],t[a]||n),t[f]=null,f>a+1&&a++,i++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)M(y[e],h[e])}},g.ref=(e,t,r)=>{r[t]=e},g.id=(e,t)=>{let r=N(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},g.class=(e,t)=>{let r=N(e,t,":class"),n=e.className;return t=>{let l=r(t),s="string"==typeof l?l:(Array.isArray(l)?l:Object.entries(l).map((([e,t])=>t?e:""))).filter(Boolean).join(" ");e.className=[n,s].filter(Boolean).join(" ")}},g.style=(e,t)=>{let r=N(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])}}},g.text=(e,t)=>{let r=N(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},g.data=(e,t)=>{let r=N(e,t,":data");return t=>{let n=r(t);for(let t in n)e.dataset[t]=n[t]}},g.aria=(e,t)=>{let r=N(e,t,":aria");return t=>(t=>{for(let r in t)W(e,"aria-"+j(r),null==t[r]?null:t[r]+"")})(r(t))},g[""]=(e,t)=>{let r=N(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)W(e,j(t),n[t])}},g.value=(e,t)=>{let r,n,l=N(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":"",W(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))},g.on=(e,t)=>{let r=N(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(b(e,t,n[t]));return()=>{for(let e of l)e()}}};var m=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=N(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return b(e,l,r)}:t=>W(e,n,s(t))},b=(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=v[t]?.(r,...n.split("-"))||r.test,""))),r}));if(1==n.length)return a(r,n[0]);const l=(t,r=0)=>{let s;return s=a((a=>{r&&s();let i=t.call(e,a);"function"!=typeof i&&(i=()=>{}),r+1<n.length&&l(i,r?r+1:1)}),n[r])};let s=l(r);return()=>s();function a(e,{evt:t,target:r,test:n,defer:l,stop:s,prevent:a,...i}){l&&(e=l(e));let o=t=>n(t)&&(s&&t.stopPropagation(),a&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,o,i),()=>r.removeEventListener(t,o,i)}},v={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=>A.ctrl(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),shift:(e,...t)=>e=>A.shift(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),alt:(e,...t)=>e=>A.alt(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),meta:(e,...t)=>e=>A.meta(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),arrow:e=>A.arrow,enter:e=>A.enter,escape:e=>A.escape,tab:e=>A.tab,space:e=>A.space,backspace:e=>A.backspace,delete:e=>A.delete,digit:e=>A.digit,letter:e=>A.letter,character:e=>A.character},A={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)}},W=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},x={};function N(e,t,r){let n=x[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=x[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return S(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return S(n,e,t,r)}return s}}function S(e,t,r,n){Object.assign(e,{element:t,expression:r}),console.warn(`∴ ${e.message}\n\n${n}=${r?`"${r}"\n\n`:""}`,t),queueMicrotask((()=>{throw e}),0)}function j(e){return e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase()))}M.globals=i;var E=new WeakMap;function M(e,t){if(!e.children)return;if(E.has(e))return Object.assign(E.get(e),t);const r=u(t||{}),n=[],l=(e,t=e.parentNode)=>{for(let l in h){let s=":"+l;if(e.hasAttribute?.(s)){let a=e.getAttribute(s);if(e.removeAttribute(s),n.push(h[l](e,a,r,l)),E.has(e)||e.parentNode!==t)return!1}}if(e.attributes)for(let l=0;l<e.attributes.length;){let s=e.attributes[l];if(":"!==s.name[0]){l++;continue}e.removeAttribute(s.name);let a=s.value,i=s.name.slice(1).split(":");for(let l of i){let s=g[l]||m;if(n.push(s(e,a,r,l)),E.has(e)||e.parentNode!==t)return!1}}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;c((()=>{"function"==typeof t&&t(),t=e(r)}))}return E.set(e,r),r}var $=M;export{$ as default};
+var e,t,r=new Set,n=new WeakMap,l=new WeakMap,s=new WeakMap,i=Symbol("parent"),a={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},o={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[i]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];let s=t[r];if(e){let l=n.get(t);l||n.set(t,l={}),l[r]?l[r].includes(e)||l[r].push(e):l[r]=[e]}if(s&&s.constructor===Object||Array.isArray(s)){let e=l.get(s);return e||l.set(s,e=new Proxy(s,o)),e}return s},set(e,t,l){if(!(t in e)&&e[i]&&t in e[i])return e[i][t]=l;if(Array.isArray(e)&&t in Array.prototype)return e[t]=l;const s=e[t];if(Object.is(s,l))return!0;e[t]=l;let a=n.get(e)?.[t];if(a)for(let e of a)r.add(e);return f(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},u=(e,t)=>{if(l.has(e))return l.get(e);if(s.has(e))return e;let r=new Proxy(e,o);return l.set(e,r),s.set(r,e),e[i]=t?u(t):a,r},c=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},f=()=>{t||(t=!0,queueMicrotask((()=>{for(let e of r)e.call();r.clear(),t=!1})))},p=new WeakMap,y=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=>p.get(e)||(e=>{const t=new WeakRef(e);return p.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},g={},h={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[N(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(N(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[d]||s).replaceWith(s=l[t]||r),j(s,e))}},g.scope=(e,t,r)=>{const n=N(e,t,"scope")(r);j(e,u(n,r))};var d=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 S(new Error,e,t);const n=e[d]=document.createTextNode("");e.replaceWith(n);const l=N(e,r[2],":each"),s=e.getAttribute(":key"),i=s?N(null,s):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),o=new y,c=new y;let f=[];return s=>{let p=l(s);p?"number"==typeof p?p=Array.from({length:p},((e,t)=>[t,t+1])):Array.isArray(p)?p=p.map(((e,t)=>[t+1,e])):"object"==typeof p?p=Object.entries(p):S(Error("Bad list value"),e,t,":each"):p=[];let y=[],g=[];for(let[t,n]of p){let l,f,p=i?.({[r[0]]:n,[r[1]]:t});null==p?l=e.cloneNode(!0):(l=c.get(p))||c.set(p,l=e.cloneNode(!0)),y.push(l),null!=p&&(f=o.get(p))?f[r[0]]=n:(f=u({[r[0]]:n,[a||""]:null,[r[1]]:t},s),null!=p&&o.set(p,f)),g.push(f)}!function(e,t,r,n){const l=new Map,s=new Map;let i,a;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=a=0;i!==t.length||a!==r.length;){var o=t[i],u=r[a];if(null===o)i++;else if(r.length<=a)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),a++;else if(o===u)i++,a++;else{var c=s.get(o),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),a++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,a++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)j(y[e],g[e])}},h.ref=(e,t,r)=>{r[t]=e},h.id=(e,t)=>{let r=N(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},h.class=(e,t)=>{let r=N(e,t,":class"),n=e.className;return t=>{let l=r(t),s="string"==typeof l?l:(Array.isArray(l)?l:Object.entries(l).map((([e,t])=>t?e:""))).filter(Boolean).join(" ");e.className=[n,s].filter(Boolean).join(" ")}},h.style=(e,t)=>{let r=N(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])}}},h.text=(e,t)=>{let r=N(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},h[""]=(e,t)=>{let r=N(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)W(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},h.value=(e,t)=>{let r,n,l=N(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":"",W(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))},h.on=(e,t)=>{let r=N(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(b(e,t,n[t]));return()=>{for(let e of l)e()}}};var m=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=N(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return b(e,l,r)}:t=>W(e,n,s(t))},b=(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=v[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 a=t.call(e,i);"function"!=typeof a&&(a=()=>{}),r+1<n.length&&l(a,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,...a}){l&&(e=l(e));let o=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,o,a),()=>r.removeEventListener(t,o,a)}},v={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=>A.ctrl(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),shift:(e,...t)=>e=>A.shift(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),alt:(e,...t)=>e=>A.alt(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),meta:(e,...t)=>e=>A.meta(e)&&t.every((t=>A[t]?A[t](e):e.key===t)),arrow:e=>A.arrow,enter:e=>A.enter,escape:e=>A.escape,tab:e=>A.tab,space:e=>A.space,backspace:e=>A.backspace,delete:e=>A.delete,digit:e=>A.digit,letter:e=>A.letter,character:e=>A.character},A={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)}},W=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},x={};function N(e,t,r){let n=x[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=x[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return S(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return S(n,e,t,r)}return s}}function S(e,t,r,n){Object.assign(e,{element:t,expression:r}),console.warn(`∴ ${e.message}\n\n${n}=${r?`"${r}"\n\n`:""}`,t),queueMicrotask((()=>{throw e}),0)}j.globals=a;var E=new WeakMap;function j(e,t){if(!e.children)return;if(E.has(e))return Object.assign(E.get(e),t);const r=u(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)),E.has(e)||e.parentNode!==t)return!1}}if(e.attributes)for(let l=0;l<e.attributes.length;){let s=e.attributes[l];if(":"!==s.name[0]){l++;continue}e.removeAttribute(s.name);let i=s.value,a=s.name.slice(1).split(":");for(let l of a){let s=h[l]||m;if(n.push(s(e,i,r,l)),E.has(e)||e.parentNode!==t)return!1}}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;c((()=>{"function"==typeof t&&t(),t=e(r)}))}return E.set(e,r),r}var M=j;document.currentScript&&j(document.documentElement);export{M as default};

package/src/directives.js

@@ -10,8 +10,8 @@ export const primary = {}, secondary = {}
 
 
 // :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
-// as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
-// we consider :with={x} :if={x} case insignificant
+// as for :if :scope - :if must init first, since it is lazy, to avoid initializing component ahead of time by :scope
+// we consider :scope={x} :if={x} case insignificant
 primary['if'] = (el, expr) => {
   let holder = document.createTextNode(''),
       clauses = [parseExpr(el, expr, ':if')],
@@ -44,9 +44,9 @@ primary['if'] = (el, expr) => {
   }
 }
 
-// :with must come before :each, but :if has primary importance
-primary['with'] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, 'with')
+// :scope must come before :each, but :if has primary importance
+primary['scope'] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, 'scope')
   const localState = evaluate(rootState)
   let state = createState(localState, rootState)
   // console.log(123, state.foo, state.bar)
@@ -187,23 +187,6 @@ secondary['text'] = (el, expr) => {
   }
 }
 
-secondary['data'] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':data')
-
-  return ((state) => {
-    let value = evaluate(state)
-    for (let key in value) el.dataset[key] = value[key];
-  })
-}
-
-secondary['aria'] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':aria')
-  const update = (value) => {
-    for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
-  }
-  return ((state) => update(evaluate(state)))
-}
-
 // set props in-bulk or run effect
 secondary[''] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':')

package/src/index.js

@@ -3,8 +3,4 @@ import './directives.js';
 export default sprae;
 
 // autoinit
-// NOTE: abandoning for now, since requires a separate non-module JS entry, until use-case appears
-// const s = document.currentScript
-// if (s && s.hasAttribute('init')) {
-//   sprae(document.documentElement)
-// }
+if (document.currentScript) sprae(document.documentElement)

package/test/dom.js

@@ -147,13 +147,13 @@ test.todo('props: semicols in expression', async () => {
 })
 
 
-test('data: base', async () => {
+test.skip('data: base', async () => {
   let el = h`<input :data="{a:1, fooBar:2}"/>`
   let params = sprae(el)
   is(el.outerHTML, `<input data-a="1" data-foo-bar="2">`)
 })
 
-test('aria: base', async () => {
+test.skip('aria: base', async () => {
   let el = h`<input type="text" id="jokes" role="combobox" :aria="{controls:'joketypes', autocomplete:'list', expanded:false, activeOption:'item1', activedescendant:'', xxx:null}"/>`
   sprae(el)
   is(el.outerHTML, `<input type="text" id="jokes" role="combobox" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">`)
@@ -277,8 +277,8 @@ test('if: (#3) subsequent content is not abandoned', async () => {
   is(x.outerHTML, `<x><z>123</z></x>`)
 })
 
-test('if: + :with doesnt prevent secondary effects from happening', async () => {
-  let el = h`<div><x :if="x" :with="{}" :text="x"></x></div>`
+test('if: + :scope doesnt prevent secondary effects from happening', async () => {
+  let el = h`<div><x :if="x" :scope="{}" :text="x"></x></div>`
   let state = sprae(el, {x:''})
   is(el.innerHTML, ``)
   state.x = '123'
@@ -286,7 +286,7 @@ test('if: + :with doesnt prevent secondary effects from happening', async () =>
   is(el.innerHTML, `<x>123</x>`)
 
   // NOTE: we ignore this case
-  // let el2 = h`<div><x :if="x" :with="{x:cond}" :text="x"></x></div>`
+  // let el2 = h`<div><x :if="x" :scope="{x:cond}" :text="x"></x></div>`
   // let state2 = sprae(el, {cond:''})
   // is(el2.innerHTML, ``)
   // state2.cond = '123'
@@ -460,7 +460,7 @@ test('each: condition within loop', async () => {
 
 test('each: next items have own "this", not single one', async () => {
   // FIXME: let el = h`<x :each="x in 3"></x>`
-  let el = h`<div><x :each="x in 3" :data="{x}" :x="log.push(x, this.dataset.x)"></x></div>`
+  let el = h`<div><x :each="x in 3" :data-x="x" :x="log.push(x, this.dataset.x)"></x></div>`
   let log = []
   let state = sprae(el, {log})
   is(state.log, [1,'1',2,'2',3,'3'])
@@ -859,7 +859,7 @@ test('on: modifiers chain', async e => {
 })
 
 test('with: inline', async () => {
-  let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
+  let el = h`<x :scope="{foo:'bar'}"><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
   is(el.innerHTML, `<y>barqux</y>`)
@@ -868,7 +868,7 @@ test('with: inline', async () => {
   is(el.innerHTML, `<y>barquux</y>`)
 })
 test.skip('with: inline reactive', () => {
-  let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
+  let el = h`<x :scope="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let baz = signal('qux')
   sprae(el, {baz})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
@@ -877,7 +877,7 @@ test.skip('with: inline reactive', () => {
   is(el.innerHTML, `<y>barquux</y>`)
 })
 test('with: data', async () => {
-  let el = h`<x :with="x"><y :text="foo"></y></x>`
+  let el = h`<x :scope="x"><y :text="foo"></y></x>`
   let state = sprae(el, {x: {foo:'bar'}})
   is(el.innerHTML, `<y>bar</y>`)
   console.log('update', state.x)
@@ -889,7 +889,7 @@ test('with: data', async () => {
 test('with: transparency', async () => {
   // 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>`
+  let el = h`<x :scope="{foo:'foo'}"><y :scope="b" :text="foo+bar"></y></x>`
   let params = sprae(el, {b:{bar:'bar'}})
   is(el.innerHTML, `<y>foobar</y>`)
   params.b.bar = 'baz'
@@ -897,7 +897,7 @@ test('with: transparency', async () => {
   is(el.innerHTML, `<y>foobaz</y>`)
 })
 test.skip('with: reactive transparency', () => {
-  let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
+  let el = h`<x :scope="{foo:1}"><y :scope="b.c" :text="foo+bar"></y></x>`
   const bar = signal('2')
   sprae(el, {b:{c:{bar}}})
   is(el.innerHTML, `<y>12</y>`)
@@ -905,7 +905,7 @@ test.skip('with: reactive transparency', () => {
   is(el.innerHTML, `<y>13</y>`)
 })
 test('with: writes to state', async () => {
-  let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
+  let a = h`<x :scope="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))
@@ -959,7 +959,7 @@ test(':: scope refers to current element', async () => {
 
 test(':: 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>`
+  let a = h`<x :text="y" :scope="{y:1}" :ref="x"></x>`
   sprae(a, {})
   is(a.outerHTML, `<x>1</x>`)
 })

package/test/index.html

@@ -2,6 +2,11 @@
 <meta charset=utf-8>
 <title>Test</title>
 
+<script defer src="../sprae.auto.js"></script>
+<div :scope="{data:1}">
+  <span :text="data"></span>
+</div>
+
 <script async src="../node_modules/es-module-shims/dist/es-module-shims.js"></script>
 <script type="importmap">
 {
@@ -27,4 +32,4 @@
 }
 </script>
 
-<script src="./test.js" type="module"></script>
+<script src="./test.js" type="module"></script>

package/test/state.js

@@ -239,6 +239,7 @@ t('state: direct list', async () => {
   let sum; fx(()=> sum = list.reduce((sum, item)=>item.x + sum, 0))
   is(sum, 3)
   list[0].x = 2
+  is(list[0].x, 2)
   await tick()
   is(sum, 4)
   list.splice(0, 2, {x:3}, {x:3})

package/todo.md

@@ -8,7 +8,7 @@
 * [x] combinations: :else :if
 * [x] :each :if, :if :each
 * [x] :each :each
-* [x] :with must be able to write state value as well
+* [x] :scope must be able to write state value as well
 * [x] docs: give example to each directive
 * [x] initialize per-element: <x :each><y :if></y><x> - tree-dependent (:each comes first).
 * [x] generalize common attributes :prop="xyz"
@@ -22,7 +22,7 @@
 * [x] bulk events :ona:onb
 * [x] multiprop setter :a:b="c"
 * [x] make `this` in expression an element
-  * ~~[x] replace :ref with :with="this as x"~~
+  * ~~[x] replace :ref with :scope="this as x"~~
 * [x] :ref creates instance in current state, not creates a new state
   * [x] to avoid extending signal-struct, we must collect state data before, and call updates after for extended state
 * [x] optimization: replace element-props with direct (better) setters
@@ -31,11 +31,11 @@
 * ~~[x] report usignal problem~~ author is not really interested
 * [x] `this` doesn't refer to element/scope in event handlers
 * [x] :text="" empty values shouldn't throw
-* [x] implement :with
+* [x] implement :scope
 * [x] update :value without losing focus / position
 * ~~[x] run tiredown if element got removed from condition or loop (free memory)~~ no need just make sure no refs to elements stored
 * [x] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives
-* [x] :if :ref, :if :with -> context setters must come first always
+* [x] :if :ref, :if :scope -> context setters must come first always
 * [x] :style="{'--x':value}"
 * [x] :onkeydown.ctrl-alt-D
 * [ ] frameworks benchmark
@@ -46,4 +46,6 @@
   * [x] once, capture, passive
   * [x] ...rest
 * [x] parallel chains
-* [x] Sandbox
+* [x] Sandbox
+* [x] Autorun
+* [ ] There's some weird bug with attaching event listeners to document, hmmm. Need test case.