@zeix/cause-effect 0.12.3 → 0.13.0

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"semi": false,
+	"useTabs": true,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"arrowParens": "avoid"
+}

package/README.md

@@ -1,6 +1,6 @@
 # Cause & Effect
 
-Version 0.12.3
+Version 0.13.0
 
 **Cause & Effect** is a lightweight, reactive state management library for JavaScript applications. It uses the concept of signals to create a predictable and efficient data flow in your app.
 
@@ -8,40 +8,36 @@ Version 0.12.3
 
 **Cause & Effect** provides a simple way to manage application state using signals. Signals are containers for values that can change over time. When a signal's value changes, it automatically updates all parts of your app that depend on it, ensuring your UI stays in sync with your data.
 
-## Why Cause & Effect?
-
-- **Simplicity**: Easy to learn and use, with a small API surface.
-- **Performance**: Efficient updates that only recompute what's necessary.
-- **Type Safety**: Full TypeScript support for robust applications.
-- **Flexibility**: Works well with any UI framework or vanilla JavaScript.
-- **Lightweight**: Dependency-free, only 1kB gzipped over the wire.
-
 ## Key Features
 
-- 🚀 Efficient state management with automatic dependency tracking
-- ⏳ Built-in support for async operations
-- 🧠 Memoized computed values
-- 🛡️ Type-safe and non-nullable signals
-- 🎭 Declarative error and pending state handling
+- ⚡ **Reactive States**: Automatic updates when dependencies change
+- 🧩 **Composable**: Chain signals with `.map()` and `.tap()`
+- ⏱️ **Async Ready**: Built-in `Promise` and `AbortController` support
+- 🛡️ **Error Handling**: Declare handlers for errors and unset states in effects
+- 🚀 **Performance**: Batching and efficient dependency tracking
+- 📦 **Tiny**: ~1kB gzipped, zero dependencies
 
-## Quick Example
+## Quick Start
 
 ```js
-import { state, effect } from '@zeix/cause-effect'
+import { state, computed, effect } from '@zeix/cause-effect'
 
-// Create a state signal
-const count = state(0)
+// 1. Create state
+const user = state({ name: 'Alice', age: 30 })
 
-// Create a computed signal
-const doubleCount = count.map(v => v * 2)
+// 2. Create computed values
+const greeting = computed(() => `Hello ${user.get().name}!`)
 
-// Create an effect
-effect((c, d) => {
-    console.log(`Count: ${c}, Double: ${d}`)
-}, count, doubleCount)
+// 3. React to changes
+effect({
+    signals: [user, greeting],
+    ok: ({ age }, greet) => {
+        console.log(`${greet} You are ${age} years old`)
+    }
+})
 
-// Update the state
-count.set(5) // Logs: "Count: 5, Double: 10"
+// 4. Update state
+user.update(u => ({ ...u, age: 31 })) // Logs: "Hello Alice! You are 31 years old"
 ```
 
 ## Installation
@@ -54,17 +50,21 @@ npm install @zeix/cause-effect
 bun add @zeix/cause-effect
 ```
 
-## Usage
+## Usage of Signals
 
 ### Single State Signal
 
 `state()` creates a new state signal. To access the current value of the signal use the `.get()` method. To update the value of the signal use the `.set()` method with a new value or `.update()` with an updater function of the form `(v: T) => T`.
 
+The `.tap()` method on either `State` or `Computed` is a shorthand for creating an effect on the signal.
+
 ```js
-import { state, effect } from '@zeix/cause-effect'
+import { state } from '@zeix/cause-effect'
 
 const count = state(42)
