Cause & Effect

https://github.com/zeixcom/cause-effect
Admin
Cause & Effect is a reactive state management primitives library for TypeScript. It provides the...
Tokens:87,596
Snippets:777
Trust Score:7.5
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Quick Start with Cause-Effect

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Basic usage example demonstrating state creation, memoized computed values, side effects, and state updates.

```javascript
import { createState, createMemo, createEffect } from '@zeix/cause-effect'

// 1. Create state
const user = createState({ name: 'Alice', age: 30 })

// 2. Create computed values
const greeting = createMemo(() => `Hello ${user.get().name}!`)

// 3. React to changes
createEffect(() => {
  console.log(`${greeting.get()} You are ${user.get().age} years old`)
})

// 4. Update state
user.update(u => ({ ...u, age: 31 })) // Logs: "Hello Alice! You are 31 years old"
```

--------------------------------

### Install @zeix/cause-effect

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Installation commands for npm and bun package managers.

```bash
# with npm
npm install @zeix/cause-effect

# or with bun
bun add @zeix/cause-effect
```

--------------------------------

### isSensor Usage Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/sensor.md

Example demonstrating how to use the isSensor utility to check if a created sensor is valid.

```ts
import { createSensor, isSensor } from '@zeix/cause-effect'

const s = createSensor(() => () => {})
console.log(isSensor(s)) // true
```

--------------------------------

### isSlot usage example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/slot.md

Example demonstrating how to import and use isSlot to check if a created Slot is valid.

```ts
import { createSlot, createState, isSlot } from '@zeix/cause-effect'

const s = createSlot(createState(1))
console.log(isSlot(s)) // true
```

--------------------------------

### Basic createState usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/state.md

Example of creating a state, setting a value, and updating it.

```ts
import { createState } from '@zeix/cause-effect'

const count = createState(42)
count.set(24)
count.update(v => v + 1)
console.log(count.get()) // 25
```

--------------------------------

### Creating and updating a reactive store

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/store.md

Example of initializing a store, using effects to track changes, and performing updates.

```ts
import { createStore, createEffect } from '@zeix/cause-effect'

const user = createStore({
  name: 'Alice',
  age: 30,
  preferences: { theme: 'dark', notifications: true },
})

createEffect(() => {
  console.log(`${user.name.get()} is ${user.age.get()} years old`)
})

user.age.update(v => v + 1)
user.preferences.theme.set('light')

createEffect(() => console.log('User:', user.get())) // whole-object watch
```

--------------------------------

### isTask Usage Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/task.md

Example of using isTask to verify a signal before calling abort.

```ts
import { createTask, isTask } from '@zeix/cause-effect'

const t = createTask(async () => 1)
if (isTask(t)) t.abort()
```

--------------------------------

### createSignal usage examples

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/signal.md

Examples demonstrating how createSignal handles different data types including arrays, records, functions, and existing signal instances.

```ts
import { createSignal, isSignal } from '@zeix/cause-effect'

const fromArray = createSignal([1, 2, 3])   // MutableList<number>
const fromRecord = createSignal({ a: 1 })   // MutableStore<{ a: number }>
const fromFn = createSignal(() => 42)        // Memo<number>
const passthrough = createSignal(fromArray)  // same instance, unchanged
```

--------------------------------

### valueString usage examples

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/util.md

Examples demonstrating how valueString formats different types of inputs, including strings, objects, and undefined values.

```ts
import { valueString } from '@zeix/cause-effect'

valueString('hi')        // "\"hi\""
valueString({ a: 1 })    // "{\"a\":1}"
valueString(undefined)   // "undefined"
```

--------------------------------

### Basic createScope usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/graph.md

Example showing how to create a scope, define state and effects within it, and manually trigger disposal.

```ts
import { createState, createEffect, createScope } from '@zeix/cause-effect'

const dispose = createScope(() => {
  const count = createState(0)
  createEffect(() => console.log(count.get()))
  return () => console.log('Scope disposed')
})

dispose() // disposes the effect, then runs the returned cleanup
```

--------------------------------

### isAsyncFunction and isSyncFunction usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/util.md

Examples demonstrating the behavior of isAsyncFunction and isSyncFunction.

```ts
import { isAsyncFunction, isSyncFunction } from '@zeix/cause-effect'

isAsyncFunction(async () => {}) // true
isSyncFunction(() => {})        // true
isSyncFunction(async () => {})  // false
```

