sprae 1.0.0 → 2.0.0

package/sprae.js

@@ -1,146 +1,595 @@
+// node_modules/@preact/signals-core/dist/signals-core.module.js
+function i2() {
+  throw new Error("Cycle detected");
+}
+function t() {
+  if (!(n > 1)) {
+    var i3, t2 = false;
+    while (void 0 !== r) {
+      var h2 = r;
+      r = void 0;
+      s++;
+      while (void 0 !== h2) {
+        var o2 = h2.o;
+        h2.o = void 0;
+        h2.f &= -3;
+        if (!(8 & h2.f) && d(h2))
+          try {
+            h2.c();
+          } catch (h3) {
+            if (!t2) {
+              i3 = h3;
+              t2 = true;
+            }
+          }
+        h2 = o2;
+      }
+    }
+    s = 0;
+    n--;
+    if (t2)
+      throw i3;
+  } else
+    n--;
+}
+function h(i3) {
+  if (n > 0)
+    return i3();
+  n++;
+  try {
+    return i3();
+  } finally {
+    t();
+  }
+}
+var o = void 0;
+var r = void 0;
+var n = 0;
+var s = 0;
+var f = 0;
+function v(i3) {
+  if (void 0 !== o) {
+    var t2 = i3.n;
+    if (void 0 === t2 || t2.t !== o) {
+      o.s = t2 = { i: 0, S: i3, p: void 0, n: o.s, t: o, e: void 0, x: void 0, r: t2 };
+      i3.n = t2;
+      if (32 & o.f)
+        i3.S(t2);
+      return t2;
+    } else if (-1 === t2.i) {
+      t2.i = 0;
+      if (void 0 !== t2.p) {
+        t2.p.n = t2.n;
+        if (void 0 !== t2.n)
+          t2.n.p = t2.p;
+        t2.p = void 0;
+        t2.n = o.s;
+        o.s.p = t2;
+        o.s = t2;
+      }
+      return t2;
+    }
+  }
+}
+function e(i3) {
+  this.v = i3;
+  this.i = 0;
+  this.n = void 0;
+  this.t = void 0;
+}
+e.prototype.h = function() {
+  return true;
+};
+e.prototype.S = function(i3) {
+  if (this.t !== i3 && void 0 === i3.e) {
+    i3.x = this.t;
+    if (void 0 !== this.t)
+      this.t.e = i3;
+    this.t = i3;
+  }
+};
+e.prototype.U = function(i3) {
+  var t2 = i3.e, h2 = i3.x;
+  if (void 0 !== t2) {
+    t2.x = h2;
+    i3.e = void 0;
+  }
+  if (void 0 !== h2) {
+    h2.e = t2;
+    i3.x = void 0;
+  }
+  if (i3 === this.t)
+    this.t = h2;
+};
+e.prototype.subscribe = function(i3) {
+  var t2 = this;
+  return b(function() {
+    var h2 = t2.value, o2 = 32 & this.f;
+    this.f &= -33;
+    try {
+      i3(h2);
+    } finally {
+      this.f |= o2;
+    }
+  });
+};
+e.prototype.valueOf = function() {
+  return this.value;
+};
+e.prototype.toString = function() {
+  return this.value + "";
+};
+e.prototype.peek = function() {
+  return this.v;
+};
+Object.defineProperty(e.prototype, "value", { get: function() {
+  var i3 = v(this);
+  if (void 0 !== i3)
+    i3.i = this.i;
+  return this.v;
+}, set: function(h2) {
+  if (h2 !== this.v) {
+    if (s > 100)
+      i2();
+    this.v = h2;
+    this.i++;
+    f++;
+    n++;
+    try {
+      for (var o2 = this.t; void 0 !== o2; o2 = o2.x)
+        o2.t.N();
+    } finally {
+      t();
+    }
+  }
+} });
+function u(i3) {
+  return new e(i3);
+}
+function d(i3) {
+  for (var t2 = i3.s; void 0 !== t2; t2 = t2.n)
+    if (t2.S.i !== t2.i || !t2.S.h() || t2.S.i !== t2.i)
+      return true;
+  return false;
+}
+function c(i3) {
+  for (var t2 = i3.s; void 0 !== t2; t2 = t2.n) {
+    var h2 = t2.S.n;
+    if (void 0 !== h2)
+      t2.r = h2;
+    t2.S.n = t2;
+    t2.i = -1;
+  }
+}
+function a(i3) {
+  var t2 = i3.s, h2 = void 0;
+  while (void 0 !== t2) {
+    var o2 = t2.n;
+    if (-1 === t2.i) {
+      t2.S.U(t2);
+      t2.n = void 0;
+    } else {
+      if (void 0 !== h2)
+        h2.p = t2;
+      t2.p = void 0;
+      t2.n = h2;
+      h2 = t2;
+    }
+    t2.S.n = t2.r;
+    if (void 0 !== t2.r)
+      t2.r = void 0;
+    t2 = o2;
+  }
+  i3.s = h2;
+}
+function l(i3) {
+  e.call(this, void 0);
+  this.x = i3;
+  this.s = void 0;
+  this.g = f - 1;
+  this.f = 4;
+}
+(l.prototype = new e()).h = function() {
+  this.f &= -3;
+  if (1 & this.f)
+    return false;
+  if (32 == (36 & this.f))
+    return true;
+  this.f &= -5;
+  if (this.g === f)
+    return true;
+  this.g = f;
+  this.f |= 1;
+  if (this.i > 0 && !d(this)) {
+    this.f &= -2;
+    return true;
+  }
+  var i3 = o;
+  try {
+    c(this);
+    o = this;
+    var t2 = this.x();
+    if (16 & this.f || this.v !== t2 || 0 === this.i) {
+      this.v = t2;
+      this.f &= -17;
+      this.i++;
+    }
+  } catch (i4) {
+    this.v = i4;
+    this.f |= 16;
+    this.i++;
+  }
+  o = i3;
+  a(this);
+  this.f &= -2;
+  return true;
+};
+l.prototype.S = function(i3) {
+  if (void 0 === this.t) {
+    this.f |= 36;
+    for (var t2 = this.s; void 0 !== t2; t2 = t2.n)
+      t2.S.S(t2);
+  }
+  e.prototype.S.call(this, i3);
+};
+l.prototype.U = function(i3) {
+  e.prototype.U.call(this, i3);
+  if (void 0 === this.t) {
+    this.f &= -33;
+    for (var t2 = this.s; void 0 !== t2; t2 = t2.n)
+      t2.S.U(t2);
+  }
+};
+l.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 6;
+    for (var i3 = this.t; void 0 !== i3; i3 = i3.x)
+      i3.t.N();
+  }
+};
+l.prototype.peek = function() {
+  if (!this.h())
+    i2();
+  if (16 & this.f)
+    throw this.v;
+  return this.v;
+};
+Object.defineProperty(l.prototype, "value", { get: function() {
+  if (1 & this.f)
+    i2();
+  var t2 = v(this);
+  this.h();
+  if (void 0 !== t2)
+    t2.i = this.i;
+  if (16 & this.f)
+    throw this.v;
+  return this.v;
+} });
+function w(i3) {
+  return new l(i3);
+}
+function y(i3) {
+  var h2 = i3.u;
+  i3.u = void 0;
+  if ("function" == typeof h2) {
+    n++;
+    var r2 = o;
+    o = void 0;
+    try {
+      h2();
+    } catch (t2) {
+      i3.f &= -2;
+      i3.f |= 8;
+      _(i3);
+      throw t2;
+    } finally {
+      o = r2;
+      t();
+    }
+  }
+}
+function _(i3) {
+  for (var t2 = i3.s; void 0 !== t2; t2 = t2.n)
+    t2.S.U(t2);
+  i3.x = void 0;
+  i3.s = void 0;
+  y(i3);
+}
+function g(i3) {
+  if (o !== this)
+    throw new Error("Out-of-order effect");
+  a(this);
+  o = i3;
+  this.f &= -2;
+  if (8 & this.f)
+    _(this);
+  t();
+}
+function p(i3) {
+  this.x = i3;
+  this.u = void 0;
+  this.s = void 0;
+  this.o = void 0;
+  this.f = 32;
+}
+p.prototype.c = function() {
+  var i3 = this.S();
+  try {
+    if (!(8 & this.f) && void 0 !== this.x)
+      this.u = this.x();
+  } finally {
+    i3();
+  }
+};
+p.prototype.S = function() {
+  if (1 & this.f)
+    i2();
+  this.f |= 1;
+  this.f &= -9;
+  y(this);
+  c(this);
+  n++;
+  var t2 = o;
+  o = this;
+  return g.bind(this, t2);
+};
+p.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 2;
+    this.o = r;
+    r = this;
+  }
+};
+p.prototype.d = function() {
+  this.f |= 8;
+  if (!(1 & this.f))
+    _(this);
+};
+function b(i3) {
+  var t2 = new p(i3);
+  t2.c();
+  return t2.d.bind(t2);
+}
+
 // 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) => {
