computed

A read-only signal that updates when dependencies change.

interface ReadonlySignal<T> {
  // Get the value
  (): T;
  // Subscribe to changes
  subscribe: (fn: () => void) => () => void
  // Unsubscribe from changes
  unsubscribe: (fn: () => void) => void
  // Cleanup all subscribers
  cleanup: () => void;
}

/**
 * @param compute returns a derived value from all internal signals
 * @returns A read-only signal
 */
computed<T>(compute: () => T): SignalValue<T>

Usage

Computed signals are derived from other signals. Results are cached until any dependencies change and only recalculated when the value is used.

Like signals, cleanup is required for global computed signals only as components don’t need explicit computed usage to derive signals.

import { signal, computed } from '@hellajs/core';

const items = signal([
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Carrot', category: 'Vegetable' },
  { id: 3, name: 'Banana', category: 'Fruit' }
]);

const category = signal('Fruit');

const filteredItems = computed(() =>
  items().filter(item => item.category === category())
);

console.log(filteredItems());
 // [{ id: 1, name: 'Apple'... }, { id: 3, name: 'Banana'... }]

category.set('Vegetable');

console.log(filteredItems());
// [{ id: 2, name: 'Carrot'... }]