--------------------------------

### createSensor(setup, options)

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Creates a read-only source that tracks external input, activating lazily when read.

```APIDOC
## createSensor(setup, options)

### Description
A read-only source that tracks external input. It activates lazily when an effect first reads it and cleans up when no longer watched.

### Parameters
- **setup** (function) - Required - A function receiving a 'set' callback to update the sensor value.
- **options** (object) - Optional - Configuration object, e.g., { value: initialValue, equals: comparator }.
```

--------------------------------

### Using equality strategies with createState and createSensor

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/graph.md

Example demonstrating the application of DEEP_EQUALITY for state objects and SKIP_EQUALITY for sensor observation.

```ts
import { createState, createMemo, DEEP_EQUALITY, SKIP_EQUALITY } from '@zeix/cause-effect'

const point = createState({ x: 0, y: 0 }, { equals: DEEP_EQUALITY })
point.set({ x: 0, y: 0 }) // no propagation — structurally equal

const el = createSensor<HTMLElement>((set) => {
  const node = document.getElementById('box')!
  set(node)
  const obs = new MutationObserver(() => set(node))
  obs.observe(node, { attributes: true })
  return () => obs.disconnect()
}, { value: node, equals: SKIP_EQUALITY })
```

--------------------------------

### Creating a reactive effect with cleanup

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/effect.md

Example showing how to create an effect that tracks a state and provides a cleanup function.

```ts
import { createState, createEffect } from '@zeix/cause-effect'

const count = createState(42)

const cleanup = createEffect(() => {
  console.log(count.get())
  return () => console.log('Cleanup')
})

cleanup()
```

--------------------------------

### Reactive list usage example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/list.md

Demonstrates creating a list, observing changes with createEffect, and performing mutations like add, splice, and sort.

```ts
import { createList, createEffect } from '@zeix/cause-effect'

const items = createList(['banana', 'apple', 'cherry'])

createEffect(() => console.log(`First: ${items.at(0)?.get()}`))

items.add('date')
items.splice(1, 1, 'orange')
items.sort()
```

--------------------------------

### createMutableSignal Usage Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/signal.md

Demonstrates creating a MutableStore and handling invalid input types that trigger an InvalidSignalValueError.

```ts
import { createMutableSignal, InvalidSignalValueError } from '@zeix/cause-effect'

const s = createMutableSignal({ n: 1 }) // MutableStore

try {
  createMutableSignal(() => 0) // functions are rejected
} catch (e) {
  // e is InvalidSignalValueError
}
```

--------------------------------

### Property-descriptor Pattern Usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/slot.md

Example demonstrating how to use createSlot to define a property on an object and swap its backing signal.

```ts
import { createState, createSlot } from '@zeix/cause-effect'

class Props {
  #backing = createState('')
  #slot = createSlot(this.#backing)

  connect(obj: object) {
    Object.defineProperty(obj, 'value', this.#slot)
  }

  swap(next: { get(): string; set(v: string): void }) {
    this.#slot.replace(next)
  }
}
```

--------------------------------

### Task Usage Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/task.md

Demonstrates creating a task that fetches user data based on a stateful ID and handling the result with match.

```ts
import { createState, createTask } from '@zeix/cause-effect'
import { match } from '@zeix/cause-effect'

const userId = createState(1)
const userData = createTask(async (_, abort) => {
  const res = await fetch(`/api/users/${userId.get()}`, { signal: abort })
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json()
})

createEffect(() => {
  match(userData, {
    ok: user => console.log('User:', user),
    nil: () => console.log('Loading...'),
    err: error => console.error(error),
    stale: () => console.log('Refreshing...'),
  })
})
```

--------------------------------

### createCollection with WebSocket integration

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/collection.md

Example of using createCollection to sync a collection with a WebSocket source using a keyConfig function.

```ts
import { createCollection, createEffect } from '@zeix/cause-effect'

const items = createCollection((applyChanges) => {
  const ws = new WebSocket('/items')
  ws.onmessage = (e) => {
    const { add, change, remove } = JSON.parse(e.data)
    applyChanges({ add, change, remove })
  }
  return () => ws.close()
}, { keyConfig: item => item.id })

createEffect(() => console.log('Items:', items.get()))
```

