effect-start 0.23.0 → 0.25.0

package/dist/datastar/engine.js

@@ -1,999 +1,1145 @@
-import { aliasify, hasOwn, isHTMLOrSVG, isPojo, pathToObj, snake } from "./utils.js";
+import { aliasify, hasOwn, isHTMLOrSVG, isPojo, pathToObj, snake } from "./utils.js"
+
 /*********
  * consts.ts
  *********/
-const lol = /🖕JS_DS🚀/.source;
-export const DSP = lol.slice(0, 5);
-export const DSS = lol.slice(4);
-export const DATASTAR_FETCH_EVENT = "datastar-fetch";
-export const DATASTAR_SIGNAL_PATCH_EVENT = "datastar-signal-patch";
-const ReactiveFlags = {
-    None: 0,
-    Mutable: 1 << 0,
-    Watching: 1 << 1,
-    RecursedCheck: 1 << 2,
-    Recursed: 1 << 3,
-    Dirty: 1 << 4,
-    Pending: 1 << 5,
-};
-const EffectFlags = {
-    Queued: 1 << 6,
-};
-const currentPatch = [];
-const queuedEffects = [];
-let batchDepth = 0;
-let notifyIndex = 0;
-let queuedEffectsLength = 0;
-let prevSub;
-let activeSub;
-let version = 0;
+const lol = /🖕JS_DS🚀/.source
+export const DSP = lol.slice(0, 5)
+export const DSS = lol.slice(4)
+export const DATASTAR_FETCH_EVENT = "datastar-fetch"
+export const DATASTAR_SIGNAL_PATCH_EVENT = "datastar-signal-patch"
+
+/*********
+ * types.ts
+ *********/
+
+/*********
+ * signals.ts
+ *********/
+
+const ReactiveFlags = /** @type {const} */ {
+  None: 0,
+  Mutable: 1 << 0,
+  Watching: 1 << 1,
+  RecursedCheck: 1 << 2,
+  Recursed: 1 << 3,
+  Dirty: 1 << 4,
+  Pending: 1 << 5,
+}
+
+const EffectFlags = /** @type {const} */ {
+  Queued: 1 << 6,
+}
+
+const currentPatch = []
+const queuedEffects = []
+let batchDepth = 0
+let notifyIndex = 0
+let queuedEffectsLength = 0
+let prevSub
+let activeSub
+let version = 0
+
 export const beginBatch = () => {
-    batchDepth++;
-};
+  batchDepth++
+}
+
 export const endBatch = () => {
-    if (!--batchDepth) {
-        flush();
-        dispatch();
-    }
-};
+  if (!--batchDepth) {
+    flush()
+    dispatch()
+  }
+}
+
 export const startPeeking = (sub) => {
-    prevSub = activeSub;
-    activeSub = sub;
-};
+  prevSub = activeSub
+  activeSub = sub
+}
+
 export const stopPeeking = () => {
-    activeSub = prevSub;
-    prevSub = undefined;
-};
+  activeSub = prevSub
+  prevSub = undefined
+}
+
 export const signal = (initialValue) => {
-    return signalOper.bind(0, {
-        previousValue: initialValue,
-        value_: initialValue,
-        flags_: 1,
-    });
-};
-const computedSymbol = Symbol("computed");
+  return signalOper.bind(0, {
+    previousValue: initialValue,
+    value_: initialValue,
+    flags_: 1,
+  })
+}
+
+const computedSymbol = Symbol("computed")
 export const computed = (getter) => {
-    const c = computedOper.bind(0, {
-        flags_: 17,
-        getter,
-    });
-    // @ts-ignore
-    c[computedSymbol] = 1;
-    return c;
-};
+  const c = computedOper.bind(0, {
+    flags_: 17,
+    getter,
+  })
+  // @ts-ignore
+  c[computedSymbol] = 1
+  return c
+}
+
 export const effect = (fn) => {
-    const e = {
-        fn_: fn,
-        flags_: 2,
-    };
-    if (activeSub) {
-        link(e, activeSub);
-    }
-    startPeeking(e);
-    beginBatch();
-    try {
-        e.fn_();
-    }
-    finally {
-        endBatch();
-        stopPeeking();
-    }
-    return effectOper.bind(0, e);
-};
+  const e = {
+    fn_: fn,
+    flags_: 2,
+  }
+  if (activeSub) {
+    link(e, activeSub)
+  }
+  startPeeking(e)
+  beginBatch()
+  try {
+    e.fn_()
+  } finally {
+    endBatch()
+    stopPeeking()
+  }
+  return effectOper.bind(0, e)
+}
+
 const flush = () => {
-    while (notifyIndex < queuedEffectsLength) {
-        const effect = queuedEffects[notifyIndex];
-        queuedEffects[notifyIndex++] = undefined;
-        run(effect, (effect.flags_ &= ~EffectFlags.Queued));
-    }
-    notifyIndex = 0;
-    queuedEffectsLength = 0;
-};
+  while (notifyIndex < queuedEffectsLength) {
+    const effect = queuedEffects[notifyIndex]
+    queuedEffects[notifyIndex++] = undefined
+    run(effect, (effect.flags_ &= ~EffectFlags.Queued))
+  }
+  notifyIndex = 0
+  queuedEffectsLength = 0
+}
+
 const update = (signal) => {
-    if ("getter" in signal) {
-        return updateComputed(signal);
-    }
-    return updateSignal(signal, signal.value_);
-};
+  if ("getter" in signal) {
+    return updateComputed(signal)
+  }
+  return updateSignal(signal, signal.value_)
+}
+
 const updateComputed = (c) => {
-    startPeeking(c);
-    startTracking(c);
-    try {
-        const oldValue = c.value_;
-        return oldValue !== (c.value_ = c.getter(oldValue));
-    }
-    finally {
-        stopPeeking();
-        endTracking(c);
-    }
-};
+  startPeeking(c)
+  startTracking(c)
+  try {
+    const oldValue = c.value_
+    return oldValue !== (c.value_ = c.getter(oldValue))
+  } finally {
+    stopPeeking()
+    endTracking(c)
+  }
+}
+
 const updateSignal = (s, value) => {
-    s.flags_ = 1;
-    return s.previousValue !== (s.previousValue = value);
-};
+  s.flags_ = 1
+  return s.previousValue !== (s.previousValue = value)
+}
+
 const notify = (e) => {
-    const flags = e.flags_;
-    if (!(flags & EffectFlags.Queued)) {
-        e.flags_ = flags | EffectFlags.Queued;
-        const subs = e.subs_;
-        if (subs) {
-            notify(subs.sub_);
-        }
-        else {
-            queuedEffects[queuedEffectsLength++] = e;
-        }
-    }
-};
+  const flags = e.flags_
+  if (!(flags & EffectFlags.Queued)) {
+    e.flags_ = flags | EffectFlags.Queued
+    const subs = e.subs_
+    if (subs) {
+      notify(subs.sub_)
+    } else {
+      queuedEffects[queuedEffectsLength++] = e
+    }
+  }
+}
+
 const run = (e, flags) => {
-    if (flags & 16 ||
-        (flags & 32 && checkDirty(e.deps_, e))) {
-        startPeeking(e);
-        startTracking(e);
-        beginBatch();
-        try {
-            e.fn_();
-        }
-        finally {
-            endBatch();
-            stopPeeking();
-            endTracking(e);
-        }
-        return;
-    }
-    if (flags & 32) {
-        e.flags_ = flags & ~32;
-    }
-    let link = e.deps_;
-    while (link) {
-        const dep = link.dep_;
-        const depFlags = dep.flags_;
-        if (depFlags & EffectFlags.Queued) {
-            run(dep, (dep.flags_ = depFlags & ~EffectFlags.Queued));
-        }
-        link = link.nextDep_;
-    }
-};
+  if (
+    flags & (16) ||
+    (flags & (32) && checkDirty(e.deps_, e))
+  ) {
+    startPeeking(e)
+    startTracking(e)
+    beginBatch()
+    try {
+      e.fn_()
+    } finally {
+      endBatch()
+      stopPeeking()
+      endTracking(e)
+    }
+    return
+  }
+  if (flags & (32)) {
+    e.flags_ = flags & ~(32)
+  }
+  let link = e.deps_
+  while (link) {
+    const dep = link.dep_
+    const depFlags = dep.flags_
+    if (depFlags & EffectFlags.Queued) {
+      run(dep, (dep.flags_ = depFlags & ~EffectFlags.Queued))
+    }
+    link = link.nextDep_
+  }
+}
+
 const signalOper = (s, ...value) => {
-    if (value.length) {
-        if (s.value_ !== (s.value_ = value[0])) {
-            s.flags_ = 17;
-            const subs = s.subs_;
-            if (subs) {
-                propagate(subs);
-                if (!batchDepth) {
-                    flush();
-                }
-            }
-            return true;
+  if (value.length) {
+    if (s.value_ !== (s.value_ = value[0])) {
+      s.flags_ = 17
+      const subs = s.subs_
+      if (subs) {
+        propagate(subs)
+        if (!batchDepth) {
+          flush()
         }
-        return false;
-    }
-    const currentValue = s.value_;
-    if (s.flags_ & 16) {
-        if (updateSignal(s, currentValue)) {
-            const subs_ = s.subs_;
-            if (subs_) {
-                shallowPropagate(subs_);
-            }
-        }
-    }
-    if (activeSub) {
-        link(s, activeSub);
-    }
-    return currentValue;
-};
+      }
+      return true
+    }
+    return false
+  }
+  const currentValue = s.value_
+  if (s.flags_ & (16)) {
+    if (updateSignal(s, currentValue)) {
+      const subs_ = s.subs_
+      if (subs_) {
+        shallowPropagate(subs_)
+      }
+    }
+  }
+  if (activeSub) {
+    link(s, activeSub)
+  }
+  return currentValue
+}
+
 const computedOper = (c) => {
-    const flags = c.flags_;
-    if (flags & 16 ||
-        (flags & 32 && checkDirty(c.deps_, c))) {
-        if (updateComputed(c)) {
-            const subs = c.subs_;
-            if (subs) {
-                shallowPropagate(subs);
-            }
-        }
-    }
-    else if (flags & 32) {
-        c.flags_ = flags & ~32;
-    }
-    if (activeSub) {
-        link(c, activeSub);
-    }
-    return c.value_;
-};
+  const flags = c.flags_
+  if (
+    flags & (16) ||
+    (flags & (32) && checkDirty(c.deps_, c))
+  ) {
+    if (updateComputed(c)) {
+      const subs = c.subs_
+      if (subs) {
+        shallowPropagate(subs)
+      }
+    }
+  } else if (flags & (32)) {
+    c.flags_ = flags & ~(32)
+  }
+  if (activeSub) {
+    link(c, activeSub)
+  }
+  return c.value_
+}
+
 const effectOper = (e) => {
-    let dep = e.deps_;
-    while (dep) {
-        dep = unlink(dep, e);
-    }
-    const sub = e.subs_;
-    if (sub) {
-        unlink(sub);
-    }
-    e.flags_ = 0;
-};
+  let dep = e.deps_
+  while (dep) {
+    dep = unlink(dep, e)
+  }
+  const sub = e.subs_
+  if (sub) {
+    unlink(sub)
+  }
+  e.flags_ = 0
+}
+
 const link = (dep, sub) => {
-    const prevDep = sub.depsTail_;
-    if (prevDep && prevDep.dep_ === dep) {
-        return;
-    }
-    const nextDep = prevDep ? prevDep.nextDep_ : sub.deps_;
-    if (nextDep && nextDep.dep_ === dep) {
-        nextDep.version_ = version;
-        sub.depsTail_ = nextDep;
-        return;
-    }
-    const prevSub = dep.subsTail_;
-    if (prevSub && prevSub.version_ === version && prevSub.sub_ === sub) {
-        return;
-    }
-    const newLink = (sub.depsTail_ =
-        dep.subsTail_ =
-            {
-                version_: version,
-                dep_: dep,
-                sub_: sub,
-                prevDep_: prevDep,
-                nextDep_: nextDep,
-                prevSub_: prevSub,
-            });
-    if (nextDep) {
-        nextDep.prevDep_ = newLink;
-    }
-    if (prevDep) {
-        prevDep.nextDep_ = newLink;
-    }
-    else {
-        sub.deps_ = newLink;
-    }
-    if (prevSub) {
-        prevSub.nextSub_ = newLink;
-    }
-    else {
-        dep.subs_ = newLink;
-    }
-};
+  const prevDep = sub.depsTail_
+  if (prevDep && prevDep.dep_ === dep) {
+    return
+  }
+  const nextDep = prevDep ? prevDep.nextDep_ : sub.deps_
+  if (nextDep && nextDep.dep_ === dep) {
+    nextDep.version_ = version
+    sub.depsTail_ = nextDep
+    return
+  }
+  const prevSub = dep.subsTail_
+  if (prevSub && prevSub.version_ === version && prevSub.sub_ === sub) {
+    return
+  }
+  const newLink =
+    (sub.depsTail_ =
+    dep.subsTail_ =
+      {
+        version_: version,
+        dep_: dep,
+        sub_: sub,
+        prevDep_: prevDep,
+        nextDep_: nextDep,
+        prevSub_: prevSub,
+      })
+  if (nextDep) {
+    nextDep.prevDep_ = newLink
+  }
+  if (prevDep) {
+    prevDep.nextDep_ = newLink
+  } else {
+    sub.deps_ = newLink
+  }
+  if (prevSub) {
+    prevSub.nextSub_ = newLink
+  } else {
+    dep.subs_ = newLink
+  }
+}
+
 const unlink = (link, sub = link.sub_) => {
-    const dep_ = link.dep_;
-    const prevDep_ = link.prevDep_;
-    const nextDep_ = link.nextDep_;
-    const nextSub_ = link.nextSub_;
-    const prevSub_ = link.prevSub_;
-    if (nextDep_) {
-        nextDep_.prevDep_ = prevDep_;
-    }
-    else {
-        sub.depsTail_ = prevDep_;
-    }
-    if (prevDep_) {
-        prevDep_.nextDep_ = nextDep_;
-    }
-    else {
-        sub.deps_ = nextDep_;
-    }
-    if (nextSub_) {
-        nextSub_.prevSub_ = prevSub_;
-    }
-    else {
-        dep_.subsTail_ = prevSub_;
-    }
-    if (prevSub_) {
-        prevSub_.nextSub_ = nextSub_;
-    }
-    else if (!(dep_.subs_ = nextSub_)) {
-        if ("getter" in dep_) {
-            let toRemove = dep_.deps_;
-            if (toRemove) {
-                dep_.flags_ = 17;
-                do {
-                    toRemove = unlink(toRemove, dep_);
-                } while (toRemove);
-            }
-        }
-        else if (!("previousValue" in dep_)) {
-            effectOper(dep_);
-        }
-    }
-    return nextDep_;
-};
+  const dep_ = link.dep_
+  const prevDep_ = link.prevDep_
+  const nextDep_ = link.nextDep_
+  const nextSub_ = link.nextSub_
+  const prevSub_ = link.prevSub_
+  if (nextDep_) {
+    nextDep_.prevDep_ = prevDep_
+  } else {
+    sub.depsTail_ = prevDep_
+  }
+  if (prevDep_) {
+    prevDep_.nextDep_ = nextDep_
+  } else {
+    sub.deps_ = nextDep_
+  }
+  if (nextSub_) {
+    nextSub_.prevSub_ = prevSub_
+  } else {
+    dep_.subsTail_ = prevSub_
+  }
+  if (prevSub_) {
+    prevSub_.nextSub_ = nextSub_
+  } else if (!(dep_.subs_ = nextSub_)) {
+    if ("getter" in dep_) {
+      let toRemove = dep_.deps_
+      if (toRemove) {
+        dep_.flags_ = 17
+        do {
+          toRemove = unlink(toRemove, dep_)
+        } while (toRemove)
+      }
+    } else if (!("previousValue" in dep_)) {
+      effectOper(dep_)
+    }
+  }
+  return nextDep_
+}
+
 const propagate = (link) => {
-    let next = link.nextSub_;
-    let stack;
-    top: while (true) {
-        const sub = link.sub_;
-        let flags = sub.flags_;
-        if (!(flags &
-            60)) {
-            sub.flags_ = flags | 32;
-        }
-        else if (!(flags & 12)) {
-            flags = 0;
-        }
-        else if (!(flags & 4)) {
-            sub.flags_ =
-                (flags & ~8) | 32;
-        }
-        else if (!(flags & 48) &&
-            isValidLink(link, sub)) {
-            sub.flags_ = flags | 40;
-            flags &= 1;
+  let next = link.nextSub_
+  let stack
+
+  top: while (true) {
+    const sub = link.sub_
+
+    let flags = sub.flags_
+
+    if (
+      !(
+        flags &
+        (60)
+      )
+    ) {
+      sub.flags_ = flags | (32)
+    } else if (!(flags & (12))) {
+      flags = 0
+    } else if (!(flags & (4))) {
+      sub.flags_ =
+        (flags & ~(8)) | (32)
+    } else if (
+      !(flags & (48)) &&
+      isValidLink(link, sub)
+    ) {
+      sub.flags_ = flags | (40)
+      flags &= 1
+    } else {
+      flags = 0
+    }
+
+    if (flags & (2)) {
+      notify(sub)
+    }
+
+    if (flags & (1)) {
+      const subSubs = sub.subs_
+      if (subSubs) {
+        const nextSub = (link = subSubs).nextSub_
+        if (nextSub) {
+          stack = { value_: next, prev_: stack }
+          next = nextSub
         }
-        else {
-            flags = 0;
-        }
-        if (flags & 2) {
-            notify(sub);
-        }
-        if (flags & 1) {
-            const subSubs = sub.subs_;
-            if (subSubs) {
-                const nextSub = (link = subSubs).nextSub_;
-                if (nextSub) {
-                    stack = { value_: next, prev_: stack };
-                    next = nextSub;
-                }
-                continue;
-            }
-        }
-        if ((link = next)) {
-            next = link.nextSub_;
-            continue;
-        }
-        while (stack) {
-            link = stack.value_;
-            stack = stack.prev_;
-            if (link) {
-                next = link.nextSub_;
-                continue top;
-            }
-        }
-        break;
-    }
-};
+        continue
+      }
+    }
+
+    if ((link = next)) {
+      next = link.nextSub_
+      continue
+    }
+
+    while (stack) {
+      link = stack.value_
+      stack = stack.prev_
+      if (link) {
+        next = link.nextSub_
+        continue top
+      }
+    }
+
+    break
+  }
+}
+
 const startTracking = (sub) => {
-    version++;
-    sub.depsTail_ = undefined;
-    sub.flags_ =
-        (sub.flags_ & ~56) |
-            4;
-};
+  version++
+  sub.depsTail_ = undefined
+  sub.flags_ =
+    (sub.flags_ & ~(56)) |
+    (4)
+}
+
 const endTracking = (sub) => {
-    const depsTail_ = sub.depsTail_;
-    let toRemove = depsTail_ ? depsTail_.nextDep_ : sub.deps_;
-    while (toRemove) {
-        toRemove = unlink(toRemove, sub);
-    }
-    sub.flags_ &= ~4;
-};
+  const depsTail_ = sub.depsTail_
+  let toRemove = depsTail_ ? depsTail_.nextDep_ : sub.deps_
+  while (toRemove) {
+    toRemove = unlink(toRemove, sub)
+  }
+  sub.flags_ &= ~(4)
+}
+
 const checkDirty = (link, sub) => {
-    let stack;
-    let checkDepth = 0;
-    let dirty = false;
-    top: while (true) {
-        const dep = link.dep_;
-        const flags = dep.flags_;
-        if (sub.flags_ & 16) {
-            dirty = true;
-        }
-        else if ((flags & 17) ===
-            17) {
-            if (update(dep)) {
-                const subs = dep.subs_;
-                if (subs.nextSub_) {
-                    shallowPropagate(subs);
-                }
-                dirty = true;
-            }
-        }
-        else if ((flags & 33) ===
-            33) {
-            if (link.nextSub_ || link.prevSub_) {
-                stack = { value_: link, prev_: stack };
-            }
-            link = dep.deps_;
-            sub = dep;
-            ++checkDepth;
-            continue;
+  let stack
+  let checkDepth = 0
+  let dirty = false
+
+  top: while (true) {
+    const dep = link.dep_
+    const flags = dep.flags_
+
+    if (sub.flags_ & (16)) {
+      dirty = true
+    } else if (
+      (flags & (17)) ===
+      (17)
+    ) {
+      if (update(dep)) {
+        const subs = dep.subs_
+        if (subs.nextSub_) {
+          shallowPropagate(subs)
         }
-        if (!dirty) {
-            const nextDep = link.nextDep_;
-            if (nextDep) {
-                link = nextDep;
-                continue;
-            }
+        dirty = true
+      }
+    } else if (
+      (flags & (33)) ===
+      (33)
+    ) {
+      if (link.nextSub_ || link.prevSub_) {
+        stack = { value_: link, prev_: stack }
+      }
+      link = dep.deps_
+      sub = dep
+      ++checkDepth
+      continue
+    }
+
+    if (!dirty) {
+      const nextDep = link.nextDep_
+      if (nextDep) {
+        link = nextDep
+        continue
+      }
+    }
+
+    while (checkDepth--) {
+      const firstSub = sub.subs_
+      const hasMultipleSubs = firstSub.nextSub_
+      if (hasMultipleSubs) {
+        link = stack.value_
+        stack = stack.prev_
+      } else {
+        link = firstSub
+      }
+      if (dirty) {
+        if (update(sub)) {
+          if (hasMultipleSubs) {
+            shallowPropagate(firstSub)
+          }
+          sub = link.sub_
+          continue
         }
-        while (checkDepth--) {
-            const firstSub = sub.subs_;
-            const hasMultipleSubs = firstSub.nextSub_;
-            if (hasMultipleSubs) {
-                link = stack.value_;
-                stack = stack.prev_;
-            }
-            else {
-                link = firstSub;
-            }
-            if (dirty) {
-                if (update(sub)) {
-                    if (hasMultipleSubs) {
-                        shallowPropagate(firstSub);
-                    }
-                    sub = link.sub_;
-                    continue;
-                }
-                dirty = false;
-            }
-            else {
-                sub.flags_ &= ~32;
-            }
-            sub = link.sub_;
-            if (link.nextDep_) {
-                link = link.nextDep_;
-                continue top;
-            }
-        }
-        return dirty;
-    }
-};
+        dirty = false
+      } else {
+        sub.flags_ &= ~(32)
+      }
+      sub = link.sub_
+      if (link.nextDep_) {
+        link = link.nextDep_
+        continue top
+      }
+    }
+
+    return dirty
+  }
+}
+
 const shallowPropagate = (link) => {
-    do {
-        const sub = link.sub_;
-        const flags = sub.flags_;
-        if ((flags & 48) ===
-            32) {
-            sub.flags_ = flags | 16;
-            if (flags & 2) {
-                notify(sub);
-            }
-        }
-    } while ((link = link.nextSub_));
-};
+  do {
+    const sub = link.sub_
+    const flags = sub.flags_
+    if (
+      (flags & (48)) ===
+      (32)
+    ) {
+      sub.flags_ = flags | (16)
+      if (flags & (2)) {
+        notify(sub)
+      }
+    }
+  } while ((link = link.nextSub_))
+}
+
 const isValidLink = (checkLink, sub) => {
-    let link = sub.depsTail_;
-    while (link) {
-        if (link === checkLink) {
-            return true;
-        }
-        link = link.prevDep_;
-    }
-    return false;
-};
+  let link = sub.depsTail_
+  while (link) {
+    if (link === checkLink) {
+      return true
+    }
+    link = link.prevDep_
+  }
+  return false
+}
+
 export const getPath = (path) => {
-    let result = root;
-    const split = path.split(".");
-    for (const path of split) {
-        if (result == null || !hasOwn(result, path)) {
-            return;
-        }
-        result = result[path];
-    }
-    return result;
-};
+  let result = root
+  const split = path.split(".")
+  for (const path of split) {
+    if (result == null || !hasOwn(result, path)) {
+      return
+    }
+    result = result[path]
+  }
+  return result
+}
+
 const deep = (value, prefix = "") => {
-    const isArr = Array.isArray(value);
-    if (isArr || isPojo(value)) {
-        const deepObj = (isArr ? [] : {});
-        for (const key in value) {
-            deepObj[key] = signal(deep(value[key], `${prefix + key}.`));
+  const isArr = Array.isArray(value)
+  if (isArr || isPojo(value)) {
+    const deepObj = (isArr ? [] : {})
+    for (const key in value) {
+      deepObj[key] = signal(deep((value)[key], `${prefix + key}.`))
+    }
+    const keys = signal(0)
+    return new Proxy(deepObj, {
+      get(_, prop) {
+        if (!(prop === "toJSON" && !hasOwn(deepObj, prop))) {
+          if (isArr && prop in Array.prototype) {
+            keys()
+            return deepObj[prop]
+          }
+          if (typeof prop === "symbol") {
+            return deepObj[prop]
+          }
+          if (!hasOwn(deepObj, prop) || deepObj[prop]() == null) {
+            deepObj[prop] = signal("")
+            dispatch(prefix + prop, "")
+            keys(keys() + 1)
+          }
+          return deepObj[prop]()
         }
-        const keys = signal(0);
-        return new Proxy(deepObj, {
-            get(_, prop) {
-                if (!(prop === "toJSON" && !hasOwn(deepObj, prop))) {
-                    if (isArr && prop in Array.prototype) {
-                        keys();
-                        return deepObj[prop];
-                    }
-                    if (typeof prop === "symbol") {
-                        return deepObj[prop];
-                    }
-                    if (!hasOwn(deepObj, prop) || deepObj[prop]() == null) {
-                        deepObj[prop] = signal("");
-                        dispatch(prefix + prop, "");
-                        keys(keys() + 1);
-                    }
-                    return deepObj[prop]();
-                }
-            },
-            set(_, prop, newValue) {
-                const path = prefix + prop;
-                if (isArr && prop === "length") {
-                    const diff = deepObj[prop] - newValue;
-                    deepObj[prop] = newValue;
-                    if (diff > 0) {
-                        const patch = {};
-                        for (let i = newValue; i < deepObj[prop]; i++) {
-                            patch[i] = null;
-                        }
-                        dispatch(prefix.slice(0, -1), patch);
-                        keys(keys() + 1);
-                    }
-                }
-                else if (hasOwn(deepObj, prop)) {
-                    if (newValue == null) {
-                        delete deepObj[prop];
-                    }
-                    else if (hasOwn(newValue, computedSymbol)) {
-                        deepObj[prop] = newValue;
-                        dispatch(path, "");
-                    }
-                    else {
-                        const currentValue = deepObj[prop]();
-                        const pathStr = `${path}.`;
-                        if (isPojo(currentValue) && isPojo(newValue)) {
-                            for (const key in currentValue) {
-                                if (!hasOwn(newValue, key)) {
-                                    delete currentValue[key];
-                                    dispatch(pathStr + key, null);
-                                }
-                            }
-                            for (const key in newValue) {
-                                const nextVal = newValue[key];
-                                if (currentValue[key] !== nextVal) {
-                                    currentValue[key] = nextVal;
-                                }
-                            }
-                        }
-                        else if (deepObj[prop](deep(newValue, pathStr))) {
-                            dispatch(path, newValue);
-                        }
-                    }
+      },
+      set(_, prop, newValue) {
+        const path = prefix + prop
+        if (isArr && prop === "length") {
+          const diff = (deepObj[prop]) - newValue
+          deepObj[prop] = newValue
+          if (diff > 0) {
+            const patch = {}
+            for (let i = newValue; i < deepObj[prop]; i++) {
+              patch[i] = null
+            }
+            dispatch(prefix.slice(0, -1), patch)
+            keys(keys() + 1)
+          }
+        } else if (hasOwn(deepObj, prop)) {
+          if (newValue == null) {
+            delete deepObj[prop]
+          } else if (hasOwn(newValue, computedSymbol)) {
+            deepObj[prop] = newValue
+            dispatch(path, "")
+          } else {
+            const currentValue = deepObj[prop]()
+            const pathStr = `${path}.`
+            if (isPojo(currentValue) && isPojo(newValue)) {
+              for (const key in currentValue) {
+                if (!hasOwn(newValue, key)) {
+                  delete currentValue[key]
+                  dispatch(pathStr + key, null)
                 }
-                else if (newValue != null) {
-                    if (hasOwn(newValue, computedSymbol)) {
-                        deepObj[prop] = newValue;
-                        dispatch(path, "");
-                    }
-                    else {
-                        deepObj[prop] = signal(deep(newValue, `${path}.`));
-                        dispatch(path, newValue);
-                    }
-                    keys(keys() + 1);
+              }
+              for (const key in newValue) {
+                const nextVal = newValue[key]
+                if (currentValue[key] !== nextVal) {
+                  currentValue[key] = nextVal
                 }
-                return true;
-            },
-            deleteProperty(_, prop) {
-                delete deepObj[prop];
-                keys(keys() + 1);
-                return true;
-            },
-            ownKeys() {
-                keys();
-                return Reflect.ownKeys(deepObj);
-            },
-            has(_, prop) {
-                keys();
-                return prop in deepObj;
-            },
-        });
-    }
-    return value;
-};
+              }
+            } else if (deepObj[prop](deep(newValue, pathStr))) {
+              dispatch(path, newValue)
+            }
+          }
+        } else if (newValue != null) {
+          if (hasOwn(newValue, computedSymbol)) {
+            deepObj[prop] = newValue
+            dispatch(path, "")
+          } else {
+            deepObj[prop] = signal(deep(newValue, `${path}.`))
+            dispatch(path, newValue)
+          }
+          keys(keys() + 1)
+        }
+
+        return true
+      },
+      deleteProperty(_, prop) {
+        delete deepObj[prop]
+        keys(keys() + 1)
+        return true
+      },
+      ownKeys() {
+        keys()
+        return Reflect.ownKeys(deepObj)
+      },
+      has(_, prop) {
+        keys()
+        return prop in deepObj
+      },
+    })
+  }
+  return value
+}
+
 const dispatch = (path, value) => {
-    if (path !== undefined && value !== undefined) {
-        currentPatch.push([path, value]);
-    }
-    if (!batchDepth && currentPatch.length) {
-        const detail = pathToObj(currentPatch);
-        currentPatch.length = 0;
-        document.dispatchEvent(new CustomEvent(DATASTAR_SIGNAL_PATCH_EVENT, {
-            detail,
-        }));
-    }
-};
+  if (path !== undefined && value !== undefined) {
+    currentPatch.push([path, value])
+  }
+  if (!batchDepth && currentPatch.length) {
+    const detail = pathToObj(currentPatch)
+    currentPatch.length = 0
+    document.dispatchEvent(
+      new CustomEvent(DATASTAR_SIGNAL_PATCH_EVENT, {
+        detail,
+      }),
+    )
+  }
+}
+
 export const mergePatch = (patch, { ifMissing } = {}) => {
-    beginBatch();
+  beginBatch()
+  for (const key in patch) {
+    if (patch[key] == null) {
+      if (!ifMissing) {
+        delete root[key]
+      }
+    } else {
+      mergeInner(patch[key], key, root, "", ifMissing)
+    }
+  }
+  endBatch()
+}
+
+export const mergePaths = (paths, options) =>
+  mergePatch(pathToObj(paths), options)
+
+const mergeInner = (
+  patch,
+  target,
+  targetParent,
+  prefix,
+  ifMissing,
+) => {
+  if (isPojo(patch)) {
+    if (
+      !(
+        hasOwn(targetParent, target) &&
+        (isPojo(targetParent[target]) || Array.isArray(targetParent[target]))
+      )
+    ) {
+      targetParent[target] = {}
+    }
+
     for (const key in patch) {
-        if (patch[key] == null) {
-            if (!ifMissing) {
-                delete root[key];
-            }
-        }
-        else {
-            mergeInner(patch[key], key, root, "", ifMissing);
-        }
-    }
-    endBatch();
-};
-export const mergePaths = (paths, options) => mergePatch(pathToObj(paths), options);
-const mergeInner = (patch, target, targetParent, prefix, ifMissing) => {
-    if (isPojo(patch)) {
-        if (!(hasOwn(targetParent, target) &&
-            (isPojo(targetParent[target]) || Array.isArray(targetParent[target])))) {
-            targetParent[target] = {};
+      if (patch[key] == null) {
+        if (!ifMissing) {
+          delete targetParent[target][key]
         }
-        for (const key in patch) {
-            if (patch[key] == null) {
-                if (!ifMissing) {
-                    delete targetParent[target][key];
-                }
-            }
-            else {
-                mergeInner(patch[key], key, targetParent[target], `${prefix + target}.`, ifMissing);
-            }
-        }
-    }
-    else if (!(ifMissing && hasOwn(targetParent, target))) {
-        targetParent[target] = patch;
-    }
-};
-const toRegExp = (val) => typeof val === "string" ? RegExp(val.replace(/^\/|\/$/g, "")) : val;
-export const filtered = ({ include = /.*/, exclude = /(?!)/ } = {}, obj = root) => {
-    const includeRe = toRegExp(include);
-    const excludeRe = toRegExp(exclude);
-    const paths = [];
-    const stack = [[obj, ""]];
-    while (stack.length) {
-        const [node, prefix] = stack.pop();
-        for (const key in node) {
-            const path = prefix + key;
-            if (isPojo(node[key])) {
-                stack.push([node[key], `${path}.`]);
-            }
-            else if (includeRe.test(path) && !excludeRe.test(path)) {
-                paths.push([path, getPath(path)]);
-            }
-        }
-    }
-    return pathToObj(paths);
-};
-export const root = deep({});
+      } else {
+        mergeInner(patch[key], key, targetParent[target], `${prefix + target}.`, ifMissing)
+      }
+    }
+  } else if (!(ifMissing && hasOwn(targetParent, target))) {
+    targetParent[target] = patch
+  }
+}
+
+const toRegExp = (val) =>
+  typeof val === "string" ? RegExp(val.replace(/^\/|\/$/g, "")) : val
+
+export const filtered = (
+  { include = /.*/, exclude = /(?!)/ } = {},
+  obj = root,
+) => {
+  const includeRe = toRegExp(include)
+  const excludeRe = toRegExp(exclude)
+  const paths = []
+  const stack = [[obj, ""]]
+
+  while (stack.length) {
+    const [node, prefix] = stack.pop()
+
+    for (const key in node) {
+      const path = prefix + key
+      if (isPojo(node[key])) {
+        stack.push([node[key], `${path}.`])
+      } else if (includeRe.test(path) && !excludeRe.test(path)) {
+        paths.push([path, getPath(path)])
+      }
+    }
+  }
+
+  return pathToObj(paths)
+}
+
+export const root = deep({})
+
 /*********
  * engine.ts (plugin system)
  *********/
