sprae 3.1.0 → 5.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "3.1.0",
+  "version": "5.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"`
 
@@ -517,12 +518,59 @@
   ? Some 'or' character `:onclick--onkeydown`
   ? We can redirect to main event, that's it for now
 
-## [ ] Insert content by reusing the node/template,
+## [x] Insert content by reusing the node/template -> use `:render="ref" :with="data"`
 
   * Makes easy use of repeatable fragments, instead of web-components
   + sort-of "detached" for-each
   + reinforces :ref
   ? does it replace element or puts a content?
+  * Refs:
+    * https://github.com/justinfagnani/html-include-element - src=
+    * https://www.npmjs.com/package/imported-template - content=path-to-file
+    * https://github.com/SirPepe/html-import src="content.selector"
+    * https://github.com/Juicy/juicy-html - html="rawhtml"
+    * https://www.npmjs.com/package/html-import-wc - src=path
+    * https://github.com/sashafirsov/slotted-element - src=path-to-htmlor-json
+    * https://github.com/webcomponents/html-imports - href=filepath
+    * https://github.com/giuseppeg/xm - import src=filepath
+    * https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-include-html#link-tag-html-only
+    * https://github.com/maherbo/include-HTML-document-fragment - link href=path
+    * https://github.com/github/include-fragment-element - src=path-to-html
 
   1. :use="ref-id"
-  2. :
+  ```
+  <template :ref="abc" id="abc"><span :text="abc"></span></template>
+
+  <div :use="abc" :with="{abc:'def'}"></div>
+  <div :use="'#abc'" :with="{abc:'def'}"></div>
+  ```
+
+  - `<use>` from SVG replaces element, but we need inserting content
+
+  2. :content="#template-id"
+
+  - conflicts with direct inline content
+
+  3. :include="#template-id"
+
+  - conflicts with path to file
+
+  4. :tpl="#template-id"
+
+  - some confusion of meaning
+
+  5. :render="#template-id"
+
+  + compatible with liquid 5.0
+  + makes sense as :render=a :with=b
+
+  * Let's think consequently.
+    1. `<template>` element has direct purpose for that
+    2. We provide content fallback for unloaded elements in case of `:text` as `<x :text="abc">fallback</x>`
+    3. There's too many ways to implement fetching - ideally we leave that concern out and focus only on including content
+    4. The approach is almost ready declarative custom element. `<template>` is standard part of it - adds to 1.
+
+## [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,33 @@
 # ∴ 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>
+
+<a :each="id in ['a','b','c']" :href="`#${id}`"></a>
+```
+
+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,28 +42,9 @@ 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:
-
-```html
-<script src="./sprae.js" defer init="{ count: 0 }"></script>
-
-<span :text="count">
-<button :on="{ click: e => count++ }">inc</button>
-```
-
-* `:with` defines data for regions of the tree to autoinit sprae on.
-* `init` attribute tells sprae to automatically initialize document.
-
-</details>
--->
 
 ## Attributes
 
@@ -90,17 +93,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"`
@@ -126,7 +129,7 @@ Set value of an input, textarea or select. Takes handle of `checked` and `select
 </select>
 ```
 
-#### `:<prop>="value?"`, `:="props?"`
+#### `:<prop>="value?"`
 
 Set any attribute value or run effect.
 
@@ -137,16 +140,21 @@ Set any attribute value or run effect.
 <!-- Multiple properties -->
 <input :id:name="name" />
 
-<!-- Bulk properties -->
-<input :="{ id: name, name, type:'text', value }" />
+<!-- Effect (triggers any time bar changes) -->
+<div :fx="void bar()" ></div>
+```
+
+#### `:="props?"`
+
+Spread multiple attibures.
 
-<!-- Effects (trigger any time foo or bar changes) -->
-<div :="if (foo) bar()" :fx="void bar()" ></div>
+```html
+<input :="{ id: name, name, type:'text', value }" />
 ```
 
-#### `:on<event>="handler"`, `:on="events"`, `:<in>..<out>="handler"`
+#### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
 
-Add event listeners.
+Add event listener or events chain.
 
 ```html
 <!-- Single event -->
@@ -167,9 +175,6 @@ Add event listeners.
 
 <!-- Event modifiers -->
 <button :onclick.throttle-500="handler">Not too often</button>
-
-<!-- Bulk/custom events -->
-<button :on="{ click: handler, touch: handler, special: handler }">Submit</button>
 ```
 
 ##### Event modifiers
@@ -183,37 +188,9 @@ 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.
+Define or extend data scope for a subtree.
 
 ```html
 <!-- Inline data -->
@@ -222,15 +199,26 @@ Define variables for a subtree fragment scope.
 <!-- External data -->
 <y :with="data"></y>
 
-<!-- Transparency -->
+<!-- Extend scope -->
 <x :with="{ foo: 'bar' }">
   <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
 </x>
 ```
 
+#### `:render="ref"`
+
+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>
+```
+
 #### `:ref="id"`
 