+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?.((v2) => (!stop && next(v2), complete?.()), error) || (async (v2) => {
   try {
-    for await (v of target) {
+    for await (v2 of target) {
       if (stop)
         return;
-      next(v);
+      next(v2);
     }
     complete?.();
   } catch (err) {
     error?.(err);
   }
-})()) && ((_) => stop = 1), registry.register(target, unsub), unsub);
+})()) && ((_2) => 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)
+// node_modules/signal-struct/signal-struct.js
+var isSignal = (v2) => v2 && v2.peek;
+var isStruct = (v2) => v2[_struct];
+var _struct = Symbol("signal-struct");
+function SignalStruct(values) {
+  if (isStruct(values))
+    return values;
+  let state, signals;
+  if (isObject(values)) {
+    state = {}, signals = {};
+    for (let key in values)
+      signals[key] = defineSignal(state, key, values[key]);
+  } else
+    throw Error("Only array or object states are supported");
+  Object.defineProperty(state, _struct, { configurable: false, enumerable: false, value: true });
+  Object.seal(state);
+  return state;
+}
+function defineSignal(state, key, value) {
+  let isObservable, s2 = isSignal(value) ? value : isObject(value) ? u(SignalStruct(value)) : u((isObservable = observable(value)) ? void 0 : value);
+  if (isObservable)
+    sube_default(value, (v2) => s2.value = v2);
+  Object.defineProperty(state, key, {
+    get() {
+      return s2.value;
+    },
+    set: isSignal(value) ? (v2) => s2.value = v2 : isObject(value) ? (v2) => v2 ? Object.assign(s2.value, v2) : s2.value = v2 : (v2) => s2.value = v2,
+    enumerable: true,
+    configurable: false
   });
-  return proxy;
+  return s2;
 }