--------------------------------

### MutableList Usage Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/list.md

Demonstrates creating a list with a key configuration, adding items, replacing existing items, and iterating over the list signals.

```typescript
import { createList } from '@zeix/cause-effect'

const users = createList(
  [{ id: 'alice', name: 'Alice' }, { id: 'bob', name: 'Bob' }],
  { keyConfig: user => user.id },
)

const aliceKey = users.add({ id: 'carol', name: 'Carol' })
users.replace('alice', { id: 'alice', name: 'Alicia' })
users.remove('bob')

console.log(users.keyAt(0), users.indexOfKey('carol'))
for (const signal of users) console.log(signal.get())
```

--------------------------------

### match with single signal

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/effect.md

Example demonstrating the use of match with a single task signal to handle different states.

```ts
import { createState, createTask, createEffect, match } from '@zeix/cause-effect'

const userId = createState(1)
const userData = createTask(async (_, abort) => {
  const res = await fetch(`/api/users/${userId.get()}`, { signal: abort })
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json()
})

createEffect(() => {
  match(userData, {
    ok: user => console.log('User:', user),
    nil: () => console.log('Loading...'),
    err: error => console.error(error),
    stale: () => console.log('Refreshing...'),
  })
})
```

--------------------------------

### Usage of Each component

Source: https://github.com/zeixcom/cause-effect/blob/main/REACT_INTEGRATION.md

Example of using the Each component to render a list of TodoItems, where individual value changes only re-render the affected TodoItem.

```tsx
<Each list={todos}>
  {(signal, key) => <TodoItem key={key} signal={signal} />}
</Each>
```

--------------------------------

### Using isPending and abort with deriveList

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/graph.md

An example demonstrating how to track the pending state of a derived list and programmatically abort the fetch request.

```ts
import { deriveList, createState, createEffect, isPending } from '@zeix/cause-effect'

const query = createState('')
const users = deriveList(async (_prev, abort) => {
  const res = await fetch(`/api/users?q=${query.get()}`, { signal: abort })
  return res.json()
}, { initial: [] })

createEffect(() => {
  if (isPending(users)) return showSpinner()
  renderRows(users.get())
})

// later: abort(signal) cancels the in-flight derivation programmatically
```

--------------------------------

### Signal Type Checking Example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/signal.md

Demonstrates how isSignal and isMutableSignal behave with different signal types like State, Memo, and Slot.

```ts
import { createState, createMemo, createSlot, isSignal, isMutableSignal } from '@zeix/cause-effect'

const state = createState(1)
const memo = createMemo(() => 1)
const slot = createSlot(state)

isSignal(state)       // true
isSignal(memo)        // true
isSignal(slot)        // true — slot IS a signal
isMutableSignal(state) // true
isMutableSignal(memo)  // false — Memo has no set()
isMutableSignal(slot)  // false — slot is a forwarding layer
```

--------------------------------

### Basic Reactive Primitives

Source: https://github.com/zeixcom/cause-effect/blob/main/GUIDE.md

Demonstrates the core reactive primitives: createState, createMemo, and createEffect working together.

```ts
import { createState, createMemo, createEffect } from '@zeix/cause-effect'

const count = createState(0)
const doubled = createMemo(() => count.get() * 2)

createEffect(() => {
  console.log(`${count.get()} doubled is ${doubled.get()}`)
})

count.set(5) // logs: "5 doubled is 10"
```

--------------------------------

### isState usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/state.md

Example of using isState to narrow types.

```ts
import { createState, isState } from '@zeix/cause-effect'

const s = createState(0)
if (isState(s)) {
  s.update(v => v + 1) // narrowed: update() exists
}
```

--------------------------------

### Create a reactive Store

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Shows how to create a reactive object where properties are individual signals, allowing for granular observation and updates.

```js
import { createStore, createEffect } from '@zeix/cause-effect'

const user = createStore({
  name: 'Alice',
  age: 30,
  preferences: { theme: 'dark', notifications: true }
})

createEffect(() => {
  console.log(`${user.name.get()} is ${user.age.get()} years old`)
})

user.age.update(v => v + 1)
user.preferences.theme.set('light')

createEffect(() => console.log('User:', user.get())) // watch the full object
```

--------------------------------

### Using isMemo

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/memo.md