-Expose element to data scope with the `id`:
+Expose element to current data scope with the `id`:
 
 ```html
 <!-- single item -->
@@ -256,26 +244,28 @@ Expose element to data scope with the `id`:
 
 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_.
+```html
+<div :x="window.x"></div>
+<!-- window is undefined -->
+```
 
-Sandbox can be extended via `Object.assign(sprae.globals, { BigInt, window, document })` etc.
+Default sandbox provides: _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _console_.<br/>
+Sandbox can be extended as `Object.assign(sprae.globals, { BigInt, window, document })`.
 
 ## 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 +274,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

@@ -2,7 +2,7 @@
 import sprae from './core.js'
 import swap from './domdiff.js'
 import { state as createState} from './state.js'
-import { WeakishMap } from './weakish-map.js'
+import { queueMicrotask, WeakishMap } from './util.js'
 
 // reserved directives - order matters!
 // primary initialized first by selector, secondary initialized by iterating attributes
@@ -46,7 +46,7 @@ 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')
+  let evaluate = parseExpr(el, expr, ':with')
   const localState = evaluate(rootState)
   let state = createState(localState, rootState)
   // console.log(123, state.foo, state.bar)
@@ -58,7 +58,7 @@ const _each = Symbol(':each')
 // :each must init before :ref, :id or any others, since it defines scope
 primary['each'] = (tpl, expr) => {
   let each = parseForExpression(expr);
-  if (!each) return exprError(new Error, tpl, expr);
+  if (!each) return exprError(new Error, tpl, expr, ':each');
 
   // FIXME: make sure no memory leak here
   // we need :if to be able to replace holder instead of tpl for :if :each case
@@ -68,7 +68,7 @@ primary['each'] = (tpl, expr) => {
   const evaluate = parseExpr(tpl, each[2], ':each');
 
   const keyExpr = tpl.getAttribute(':key');
-  const itemKey = keyExpr ? parseExpr(null, keyExpr) : null;
+  const itemKey = keyExpr ? parseExpr(null, keyExpr, ':each') : null;
   tpl.removeAttribute(':key')
 
   const refExpr = tpl.getAttribute(':ref');
@@ -142,6 +142,16 @@ function parseForExpression(expression) {
   return [item, '', items]
 }
 
+secondary['render'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':render'),
+      tpl = evaluate(state)
+
+  if (!tpl) exprError(new Error('Template not found'), el, expr, ':render');
+
+  let content = tpl.content.cloneNode(true);
+  el.replaceChildren(content)
+  sprae(el, state)
+}
 
 secondary['ref'] = (el, expr, state) => {
   // FIXME: wait for complex ref use-case
@@ -187,23 +197,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, ':')
@@ -443,9 +436,9 @@ function parseExpr(el, expression, dir) {
   }
 }
 
-function exprError(error, element, expression, dir) {
+function exprError(error, element, expression, directive) {
   Object.assign( error, { element, expression } )
-  console.warn(`∴ ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, element)
+  console.warn(`∴ ${error.message}\n\n${directive}=${ expression ? `"${expression}"\n\n` : '' }`, element)
   queueMicrotask(() => { throw error }, 0)
 }
 

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/src/state.js

@@ -1,3 +1,5 @@
+import { queueMicrotask } from "./util.js"
+
 // currentFx stack of listeners
 let currentFx, batch = new Set, pendingUpdate
 

package/src/{weakish-map.js → util.js}

@@ -1,3 +1,8 @@
+
+// reset stacktrace or plan for fastest next call
+// https://twitter.com/_developit/status/1634033380940455936
+export const queueMicrotask = Promise.prototype.then.bind(Promise.resolve());
+
 // based on https://github.com/WebReflection/not-so-weak/
 const refs = new WeakMap;
 

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="">`)
@@ -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'])
@@ -916,6 +916,21 @@ test('with: writes to state', async () => {
   is(a.innerHTML, `<y>3</y>`)
 })
 
+test(':render by ref', async () => {
+  let a = h`<template :ref="abc"><div :text="123"></div></template><x :render="abc">456</x>`
+  sprae(a)
+  is(a.outerHTML, `<template><div :text="123"></div></template><x><div>123</div></x>`)
+})
+
+test(':render :with', async () => {
+  let a = h`<template :ref="abc"><div :text="text"></div></template><x :render="abc" />`
+  let state = sprae(a, {text:'abc'})
+  is(a.outerHTML, `<template><div :text="text"></div></template><x><div>abc</div></x>`)
+  state.text = 'def'
+  await tick()
+  is(a.outerHTML, `<template><div :text="text"></div></template><x><div>def</div></x>`)
+})
+
 test('ref: base', async () => {
   let a = h`<a :ref="a" :init="log.push(a), null" :text="b"></a>`
   let state = sprae(a, {log:[], b:1})

package/test/index.html

@@ -2,6 +2,11 @@
 <meta charset=utf-8>
 <title>Test</title>
 
+<script defer src="../sprae.auto.js"></script>
+<div :with="{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

@@ -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.