-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);
+function isObject(v2) {
+  return v2 && v2.constructor === Object;
+}
+
+// src/core.js
+var memo = /* @__PURE__ */ new WeakMap();
+function sprae(container, values) {
+  if (!container.children)
+    return;
+  if (memo.has(container))
+    return memo.get(container);
+  values ||= {};
+  const state = SignalStruct(values);
+  const init = (el2) => {
+    let dir, stop;
+    if (el2.attributes) {
+      for (let i3 = 0; i3 < el2.attributes.length; ) {
+        let attr = el2.attributes[i3];
+        if (attr.name[0] === ":") {
+          dir = directives[attr.name] || directives.default;
+          el2.removeAttribute(attr.name);
+          if (stop = dir(el2, attr.value, state, attr.name.slice(1)) === false)
+            break;
+        } else
+          i3++;
+      }
     }
+    if (!stop)
+      for (let child of el2.children)
+        init(child);
   };
-  return evaluatorMemo[expression] = safeFunction();
+  init(container);
+  memo.set(container, state);
+  return state;
 }
-function exprError(error, expression) {
-  Object.assign(error, { expression });
-  console.warn(`\u2234 ${error.message}
+var directives = {};
 
-${curDir}=${expression ? `"${expression}"
+// node_modules/element-props/element-props.js
+var prop = (el2, k, v2) => {
+  if (k.startsWith("on"))
+    k = k.toLowerCase();
+  if (el2[k] !== v2) {
+    el2[k] = v2;
+  }
+  if (v2 === false || v2 == null)
+    el2.removeAttribute(k);
+  else if (typeof v2 !== "function")
+    el2.setAttribute(
+      dashcase(k),
+      v2 === true ? "" : typeof v2 === "number" || typeof v2 === "string" ? v2 : k === "class" ? (Array.isArray(v2) ? v2 : Object.entries(v2).map(([k2, v3]) => v3 ? k2 : "")).filter(Boolean).join(" ") : k === "style" ? Object.entries(v2).map(([k2, v3]) => `${k2}: ${v3}`).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;
+};
 
-` : ""}`, curEl);
-  setTimeout(() => {
-    throw error;
-  }, 0);
-  return Promise.resolve();
-}
+// node_modules/swapdom/swap-inflate.js
+var swap = (parent, a2, b2, end = null) => {
+  let i3 = 0, cur, next, bi, n2 = b2.length, m = a2.length, { remove, same, insert, replace } = swap;
+  while (i3 < n2 && i3 < m && same(a2[i3], b2[i3]))
+    i3++;
+  while (i3 < n2 && i3 < m && same(b2[n2 - 1], a2[m - 1]))
+    end = b2[--m, --n2];
+  if (i3 == m)
+    while (i3 < n2)
+      insert(end, b2[i3++], parent);
+  else {
+    cur = a2[i3];
+    while (i3 < n2) {
+      bi = b2[i3++], next = cur ? cur.nextSibling : end;
+      if (same(cur, bi))
+        cur = next;
+      else if (i3 < n2 && same(b2[i3], next))
+        replace(cur, bi, parent), cur = next;
+      else
+        insert(cur, bi, parent);
+    }
+    while (!same(cur, end))
+      next = cur.nextSibling, remove(cur, parent), cur = next;
+  }
+  return b2;
+};
+swap.same = (a2, b2) => a2 == b2;
+swap.replace = (a2, b2, parent) => parent.replaceChild(b2, a2);
+swap.insert = (a2, b2, parent) => parent.insertBefore(b2, a2);
+swap.remove = (a2, parent) => parent.removeChild(a2);
+var swap_inflate_default = swap;
 
-// 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);
-  };
-});
+// node_modules/primitive-pool/index.js
+var cache = {};
+var nullObj = {};
+var undefinedObj = {};
+var primitive_pool_default = (key) => {
+  if (key === null)
+    return nullObj;
+  if (key === void 0)
+    return undefinedObj;
+  if (typeof key === "number" || key instanceof Number)
+    return cache[key] || (cache[key] = new Number(key));
+  if (typeof key === "string" || key instanceof String)
+    return cache[key] || (cache[key] = new String(key));
+  if (typeof key === "boolean" || key instanceof Boolean)
+    return cache[key] || (cache[key] = new Boolean(key));
+  return key;
+};
 