Example of checking if a created memo is indeed a Memo signal.

```ts
import { createMemo, isMemo } from '@zeix/cause-effect' 

const m = createMemo(() => 1) 
console.log(isMemo(m)) // true
```

--------------------------------

### Managing Collections with createList

Source: https://github.com/zeixcom/cause-effect/blob/main/GUIDE.md

Demonstrates using createList to manage normalized collections where individual items have their own signals.

```ts
const todos = createList(initialTodos, { keyConfig: t => t.id })
todos.replace('t1', { ...todo, done: true }) // only effects reading 't1' re-run
todos.sort((a, b) => a.text.localeCompare(b.text)) // 't1' still points to the same signal
```

--------------------------------

### Handling list errors

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/list.md

Example of catching errors such as NullishSignalValueError or DuplicateKeyError during list mutations.

```ts
import { createList, DuplicateKeyError } from '@zeix/cause-effect'

const items = createList(['a'], { keyConfig: 'item-' })

try {
  items.add(undefined as unknown as string)
} catch (e) {
  // NullishSignalValueError or DuplicateKeyError depending on the value
}
```

--------------------------------

### Configure List key generation

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Shows how to use keyConfig to define custom key generation strategies, either via a string prefix or a function.

```js
// String prefix keys → 'item-0', 'item-1'
const items = createList(['banana', 'apple'], { keyConfig: 'item-' })

// Function-based keys
const users = createList(
  [{ id: 'alice', name: 'Alice' }],
  { keyConfig: user => user.id }
)
```

--------------------------------

### Handling ReadonlySignalError

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/slot.md

Example of error handling when attempting to write to a slot backed by a read-only signal.

```ts
import { createSlot, createMemo } from '@zeix/cause-effect'

const slot = createSlot(createMemo(() => 1))
try {
  slot.set(2) // 'Memo' has no setter
} catch (e) {
  // e is ReadonlySignalError
}
```

--------------------------------

### Using isCell and isMutableCell guards

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/cell.md

Example usage of isCell and isMutableCell to verify signal types.

```ts
import { createCell, deriveCell, isCell, isMutableCell } from '@zeix/cause-effect'

const s = createCell(1)
const d = deriveCell(() => 2)

isCell(s)          // true
isCell(d)          // true
isMutableCell(s)   // true — writable
isMutableCell(d)   // false — Memo is not a MutableCell
```

--------------------------------

### Create a Memo with reducer style

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Shows how to use a reducer-like pattern with createMemo by providing a callback that receives the previous value.

```js
const counter = createMemo(prev => {
  switch (actions.get()) {
    case 'increment': return prev + 1
    case 'decrement': return prev - 1
    case 'reset': return 0
    default: return prev
  }
}, { value: 0 })
```

--------------------------------

### Cleanup-before-rerun pattern

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/effect.md

Example of using the cleanup function to clear a timer before the effect re-runs or is disposed.

```ts
import { createState, createEffect } from '@zeix/cause-effect'

const count = createState(0)

createEffect(() => {
  const timer = setInterval(() => console.log(count.get()), 1000)
  return () => clearInterval(timer) // runs before every re-run and on dispose
})
```

--------------------------------

### createList(initialItems, options)

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Creates a reactive list where each item is a signal. Items maintain identity through sorting and reordering based on keys.

```APIDOC
## createList(initialItems, options)

### Description
Creates a new reactive list. Items can be accessed via `.at(index)` or `.byKey(key)`. The list supports methods like `.add()`, `.remove()`, `.replace()`, `.sort()`, and `.splice()`.

### Parameters
- **initialItems** (Array) - Required - Initial array of items.
- **options** (Object) - Optional - Configuration object.
  - **keyConfig** (String|Function) - Optional - Defines how keys are generated for items. If a function is provided, it derives the key from the item content.
```

--------------------------------

### Create Lazy Sensors and Lists

Source: https://github.com/zeixcom/cause-effect/blob/main/RECIPES.md

Demonstrates using createSensor and deriveList with watched callbacks to manage external resources like window resize listeners and EventSource connections.

