sprae 0.1.0 → 1.0.0

package/package.json

@@ -1,25 +1,28 @@
 {
   "name": "sprae",
   "description": "Reactive directives with expressions for DOM microtemplating.",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "sprae.js",
+  "type": "module",
   "dependencies": {
-    "element-props": "^2.0.4",
-    "htm": "^3.1.1",
-    "preact": "^10.11.2",
-    "sube": "^2.2.1",
-    "swapdom": "^1.1.1"
+    "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",

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,8 +1,8 @@
-# ∴ 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.
+> 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) and [templize](https://github.com/dy/templize) with better ergonomics[*](#justification).
+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
@@ -15,68 +15,101 @@ Sprae enables directives as attributes starting with `:`.
 </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><h3>Autoinit</h3></summary>
+<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' } });
+```
 
-Sprae can be used without build step or JS, autoinitializing HTML:
+* `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 :scope="{ count: 0 }">
+<div :with="{ 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`.
+* `:with` defines data for regions of the tree to autoinit sprae on.
+* `init` attribute tells sprae to automatically initialize document.
 
 </details>
-
+-->
 
 ## Directives
 
-* [x] `:if="condition"`, `:else-if="condition"`, `:else` - controls flow of elements.
-* [x] `:each="item, i? in list"`,`:each="i in number"` - create multiple instances of element by mapping list or number.
-* [x] `:text="value"` - set text content of an element.
-* [ ] `:value="value"` – bind value to input or textarea.
-* [ ]`: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.
-* [ ] `: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.
-* [ ] `:scope="data"` – autoinit subtree.
+* `: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 (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 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.
+* `: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. -->
+
+
+
+<details>
+<summary><strong>Combining directives</strong></summary>
+
+Directives can be naturally combined as:
+
+```html
+<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>
+
 
 <details>
-<summary><h3>Adding directives</h3></summary>
+<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) => {
+directive(':html', (el, expr) => {
   // ...initialize here
-  const evaluate = parseExpression(el.getAttribute(':html'));
+  const evaluate = parseExpr(expr);
   return (state) => {
     // ...update here
     el.innerHTML = evaluate(state);
@@ -105,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 })
+  sprae(done, { loading, result })
 
   // <div id="done">loading</div>
 

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};

package/src/core.js

@@ -1,11 +1,6 @@
 import sube, { observable } from 'sube';
 
-// autoinit
-const s = document.currentScript
-if (s && s.hasAttribute('init')) {
-  sprae(document.documentElement)
-}
-
+let curEl, curDir;
 // sprae element: apply directives
 export default function sprae(el, initScope) {
   initScope ||= {};
@@ -13,10 +8,7 @@ export default function sprae(el, initScope) {
   let updates=[], // all spray directive updators
       ready=false;
 
-  // prepare directives
-  for (let dir in directives) updates[dir] = directives[dir](el);
-
-  const update = (values) => { for (let dir in updates) updates[dir].forEach(update => update(values)); };
+  const update = (values) => { updates.forEach(update => update(values)); };
 
   // hook up observables (deeply, to include item.text etc)
   // that's least evil compared to dlv/dset or proxies
@@ -25,7 +17,7 @@ export default function sprae(el, initScope) {
     let values = {}
     for (let k in scope) {
       let v = scope[k];
-      if (observable(v = scope[k])) registry.register(v, sube(v, v => (values[k] = v, ready && update(values))));
+      if (observable(v = scope[k])) values[k] = null, registry.register(v, sube(v, v => (values[k] = v, ready && update(values))));
       // FIXME: add []
       else if (v?.constructor === Object) values[k] = rsube(v);
       else values[k] = v;
@@ -33,9 +25,24 @@ export default function sprae(el, initScope) {
     return values;
   };
   const values = rsube(initScope);
-  update(values);
   ready = true;
 
+  // prepare directives - need to be after subscribing to values to get init state here
+  for (let name in directives) {
+    // updates[dir] = directives[dir](el)
+    const sel = `[${name.replace(':','\\:')}]`,
+          initDirective = directives[name]
+
+    // FIXME: possibly linear init of directives is better, who knows
+    const els = [...el.querySelectorAll(sel)];
+    if (el.matches?.(sel)) els.unshift(el);
+
+    let update
+    for (let el of els) if (update = initDirective(el, values)) updates.push(update);
+  };
+
+  update(values);
+
   // return update via destructuring of result to allow batch-update
   values[Symbol.iterator] = function*(){ yield proxy; yield (diff) => update(Object.assign(values, diff)); };
 
@@ -48,63 +55,56 @@ export default function sprae(el, initScope) {
 }
 
 // dict of directives
-const directives = {}, store = new WeakSet
+const directives = {}
 
 // register a directive
 export const directive = (name, initializer) => {
-  const attr = `\\:${name}`, sel = `[${attr}]`
-
-  return directives[name] = (container) => {
-    const els = [...container.querySelectorAll(sel)];
-    if (container.matches(sel)) els.unshift(container);
-
-    const updates = [];
-
-    // replace all shortcuts with inner templates
-    for (let el of els) {
-      if (!el.classList.contains(`∴${name}`))
-        el.classList.add(`∴${name}`), updates.push(initializer(el));
-    }
-
-    return updates
+  const className = name.replace(':','∴')
+
+  // create initializer of a directive on an element
+  return directives[name] = (el, initValues) => {
+    if (el.classList.contains(className)) return
+    el.classList.add(className)
+    let expr = el.getAttribute(name)
+    el.removeAttribute(name)
+    return initializer(el, expr, initValues);
   }
 }
 
 const registry = new FinalizationRegistry(unsub => unsub?.call?.())
 
-
 let evaluatorMemo = {}
 
 // borrowed from alpine: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
 // it seems to be more robust than subscript
-export function parseExpr(expression, el) {
-    if (evaluatorMemo[expression]) return evaluatorMemo[expression]
-
-    // Some expressions that are useful in Alpine are not valid as the right side of an expression.
-    // Here we'll detect if the expression isn't valid for an assignement and wrap it in a self-
-    // calling function so that we don't throw an error AND a "return" statement can b e used.
-    let rightSideSafeExpression = 0
-      // Support expressions starting with "if" statements like: "if (...) doSomething()"
-      || /^[\n\s]*if.*\(.*\)/.test(expression)
-      // Support expressions starting with "let/const" like: "let foo = 'bar'"
-      || /^(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, el)
-      }
+export function parseExpr(expression) {
+  if (evaluatorMemo[expression]) return evaluatorMemo[expression]
+
+  // Some expressions that are useful in Alpine are not valid as the right side of an expression.
+  // Here we'll detect if the expression isn't valid for an assignement and wrap it in a self-
+  // calling function so that we don't throw an error AND a "return" statement can b e used.
+  let rightSideSafeExpression = 0
+    // Support expressions starting with "if" statements like: "if (...) doSomething()"
+    || /^[\n\s]*if.*\(.*\)/.test(expression)
+    // Support expressions starting with "let/const" like: "let foo = 'bar'"
+    || /^(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()
+  return evaluatorMemo[expression] = safeFunction()
 }
 
-export function exprError(error, expression, el) {
-  Object.assign( error, { el, expression } )
-  console.warn(`∴ Expression Error: ${error.message}\n\n${ expression ? 'Expression: \"' + expression + '\"\n\n' : '' }`, el)
+export function exprError(error, expression) {
+  Object.assign( error, { expression } )
+  console.warn(`∴ ${error.message}\n\n${curDir}=${ expression ? `"${expression}"\n\n` : '' }`, curEl)
   setTimeout(() => { throw error }, 0)
   return Promise.resolve()
-}
+}

package/src/directives/aria.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':aria', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key]);
+  }
+})

package/src/directives/common.js

@@ -0,0 +1,15 @@
+// common directives just set/map value as is
+import { directive, parseExpr } from '../core.js'
+import {prop} from 'element-props'
+
+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, (el,expr) => {
+    let evaluate = parseExpr(expr)
+    return state => {
+      let value = evaluate(state);
+      prop(el, name, value)
+    }
+  })
+}

package/src/directives/data.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':data', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) el.dataset[key] = value[key];
+  }
+})

package/src/directives/each.js

@@ -1,11 +1,8 @@
 import sprae, { directive, exprError, parseExpr } from '../core.js'
 
-directive('each', (el) => {
-  let expr = el.getAttribute(':each');
-  el.removeAttribute(':each');
-
+directive(':each', (el, expr) => {
   let each = parseForExpression(expr);
-  if (!each) return exprError(new Error, expr, el);
+  if (!each) return exprError(new Error, expr);
 
   const getItems = parseExpr(each.items);
 

package/src/directives/if.js

@@ -1,9 +1,6 @@
 import { directive, parseExpr } from '../core.js'
 
-directive('if', (el) => {
-  let expr = el.getAttribute(':if');
-  el.removeAttribute(':if');
-
+directive(':if', (el, expr) => {
   let cur = el, els = [el], clauses = [parseExpr(expr)], holder = new Text
 
   // collect clauses

package/src/directives/index.js

@@ -1,5 +1,11 @@
 // order defines precedence
+import './with.js'
 import './each.js'
-import './hidden.js'
 import './text.js'
-import './if.js' // if must go last, after other directives are initialized, since it removes :else, :else-if from tree
+import './if.js' // if must go last, after other directives are initialized, since it removes :else, :else-if from tree
+import './common.js'
+import './prop.js'
+import './data.js'
+import './aria.js'
+import './value.js'
+import './on.js'

package/src/directives/on.js

@@ -0,0 +1,12 @@
+import { directive, parseExpr } from '../core.js'
+
+directive(':on', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  let listeners = {}
+  return (state) => {
+    for (let evt in listeners) el.removeEventListener(evt, listeners[evt]);
+    listeners = evaluate(state);
+    for (let evt in listeners) el.addEventListener(evt, listeners[evt]);
+  }
+})
+

package/src/directives/prop.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':prop', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) prop(el, key, value[key]);
+  }
+})

package/src/directives/text.js

@@ -1,9 +1,6 @@
 import { directive, parseExpr } from '../core.js'
 
-// hidden attribute directive example
-directive('text', (el) => {
-  let expr = el.getAttribute(':text');
-  el.removeAttribute(':text');
+directive(':text', (el, expr) => {
   let evaluate = parseExpr(expr);
   return (state) => {
     let value = evaluate(state);

package/src/directives/value.js

@@ -0,0 +1,26 @@
+import { input, prop } from "element-props";
+import { directive, parseExpr } from '../core.js';
+
+// connect expr to element value
+directive(':value', (el, expr) => {
+  let evaluateGet = parseExpr(expr);
+  let [get, set] = input(el);
+  let evaluateSet = parseSetter(expr);
+  let curState, onchange = e => evaluateSet(curState, get(el));
+  el.addEventListener('input', onchange);
+  el.addEventListener('change', onchange);
+  return (state) => {
+    let value = evaluateGet(curState = state);
+    prop(el, 'value', value)
+    set(value);
+  }
+})
+
+const memo = {}
+function parseSetter(expr) {
+  if (memo[expr]) return memo[expr]
+  return memo[expr] = new Function(
+    ['scope', 'value'],
+    `with (scope) { ${expr} = value };`
+  )
+}

package/src/directives/with.js

@@ -0,0 +1,21 @@
+import sprae, { directive, parseExpr } from '../core.js'
+
+directive(':with', (el, expr, rootValues) => {
+  let evaluate = parseExpr(expr);
+
+  // it subsprays with shadowed values
+  // rootValues get updated by parent directives
+  // subscope doesn't contain reactive values
+  let subscope = Object.create(rootValues)
+
+  // FIXME: wonder if we better pass initial state rather than values snapshot, to let subtree subscribe to more complete set
+  // FIXME: likely initial set can be reactive itself then
+  Object.assign(subscope, evaluate(rootValues))
+  let [subvalues, subupdate] = sprae(el, subscope)
+
+  return (values) => {
+    let withValues = evaluate(values);
+    subupdate(withValues)
+  }
+})
+

package/src/index.js

@@ -1,2 +1,12 @@
-export { default, directive } from './core.js';
-import './directives/index.js';
+import sprae from './core.js';
+import './directives/index.js';
+
+export default sprae;
+export * from './core.js';
+
+// 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)
+// }

package/test/index.html

@@ -12,6 +12,7 @@
     "value-ref" : "../node_modules/value-ref/value-ref.js",
     "hyperf" : "../node_modules/hyperf/hyperf.js",
     "sube" : "../node_modules/sube/sube.js",
+    "element-props" : "../node_modules/element-props/element-props.js",
     "preact": "../node_modules/preact/dist/preact.mjs",
     "preact/hooks": "../node_modules/preact/hooks/dist/hooks.mjs",
     "@preact/signals": "../node_modules/@preact/signals/dist/signals.mjs",
@@ -20,5 +21,4 @@
 }
 </script>
 
-
 <script src="./test.js" type="module"></script>

package/test/test.js

@@ -1,10 +1,23 @@
-import v from 'value-ref'
 import { signal } from '@preact/signals'
 import test, {is, any, throws} from 'tst'
 import {tick, time} from 'wait-please'
-import sprae from 'sprae'
+import sprae from '../src/index.js'
 import h from 'hyperf'
 
+Object.defineProperty(DocumentFragment.prototype, 'outerHTML', {
+  get() {
+    let s = ''
+    this.childNodes.forEach(n => {
+      s += n.nodeType === 3 ? n.textContent : n.outerHTML != null ? n.outerHTML : ''
+    })
+    return s
+  }
+})
+
+test.skip('autoinit', async () => {
+  is(window.x.innerHTML, '1')
+})
+
 test('hidden: core', async () => {
   let el = h`<div :hidden="hidden"></div>`
   let params = sprae(el, {hidden:true})
@@ -22,6 +35,65 @@ test('hidden: reactive', async () => {
   is(el.outerHTML, `<div class="∴hidden"></div>`)
 })
 
+test('common: reactive', async () => {
+  let el = h`<label :for="name" :text="name" ></label><input :id="name" :name="name" :type="name" :disabled="!name"/><a :href="url"></a><img :src="url"/>`
+  let params = sprae(el, {name:'text', url:'//google.com'})
+  is(el.outerHTML, `<label class="∴text ∴for" for="text">text</label><input class="∴id ∴name ∴type ∴disabled" id="text" name="text" type="text"><a class="∴href" href="//google.com"></a><img class="∴src" src="//google.com">`)
+  params.name = 'email'
+  is(el.outerHTML, `<label class="∴text ∴for" for="email">email</label><input class="∴id ∴name ∴type ∴disabled" id="email" name="email" type="email"><a class="∴href" href="//google.com"></a><img class="∴src" src="//google.com">`)
+})
+
+test('common: style', async () => {
+  let el = h`<x :style="style"></x>`
+  let params = sprae(el, {style: "top: 1px"})
+  is(el.outerHTML, `<x class="∴style" style="top: 1px"></x>`)
+  params.style = {top: '2px'}
+  is(el.outerHTML, `<x class="∴style" style="top: 2px"></x>`)
+})
+
+test('common: class', async () => {
+  let el = h`<x :class="a"></x><y :class="[b, c]"></y><z :class="{b:true, c:d}"></z>`
+  const c = signal('z')
+  let params = sprae(el, {a:'x', b:'y', c, d:false});
+  is(el.outerHTML, `<x class="x"></x><y class="y z"></y><z class="b"></z>`);
+  params.d = true;
+  is(el.outerHTML, `<x class="x"></x><y class="y z"></y><z class="b c"></z>`);
+  c.value = 'w'
+  is(el.outerHTML, `<x class="x"></x><y class="y w"></y><z class="b c"></z>`);
+})
+
+test('props: base', async () => {
+  let el = h`<input :prop="{for:1, title:2, help:3, type:4, placeholder: 5}"/>`
+  let params = sprae(el)
+  is(el.outerHTML, `<input class="∴prop" for="1" title="2" help="3" type="4" placeholder="5">`)
+})
+
+test('data: base', async () => {
+  let el = h`<input :data="{a:1, fooBar:2}"/>`
+  let params = sprae(el)
+  is(el.outerHTML, `<input class="∴data" data-a="1" data-foo-bar="2">`)
+})
+
+test('aria: base', async () => {
+  let el = h`<input type="text" id="jokes" role="combobox" :aria="{controls:'joketypes', autocomplete:'list', expanded:false, activeOption:'item1', activedescendant:''}"/>`
+  sprae(el)
+  is(el.outerHTML, `<input type="text" id="jokes" role="combobox" class="∴aria" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">`)
+})
+
+test('input: direct', async () => {
+  let el = h`<input :value="a" />`
+  let state = sprae(el, {a:1})
+  is(el.value, '1')
+  is(el.outerHTML, `<input class="∴value" value="1">`)
+  state.a = 2
+  is(el.value, '2')
+  is(el.outerHTML, `<input class="∴value" value="2">`)
+
+  el.value = 3
+  el.dispatchEvent(new window.Event('change'))
+  is(state.a, '3')
+})
+
 test('text: core', async () => {
   let el = h`<div :text="text"></div>`
   let params = sprae(el, {text:'abc'})
@@ -181,3 +253,51 @@ test('each: condition within loop', async () => {
   is(el.innerHTML, '')
 })
 
+test('on: base', () => {
+  let el = h`<div :on="{click(e){log.push('click')},x}"></div>`
+  let log = signal([])
+  let params = sprae(el, {x(){log.value.push('x')}, log})
+
+  is(el.outerHTML, `<div class="∴on"></div>`);
+  el.dispatchEvent(new window.Event('click'));
+  is(log.value, ['click'])
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x'])
+
+  params.x = function(){log.value.push('xx')}
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x','xx']);
+
+  delete params.x;
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x','xx']);
+})
+
+test('with: inline', () => {
+  let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
+  let state = sprae(el, {baz: 'qux'})
+  // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
+  is(el.innerHTML, `<y class="∴text">barqux</y>`)
+  state.baz = 'quux'
+  is(el.innerHTML, `<y class="∴text">barquux</y>`)
+})
+test('with: data', () => {
+  let el = h`<x :with="x"><y :text="foo"></y></x>`
+  let [state, update] = sprae(el, {x:{foo:'bar'}})
+  is(el.innerHTML, `<y class="∴text">bar</y>`)
+  update({x:{foo:'baz'}})
+  is(el.innerHTML, `<y class="∴text">baz</y>`)
+})
+test('with: inheritance', () => {
+  // NOTE: y:text initializes through directive, not through parent
+  // therefore by default :text uses parent's state, not defined by element itself
+  let el = h`<x :with="{foo:'foo'}"><y :with="b" :text="foo+bar"></y></x>`
+  sprae(el, {b:{bar:'bar'}})
+  is(el.innerHTML, `<y class="∴with ∴text">foobar</y>`)
+})
+test('with: reactive inheritance', () => {
+  let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
+  const bar = signal('2')
+  sprae(el, {b:{c:{bar}}})
+  is(el.innerHTML, `<y class="∴with ∴text">12</y>`)
+})

package/src/directives/hidden.js

@@ -1,14 +0,0 @@
-import { directive, parseExpr } from '../core.js'
-
-// hidden attribute directive example
-directive('hidden', (el) => {
-  let expr = el.getAttribute(':hidden');
-  el.removeAttribute(':hidden');
-  let evaluate = parseExpr(expr);
-  return (state) => {
-    let value = evaluate(state);
-    if (value || value === '') el.setAttribute('hidden', '')
-    else el.removeAttribute('hidden')
-  }
-})
-