-// src/directives/each.js
-directive(":each", (el2, expr) => {
+// src/directives.js
+directives[":with"] = (el2, expr, rootState) => {
+  let evaluate = parseExpr(expr, "with", rootState);
+  const params = w(() => Object.assign({}, rootState, evaluate(rootState)));
+  let state = sprae(el2, params.value);
+  b((values = params.value) => h(() => Object.assign(state, values)));
+};
+directives[":if"] = (el2, expr, state) => {
+  let holder = document.createTextNode(""), clauses = [parseExpr(expr, ":if", state)], els = [el2], cur = el2;
+  while (cur = el2.nextElementSibling) {
+    if (cur.hasAttribute(":else")) {
+      cur.removeAttribute(":else");
+      if (expr = cur.getAttribute(":if")) {
+        cur.removeAttribute(":if"), cur.remove();
+        els.push(cur);
+        clauses.push(parseExpr(expr, ":else :if", state));
+      } else {
+        cur.remove();
+        els.push(cur);
+        clauses.push(() => 1);
+      }
+    } else
+      break;
+  }
+  el2.replaceWith(cur = holder);
+  let idx = w(() => clauses.findIndex((f2) => f2(state)));
+  b((i3 = idx.value) => els[i3] != cur && ((cur[_eachHolder] || cur).replaceWith(cur = els[i3] || holder), sprae(cur, state)));
+  return false;
+};
+var _eachHolder = Symbol(":each");
+directives[":each"] = (tpl, expr, state) => {
   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);
-    });
-  };
-});
+  const getItems = parseExpr(each.items, ":each", state);
+  const holder = tpl[_eachHolder] = document.createTextNode("");
+  tpl.replaceWith(holder);
+  const items = w(() => {
+    let list = getItems(state);
+    if (typeof list === "number")
+      return Array.from({ length: list }, (_2, i3) => i3 + 1);
+    return list;
+  });
+  const scopes = /* @__PURE__ */ new WeakMap();
+  const itemEls = /* @__PURE__ */ new WeakMap();
+  let curEls = [];
+  b((list = items.value) => {
+    if (!list)
+      list = [];
+    let newEls = [], elScopes = [];
+    for (let item of list) {
+      let key = primitive_pool_default(item);
+      let el2 = itemEls.get(key);
+      if (!el2) {
+        el2 = tpl.cloneNode(true);
+        itemEls.set(key, el2);
+      }
+      newEls.push(el2);
+      if (!scopes.has(key)) {
+        let scope = Object.create(state);
+        scope[each.item] = item;
+        if (each.index)
+          scope[each.index] = i;
+        scopes.set(key, scope);
+      }
+      elScopes.push(scopes.get(key));
+    }
+    swap_inflate_default(holder.parentNode, curEls, newEls, holder);
+    curEls = newEls;
+    for (let i3 = 0; i3 < newEls.length; i3++) {
+      sprae(newEls[i3], elScopes[i3]);
+    }
+  });
+  return false;
+};
 function parseForExpression(expression) {
   let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
   let stripParensRE = /^\s*\(|\)\s*$/g;
@@ -160,158 +609,101 @@ function parseForExpression(expression) {
   }
   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);
