sprae 0.0.0 → 1.0.0

package/package.json

@@ -1,28 +1,32 @@
 {
   "name": "sprae",
   "description": "Reactive directives with expressions for DOM microtemplating.",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "main": "sprae.js",
+  "type": "module",
   "dependencies": {
-    "sube": "^2.2.1",
-    "element-props": "^2.0.4",
-    "htm": "^3.1.1",
-    "swapdom": "^1.1.1",
-    "preact": "^10.11.2"
+    "element-props": "^2.3.0",
+    "sube": "^2.2.1"
   },
   "devDependencies": {
     "@preact/signals": "^1.1.2",
+    "browser-env": "^3.3.0",
+    "es-module-shims": "^1.6.2",
+    "esbuild": "^0.15.14",
     "hyperf": "^1.4.0",
+    "terser": "^5.15.1",
     "tst": "^7.1.1",
     "value-ref": "^2.1.0",
     "wait-please": "^3.1.0"
   },
   "scripts": {
-    "test": "node test"
+    "test": "node -r browser-env/register test/test.js",
+    "build": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm",
+    "min": "terser sprae.js -o sprae.min.js --module -c passes=3 -m"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dy/sporae.git"
+    "url": "git+https://github.com/dy/sprae.git"
   },
   "keywords": [
     "preact",

package/plan.md

@@ -0,0 +1,6 @@
+* [ ] finish directives
+* [ ] better list diffing
+* [?] ordered directives init (:each + :if vs :if + :each) -> find out if really needed
+* [x] ~~autoinit~~ -> too much maintenance burden
+* [ ] node tests
+* [ ] better deps updating

package/r&d.md

@@ -1,4 +1,4 @@
-## name
+## [x] name -> sprae
 
 * rasa
 * dew
@@ -34,7 +34,7 @@
   + better assoc with hydration
 
 
-## :attr, :data, :id, :class, :style, :on, :aria - do we enforce JS object or support unscoped expression? -> Use JS convention, too many use-cases.
+## [x] :attr, :data, :id, :class, :style, :on, :aria - do we enforce JS syntax or support unscoped expression? -> Use JS convention, too many use-cases.
 
 1. JS object
 + JS object can directly set value as `:props="obj"`
@@ -48,4 +48,64 @@
 + We anyways introduce custom-ish expression in `:each="item in items"`
   - Vue introduces simple-ish parsing for that
 + Custom expressions are shorter: `:attr="a:1, b:2, c:3"`
-- Custom expressions are confusing for style: `:style="a:1, b:2, c:3"` - very similar to direct style string
+- Custom expressions are confusing for style: `:style="a:1, b:2, c:3"` - very similar to direct style string
+
+## [x] Attribute directive: `:={a:1}` vs `:attr={a:1}` vs `:prop={a:1}`
+
++ `:=obj` reminds pascal assignment operator, which is cool
++ `:={a:1,b:2}` is natural convention from vue/alpine as - all props in object are assigned as `:{attr}`
+- We can use `:="{data}"` fro sprae autoinit, since scope has confusing name: `:scope={}`, `:sprae={}`, `:with={}`
+-> let's use :prop= for now, since `:={}` can have multiple interpretations
+
+## [x] Scopes mechanism: prototype inheritance chain vs multiple `with` wrappers
+
+- prototype inheritance chain causes deps update difficulties
+- prototype chain is messy-ish
+- prototype chain is a bit more difficult to provide multiple parent scopes
+- prototype state object is inheritance mess - can be super-hard to analyze
+~ `with(a) with(b) with(c)` is the same as `with(a)` with prototype inheritance in terms of access.
+- `with` chain allows runtime update of scopes, eg. child scope was updated to something new.
+  - `prototype` chain is fixed from the time of init.
+- `prototype` chain hails to unidentified root scope and inherits from that. Maybe we should clarify scopes inhertiance and first implement reactive store (see next item).
+
+? what if we avoid scope inheritance mechanism (what's the real use for it?) and instead just make reactive store object, so that :with directive subscribes to any input props, but "shadows" subtree?
+  ? are there uses for inheritance
+
+? Do we need scopes at all? Only for the purpose of autoinit?
+- it seems scopes can introduce more confusion and mess in templates: indicating full paths is more beneficial
+  + unless we introduce proper ":with="item.x as x""
++ prototype chain is a single object:
+  + meaning updators receive one actual-for-element scope instance
+  + that makes external API easier
+  + that allows handling store via single reactive object
+
+-> possibly we have to just subscribe via mechanism of signals-like deps, and :with just initializes subtree with extended object
+
+## [ ] Should we inherit values from `init` in `sprae(el, init)`, instead of creating a snapshot of reactive values in `init`?
+
++ it allows passing any arbitrary scope to initialize from.
+- it can make hard finding reactive sources...
++ it is sort-of neat pattern: object parent updates its particular state: it can also have observable method making object a store
+-> can be delegated to a separate functionality - init just gets converted to reactive store
++ it sort-of makes `init` directly a scope (a parent of scope), which is more natural-ish rather than 2 independent entities
++ can pass both observables and direct state anywhere, eg. init child components from it
+-> worthy of a separate library
+
+## [ ] Per-directive initialize vs per-element initialize
+
++ Per-directive is very simple and trivial approach
+- Per-directive doesn't read attributes order and init directives independently
+  ~ Practically linear in-order init doesn't make much service either here
+- Per-directive is a bit hard to deal with scopes
+
+## [ ] avoid updating unchanged directives if values don't affect them
+
+? what if we use preact/signals to subscribe only to required props?
+-> parseExpr is going to need to be handled by core.js (not directives), and detect & subscribe to dependencies itself
+-> so that directive updator gets invoked only when any of expr dependencies change
+
+## [ ] Replace :else-if with :else :if
+
++ `:else :if=""` is meaningful expansion of both directives
++ `:else :if` is coming from JS
++ `:else :if` doesn't throw error in JSDOM tests

package/readme.md

@@ -1,27 +1,13 @@
-# ∴ spræ
+# ∴ spræ [![size](https://img.shields.io/bundlephobia/minzip/sprae?label=size)](https://bundlephobia.com/result?p=sprae)
 
-Reactive directives for DOM microtemplating: moisturize tree without trasplanting to JSX.<br/>
-A lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue) and [templize](https://github.com/dy/templize) with better ergonomics[*](#justification).
+> Reactive microdirectives for soft DOM hydration.
 
+A 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[*](#justification).
 
-## Usage
-
-```html
-<script src="./sprae.js" defer init></script>
 
-<div :scope="{ count: 0 }">
-  <span :text="count">
-  <button :on="{ click: e => count++ }">inc</button>
-</div>
-```
-
-* `:scope` marks regions on the tree that should be controlled by sprae.
-* `init` attribute tells sprae to automatically initialize all elements that have `:scope`.
-* any attribute starting with `:` is considered a sprae directive.
-
-## Manual init
+## Usage
 
-The more direct case is initializing sprae via JS.
+Sprae enables directives as attributes starting with `:`.
 
 ```html
 <div id="element" :if="user">
@@ -29,81 +15,110 @@ The more direct case is initializing sprae via JS.
 </div>
 
 <script type="module">
-  import init from 'sprae';
+  import sprae from 'sprae';
 
-  const data = { user: { displayName: 'Dmitry Ivanov' } }
-  const [state, update] = init(user, data);
+  const init = { user: { displayName: 'Dmitry Ivanov' } }
+  const state = sprae(user, init);
 
-  state.user.displayName = 'dy'       // update value
-  update({user: {displayName: 'dy'}}) // alternatively
+  state.user.displayName = 'dy' // automatically updates DOM
 </script>
 ```
 
-* `init` initializes directives within an `element` subtree with passed `data`.
-* `state` is proxy reflecting used values, changing any of its props updates directives.
-* `update` can be used for bulk-updating multiple props.
-* `data` is the initial state to render the template. It can include reactive values, see [reactivity](#reactivity).
+* `sprae` initializes directives within an `element` subtree with passed `init` data.
+* `state` is proxy reflecting directives values, changing any of its props updates directives.
+* `init` is the initial state to render the template. It can include reactive values, see [reactivity](#reactivity).
 
 
+<details>
+<summary><strong>Bulk update</strong></summary>
+
+To update multiple values at once, state can be expanded as:
+
+```js
+let [values, update] = state;
+update({ user: { displayName: 'dy' } });
+```
+
+* `values` holds actual rendered state values. Changing it doesn't rerender DOM, unlike `state`.
+* `update` useful for bulk-updating multiple values at once.
+
+</details>
+
+<!--
+<details>
+<summary><strong>Autoinit</strong></summary>
+
+Sprae can be used without build step or JS, autoinitializing document:
+
+```html
+<script src="./sprae.js" defer init></script>
+
+<div :with="{ count: 0 }">
+  <span :text="count">
+  <button :on="{ click: e => count++ }">inc</button>
+</div>
+```
+
+* `:with` defines data for regions of the tree to autoinit sprae on.
+* `init` attribute tells sprae to automatically initialize document.
+
+</details>
+-->
+
 ## Directives
 
-* `:scope="data"` – autoinit subtree.
-* `:if="condition"`, `:else-if="condition"`, `:else` - controls flow of elements.
-* `:each="item, idx? in list"` - map list to instances of an element.
+* `:if="condition"`, `:else` - controls flow of elements.
+* `:each="item, i? in list|number"` - create multiple instances of element from list or 1..number range.
 * `:text="value"` - set text content of an element.
-* `:value="value"` – bind value to input or textarea.
+* `:value="value"` – bind value to input or textarea (reflected in model).
 * `:id`, `:name`, `:for`, `:type`, `:hidden`, `:disabled`, `:href`, `:src` – common attributes setters.
 * `:class="[ foo, 'bar' ]"` – set element class from an array, object or a string.
 * `:style="{ top:1, position:'absolute' }"` – set element style from a string or an object.
-* `:prop="{ alt:'foo', title:'bar' }"` – set any attribute / property.
+* `:prop="{ alt:'foo', title:'bar' }"` – set any other attribute / property.
 * `:on="{ click:e=>{}, touch:e=>{} }"` – add event listeners.
 * `:data="{ foo:1, bar:2 }"` – set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes.
 * `:aria="{ role:'progressbar' }"` – set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes.
-* `:item="{ id: 1 }"` – set [item*](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) microdata attribute.
+* `:with="data"` – provide data alias for subtree fragment.
+<!-- * [ ] `:item="{ id: 1 }"` – set [item*](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) microdata attribute. -->
 
-<!--
-### Loops
 
-Iterating over set of items can be done with `:each` directive:
 
-```html
-<ul>
-  <li :each="item, index in items" :id="'item-' + item.id" :data="{value:item.value}" :text="item.label"></li>
-</ul>
-
-<li :each="{{ item, index in array }}">
-<li :each="{{ key, value, index in object }}">
-<li :each="{{ value in object }}">
-```
+<details>
+<summary><strong>Combining directives</strong></summary>
 
-### Conditions
-
-To optionally display an element, there are `if`, `else-if`, `else` directives.
+Directives can be naturally combined as:
 
 ```html
-<span :if="status == 0">Inactive</span>
-<span :else-if="status == 1">Active</span>
-<span :else>Finished</span>
+<span :if="foo">foo</span>
+<span :else :if="bar">bar</span>
+<span :else>baz</span>
+
+<span :if="items" :each="item in items"></span>
+<span :else>Empty list</span>
 ```
--->
+</details>
+
 
-### Adding directives
+<details>
+<summary><strong>Adding directives</strong></summary>
 
 Directives can be added by registering them via `directive(name, initializer)`:
 
 ```js
-import init, { directive } from 'sprae'
+import { directive, parseExpr } from 'sprae';
 
 directive(':html', (el, expr) => {
   // ...initialize here
-  const evaluate = parseExpression(expr)
+  const evaluate = parseExpr(expr);
   return (state) => {
     // ...update here
-    el.innerHTML = evaluate(state)
+    el.innerHTML = evaluate(state);
   }
-})
+});
 ```
 
+</details>
+
 
 ## Reactivity
 
@@ -123,14 +138,14 @@ Update happens when any value changes:
 <div id="done" :text="loading ? 'loading' : result">...</div>
 
 <script>
-  import spores from 'sprae';
+  import sprae from 'sprae';
   import { signals } from '@preact/signals';
 
   // <div id="done">...</div>
 
-  const loading = signal(true),
-        result = signal(false);
-  spores(done, { loading, result })
+  const loading = signal(true), result = signal(false);
+
+  sprae(done, { loading, result })
 
   // <div id="done">loading</div>
 
@@ -144,11 +159,10 @@ Update happens when any value changes:
 Note: observers don't require disposal, since they're connected in weak fashion. Once element is disposed, observables are disconnected.
 
 
-
 ## Justification
 
-* [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 case, svg attributes, conflict with liquid syntax etc). Besides 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.
+* [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. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.
 * [preact](https://ghub.io/preact) with HTML as JSX is a nice way to wire JS to templates, but it doesn't really support reactive fields (needs render call). Also migrating HTML to JS is an extreme with unwanted side-effects.
 
 _Sprae_ takes elegant syntax convention of _alpine_ and method of _templize_ to connect any reactive values (like [@preact/signals](https://ghub.io/@preact/signals) or observables) to static HTML.

package/sprae.js

@@ -0,0 +1,317 @@
+// node_modules/sube/sube.js
+Symbol.observable ||= Symbol("observable");
+var observable = (arg) => arg && !!(arg[Symbol.observable] || arg[Symbol.asyncIterator] || arg.call && arg.set || arg.subscribe || arg.then);
+var registry = new FinalizationRegistry((unsub) => unsub.call?.());
+var unsubr = (sub) => sub && (() => sub.unsubscribe?.());
+var sube_default = (target, next, error, complete, stop, unsub) => target && (unsub = unsubr((target[Symbol.observable]?.() || target).subscribe?.(next, error, complete)) || target.set && target.call?.(stop, next) || (target.then?.((v) => (!stop && next(v), complete?.()), error) || (async (v) => {
+  try {
+    for await (v of target) {
+      if (stop)
+        return;
+      next(v);
+    }
+    complete?.();
+  } catch (err) {
+    error?.(err);
+  }
+})()) && ((_) => stop = 1), registry.register(target, unsub), unsub);
+
+// src/core.js
+var curEl;
+var curDir;
+function sprae(el2, initScope) {
+  initScope ||= {};
+  let updates = [], ready = false;
+  const update = (values2) => {
+    updates.forEach((update2) => update2(values2));
+  };
+  const rsube = (scope) => {
+    let values2 = {};
+    for (let k in scope) {
+      let v = scope[k];
+      if (observable(v = scope[k]))
+        values2[k] = null, registry2.register(v, sube_default(v, (v2) => (values2[k] = v2, ready && update(values2))));
+      else if (v?.constructor === Object)
+        values2[k] = rsube(v);
+      else
+        values2[k] = v;
+    }
+    return values2;
+  };
+  const values = rsube(initScope);
+  ready = true;
+  for (let name in directives) {
+    const sel = `[${name.replace(":", "\\:")}]`, initDirective = directives[name];
+    const els = [...el2.querySelectorAll(sel)];
+    if (el2.matches?.(sel))
+      els.unshift(el2);
+    let update2;
+    for (let el3 of els)
+      if (update2 = initDirective(el3, values))
+        updates.push(update2);
+  }
+  ;
+  update(values);
+  values[Symbol.iterator] = function* () {
+    yield proxy;
+    yield (diff) => update(Object.assign(values, diff));
+  };
+  const proxy = new Proxy(values, {
+    set: (s, k, v) => (values[k] = v, update(values), 1),
+    deleteProperty: (s, k) => (values[k] = void 0, update(values), 1)
+  });
+  return proxy;
+}
+var directives = {};
+var directive = (name, initializer) => {
+  const className = name.replace(":", "\u2234");
+  return directives[name] = (el2, initValues) => {
+    if (el2.classList.contains(className))
+      return;
+    el2.classList.add(className);
+    let expr = el2.getAttribute(name);
+    el2.removeAttribute(name);
+    return initializer(el2, expr, initValues);
+  };
+};
+var registry2 = new FinalizationRegistry((unsub) => unsub?.call?.());
+var evaluatorMemo = {};
+function parseExpr(expression) {
+  if (evaluatorMemo[expression])
+    return evaluatorMemo[expression];
+  let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /^(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
+  const safeFunction = () => {
+    try {
+      return new Function(["scope"], `let result; with (scope) { result = ${rightSideSafeExpression} }; return result;`);
+    } catch (e) {
+      return exprError(e, expression);
+    }
+  };
+  return evaluatorMemo[expression] = safeFunction();
+}
+function exprError(error, expression) {
+  Object.assign(error, { expression });
+  console.warn(`\u2234 ${error.message}
+
+${curDir}=${expression ? `"${expression}"
+
+` : ""}`, curEl);
+  setTimeout(() => {
+    throw error;
+  }, 0);
+  return Promise.resolve();
+}
+
+// src/directives/with.js
+directive(":with", (el2, expr, rootValues) => {
+  let evaluate = parseExpr(expr);
+  let subscope = Object.create(rootValues);
+  Object.assign(subscope, evaluate(rootValues));
+  let [subvalues, subupdate] = sprae(el2, subscope);
+  return (values) => {
+    let withValues = evaluate(values);
+    subupdate(withValues);
+  };
+});
+
+// src/directives/each.js
+directive(":each", (el2, expr) => {
+  let each = parseForExpression(expr);
+  if (!each)
+    return exprError(new Error(), expr);
+  const getItems = parseExpr(each.items);
+  const holder = new Text();
+  el2.replaceWith(holder);
+  let els = [];
+  return (state) => {
+    els.forEach((el3) => el3.remove());
+    els = [];
+    let items = getItems(state);
+    if (typeof items === "number")
+      items = Array.from({ length: items }, (item, i) => i + 1);
+    items?.forEach((item, i) => {
+      const scope = { ...state };
+      scope[each.item] = item;
+      if (each.index)
+        scope[each.index] = i;
+      let itemEl = el2.cloneNode(true);
+      els.push(itemEl);
+      holder.before(itemEl);
+      sprae(itemEl, scope);
+    });
+  };
+});
+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 res = {};
+  res.items = inMatch[2].trim();
+  let item = inMatch[1].replace(stripParensRE, "").trim();
+  let iteratorMatch = item.match(forIteratorRE);
+  if (iteratorMatch) {
+    res.item = item.replace(forIteratorRE, "").trim();
+    res.index = iteratorMatch[1].trim();
+  } else {
+    res.item = item;
+  }
+  return res;
+}
+
+// src/directives/text.js
+directive(":text", (el2, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    el2.textContent = value == null ? "" : value;
+  };
+});
+
+// src/directives/if.js
+directive(":if", (el2, expr) => {
+  let cur = el2, els = [el2], clauses = [parseExpr(expr)], holder = new Text();
+  while (cur = el2.nextElementSibling) {
+    if (expr = cur.getAttribute(":else-if")) {
+      cur.removeAttribute(":else-if");
+      cur.classList.add("\u2234else-if");
+      cur.remove();
+      els.push(cur);
+      clauses.push(parseExpr(expr));
+      continue;
+    }
+    if (cur.hasAttribute(":else")) {
+      cur.removeAttribute(":else");
+      cur.classList.add("\u2234else");
+      cur.remove();
+      els.push(cur);
+      clauses.push(() => 1);
+    }
+    break;
+  }
+  cur = els[0];
+  return (state) => {
+    let idx = clauses.findIndex((match) => match(state));
+    if (idx >= 0)
+      cur.replaceWith(cur = els[idx]);
+    else
+      cur.replaceWith(cur = holder);
+  };
+});
+
+// node_modules/element-props/element-props.js
+var prop = (el2, k, v) => {
+  if (k.startsWith("on"))
+    k = k.toLowerCase();
+  if (el2[k] !== v) {
+    el2[k] = v;
+  }
+  if (v === false || v == null)
+    el2.removeAttribute(k);
+  else if (typeof v !== "function")
+    el2.setAttribute(
+      dashcase(k),
+      v === true ? "" : typeof v === "number" || typeof v === "string" ? v : k === "class" ? (Array.isArray(v) ? v : Object.entries(v).map(([k2, v2]) => v2 ? k2 : "")).filter(Boolean).join(" ") : k === "style" ? Object.entries(v).map(([k2, v2]) => `${k2}: ${v2}`).join(";") : ""
+    );
+};
+var input = (el2) => [
+  el2.type === "checkbox" ? () => el2.checked : () => el2.value,
+  el2.type === "text" || el2.type === "" ? (value) => el2.value = value == null ? "" : value : el2.type === "checkbox" ? (value) => (el2.value = value ? "on" : "", prop(el2, "checked", value)) : el2.type === "select-one" ? (value) => ([...el2.options].map((el3) => el3.removeAttribute("selected")), el2.value = value, el2.selectedOptions[0]?.setAttribute("selected", "")) : (value) => el2.value = value
+];
+var el = document.createElement("div");
+var dashcase = (str) => {
+  el.dataset[str] = "";
+  let dashStr = el.attributes[0].name.slice(5);
+  delete el.dataset[str];
+  return dashStr;
+};
+
+// src/directives/common.js
+common(`id`), common(`name`), common(`for`), common(`type`), common(`hidden`), common(`disabled`), common(`href`), common(`src`), common(`style`), common(`class`);
+function common(name) {
+  directive(":" + name, (el2, expr) => {
+    let evaluate = parseExpr(expr);
+    return (state) => {
+      let value = evaluate(state);
+      prop(el2, name, value);
+    };
+  });
+}
+
+// src/directives/prop.js
+directive(":prop", (el2, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      prop(el2, key, value[key]);
+  };
+});
+
+// src/directives/data.js
+directive(":data", (el2, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      el2.dataset[key] = value[key];
+  };
+});
+
+// src/directives/aria.js
+directive(":aria", (el2, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      prop(el2, "aria" + key[0].toUpperCase() + key.slice(1), value[key]);
+  };
+});
+
+// src/directives/value.js
+directive(":value", (el2, expr) => {
+  let evaluateGet = parseExpr(expr);
+  let [get, set] = input(el2);
+  let evaluateSet = parseSetter(expr);
+  let curState, onchange = (e) => evaluateSet(curState, get(el2));
+  el2.addEventListener("input", onchange);
+  el2.addEventListener("change", onchange);
+  return (state) => {
+    let value = evaluateGet(curState = state);
+    prop(el2, "value", value);
+    set(value);
+  };
+});
+var memo = {};
+function parseSetter(expr) {
+  if (memo[expr])
+    return memo[expr];
+  return memo[expr] = new Function(
+    ["scope", "value"],
+    `with (scope) { ${expr} = value };`
+  );
+}
+
+// src/directives/on.js
+directive(":on", (el2, expr) => {
+  let evaluate = parseExpr(expr);
+  let listeners = {};
+  return (state) => {
+    for (let evt in listeners)
+      el2.removeEventListener(evt, listeners[evt]);
+    listeners = evaluate(state);
+    for (let evt in listeners)
+      el2.addEventListener(evt, listeners[evt]);
+  };
+});
+
+// src/index.js
+var src_default = sprae;
+export {
+  src_default as default,
+  directive,
+  exprError,
+  parseExpr
+};

package/sprae.min.js

@@ -0,0 +1 @@
+Symbol.observable||=Symbol("observable");var e=new FinalizationRegistry((e=>e.call?.())),t=(t,r,n,l,s,i)=>{return t&&(o=(t[Symbol.observable]?.()||t).subscribe?.(r,n,l),i=o&&(()=>o.unsubscribe?.())||t.set&&t.call?.(s,r)||(t.then?.((e=>(!s&&r(e),l?.())),n)||(async e=>{try{for await(e of t){if(s)return;r(e)}l?.()}catch(e){n?.(e)}})())&&(e=>s=1),e.register(t,i),i);var o};function r(e,r){r||={};let l=[],i=!1;const o=e=>{l.forEach((t=>t(e)))},a=e=>{let r={};for(let l in e){let c=e[l];(n=c=e[l])&&(n[Symbol.observable]||n[Symbol.asyncIterator]||n.call&&n.set||n.subscribe||n.then)?(r[l]=null,s.register(c,t(c,(e=>(r[l]=e,i&&o(r)))))):r[l]=c?.constructor===Object?a(c):c}var n;return r},c=a(r);i=!0;for(let t in n){const r=`[${t.replace(":","\\:")}]`,s=n[t],i=[...e.querySelectorAll(r)];let o;e.matches?.(r)&&i.unshift(e);for(let e of i)(o=s(e,c))&&l.push(o)}o(c),c[Symbol.iterator]=function*(){yield u,yield e=>o(Object.assign(c,e))};const u=new Proxy(c,{set:(e,t,r)=>(c[t]=r,o(c),1),deleteProperty:(e,t)=>(c[t]=void 0,o(c),1)});return u}var n={},l=(e,t)=>{const r=e.replace(":","∴");return n[e]=(n,l)=>{if(n.classList.contains(r))return;n.classList.add(r);let s=n.getAttribute(e);return n.removeAttribute(e),t(n,s,l)}},s=new FinalizationRegistry((e=>e?.call?.())),i={};function o(e){if(i[e])return i[e];let t=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;return i[e]=(()=>{try{return new Function(["scope"],`let result; with (scope) { result = ${t} }; return result;`)}catch(t){return a(t,e)}})()}function a(e,t){return Object.assign(e,{expression:t}),console.warn(`∴ ${e.message}\n\nundefined=${t?`"${t}"\n\n`:""}`,void 0),setTimeout((()=>{throw e}),0),Promise.resolve()}l(":with",((e,t,n)=>{let l=o(t),s=Object.create(n);Object.assign(s,l(n));let[i,a]=r(e,s);return e=>{let t=l(e);a(t)}})),l(":each",((e,t)=>{let n=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n={};n.items=r[2].trim();let l=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),s=l.match(t);return s?(n.item=l.replace(t,"").trim(),n.index=s[1].trim()):n.item=l,n}(t);if(!n)return a(new Error,t);const l=o(n.items),s=new Text;e.replaceWith(s);let i=[];return t=>{i.forEach((e=>e.remove())),i=[];let o=l(t);"number"==typeof o&&(o=Array.from({length:o},((e,t)=>t+1))),o?.forEach(((l,o)=>{const a={...t};a[n.item]=l,n.index&&(a[n.index]=o);let c=e.cloneNode(!0);i.push(c),s.before(c),r(c,a)}))}})),l(":text",((e,t)=>{let r=o(t);return t=>{let n=r(t);e.textContent=null==n?"":n}})),l(":if",((e,t)=>{let r=e,n=[e],l=[o(t)],s=new Text;for(;r=e.nextElementSibling;){if(!(t=r.getAttribute(":else-if"))){r.hasAttribute(":else")&&(r.removeAttribute(":else"),r.classList.add("∴else"),r.remove(),n.push(r),l.push((()=>1)));break}r.removeAttribute(":else-if"),r.classList.add("∴else-if"),r.remove(),n.push(r),l.push(o(t))}return r=n[0],e=>{let t=l.findIndex((t=>t(e)));t>=0?r.replaceWith(r=n[t]):r.replaceWith(r=s)}}));var c=(e,t,r)=>{t.startsWith("on")&&(t=t.toLowerCase()),e[t]!==r&&(e[t]=r),!1===r||null==r?e.removeAttribute(t):"function"!=typeof r&&e.setAttribute(f(t),!0===r?"":"number"==typeof r||"string"==typeof r?r:"class"===t?(Array.isArray(r)?r:Object.entries(r).map((([e,t])=>t?e:""))).filter(Boolean).join(" "):"style"===t?Object.entries(r).map((([e,t])=>`${e}: ${t}`)).join(";"):"")},u=document.createElement("div"),f=e=>{u.dataset[e]="";let t=u.attributes[0].name.slice(5);return delete u.dataset[e],t};function b(e){l(":"+e,((t,r)=>{let n=o(r);return r=>{let l=n(r);c(t,e,l)}}))}b("id"),b("name"),b("for"),b("type"),b("hidden"),b("disabled"),b("href"),b("src"),b("style"),b("class"),l(":prop",((e,t)=>{let r=o(t);return t=>{let n=r(t);for(let t in n)c(e,t,n[t])}})),l(":data",((e,t)=>{let r=o(t);return t=>{let n=r(t);for(let t in n)e.dataset[t]=n[t]}})),l(":aria",((e,t)=>{let r=o(t);return t=>{let n=r(t);for(let t in n)c(e,"aria"+t[0].toUpperCase()+t.slice(1),n[t])}})),l(":value",((e,t)=>{let r,n=o(t),[l,s]=(e=>["checkbox"===e.type?()=>e.checked:()=>e.value,"text"===e.type||""===e.type?t=>e.value=null==t?"":t:"checkbox"===e.type?t=>(e.value=t?"on":"",c(e,"checked",t)):"select-one"===e.type?t=>([...e.options].map((e=>e.removeAttribute("selected"))),e.value=t,e.selectedOptions[0]?.setAttribute("selected","")):t=>e.value=t])(e),i=function(e){return d[e]?d[e]:d[e]=new Function(["scope","value"],`with (scope) { ${e} = value };`)}(t),a=t=>i(r,l(e));return e.addEventListener("input",a),e.addEventListener("change",a),t=>{let l=n(r=t);c(e,"value",l),s(l)}}));var d={};l(":on",((e,t)=>{let r=o(t),n={};return t=>{for(let t in n)e.removeEventListener(t,n[t]);n=r(t);for(let t in n)e.addEventListener(t,n[t])}}));var m=r;export{m as default,l as directive,a as exprError,o as parseExpr};