```js
import { createSensor, deriveList, createEffect } from '@zeix/cause-effect'

// Sensor: track external input
const windowSize = createSensor((set) => {
  const update = () => set({ w: innerWidth, h: innerHeight })
  update()
  window.addEventListener('resize', update)
  return () => window.removeEventListener('resize', update)
})

// List: receive external data via an external-push origin
const feed = deriveList([], {
  keyConfig: item => item.id,
  watched: (apply) => {
    const es = new EventSource('/feed')
    es.onmessage = (e) => apply({ add: [JSON.parse(e.data)] })
    return () => es.close()
  },
})

// Resources are created only when the effect runs
const cleanup = createEffect(() => {
  console.log('Window size:', windowSize.get())
  console.log('Feed items:', feed.get())
})

// Resources are cleaned up when the effect stops
cleanup()
```

--------------------------------

### createStore(initialObject)

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Creates a reactive object where each property becomes its own signal.

```APIDOC
## createStore(initialObject)

### Description
A reactive object where each property becomes its own signal. Nested objects recursively become nested stores.

### Methods
- **.byKey(key)**: Access a property signal.
- **.keys()**: Iterate over keys reactively.
- **.add(key, value)**: Add a new property.
- **.remove(key)**: Remove a property.
```

--------------------------------

### Error Retention and Recovery

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/task.md

Example showing how a task retains errors and how to handle the initial state before a value is resolved.

```ts
import { createState, createTask } from '@zeix/cause-effect' 

const fail = createState(true) 
const t = createTask(async () => { 
  if (fail.get()) throw new Error('upstream down') 
  return 42 
}) 

try { 
  t.get() // first read: starts computation… 
} catch (e) { /* UnsetSignalValueError — still no value */ }
```

--------------------------------

### Track mouse position with createSensor

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/sensor.md

Example of using a sensor to track mouse movement events with an initial value.

```ts
import { createSensor, createEffect } from '@zeix/cause-effect'

const mousePos = createSensor((set) => {
  const handler = (e) => set({ x: e.clientX, y: e.clientY })
  window.addEventListener('mousemove', handler)
  return () => window.removeEventListener('mousemove', handler)
}, { value: { x: 0, y: 0 } })

createEffect(() => {
  const pos = mousePos.get()
  console.log(`Mouse: ${pos.x}, ${pos.y}`)
})
```

--------------------------------

### createMemo(fn, options?)

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/memo.md

Creates a memoized synchronous derivation. It tracks dependencies automatically and recomputes lazily on read.

```APIDOC
## createMemo(fn, options?)

### Description
Creates a memoized synchronous derivation. It tracks its dependencies automatically, recomputes lazily on read when a dependency changed, and throws if the computation returns a Promise or null/undefined.

### Parameters
- **fn** (MemoCallback<T>) - Required - Computation function: (prev: T | undefined) => T. Must be synchronous.
- **options** (ComputedOptions<T>) - Optional - Configuration object containing { guard?, equals?, value?, watched? }.

### Returns
- **Memo<T>** - A memo object with a get() method and Symbol.toStringTag set to 'Memo'.

### Throws
- **InvalidCallbackError** if fn is not a function or is an async function.
- **PromiseValueError** if fn returns a Promise.
- **UnsetSignalValueError** if the memo has no initial value and no dependency has produced a value.
```

--------------------------------

### unown(fn) usage example

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/graph.md

Demonstrates using unown to create an effect that survives the disposal of its parent scope.

```ts
import { unown, createScope, createEffect, createState } from '@zeix/cause-effect'

const state = createState(0)

const dispose = createScope(() => {
  createEffect(() => console.log('owned:', state.get())) // disposed with the scope

  unown(() => {
    createEffect(() => console.log('detached:', state.get())) // root — survives dispose()
  })
})

dispose() // 'owned' stops; 'detached' keeps logging on later writes
```

--------------------------------

### Basic usage of createMemo

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/memo.md

Demonstrates lazy recomputation using createState and createMemo.

```ts
import { createState, createMemo } from '@zeix/cause-effect' 

const count = createState(42) 
const isEven = createMemo(() => !(count.get() % 2)) 

console.log(isEven.get()) // false 
count.set(24)             // no recomputation yet — lazy 
console.log(isEven.get()) // true (no change re-propagated: 24 is even)
```

--------------------------------

### createState with type guard

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/state.md

Example of using a guard to validate state values, throwing an error if validation fails.