+directives["default"] = (el2, expr, state, name) => {
+  let evaluate = parseExpr(expr, ":" + name, state);
+  const update = (value) => prop(el2, name, value);
+  b(() => update(evaluate(state)));
+};
+directives[":aria"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":aria", state);
+  const update = (value) => {
+    for (let key in value)
+      prop(el2, "aria" + key[0].toUpperCase() + key.slice(1), value[key] == null ? null : value[key] + "");
   };
-});
-
-// 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(";") : ""
-    );
+  b(() => update(evaluate(state)));
 };
-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;
+directives[":data"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":data", state);
+  const value = w(() => evaluate(state));
+  b((v2 = value.value) => {
+    for (let key in v2)
+      el2.dataset[key] = v2[key];
+  });
 };
-
-// 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);
-    };
+directives[":on"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":on", state);
+  let listeners = w(() => evaluate(state));
+  let prevListeners;
+  b((values = listeners.value) => {
+    for (let evt in prevListeners)
+      el2.removeEventListener(evt, prevListeners[evt]);
+    prevListeners = values;
+    for (let evt in prevListeners)
+      el2.addEventListener(evt, prevListeners[evt]);
   });
-}
-
-// src/directives/prop.js
-directive(":prop", (el2, expr) => {
-  let evaluate = parseExpr(expr);
-  return (state) => {
-    let value = evaluate(state);
+};
+directives[":"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":", state);
+  const update = (value) => {
+    if (!value)
+      return;
     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]);
+  b(() => update(evaluate(state)));
+};
+directives[":text"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":text", state);
+  const update = (value) => {
+    el2.textContent = value == null ? "" : value;
   };
-});
-
-// src/directives/value.js
-directive(":value", (el2, expr) => {
-  let evaluateGet = parseExpr(expr);
+  b(() => update(evaluate(state)));
+};
+directives[":value"] = (el2, expr, state) => {
+  let evaluate = parseExpr(expr, ":in", state);
   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);
+  const update = (value) => {
     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 };`
-  );
+  b(() => update(evaluate(state)));
+};
+var evaluatorMemo = {};
+function parseExpr(expression, dir, scope) {
+  if (evaluatorMemo[expression])
+    return evaluatorMemo[expression];
+  let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /^(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
+  let evaluate;
+  try {
+    evaluate = new Function(["scope"], `let result; with (scope) { result = ${rightSideSafeExpression} }; return result;`);
+  } catch (e2) {
+    return exprError(e2, expression, dir, scope);
+  }
+  return evaluatorMemo[expression] = (state) => {
+    let result;
+    try {
+      result = evaluate(state);
+    } catch (e2) {
+      return exprError(e2, expression, dir, scope);
+    }
+    return result;
+  };
 }
+function exprError(error, expression, dir, scope) {
+  Object.assign(error, { expression });
+  console.warn(`\u2234sprae: ${error.message}
 
-// 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]);
-  };
-});
+${dir}=${expression ? `"${expression}"
+
+` : ""}`, scope);
+  setTimeout(() => {
+    throw error;
+  }, 0);
+}
 
 // src/index.js
 var src_default = sprae;
 export {
   src_default as default,
-  directive,
-  exprError,
-  parseExpr
+  directives
 };