webdetta 0.1.226 → 0.1.228

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdetta",
-  "version": "0.1.226",
+  "version": "0.1.228",
   "author": "Fedot Kriutchenko <fodyadev@gmail.com>",
   "description": "",
   "license": "MIT",

package/packages/reactivity/README.md

@@ -51,24 +51,6 @@ val(1);  // logs "Value: 1"
 val(2);  // logs "Value: 2"
 ```
 
-### `r.untrack(func)`
-
-```javascript
-const a = r.val(2);
-const b = r.val(3);
-
-r.effect(() => {
-  const aVal = a();
-  r.untrack(() => {
-    const result = aVal * b();
-    console.log('Result:', result);
-  });
-});
-
-a(4); // run outer effect
-b(5); // does not run outer effect (b was only read inside untrack)
-```
-
 ### Effect cleanup (return from handler)
 
 ```javascript
@@ -80,7 +62,7 @@ r.effect(() => {
 
 ## Computed values
 
-### `r.computed(func, { type, initial, resolvePromises }?)`
+### `r.computed(func, { initial }?)`
 
 ```javascript
 const a = r.val(2);
@@ -90,38 +72,6 @@ const sum = r.computed(() => a() + b());
 sum(); // 5
 ```
 
-```javascript
-const source = r.val(1);
-const doubled = r.computed(
-  () => source() * 2,
-  { type: r.dval, initial: 0 }, // custom signal type
-);
-```
-
-```javascript
-const url = r.val('/api/data');
-const data = r.computed(() => {
-  const currentUrl = url();
-  return fetch(currentUrl).then(r => r.json()); // resolves Promise by default
-});
-
-r.effect(() => {
-  console.log(data()); // parsed response after Promise resolves
-});
-```
-
-```javascript
-const source = r.val(1);
-const promise = r.computed(
-  () => Promise.resolve(source() * 3),
-  { resolvePromises: false }, // store Promise as-is
-);
-
-r.effect(() => {
-  console.log(promise()); // Promise { 3 }
-});
-```
-
 ### `r.store(target)`
 
 ```javascript

package/packages/reactivity/base.js

@@ -84,8 +84,6 @@ export class Effect {
   run() {
     if (this.destroyed) return;
 
-    
-
     this.cleanup();
 
     let err;

package/packages/reactivity/index.js

@@ -39,6 +39,28 @@ r.dval = value => {
   return signal.accessor;
 }
 
+// Effect
+
+r.effect = (handler, {
+  track = true,
+  attach = true,
+  writes = undefined,
+  run = true,
+  onError,
+} = {}) => {
+  assertSyncFunction('effect `handler`', handler);
+  const parent = currentEffect();
+  const effect = new Effect({
+    parent: attach ? parent : null,
+    handler,
+    errorHandler: onError,
+    tracking: track,
+    readonly: writes !== undefined ? !writes : parent?.readonly,
+  });
+  if (run) effect.run();
+  return effect;
+}
+
 // Derived
 
 r.computed = (func, { initial }={}) => {
@@ -48,13 +70,10 @@ r.computed = (func, { initial }={}) => {
     get() { return value; },
     set(v) { value = v; this.trigger(); return value; }
   });
-  const effect = new Effect({
-    parent: currentEffect(),
-    handler: () => { value = func(); signal.trigger(); },
-    tracking: true,
-    readonly: true
-  });
-  effect.run();
+  r.effect(() => {
+    value = func();
+    signal.trigger();
+  }, { track: true, writes: false });
   return signal.accessor;
 }
 
@@ -80,26 +99,20 @@ r.resource = (source, func, { initial }) => {
     }
   }
 
-  const effect = new Effect({
-    parent: currentEffect(),
-    handler: () => {
-      const boundFunc = func.bind(this, source());
-      r.untrack(() => {
-        const res = resolveResource(effect, boundFunc, resourceHandlers);
-        return res.destroy
-      });
-    },
-    tracking: true,
-    readonly: true
-  });
-  effect.run();
+  const effect = r.effect(() => {
+    const boundFunc = func.bind(this, source());
+    r.effect(() => {
+      const res = resolveResource(effect, boundFunc, resourceHandlers);
+      return res.destroy
+    }, { track: false });
+  }, { track: true, writes: false });
 
   return Object.assign(value, { error, loading });
 }
 
 // Stores
 
-const Store = ({ target, updateTarget=false }) => {
+const createStore = ({ target, updateTarget=false }) => {
   const refs = {};
   const ref = key => refs[key] ??= new Signal({
     get() { return currentTarget[key]; },
@@ -120,54 +133,25 @@ const Store = ({ target, updateTarget=false }) => {
   return { ref }
 }
 r.store = (target, { updateTarget }={}) => {
-  const { ref } = Store({ target, updateTarget });
+  const { ref } = createStore({ target, updateTarget });
   return new Proxy({}, {
     get(_, key) { return ref(key).accessor(); },
     set(_, key, val) { return ref(key).accessor(val); }
   });
 }
 r.proxy = (target, { updateTarget }={}) => {
-  const { ref } = Store({ target, updateTarget });
+  const { ref } = createStore({ target, updateTarget });
   return new Proxy({}, {
     get(_, key) { return ref(key).accessor; }
   });
 }
 
-// Effects
-
-r.effect = (handler, { onError, readonly }={}) => {
-  assertSyncFunction('r.effect `handler`', handler);
-  const effect = new Effect({
-    parent: currentEffect(),
-    handler,
-    errorHandler: onError,
-    tracking: true,
-    readonly: readonly
-  });
-  effect.run();
-  return effect;
-};
-r.untrack = (handler, { onError, readonly }={}) => {
-  assertSyncFunction('r.untrack `handler`', handler);
-  const effect = new Effect({
-    parent: currentEffect(),
-    handler,
-    errorHandler: onError,
-    tracking: false,
-    readonly,
-  });
-  effect.run();
-  return effect;
-};
-
 // Utils
 
-r.subtle = {};
-r.subtle.effectRoot = handler => currentEffect.run(null, r.untrack, handler);
-r.subtle.onCleanup = handler => {
-  assertSyncFunction('r.cleanup `handler`', handler);
+r.onCleanup = handler => {
+  assertSyncFunction('r.onCleanup `handler`', handler);
   const effect = currentEffect();
-  if (!effect) throw new Error('r.cleanup cannot be executed outside r.effect');
+  if (!effect) throw new Error('r.onCleanup cannot be executed outside r.effect');
   (effect.oncleanup ??= []).push(handler);
 }
 

package/packages/reactivity/tests/effects.test.js

@@ -337,7 +337,7 @@ describe('effect', () => {
   });
 });
 
-describe('untrack', () => {
+describe('effect untracked', () => {
   it('no subscribe', () => {
     const left = r.val(2);
     const right = r.val(3);
@@ -347,9 +347,9 @@ describe('untrack', () => {
     r.effect(() => {
       outerRunCount++;
       const leftValue = left();
-      r.untrack(() => {
+      r.effect(() => {
         seen.push(leftValue * right());
-      });
+      }, { track: false });
     });
 
     assertEquals(outerRunCount, 1);
@@ -374,11 +374,11 @@ describe('untrack', () => {
     const reset = () => log.length = 0;
     r.effect(() => {
       const active = branch();
-      r.untrack(() => {
+      r.effect(() => {
         const value = active === 'left' ? left() : right();
         log.push(`${active}:${value}`);
         return () => log.push(`clean:${active}:${value}`);
-      });
+      }, { track: false });
     });
 
     assertEquals(log, ['left:1']);

package/packages/reactivity/tests/values.test.js

@@ -1,5 +1,5 @@
 import { describe, it } from 'jsr:@std/testing/bdd';
-import { assert, assertEquals, assertThrows } from 'jsr:@std/assert';
+import { assertEquals, assertThrows } from 'jsr:@std/assert';
 import { r } from '../index.js';
 
 const watchValues = read => {
@@ -187,19 +187,6 @@ describe('computed', () => {
     );
   });
 
-  it('returns raw promise without resolving', () => {
-    const source = r.val(1);
-    const value = r.computed(() => Promise.resolve(source() * 3));
-
-    const firstPromise = value();
-    assert(firstPromise instanceof Promise);
-
-    source(2);
-
-    const secondPromise = value();
-    assert(secondPromise instanceof Promise);
-    assert(secondPromise !== firstPromise);
-  });
 });
 
 const describeStore = (name, create, read, write) => describe(name, () => {

package/packages/realdom/base.js

@@ -1,6 +1,5 @@
 import { Builder } from '../builder/index.js';
 import { unwrapFn, templateCallToArray } from '../common/utils.js';
-import { domAppendTrigger, domRemoveTrigger } from './dynamic.js';
 import { r } from '../reactivity/index.js';
 
 export const toString = (...args) => {
@@ -11,8 +10,9 @@ export const toString = (...args) => {
 
 const isFragment = node => node.nodeType === 11;
 export const processItem = (item, processOperator, processNode, flattenFragments=false) => {
-  if (item === undefined || item === null) {}
-  else if (Array.isArray(item)) {
+  if (item === false || item === undefined || item === null) {
+
+  } else if (Array.isArray(item)) {
     for (const d of item) processItem(d, processOperator, processNode, flattenFragments);
   } else if (Operator.isOperator(item)) {
     processOperator(item);
@@ -26,7 +26,7 @@ export const processItem = (item, processOperator, processNode, flattenFragments
   }
 }
 
-export const Element = (tag, ns) => (...args) => {
+export const Element = (ns, tag, ...args) => {
   const node = (
     tag === '!' ? document.createComment('') :
     tag === ':' ? document.createDocumentFragment() :
@@ -45,10 +45,15 @@ Element.from = arg => {
   return document.createTextNode(arg);
 }
 
+const elementHooks = new WeakMap();
+Element.registerHooks = (node, hooks) => elementHooks.set(node, hooks);
+
 const performAppend = (node, method, item) => {
-  const dom = Element.from(item);
-  node[method](dom);
-  domAppendTrigger(dom);
+  const itemNode = Element.from(item);
+  const hooks = elementHooks.get(itemNode);
+  hooks?.beforeAppend?.();
+  node[method](itemNode);
+  hooks?.afterAppend?.();
 }
 Element.append = (node, item) => {
   processItem(item,
@@ -62,17 +67,18 @@ Element.appendBefore = (node, sibling) => performAppend(node, 'before', sibling)
 Element.appendAfter = (node, sibling) => performAppend(node, 'after', sibling);
 
 Element.remove = (node) => {
-  domRemoveTrigger(node);
+  const hooks = elementHooks.get(node);
+  hooks?.beforeRemove?.();
   node.remove();
+  hooks?.afterRemove?.();
 }
 
 export const Operator = (...funcs) => Builder((tasks, node) => {
-  for (const {names, args} of tasks)
-    for (const func of funcs)
-      func(node, names, args);
+  for (const {names, args} of tasks) {
+    for (const func of funcs) {
+      r.effect(() => func(node, names, args));
+    }
+  }
 });
 Operator.isOperator = Builder.isBuilder;
-Operator.apply = (node, operator) => Builder.launch(operator, node);
-Operator.extend = (operator, { get }) => new Proxy(operator, {
-  get: (_, key) => get(_, key) ?? operator[key]
-});
+Operator.apply = (node, operator) => Builder.launch(operator, node);

package/packages/realdom/dynamic.js

@@ -1,31 +1,11 @@
 import { isIterable, isObject, unwrapFn } from '../common/utils.js';
+import { once } from '../execution/index.js';
 import { r } from '../reactivity/index.js';
 import { Element, Operator, processItem } from './base.js';
 
-const domHandlers = () => {
-  const map = new WeakMap();
-  const on = (dom, f) => {
-    let list = map.get(dom);
-    if (!list) map.set(dom, list = []);
-    list.push(f);
-  }
-  const trigger = (dom) => {
-    const list = map.get(dom);
-    if (!list) return;
-    for (const f of list) f();
-  }
-  return [on, trigger];
-}
-
-export const [onDomAppend, domAppendTrigger] = domHandlers();
-export const [onDomRemove, domRemoveTrigger] = domHandlers();
-
 const listItemKey = (d, i) => {
   if (typeof d == 'number' || typeof d == 'string') return d;
-  if (d) {
-    if ('key' in d) return d.key;
-    if ('id' in d) return d.id;
-  }
+  if (d && Object.hasOwn(d, 'id')) return d.id;
   return i;
 };
 const listItemsToEntries = (items, keyFn) => new Map(
@@ -33,138 +13,114 @@ const listItemsToEntries = (items, keyFn) => new Map(
   : isIterable(items) ? Array.from(items.entries())
   : isObject(items) ? Object.entries(items)
   : null
-)
-export const createList = (itemsFn, renderItem, keyFn = listItemKey) => {
-  const root = document.createTextNode('');
-
-  const elements = new Map();
-  const effects = new Map();
-
-  const connect = (k, v, i, items) => {
-    let dom;
-    const effect = r.subtle.effectRoot(() => {
-      dom = renderItem(v, i, items, k);
-    });
-    effects.set(k, effect);
-    elements.set(k, dom);
-    return dom;
-  };
-  const disconnect = (k) => {
-    effects.get(k)?.destroy();
-    effects.delete(k);
-    const el = elements.get(k);
-    if (el) Element.remove(el);
-    elements.delete(k);
+);
+
+const createContainer = (content) => {
+  let startNode;
+
+  const nodes = [], operators = [];
+  const contentEffect = r.effect(() => {
+    const items = unwrapFn(content);
+    processItem(items, o => operators.push(o), c => nodes.push(c), true);
+    if (startNode) appendAfter(startNode);
+    return () => {
+      for (const child of nodes) Element.remove(child);
+      nodes.length = 0;
+      operators.length = 0;
+    }
+  }, { writes: false, attach: false, track: true, run: false });
+  
+  const operatorsEffect = r.effect(() => {
+    for (const o of operators) Operator.apply(startNode.parentNode, o);
+  }, { writes: false, attach: false, track: true, run: false });
+
+  const initContent = once(contentEffect.run.bind(contentEffect));
+  const appendAfter = (newStartNode) => {
+    initContent();
+    const parentChanged = startNode?.parentNode != newStartNode.parentNode;
+    let lastNode = startNode = newStartNode;
+    if (parentChanged) operatorsEffect.run();
+    for (const node of nodes) {
+      if (node !== lastNode.nextSibling) Element.appendAfter(lastNode, node);
+      lastNode = node;
+    }
+    return lastNode;
   };
 
-  const attached = r.dval(false);
+  const remove = () => {
+    contentEffect.cleanup();
+    operatorsEffect.cleanup();
+  }
+  const destroy = () => {
+    contentEffect.destroy();
+    operatorsEffect.destroy();
+  }
+
+  return { nodes, appendAfter, remove, destroy };
+}
 
-  r.effect(() => {
-    if (!attached()) {
-      for (const k of elements.keys()) disconnect(k);
-      return;
+export const createList = (itemsFn, renderItem, keyFn = listItemKey) => {
+  const root = document.createTextNode('');
+  const containers = new Map();
+  Element.registerHooks(root, {
+    afterAppend: () => effect.run(),
+    beforeRemove: () => {
+      for (const c of containers.values()) c.remove();
+      containers.clear();
     }
+  });
 
+  const effect = r.effect(() => {
     const items = unwrapFn(itemsFn);
     const entries = listItemsToEntries(items, keyFn);
 
     let last = root, i = 0;
     for (const [k, v] of entries) {
-      let el = elements.get(k);
-      if (!el) el = connect(k, v, i, items);
-      if (el !== last.nextSibling) {
-        Element.appendAfter(last, el);
-      }
-      last = el;
+      let container = containers.get(k);
+      if (!container) containers.set(k, container = createContainer(
+        () => renderItem(v, i, items, k)
+      ));
+      last = container.appendAfter(last);
       i++;
     }
 
-    for (const k of elements.keys()) {
-      if (!entries.has(k)) disconnect(k);
+    for (const [k, c] of containers) {
+      if (!entries.has(k)) {
+        c.remove();
+        containers.delete(k);
+      }
     }
-  });
-
-  onDomAppend(root, () => attached(true));
-  onDomRemove(root, () => attached(false));
+  }, { run: false });
 
   return root;
 };
 
 export const createSlot = (content) => {
-  const node = document.createTextNode('');
-  const attached = r.dval(false);
-
-  let controller;
-  let nodes = [];
-  const append = (content) => {
-    if (!content) return;
-    nodes = [];
-    
-    controller = r.subtle.effectRoot(() => {
-      let last = node;
-      processItem(content,
-        op => {
-          Operator.apply(node.parentNode, op);
-        },
-        child => {
-          Element.appendAfter(last, child);
-          nodes.push(last = child);
-        },
-        true
-      );
-    });
-  };
-
-  const remove = () => {
-    if (!nodes) return;
-    for (const child of nodes) Element.remove(child);
-    nodes = null;
-    controller?.destroy();
-    controller = null;
-  }
-
-  r.effect(() => {
-    remove();
-    if (!attached()) return;
-    append(content());
+  const root = document.createTextNode('');
+  const container = createContainer(content);
+  Element.registerHooks(root, {
+    afterAppend: () => container.appendAfter(root),
+    beforeRemove: () => container.remove()
   });
-
-  onDomAppend(node, () => attached(true));
-  onDomRemove(node, () => attached(false));
-
-  return node;
+  return root;
 }
 
 export const createIf = () => {
-  const conditions = r.val([]);
-  const content = r.computed(() => conditions().find(d => unwrapFn(d.cond))?.args);
-  
-  const node = createSlot(content);
+  const conditions = [];
+  const node = createSlot(() =>
+    conditions.find(d => unwrapFn(d.cond))?.value
+  );
+
   node.elif = (cond, ...args) => {
-    const list = conditions();
-    list.push({ cond, args });
-    conditions(list);
+    conditions.push({ cond, value: args });
     return node;
   }
   node.else = (...args) => {
-    node.elif(true, ...args);
+    conditions.push({ cond: true, value: args });
     delete node.elif;
     delete node.else;
     return node;
   }
 
   return node;
-}
-
-export const createDynamic = (argFn, renderFn) => {
-  const content = r.val();
-  let controller;
-  r.effect(() => {
-    const arg = argFn();
-    controller?.destroy();
-    controller = r.subtle.effectRoot(() => {
-      content(renderFn(arg));
-    });
-  });
-  return createSlot(content);
 }

package/packages/realdom/index.js

@@ -1,23 +1,94 @@
-import * as operators from './operators.js';
 import { Element } from './base.js';
 import { kebab } from '../common/dom.js';
+import { unwrapFn } from '../common/utils.js';
 import { Context } from '../context/sync.js';
 import { cached } from '../execution/index.js';
+import { Operator, toString } from './base.js';
+import { createIf, createList, createSlot } from './dynamic.js';
 
-const NS = {
-  svg: 'http://www.w3.org/2000/svg',
-  math: 'http://www.w3.org/1998/Math/MathML'
+const api = {};
+
+api.ref = Operator((node, _, args) => {
+  for (const func of args) func(node);
+});
+
+api.parse = (...args) => {
+  const div = document.createElement('div');
+  div.innerHTML = toString(...args);
+  return Array.from(div.children);
 };
 
-const tag = key => key.length ? key[0].toLowerCase() + kebab(key.slice(1)) : '';
-const namespace = ns => {
-  return new Proxy({}, {
-    get: cached((_, key) => (
-      key == 'ns' && ns == null ? key => namespace(NS[key.toLowerCase()])
-      : key in operators ? operators[key]
-      : Element(tag(key), ns)
-    ), (_, key) => key)
-  });
-}
+api.append = (node, ...args) => Element.append(node, args);
+api.remove = Element.remove;
+
+api.if = (cond, ...args) => createIf().elif(cond, args);
+
+api.list = createList;
+api.slot = createSlot;
+
+api.attr = Operator((node, names, args) => {
+  const value = toString(...args);
+  for (const name of names) node.setAttribute(name, value);
+  return () => {
+    for (const name of names) node.removeAttribute(name);
+  };
+});
+
+api.on = Operator((node, names, args) => {
+  let handlers = [], options;
+  for (const arg of args) {
+    if (typeof arg == 'function') handlers.push(arg);
+    else options = arg;
+  }
+
+  const target = options?.target ?? node;
+  for (const e of names) for (const h of handlers) {
+    target.addEventListener(e, h, options);
+  }
+  return () => {
+    for (const e of names) for (const h of handlers) {
+      target.removeEventListener(e, h);
+    }
+    options = handlers = null;
+  };
+});
+
+api.class = Operator((node, names, args) => {
+  const value = Boolean(unwrapFn(args[0]));
+  if (!value) return;
+  node.classList.add(...names.map(kebab));
+  return () => {
+    node.classList.remove(...names.map(kebab));
+  };
+});
+
+api.style = Operator((node, names, args) => {
+  const value = toString(...args);
+  for (const name of names) {
+    node.style.setProperty(kebab(name), value);
+  }
+  return () => {
+    for (const name of names) node.style.removeProperty(kebab(name));
+  };
+});
+
+api.prop = Operator((node, names, args) => {
+  const value = unwrapFn(args[0]);
+  for (const name of names) node[name] = value;
+  return () => {
+    for (const name of names) delete node[name];
+  };
+});
+
+const namespace = ns => new Proxy(api, {
+  get: cached((target, key) => (
+    key[0] >= 'A' && key[0] <= 'Z'
+      ? Element.bind(null, ns, key[0].toLowerCase() + kebab(key.slice(1)))
+      : target[key]
+  ), (_, key) => key + ns)
+});
+api.NS_SVG = namespace('http://www.w3.org/2000/svg');
+api.NS_MATH = namespace('http://www.w3.org/1998/Math/MathML');
+
 export const el = namespace(null);
 export { Context };

package/packages/router/realdom-adapter.js

@@ -28,7 +28,9 @@ const RouterRealdom = ({
     loadedRoutes(loaded);
     currentRoute(key);
   }
-  router.listen((...a) => r.untrack(listener.bind(null, ...a)));
+  router.listen((...a) => {
+    r.effect(listener.bind(null, ...a), { tracking: false })
+  });
   router.attach();
 
   const container = el[':'](

package/tools/test-reporter.js

@@ -48,13 +48,27 @@ const nodes = lines.nodes.map((line, i) => {
     if (curr < prev) return null;
   }
 
+  return { pkg, file, parts };
+}).filter(Boolean).filter((node, _, all) => {
+  const { pkg, file, parts } = node;
+  if (parts.length !== 2) return true;
+  const suiteName = parts[0];
+  const hasChildren = all.some(other =>
+    other !== node &&
+    other.pkg === pkg &&
+    other.file === file &&
+    other.parts.length > 2 &&
+    other.parts[0] === suiteName
+  );
+  return !hasChildren;
+}).map(({ pkg, file, parts }) => {
   return [
     brightCyan('webdetta/' + pkg),
     cyan(file),
     ...parts.slice(0, -2),
     [nodeResult(parts.at(-1)), parts.at(-2)].filter(Boolean).join(' ')
   ];
-}).filter(Boolean);
+});
 
 const group = (arr) => {
   const res = {};

package/packages/realdom/operators.js

@@ -1,87 +0,0 @@
-import { kebab } from '../common/dom.js';
-import { unwrapFn } from '../common/utils.js';
-import { r } from '../reactivity/index.js';
-import { Element, Operator, toString } from './base.js';
-import { createDynamic, createIf, createList, createSlot, onDomAppend, onDomRemove } from './dynamic.js';
-
-export const ref = Operator((node, _, args) => {
-  for (const func of args) func(node);
-});
-
-export const parse = (...args) => {
-  const div = document.createElement('div');
-  div.innerHTML = toString(...args);
-  return Array.from(div.children);
-};
-
-export const append = (node, ...args) => Element.append(node, args);
-export const remove = (node) => Element.remove(node);
-
-const if_ = (cond, ...args) => createIf().elif(cond, args);
-export { if_ as if };
-
-export const list = (items, render, keyFn) => createList(items, render, keyFn);
-export const slot = (func) => createSlot(func);
-export const dynamic = (argFn, renderFn) => createDynamic(argFn, renderFn);
-
-export const lifecycle = Operator((node, names, args) => {
-  for (const name of names) {
-    if (name == 'append') for (const f of args) onDomAppend(node, f);
-    if (name == 'remove') for (const f of args) onDomRemove(node, f);
-  }
-});
-
-export const attr = Operator((node, names, args) => r.effect(() => {
-  const value = toString(...args);
-  for (const name of names) node.setAttribute(name, value);
-  return () => {
-    for (const name of names) node.removeAttribute(name);
-  };
-}));
-
-export const on = Operator((node, names, args) => r.effect(() => {
-  let handlers = [], options;
-  for (const arg of args) {
-    if (typeof arg == 'function') handlers.push(arg);
-    else options = arg;
-  }
-
-  const target = options?.target ?? node;
-  for (const e of names) for (const h of handlers) {
-    target.addEventListener(e, h, options);
-  }
-  return () => {
-    for (const e of names) for (const h of handlers) {
-      target.removeEventListener(e, h);
-    }
-    options = handlers = null;
-  };
-}));
-
-const class_ = Operator((node, names, args) => r.effect(() => {
-  const value = Boolean(unwrapFn(args[0]));
-  if (!value) return;
-  node.classList.add(...names.map(kebab));
-  return () => {
-    node.classList.remove(...names.map(kebab));
-  };
-}));
-export { class_ as class };
-
-export const style = Operator((node, names, args) => r.effect(() => {
-  const value = toString(...args);
-  for (const name of names) {
-    node.style.setProperty(kebab(name), value);
-  }
-  return () => {
-    for (const name of names) node.style.removeProperty(kebab(name));
-  };
-}));
-
-export const prop = Operator((node, names, args) => r.effect(() => {
-  const value = unwrapFn(args[0]);
-  for (const name of names) node[name] = value;
-  return () => {
-    for (const name of names) delete node[name];
-  };
-}));