```ts
import { createState, InvalidSignalValueError } from '@zeix/cause-effect'

const count = createState(0, {
  guard: (v): v is number => typeof v === 'number'
})

try {
  count.set('not a number')
} catch (e) {
  // e is InvalidSignalValueError
  console.error(e)
}
```

--------------------------------

### Create a Memoized derivation

Source: https://github.com/zeixcom/cause-effect/blob/main/README.md

Demonstrates using createMemo to derive values from other signals, which only recomputes when dependencies change.

```js
import { createState, createMemo, createEffect } from '@zeix/cause-effect'

const count = createState(42)
const isEven = createMemo(() => !(count.get() % 2))

createEffect(() => console.log(isEven.get()))
count.set(24) // no log; still even
```

--------------------------------

### Asynchronous deriveList usage

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/collection.md

Example of using deriveList with an asynchronous fetch operation, integrated with a state signal and effect.

```ts
import { deriveList, createState, createEffect, isPending } from '@zeix/cause-effect'

const query = createState('')
const users = deriveList(
  async (prev, abort) => {
    const res = await fetch(`/api/users?q=${query.get()}`, { signal: abort })
    return res.json()
  },
  { initial: [], keyConfig: (u: User) => u.id },
)

createEffect(() => {
  if (isPending(users)) return showSpinner()
  renderRows(users.get())
})
```

--------------------------------

### Create and update a mutable cell

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/cell.md

Example showing the initialization of a mutable cell and the use of set and update methods.

```ts
import { createCell } from '@zeix/cause-effect'

const userId = createCell(1)
userId.set(2)
userId.update(id => id + 1)
```

--------------------------------

### Import createMemo and isMemo

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/memo.md

Basic import statement for the memoization utilities.

```ts
import { createMemo, isMemo } from '@zeix/cause-effect'
```

--------------------------------

### Root-scope for web components

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/graph.md

Example of using a root scope within a web component to manage teardown via disconnectedCallback.

```ts
class MyElement extends HTMLElement {
  #dispose?: () => void

  connectedCallback() {
    this.#dispose = createScope(() => {
      createEffect(() => { this.textContent = label.get() })
    }, { root: true })
  }

  disconnectedCallback() {
    this.#dispose?.()
  }
}
```

--------------------------------

### Multi-Step Wizard Pattern Implementation

Source: https://github.com/zeixcom/cause-effect/blob/main/RECIPES.md

Demonstrates orchestrating a multi-step form by encapsulating step data in Stores and computing overall wizard progression via a central Memo.

```typescript
import { createState, createMemo, createStore } from '@zeix/cause-effect';

// 1. Individual step states encapsulated in Stores
const step1Data = createStore({ name: '', email: '' });
const step2Data = createStore({ plan: 'basic', billing: 'monthly' });

// 2. Navigation state
const currentStep = createState(1);
const totalSteps = 2;

// 3. Step validation using derived Memos
const isStep1Valid = createMemo(() => {
  const data = step1Data.get();
  return data.name.length > 0 && data.email.includes('@');
});

const isStep2Valid = createMemo(() => {
  const data = step2Data.get();
  return ['basic', 'pro'].includes(data.plan);
});

// 4. Overall Wizard State Machine computed declaratively
const wizardState = createMemo(() => {
  const step = currentStep.get();
  
  // Conditionally track only the current step's validity
  const canProceed = step === 1 ? isStep1Valid.get() : isStep2Valid.get();
  const isComplete = step === totalSteps && canProceed;
  
  return {
    step,
    canProceed,
    isComplete,
    progress: (step / totalSteps) * 100
  };
});

// 5. Navigation Controllers
function nextStep() {
  if (wizardState.get().canProceed && currentStep.get() < totalSteps) {
    currentStep.update(s => s + 1);
  }
}

function prevStep() {
  if (currentStep.get() > 1) {
    currentStep.update(s => s - 1);
  }
}

// Usage
step1Data.set({ name: 'Alice', email: 'alice@example.com' });
console.log(wizardState.get().canProceed); // true
nextStep();
console.log(currentStep.get()); // 2
```

--------------------------------

### Importing store utilities

Source: https://github.com/zeixcom/cause-effect/blob/main/_autodocs/api-reference/store.md

Basic imports for the store module.

```ts
import { createStore, deriveStore, isStore, isMutableStore } from '@zeix/cause-effect'
```
Tokens:
Raw