-effect(() => console.log(count.get())) // logs '42'
+count.tap(v => {
+	console.log(v) // logs '42'
+})
 count.set(24) // logs '24'
 document.querySelector('.increment').addEventListener('click', () => {
 	count.update(v => ++v)
@@ -92,11 +92,10 @@ document.querySelector('button.increment').addEventListener('click', () => {
 If you want to derive a computed signal from a single other signal you can use the `.map()` method on either `State` or `Computed`. This does the same as the snippet above:
 
 ```js
-import { state, effect } from '@zeix/cause-effect'
+import { state } from '@zeix/cause-effect'
 
 const count = state(42)
-const isOdd = count.map(v => v % 2)
-effect(() => console.log(isOdd.get())) // logs 'false'
+count.map(v => v % 2).tap(v => console.log(v)) // logs 'false'
 count.set(24) // logs nothing because 24 is also an even number
 document.querySelector('.increment').addEventListener('click', () => {
 	count.update(v => ++v)
@@ -111,7 +110,7 @@ Async computed signals are as straight forward as their sync counterparts. Just
 **Caution**: Async computed signals will return a Symbol `UNSET` until the Promise is resolved.
 
 ```js
-import { state, effect } from '@zeix/cause-effect'
+import { state } from '@zeix/cause-effect'
 
 const entryId = state(42)
 const entryData = entryId.map(async id => {
@@ -120,56 +119,90 @@ const entryData = entryId.map(async id => {
     return response.json()
 })
 // Updates h1 and p of the entry as soon as fetched data for entry becomes available
-document.querySelector('button.next')
-    .addEventListener('click', () => entryId.update(v => ++v))
+document.querySelector('button.next').addEventListener('click', () => {
+	entryId.update(v => ++v)
+})
 // Click on button updates h1 and p of the entry as soon as fetched data for the next entry is loaded
 ```
 
-### Handling Unset Values and Errors in Effects
+## Error Handling
+
+Cause & Effect provides three paths for robust error handling:
 
-Computations can fail and throw errors. Promises may not have resolved yet when you try to access their value. **Cause & Effect makes it easy to deal with errors and unresolved async functions.** Computed functions will catch errors and re-throw them when you access their values.
+1. **Ok**: Value is available
+2. **Nil**: Loading/Unset state (especially for async)
+3. **Err**: Error occurred
 
-**Effects** are where you handle different cases:
+Handle all cases declaratively:
 
 ```js
-const h2 = document.querySelector('.entry h2')
-const p = document.querySelector('.entry p')
 effect({
-
-    // Handle pending states while fetching data
-    nil: () => {
-        h2.textContent = 'Loading...'
-    },
-
-    // Handle errors
-    err: (error) => {
-        h2.textContent = 'Oops, Something Went Wrong'
-        p.textContent = error.message
-    },
-
-    // Happy path, data is entryData.get()
-    ok: (data) => {
-        h2.textContent = data.title
-        p.textContent = data.description
-    }
-}, entryData) // assuming an `entryData` async computed signal as in the example above
+    signals: [data],
+    ok: (value) => /* update UI */,
+    nil: () => /* show loading */,
+    err: (error) => /* show error */
+})
 ```
 
 Instead of a single callback function, provide an object with `ok` (required), `err` and `nil` keys (both optional) and Cause & Effect will take care of anything that might go wrong with the listed signals in the rest parameters of `effect()`.
 
-If you want an effect based on a single signal, there's a shorthand too: The `.match()` method on either `State` or `Computed`. You can use it for easy debugging, for example:
+If you want an effect based on a single signal, there's a shorthand too: The `.tap()` method on either `State` or `Computed`. You can use it for easy debugging, for example:
 
 ```js
-signal.match({
+signal.tap({
 	ok: v => console.log('Value:', v),
 	nil: () => console.warn('Not ready'),
 	err: e => console.error('Error:', e)
 })
 ```
 
-### Effects and Batching
+## DOM Updates
+
+The `enqueue()` function allows you to schedule DOM updates to be executed on the next animation frame. It returns a `Promise`, which makes it easy to detect when updates are applied or if they fail.
+
+```js
+import { enqueue } from '@zeix/cause-effect'
+
+// Schedule a DOM update
+enqueue(() => {
+  document.getElementById('myElement').textContent = 'Updated content'
+})
+  .then(() => console.log('Update applied successfully'))
+  .catch(error => console.error('Update failed:', error))
+```
 
-Effects run synchronously as soon as source signals update. If you need to set multiple signals you can batch them together to ensure dependents are executed only once.
+You can also use the deduplication feature to ensure that only the latest update for a specific element and operation is applied:
+
+```js
+import { state, effect, enqueue } from '@zeix/cause-effect'
+
+// Define a signal and update it in an event handler
+const name = state('')
+document.querySelector('input[name="name"]').addEventListener('input', e => {
+	name.set(e.target.value) // Triggers an update on every keystroke
+})
+
+// Define an effect to react to signal changes
+name.tap(text => {
+	const nameSpan = document.querySelector('.greeting .name')
+	enqueue(() => {
+		nameSpan.textContent = text
+		return text
+	}, [nameSpan, 'setName']) // For deduplication
+		.then(result => console.log(`Name was updated to ${result}`))
+		.catch(error => console.error('Failed to update name:', error))
+})
+```
+
+In this example, as the user types in the input field only 'Jane' will be applied to the DOM. 'J', 'Ja', 'Jan' were superseded by more recent updates and deduplicated (if typing was fast enough).
+
+When multiple `enqueue` calls are made with the same deduplication key before the next animation frame, only the last call will be executed. Previous calls are superseded and their Promises will not be resolved or rejected. This "last-write-wins" behavior ensures that only the most recent update is applied, which is typically desirable for UI updates and state changes.
+
+## Advanced Usage
+
+### Batching
+
+Effects run synchronously as soon as source signals update. If you need to set multiple signals you can batch them together to ensure dependent effects are executed simultanously and only once.
 
 ```js
 import { state, computed, batch } from '@zeix/cause-effect'
@@ -178,16 +211,16 @@ import { state, computed, batch } from '@zeix/cause-effect'
 const signals = [state(2), state(3), state(5)]
 
 // Computed: derive a calculation ...
-const sum = computed(
-	(...values) => values.reduce((total, v) => total + v, 0),
-	...signals
-).map(v => { // ... perform validation and handle errors
+const sum = computed({
+	signals,
+	ok: (...values) => values.reduce((total, v) => total + v, 0),
+}).map(v => { // ... perform validation and handle errors
 	if (!Number.isFinite(v)) throw new Error('Invalid value')
 	return v
 })
 
 // Effect: switch cases for the result
-sum.match({
+sum.tap({
 	ok: v => console.log('Sum:', v),
 	err: error => console.error('Error:', error)
 })
@@ -215,44 +248,57 @@ This example showcases several powerful features of Cause & Effect:
 
 These principles enable developers to create complex, reactive applications with clear data flow, efficient updates, and robust error handling, while promoting code reuse and modularity.
 
-### Effects and DOM Updates
+### Cleanup
 
-The `enqueue()` function allows you to schedule DOM updates to be executed on the next animation frame. This function returns a `Promise`, which makes it easy to detect when updates are applied or if they fail.
+Effects return a cleanup function. When executed, it will unsubscribe from signals and run cleanup functions returned by effect callbacks, for example to remove event listeners.
 
 ```js
-import { enqueue } from '@zeix/cause-effect'
+import { state, computed, effect } from '@zeix/cause-effect'
 
-// Schedule a DOM update
-enqueue(() => {
-  document.getElementById('myElement').textContent = 'Updated content'
+const user = state({ name: 'Alice', age: 30 })
+const greeting = computed(() => `Hello ${user.get().name}!`)
+const cleanup = effect({
+    signals: [user, greeting],
+    ok: ({ age }, greet) => {
+        console.log(`${greet} You are ${age} years old`)
+        return () => console.log('Cleanup') // Cleanup function
+    }
 })
-  .then(() => console.log('Update applied successfully'))
-  .catch(error => console.error('Update failed:', error))
+
+// When you no longer need the effect, execute the cleanup function
+cleanup() // Logs: 'Cleanup' and unsubscribes from signals `user` and `greeting`
+
+user.set({ name: 'Bob', age: 28 }) // Won't trigger the effect anymore
 ```
 
-You can also use the deduplication feature to ensure that only the latest update for a specific element and operation is applied:
+### Abort Controller
 
-```js
-import { enqueue } from '@zeix/cause-effect'
+For asynchronous computed signals, Cause & Effect uses an `AbortController` to cancel pending promises when source signals update. You can use the `abort` parameter in `computed()` callbacks and pass it on to other AbortController aware APIs like `fetch()`:
 
-// Define a signal and update it in an event handler
-const name = state('')
-document.querySelector('input[name="name"]').addEventListener('input', e => {
-	state.set(e.target.value) // Triggers an update on every keystroke
+```js
+import { state, computed } from '@zeix/cause-effect'
+
+const id = state(42)
+const url = id.map(v => `https://example.com/api/entries/${v}`)
+const data = computed(async abort => {
+	const response = await fetch(url.get(), { signal: abort })
+	if (!response.ok) throw new Error(`Failed to fetch data: ${response.statusText}`)
+	return response.json()
+})
+data.tap({
+	ok: v => console.log('Value:', v),
+	nil: () => console.warn('Not ready'),
+	err: e => console.error('Error:', e)
 })
 
-// Define an effect to react to signal changes
-effect(text => {
-	const nameSpan = document.querySelector('.greeting .name')
-	enqueue(() => {
-		nameSpan.textContent = text
-		return text
-	}, [nameSpan, 'setName']) // For deduplication
-		.then(result => console.log(`Name was updated to ${result}`))
-		.catch(error => console.error('Failed to update name:', error))
-}, name)
+// User switches to another entry
+id.set(24) // Cancels or ignores the previous fetch request and starts a new one
 ```
 
-In this example, as the user types in the input field only 'Jane' will be applied to the DOM. 'J', 'Ja', 'Jan' were superseded by more recent updates and deduplicated (if typing was fast enough).
+## Contributing & License
+
+Feel free to contribute, report issues, or suggest improvements.
+
+Licence: [MIT](LICENCE.md)
 
-When multiple `enqueue` calls are made with the same deduplication key before the next animation frame, only the last call will be executed. Previous calls are superseded and their Promises will not be resolved or rejected. This "last-write-wins" behavior ensures that only the most recent update is applied, which is typically desirable for UI updates and state changes.
+(c) 2025 [Zeix AG](https://zeix.com)

package/index.d.ts

@@ -1,10 +1,11 @@
 /**
  * @name Cause & Effect
- * @version 0.12.3
+ * @version 0.13.0
  * @author Esther Brunner
  */
-export { type Signal, type MaybeSignal, type InferMaybeSignalType, type ComputedCallbacks, type EffectCallbacks, UNSET, isSignal, toSignal } from './lib/signal';
+export { CircularDependencyError } from './lib/util';
+export { type Signal, type MaybeSignal, UNSET, isSignal, isComputedCallback, toSignal } from './lib/signal';
 export { type State, state, isState } from './lib/state';
-export { type Computed, computed, isComputed } from './lib/computed';
-export { effect } from './lib/effect';
+export { type Computed, type ComputedMatcher, computed, isComputed } from './lib/computed';
+export { type EffectMatcher, type TapMatcher, effect } from './lib/effect';
 export { type EnqueueDedupe, batch, watch, enqueue } from './lib/scheduler';

package/index.js

@@ -1 +1 @@
-var V=(x)=>typeof x==="function";var q=(x,B)=>Object.prototype.toString.call(x)===`[object ${B}]`,m=(x)=>(B)=>B instanceof x,j=m(Error),g=m(Promise),y=(x)=>j(x)?x:new Error(String(x));var F,R=new Set,T=0,w=new Map,N,p=()=>{N=void 0;let x=Array.from(w.values());w.clear();for(let B of x)B()},o=()=>{if(N)cancelAnimationFrame(N);N=requestAnimationFrame(p)};queueMicrotask(p);var D=(x)=>{if(F&&!x.includes(F))x.push(F)},C=(x)=>{for(let B of x)T?R.add(B):B()},S=()=>{while(R.size){let x=Array.from(R);R.clear();for(let B of x)B()}},v=(x)=>{T++;try{x()}finally{S(),T--}},O=(x,B)=>{let z=F;F=B;try{x()}finally{F=z}},n=(x,B)=>new Promise((z,$)=>{let L=()=>{try{z(x())}catch(W){$(W)}};if(B)w.set(B,L);o()});function Y(x,...B){let z=!1,$=()=>O(()=>{if(z)throw new Error("Circular dependency in effect detected");z=!0;let L=_(B,x);if(j(L))console.error("Unhandled error in effect:",L);z=!1},$);$()}var b="Computed",i=(x,B)=>{if(!B)return!1;return x.name===B.name&&x.message===B.message},I=(x,...B)=>{let z=[],$=K,L,W=!0,H=!1,Z=!1,J=(G)=>{if(!Object.is(G,$))$=G,W=!1,L=void 0,H=!1},Q=()=>{H=K===$,$=K,L=void 0},X=(G)=>{let P=y(G);H=i(P,L),$=K,L=P},A=()=>{if(W=!0,!H)C(z)},d=()=>O(()=>{if(Z)throw new Error("Circular dependency in computed detected");H=!0,Z=!0;let G=_(B,x);if(g(G))Q(),G.then((P)=>{J(P),C(z)}).catch(X);else if(G==null||K===G)Q();else if(j(G))X(G);else J(G);Z=!1},A),M={[Symbol.toStringTag]:b,get:()=>{if(D(z),S(),W)d();if(L)throw L;return $},map:(G)=>I(G,M),match:(G)=>{return Y(G,M),M}};return M},U=(x)=>q(x,b);var h="State",k=(x)=>{let B=[],z=x,$={[Symbol.toStringTag]:h,get:()=>{return D(B),z},set:(L)=>{if(Object.is(z,L))return;if(z=L,C(B),K===z)B.length=0},update:(L)=>{$.set(L(z))},map:(L)=>I(L,$),match:(L)=>{return Y(L,$),$}};return $},E=(x)=>q(x,h);var K=Symbol(),c=(x)=>V(x)&&!x.length||typeof x==="object"&&x!==null&&("ok"in x)&&V(x.ok),f=(x)=>E(x)||U(x),t=(x)=>f(x)?x:c(x)?I(x):k(x),_=(x,B)=>{let{ok:z,nil:$,err:L}=V(B)?{ok:B}:B,W=[],H=[],Z=!1;for(let Q=0;Q<x.length;Q++){let X=x[Q];try{let A=f(X)?X.get():V(X)?X():X;if(A===K)Z=!0;W[Q]=A}catch(A){H.push(y(A))}}let J=void 0;try{if(Z&&$)J=$();else if(H.length)J=L?L(...H):H[0];else if(!Z)J=z(...W)}catch(Q){if(J=y(Q),L)J=L(J)}return J};export{O as watch,t as toSignal,k as state,E as isState,f as isSignal,U as isComputed,n as enqueue,Y as effect,I as computed,v as batch,K as UNSET};
+var X=(x)=>typeof x==="function",d=(x)=>X(x)&&x.constructor.name==="AsyncFunction",P=(x,y)=>Object.prototype.toString.call(x)===`[object ${y}]`,c=(x)=>x instanceof Error,I=(x)=>x instanceof DOMException&&x.name==="AbortError",m=(x)=>x instanceof Promise,j=(x)=>c(x)?x:Error(String(x));class V extends Error{constructor(x){super(`Circular dependency in ${x} detected`);return this}}var A,R=new Set,U=0,_=new Map,D,v=()=>{D=void 0;let x=Array.from(_.values());_.clear();for(let y of x)y()},t=()=>{if(D)cancelAnimationFrame(D);D=requestAnimationFrame(v)};queueMicrotask(v);var N=(x)=>{if(A&&!x.has(A)){let y=A;x.add(y),A.cleanups.add(()=>{x.delete(y)})}},F=(x)=>{for(let y of x)if(U)R.add(y);else y()},k=()=>{while(R.size){let x=Array.from(R);R.clear();for(let y of x)y()}},a=(x)=>{U++;try{x()}finally{k(),U--}},M=(x,y)=>{let z=A;A=y;try{x()}finally{A=z}},r=(x,y)=>new Promise((z,J)=>{let B=()=>{try{z(x())}catch(K){J(K)}};if(y)_.set(y,B);t()});function Y(x){let{signals:y,ok:z,err:J=console.error,nil:B=()=>{}}=X(x)?{signals:[],ok:x}:x,K=!1,L=()=>M(()=>{if(K)throw new V("effect");K=!0;let G=void 0;try{G=S({signals:y,ok:z,err:J,nil:B})}catch(Q){J(j(Q))}if(X(G))L.cleanups.add(G);K=!1},L);return L.cleanups=new Set,L(),()=>{L.cleanups.forEach((G)=>G()),L.cleanups.clear()}}var o="Computed",e=(x,y)=>{if(!y)return!1;return x.name===y.name&&x.message===y.message},O=(x)=>{let y=new Set,z=X(x)?void 0:{nil:()=>Z,err:(...$)=>{if($.length>1)throw new AggregateError($);else throw $[0]},...x},J=z?z.ok:x,B=Z,K,L=!0,G=!1,Q=!1,H,W=($)=>{if(!Object.is($,B))B=$,L=!1,K=void 0,G=!0},g=()=>{G=Z!==B,B=Z,K=void 0},f=($)=>{let C=j($);G=!e(C,K),B=Z,K=C},n=($)=>{if(Q=!1,H=void 0,W($),G)F(y)},u=($)=>{if(Q=!1,H=void 0,f($),G)F(y)},l=()=>{Q=!1,H=void 0,p()},q=()=>{if(L=!0,H?.abort("Aborted because source signal changed"),y.size){if(G)F(y)}else q.cleanups.forEach(($)=>$()),q.cleanups.clear()};q.cleanups=new Set;let p=()=>M(()=>{if(Q)throw new V("computed");if(G=!1,d(J)){if(H)return B;if(H=new AbortController,z)z.abort=z.abort instanceof AbortSignal?AbortSignal.any([z.abort,H.signal]):H.signal;H.signal.addEventListener("abort",l,{once:!0})}let $;Q=!0;try{$=z&&z.signals.length?S(z):J(H?.signal)}catch(C){I(C)?g():f(C),Q=!1;return}if(m($))$.then(n,u);else if($==null||Z===$)g();else W($);Q=!1},q),T={[Symbol.toStringTag]:o,get:()=>{if(N(y),k(),L)p();if(K)throw K;return B},map:($)=>O({signals:[T],ok:$}),tap:($)=>Y({signals:[T],...X($)?{ok:$}:$})};return T},b=(x)=>P(x,o);var i="State",E=(x)=>{let y=new Set,z=x,J={[Symbol.toStringTag]:i,get:()=>{return N(y),z},set:(B)=>{if(Object.is(z,B))return;if(z=B,F(y),Z===z)y.clear()},update:(B)=>{J.set(B(z))},map:(B)=>O({signals:[J],ok:B}),tap:(B)=>Y({signals:[J],...X(B)?{ok:B}:B})};return J},w=(x)=>P(x,i);var Z=Symbol(),h=(x)=>w(x)||b(x),s=(x)=>X(x)&&x.length<2,xx=(x)=>h(x)?x:s(x)?O(x):E(x),S=(x)=>{let{signals:y,abort:z,ok:J,err:B,nil:K}=x,L=[],G=!1,Q=y.map((H)=>{try{let W=H.get();if(W===Z)G=!0;return W}catch(W){if(I(W))throw W;L.push(j(W))}});try{return G?K(z):L.length?B(...L):J(...Q)}catch(H){if(I(H))throw H;let W=j(H);return B(W)}};export{M as watch,xx as toSignal,E as state,w as isState,h as isSignal,s as isComputedCallback,b as isComputed,r as enqueue,Y as effect,O as computed,a as batch,Z as UNSET,V as CircularDependencyError};

package/index.ts

@@ -1,15 +1,15 @@
 /**
  * @name Cause & Effect
- * @version 0.12.3
+ * @version 0.13.0
  * @author Esther Brunner
  */
+export { CircularDependencyError } from './lib/util'
 export {
-	type Signal, type MaybeSignal, type InferMaybeSignalType,
-	type ComputedCallbacks, type EffectCallbacks,
-	UNSET, isSignal, toSignal
+	type Signal, type MaybeSignal,
+	UNSET, isSignal, isComputedCallback, toSignal
 } from './lib/signal'
 
 export { type State, state, isState } from './lib/state'
-export { type Computed, computed, isComputed } from './lib/computed'
-export { effect } from './lib/effect'
+export { type Computed, type ComputedMatcher, computed, isComputed } from './lib/computed'
+export { type EffectMatcher, type TapMatcher, effect } from './lib/effect'
 export { type EnqueueDedupe, batch, watch, enqueue } from './lib/scheduler'

package/lib/computed.d.ts

@@ -1,19 +1,28 @@
-import { type MaybeSignal, type EffectCallbacks, type ComputedCallbacks } from './signal';
+import { type Signal } from './signal';
+import { type TapMatcher } from './effect';
+export type ComputedMatcher<S extends Signal<{}>[], R extends {}> = {
+    signals: S;
+    abort?: AbortSignal;
+    ok: (...values: {
+        [K in keyof S]: S[K] extends Signal<infer T> ? T : never;
+    }) => R | Promise<R>;
+    err?: (...errors: Error[]) => R | Promise<R>;
+    nil?: () => R | Promise<R>;
+};
 export type Computed<T extends {}> = {
     [Symbol.toStringTag]: 'Computed';
-    get: () => T;
-    map: <U extends {}>(cb: ComputedCallbacks<U, [Computed<T>]>) => Computed<U>;
-    match: (cb: EffectCallbacks<[Computed<T>]>) => void;
+    get(): T;
+    map<U extends {}>(fn: (v: T) => U | Promise<U>): Computed<U>;
+    tap(matcher: TapMatcher<T> | ((v: T) => void | (() => void))): () => void;
 };
 /**
  * Create a derived signal from existing signals
  *
  * @since 0.9.0
- * @param {() => T} cb - compute callback or object of ok, nil, err callbacks to derive state
- * @param {U} maybeSignals - signals of functions using signals this values depends on
+ * @param {ComputedMatcher<S, T> | ((abort?: AbortSignal) => T | Promise<T>)} matcher - computed matcher or callback
  * @returns {Computed<T>} - Computed signal
  */
-export declare const computed: <T extends {}, U extends MaybeSignal<{}>[]>(cb: ComputedCallbacks<T, U>, ...maybeSignals: U) => Computed<T>;
+export declare const computed: <T extends {}, S extends Signal<{}>[] = []>(matcher: ComputedMatcher<S, T> | ((abort?: AbortSignal) => T | Promise<T>)) => Computed<T>;
 /**
  * Check if a value is a computed state
  *