-const url = "https://data-star.dev/errors";
+const url = "https://data-star.dev/errors"
+
 const error = (ctx, reason, metadata = {}) => {
-    Object.assign(metadata, ctx);
-    const e = new Error();
-    const r = snake(reason);
-    const q = new URLSearchParams({
-        metadata: JSON.stringify(metadata),
-    }).toString();
-    const c = JSON.stringify(metadata, null, 2);
-    e.message = `${reason}\nMore info: ${url}/${r}?${q}\nContext: ${c}`;
-    return e;
-};
-const actionPlugins = new Map();
-const attributePlugins = new Map();
-const watcherPlugins = new Map();
-export const actions = new Proxy({}, {
+  Object.assign(metadata, ctx)
+  const e = new Error()
+  const r = snake(reason)
+  const q = new URLSearchParams({
+    metadata: JSON.stringify(metadata),
+  }).toString()
+  const c = JSON.stringify(metadata, null, 2)
+  e.message = `${reason}\nMore info: ${url}/${r}?${q}\nContext: ${c}`
+  return e
+}
+
+const actionPlugins = new Map()
+const attributePlugins = new Map()
+const watcherPlugins = new Map()
+
+export const actions = new Proxy(
+  {},
+  {
     get: (_, prop) => actionPlugins.get(prop)?.apply,
     has: (_, prop) => actionPlugins.has(prop),
     ownKeys: () => Reflect.ownKeys(actionPlugins),
     set: () => false,
     deleteProperty: () => false,
-});
-const removals = new Map();
-const queuedAttributes = [];
-const queuedAttributeNames = new Set();
-const observedRoots = new WeakSet();
-export const attribute = (plugin) => {
-    queuedAttributes.push(plugin);
-    if (queuedAttributes.length === 1) {
-        setTimeout(() => {
-            for (const attribute of queuedAttributes) {
-                queuedAttributeNames.add(attribute.name);
-                attributePlugins.set(attribute.name, attribute);
-            }
-            queuedAttributes.length = 0;
-            apply();
-            queuedAttributeNames.clear();
-        });
-    }
-};
+  },
+)
+
+const removals = new Map()
+
+const queuedAttributes = []
+const queuedAttributeNames = new Set()
+const observedRoots = new WeakSet()
+export const attribute = (
+  plugin,
+) => {
+  queuedAttributes.push(plugin)
+
+  if (queuedAttributes.length === 1) {
+    setTimeout(() => {
+      for (const attribute of queuedAttributes) {
+        queuedAttributeNames.add(attribute.name)
+        attributePlugins.set(attribute.name, attribute)
+      }
+      queuedAttributes.length = 0
+      apply()
+      queuedAttributeNames.clear()
+    })
+  }
+}
+
 export const action = (plugin) => {
-    actionPlugins.set(plugin.name, plugin);
-};
+  actionPlugins.set(plugin.name, plugin)
+}
+
 document.addEventListener(DATASTAR_FETCH_EVENT, ((evt) => {
-    const plugin = watcherPlugins.get(evt.detail.type);
-    if (plugin) {
-        plugin.apply({
-            error: error.bind(0, {
-                plugin: { type: "watcher", name: plugin.name },
-                element: {
-                    id: evt.target.id,
-                    tag: evt.target.tagName,
-                },
-            }),
-        }, evt.detail.argsRaw);
-    }
-}));
+  const plugin = watcherPlugins.get(evt.detail.type)
+  if (plugin) {
+    plugin.apply(
+      {
+        error: error.bind(0, {
+          plugin: { type: "watcher", name: plugin.name },
+          element: {
+            id: (evt.target).id,
+            tag: (evt.target).tagName,
+          },
+        }),
+      },
+      evt.detail.argsRaw,
+    )
+  }
+}))
+
 export const watcher = (plugin) => {
-    watcherPlugins.set(plugin.name, plugin);
-};
+  watcherPlugins.set(plugin.name, plugin)
+}
+
 const cleanupEls = (els) => {
-    for (const el of els) {
-        const elCleanups = removals.get(el);
-        if (elCleanups && removals.delete(el)) {
-            for (const attrCleanups of elCleanups.values()) {
-                for (const cleanup of attrCleanups.values()) {
-                    cleanup();
-                }
-            }
+  for (const el of els) {
+    const elCleanups = removals.get(el)
+    if (elCleanups && removals.delete(el)) {
+      for (const attrCleanups of elCleanups.values()) {
+        for (const cleanup of attrCleanups.values()) {
+          cleanup()
         }
-    }
-};
-const aliasedIgnore = aliasify("ignore");
-const aliasedIgnoreAttr = `[${aliasedIgnore}]`;
-const shouldIgnore = (el) => el.hasAttribute(`${aliasedIgnore}__self`) || !!el.closest(aliasedIgnoreAttr);
+      }
+    }
+  }
+}
+
+const aliasedIgnore = aliasify("ignore")
+const aliasedIgnoreAttr = `[${aliasedIgnore}]`
+const shouldIgnore = (el) =>
+  el.hasAttribute(`${aliasedIgnore}__self`) || !!el.closest(aliasedIgnoreAttr)
+
 const applyEls = (els, onlyNew) => {
-    for (const el of els) {
-        if (!shouldIgnore(el)) {
-            for (const key in el.dataset) {
-                applyAttributePlugin(el, key.replace(/[A-Z]/g, "-$&").toLowerCase(), el.dataset[key], onlyNew);
-            }
-        }
-    }
-};
+  for (const el of els) {
+    if (!shouldIgnore(el)) {
+      for (const key in el.dataset) {
+        applyAttributePlugin(
+          el,
+          key.replace(/[A-Z]/g, "-$&").toLowerCase(),
+          el.dataset[key],
+          onlyNew,
+        )
+      }
+    }
+  }
+}
+
 const observe = (mutations) => {
-    for (const { target, type, attributeName, addedNodes, removedNodes } of mutations) {
-        if (type === "childList") {
-            for (const node of removedNodes) {
-                if (isHTMLOrSVG(node)) {
-                    cleanupEls([node]);
-                    cleanupEls(node.querySelectorAll("*"));
-                }
-            }
-            for (const node of addedNodes) {
-                if (isHTMLOrSVG(node)) {
-                    applyEls([node]);
-                    applyEls(node.querySelectorAll("*"));
-                }
-            }
-        }
-        else if (type === "attributes" &&
-            attributeName.startsWith("data-") &&
-            isHTMLOrSVG(target) &&
-            !shouldIgnore(target)) {
-            const key = attributeName.slice(5);
-            const value = target.getAttribute(attributeName);
-            if (value === null) {
-                const elCleanups = removals.get(target);
-                if (elCleanups) {
-                    const attrCleanups = elCleanups.get(key);
-                    if (attrCleanups) {
-                        for (const cleanup of attrCleanups.values()) {
-                            cleanup();
-                        }
-                        elCleanups.delete(key);
-                    }
-                }
-            }
-            else {
-                applyAttributePlugin(target, key, value);
-            }
+  for (const { target, type, attributeName, addedNodes, removedNodes } of mutations) {
+    if (type === "childList") {
+      for (const node of removedNodes) {
+        if (isHTMLOrSVG(node)) {
+          cleanupEls([node])
+          cleanupEls(node.querySelectorAll("*"))
         }
-    }
-};
-const mutationObserver = new MutationObserver(observe);
-export const parseAttributeKey = (rawKey) => {
-    const [namePart, ...rawModifiers] = rawKey.split("__");
-    const [pluginName, key] = namePart.split(/:(.+)/);
-    const mods = new Map();
-    for (const rawMod of rawModifiers) {
-        const [label, ...mod] = rawMod.split(".");
-        mods.set(label, new Set(mod));
-    }
-    return { pluginName, key, mods };
-};
-export const isDocumentObserverActive = () => observedRoots.has(document.documentElement);
-export const apply = (root = document.documentElement, observeRoot = true) => {
-    if (isHTMLOrSVG(root)) {
-        applyEls([root], true);
-    }
-    applyEls(root.querySelectorAll("*"), true);
-    if (observeRoot) {
-        mutationObserver.observe(root, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-        });
-        observedRoots.add(root);
-    }
-};
-const applyAttributePlugin = (el, attrKey, value, onlyNew) => {
-    const rawKey = attrKey;
-    const { pluginName, key, mods } = parseAttributeKey(rawKey);
-    const plugin = attributePlugins.get(pluginName);
-    if ((!onlyNew || queuedAttributeNames.has(pluginName)) && plugin) {
-        const ctx = {
-            el,
-            rawKey,
-            mods,
-            error: error.bind(0, {
-                plugin: { type: "attribute", name: plugin.name },
-                element: { id: el.id, tag: el.tagName },
-                expression: { rawKey, key, value },
-            }),
-            key,
-            value,
-            loadedPluginNames: {
-                actions: new Set(actionPlugins.keys()),
-                attributes: new Set(attributePlugins.keys()),
-            },
-            rx: undefined,
-        };
-        const keyReq = (plugin.requirement &&
-            (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.key)) ||
-            "allowed";
-        const valueReq = (plugin.requirement &&
-            (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.value)) ||
-            "allowed";
-        const keyProvided = key !== undefined && key !== null && key !== "";
-        const valueProvided = value !== undefined && value !== null && value !== "";
-        if (keyProvided) {
-            if (keyReq === "denied") {
-                throw ctx.error("KeyNotAllowed");
-            }
-        }
-        else if (keyReq === "must") {
-            throw ctx.error("KeyRequired");
-        }
-        if (valueProvided) {
-            if (valueReq === "denied") {
-                throw ctx.error("ValueNotAllowed");
-            }
-        }
-        else if (valueReq === "must") {
-            throw ctx.error("ValueRequired");
-        }
-        if (keyReq === "exclusive" || valueReq === "exclusive") {
-            if (keyProvided && valueProvided) {
-                throw ctx.error("KeyAndValueProvided");
-            }
-            if (!keyProvided && !valueProvided) {
-                throw ctx.error("KeyOrValueRequired");
-            }
-        }
-        const cleanups = new Map();
-        if (valueProvided) {
-            let cachedRx;
-            ctx.rx = (...args) => {
-                if (!cachedRx) {
-                    cachedRx = genRx(value, {
-                        returnsValue: plugin.returnsValue,
-                        argNames: plugin.argNames,
-                        cleanups,
-                    });
-                }
-                return cachedRx(el, ...args);
-            };
+      }
+
+      for (const node of addedNodes) {
+        if (isHTMLOrSVG(node)) {
+          applyEls([node])
+          applyEls(node.querySelectorAll("*"))
         }
-        const cleanup = plugin.apply(ctx);
-        if (cleanup) {
-            cleanups.set("attribute", cleanup);
-        }
-        let elCleanups = removals.get(el);
+      }
+    } else if (
+      type === "attributes" &&
+      attributeName.startsWith("data-") &&
+      isHTMLOrSVG(target) &&
+      !shouldIgnore(target)
+    ) {
+      const key = attributeName.slice(5)
+      const value = target.getAttribute(attributeName)
+      if (value === null) {
+        const elCleanups = removals.get(target)
         if (elCleanups) {
-            const attrCleanups = elCleanups.get(rawKey);
-            if (attrCleanups) {
-                for (const oldCleanup of attrCleanups.values()) {
-                    oldCleanup();
-                }
+          const attrCleanups = elCleanups.get(key)
+          if (attrCleanups) {
+            for (const cleanup of attrCleanups.values()) {
+              cleanup()
             }
+            elCleanups.delete(key)
+          }
         }
-        else {
-            elCleanups = new Map();
-            removals.set(el, elCleanups);
+      } else {
+        applyAttributePlugin(target, key, value)
+      }
+    }
+  }
+}
+
+const mutationObserver = new MutationObserver(observe)
+
+export const parseAttributeKey = (
+  rawKey,
+) => {
+  const [namePart, ...rawModifiers] = rawKey.split("__")
+  const [pluginName, key] = namePart.split(/:(.+)/)
+  const mods = new Map()
+
+  for (const rawMod of rawModifiers) {
+    const [label, ...mod] = rawMod.split(".")
+    mods.set(label, new Set(mod))
+  }
+
+  return { pluginName, key, mods }
+}
+
+export const isDocumentObserverActive = () => observedRoots.has(document.documentElement)
+
+export const apply = (
+  root = document.documentElement,
+  observeRoot = true,
+) => {
+  if (isHTMLOrSVG(root)) {
+    applyEls([root], true)
+  }
+  applyEls(root.querySelectorAll("*"), true)
+
+  if (observeRoot) {
+    mutationObserver.observe(root, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+    })
+    observedRoots.add(root)
+  }
+}
+
+const applyAttributePlugin = (
+  el,
+  attrKey,
+  value,
+  onlyNew,
+) => {
+  const rawKey = attrKey
+  const { pluginName, key, mods } = parseAttributeKey(rawKey)
+  const plugin = attributePlugins.get(pluginName)
+  if ((!onlyNew || queuedAttributeNames.has(pluginName)) && plugin) {
+    const ctx = {
+      el,
+      rawKey,
+      mods,
+      error: error.bind(0, {
+        plugin: { type: "attribute", name: plugin.name },
+        element: { id: el.id, tag: el.tagName },
+        expression: { rawKey, key, value },
+      }),
+      key,
+      value,
+      loadedPluginNames: {
+        actions: new Set(actionPlugins.keys()),
+        attributes: new Set(attributePlugins.keys()),
+      },
+      rx: undefined,
+    }
+
+    const keyReq =
+      (plugin.requirement &&
+        (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.key)) ||
+      "allowed"
+    const valueReq =
+      (plugin.requirement &&
+        (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.value)) ||
+      "allowed"
+
+    const keyProvided = key !== undefined && key !== null && key !== ""
+    const valueProvided = value !== undefined && value !== null && value !== ""
+
+    if (keyProvided) {
+      if (keyReq === "denied") {
+        throw ctx.error("KeyNotAllowed")
+      }
+    } else if (keyReq === "must") {
+      throw ctx.error("KeyRequired")
+    }
+
+    if (valueProvided) {
+      if (valueReq === "denied") {
+        throw ctx.error("ValueNotAllowed")
+      }
+    } else if (valueReq === "must") {
+      throw ctx.error("ValueRequired")
+    }
+
+    if (keyReq === "exclusive" || valueReq === "exclusive") {
+      if (keyProvided && valueProvided) {
+        throw ctx.error("KeyAndValueProvided")
+      }
+      if (!keyProvided && !valueProvided) {
+        throw ctx.error("KeyOrValueRequired")
+      }
+    }
+
+    const cleanups = new Map()
+    if (valueProvided) {
+      let cachedRx
+      ctx.rx = (...args) => {
+        if (!cachedRx) {
+          cachedRx = genRx(value, {
+            returnsValue: plugin.returnsValue,
+            argNames: plugin.argNames,
+            cleanups,
+          })
         }
-        elCleanups.set(rawKey, cleanups);
-    }
-};
-const genRx = (value, { returnsValue = false, argNames = [], cleanups = new Map() } = {}) => {
-    if (/^\s*(?:async\s+)?(?:\(.*?\)\s*=>|[\w$]+\s*=>|function\s*[\w$]*\s*\()/.test(value)) {
-        const userFn = Function(`return (${value.trim()})`)();
-        return (el, ...args) => {
-            const actionsProxy = new Proxy({}, {
-                get: (_, name) => (...actionArgs) => {
-                    const err = error.bind(0, {
-                        plugin: { type: "action", name },
-                        element: { id: el.id, tag: el.tagName },
-                        expression: { fnContent: value, value },
-                    });
-                    const fn = actions[name];
-                    if (fn)
-                        return fn({ el, evt: undefined, error: err, cleanups }, ...actionArgs);
-                    throw err("UndefinedAction");
-                },
-            });
-            const dataEvt = args[0] instanceof Event ? args[0] : new Event("datastar:expression");
-            Object.defineProperties(dataEvt, {
-                target: { value: el },
-                signals: { value: root },
-                actions: { value: actionsProxy },
-                window: { value: window },
-            });
-            try {
-                return userFn(dataEvt);
-            }
-            catch (e) {
-                console.error(e);
-                throw error({
-                    element: { id: el.id, tag: el.tagName },
-                    expression: { fnContent: value, value },
-                    error: e.message,
-                }, "ExecuteExpression");
-            }
-        };
-    }
-    let expr = "";
-    if (returnsValue) {
-        const statementRe = /(\/(\\\/|[^/])*\/|"(\\"|[^"])*"|'(\\'|[^'])*'|`(\\`|[^`])*`|\(\s*((function)\s*\(\s*\)|(\(\s*\))\s*=>)\s*(?:\{[\s\S]*?\}|[^;){]*)\s*\)\s*\(\s*\)|[^;])+/gm;
-        const statements = value.trim().match(statementRe);
-        if (statements) {
-            const lastIdx = statements.length - 1;
-            const last = statements[lastIdx].trim();
-            if (!last.startsWith("return")) {
-                statements[lastIdx] = `return (${last});`;
-            }
-            expr = statements.join(";\n");
+        return cachedRx(el, ...args)
+      }
+    }
+
+    const cleanup = plugin.apply(ctx)
+    if (cleanup) {
+      cleanups.set("attribute", cleanup)
+    }
+
+    let elCleanups = removals.get(el)
+    if (elCleanups) {
+      const attrCleanups = elCleanups.get(rawKey)
+      if (attrCleanups) {
+        for (const oldCleanup of attrCleanups.values()) {
+          oldCleanup()
         }
-    }
-    else {
-        expr = value.trim();
-    }
-    const escaped = new Map();
-    const escapeRe = RegExp(`(?:${DSP})(.*?)(?:${DSS})`, "gm");
-    let counter = 0;
-    for (const match of expr.matchAll(escapeRe)) {
-        const k = match[1];
-        const v = `__escaped${counter++}`;
-        escaped.set(v, k);
-        expr = expr.replace(DSP + k + DSS, v);
-    }
-    expr = expr
-        .replace(/\$\['([a-zA-Z_$\d][\w$]*)'\]/g, "$$$1")
-        .replace(/\$([a-zA-Z_\d]\w*(?:[.-]\w+)*)/g, (_, signalName) => signalName.split(".").reduce((acc, part) => `${acc}['${part}']`, "$"));
-    expr = expr.replaceAll(/@([A-Za-z_$][\w$]*)\(/g, '__action("$1",evt,');
-    for (const [k, v] of escaped) {
-        expr = expr.replace(k, v);
-    }
-    try {
-        const fn = Function("el", "$", "__action", "evt", ...argNames, expr);
-        return (el, ...args) => {
-            const action = (name, evt, ...args) => {
-                const err = error.bind(0, {
-                    plugin: { type: "action", name },
-                    element: { id: el.id, tag: el.tagName },
-                    expression: {
-                        fnContent: expr,
-                        value,
-                    },
-                });
-                const fn = actions[name];
-                if (fn) {
-                    return fn({
-                        el,
-                        evt,
-                        error: err,
-                        cleanups,
-                    }, ...args);
-                }
-                throw err("UndefinedAction");
-            };
-            try {
-                return fn(el, root, action, undefined, ...args);
-            }
-            catch (e) {
-                console.error(e);
-                throw error({
-                    element: { id: el.id, tag: el.tagName },
-                    expression: {
-                        fnContent: expr,
-                        value,
-                    },
-                    error: e.message,
-                }, "ExecuteExpression");
-            }
-        };
-    }
-    catch (e) {
-        console.error(e);
-        throw error({
+      }
+    } else {
+      elCleanups = new Map()
+      removals.set(el, elCleanups)
+    }
+    elCleanups.set(rawKey, cleanups)
+  }
+}
+
+const genRx = (
+  value,
+  { returnsValue = false, argNames = [], cleanups = new Map() } = {},
+) => {
+  if (/^\s*(?:async\s+)?(?:\(.*?\)\s*=>|[\w$]+\s*=>|function\s*[\w$]*\s*\()/.test(value)) {
+    const userFn = Function(`return (${value.trim()})`)()
+
+    return (el, ...args) => {
+      const actionsProxy = new Proxy({}, {
+        get:
+          (_, name) =>
+          (...actionArgs) => {
+            const err = error.bind(0, {
+              plugin: { type: "action", name },
+              element: { id: el.id, tag: el.tagName },
+              expression: { fnContent: value, value },
+            })
+            const fn = actions[name]
+            if (fn) return fn({ el, evt: undefined, error: err, cleanups }, ...actionArgs)
+            throw err("UndefinedAction")
+          },
+      })
+
+      const dataEvt = args[0] instanceof Event ? args[0] : new Event("datastar:expression")
+      Object.defineProperties(dataEvt, {
+        target: { value: el },
+        signals: { value: root },
+        actions: { value: actionsProxy },
+        window: { value: window },
+      })
+
+      try {
+        return userFn(dataEvt)
+      } catch (e) {
+        console.error(e)
+        throw error(
+          {
+            element: { id: el.id, tag: el.tagName },
+            expression: { fnContent: value, value },
+            error: e.message,
+          },
+          "ExecuteExpression",
+        )
+      }
+    }
+  }
+
+  let expr = ""
+  if (returnsValue) {
+    const statementRe =
+      /(\/(\\\/|[^/])*\/|"(\\"|[^"])*"|'(\\'|[^'])*'|`(\\`|[^`])*`|\(\s*((function)\s*\(\s*\)|(\(\s*\))\s*=>)\s*(?:\{[\s\S]*?\}|[^;){]*)\s*\)\s*\(\s*\)|[^;])+/gm
+    const statements = value.trim().match(statementRe)
+    if (statements) {
+      const lastIdx = statements.length - 1
+      const last = statements[lastIdx].trim()
+      if (!last.startsWith("return")) {
+        statements[lastIdx] = `return (${last});`
+      }
+      expr = statements.join(";\n")
+    }
+  } else {
+    expr = value.trim()
+  }
+
+  const escaped = new Map()
+  const escapeRe = RegExp(`(?:${DSP})(.*?)(?:${DSS})`, "gm")
+  let counter = 0
+  for (const match of expr.matchAll(escapeRe)) {
+    const k = match[1]
+    const v = `__escaped${counter++}`
+    escaped.set(v, k)
+    expr = expr.replace(DSP + k + DSS, v)
+  }
+
+  expr = expr
+    .replace(/\$\['([a-zA-Z_$\d][\w$]*)'\]/g, "$$$1")
+    .replace(/\$([a-zA-Z_\d]\w*(?:[.-]\w+)*)/g, (_, signalName) =>
+      signalName.split(".").reduce((acc, part) => `${acc}['${part}']`, "$"),
+    )
+
+  expr = expr.replaceAll(/@([A-Za-z_$][\w$]*)\(/g, '__action("$1",evt,')
+
+  for (const [k, v] of escaped) {
+    expr = expr.replace(k, v)
+  }
+
+  try {
+    const fn = Function("el", "$", "__action", "evt", ...argNames, expr)
+    return (el, ...args) => {
+      const action = (name, evt, ...args) => {
+        const err = error.bind(0, {
+          plugin: { type: "action", name },
+          element: { id: el.id, tag: el.tagName },
+          expression: {
+            fnContent: expr,
+            value,
+          },
+        })
+        const fn = actions[name]
+        if (fn) {
+          return fn(
+            {
+              el,
+              evt,
+              error: err,
+              cleanups,
+            },
+            ...args,
+          )
+        }
+        throw err("UndefinedAction")
+      }
+      try {
+        return fn(el, root, action, undefined, ...args)
+      } catch (e) {
+        console.error(e)
+        throw error(
+          {
+            element: { id: el.id, tag: el.tagName },
             expression: {
-                fnContent: expr,
-                value,
+              fnContent: expr,
+              value,
             },
             error: e.message,
-        }, "GenerateExpression");
-    }
-};
+          },
+          "ExecuteExpression",
+        )
+      }
+    }
+  } catch (e) {
+    console.error(e)
+    throw error(
+      {
+        expression: {
+          fnContent: expr,
+          value,
+        },
+        error: e.message,
+      },
+      "GenerateExpression",
+    )
+  }
+}