Add in computed

packages/core/src/index.ts

@@ -537,19 +537,21 @@ declare class Computed<T = any> extends Signal<T> {
 	_globalVersion: number;
 	_flags: number;
 
-	constructor(fn: () => T);
+	constructor(fn: () => T, options?: SignalOptions<T>);
 
 	_notify(): void;
 	get value(): T;
 }
 
-function Computed(this: Computed, fn: () => unknown) {
+function Computed(this: Computed, fn: () => unknown, options?: SignalOptions) {
 	Signal.call(this, undefined);
 
 	this._fn = fn;
 	this._sources = undefined;
 	this._globalVersion = globalVersion - 1;
 	this._flags = OUTDATED;
+	this._watched = options?.watched;
+	this._unwatched = options?.unwatched;
 }
 
 Computed.prototype = new Signal() as Computed;
@@ -626,9 +628,8 @@ Computed.prototype._subscribe = function (node) {
 
 Computed.prototype._unsubscribe = function (node) {
 	// Only run the unsubscribe step if the computed signal has any subscribers.
+	Signal.prototype._unsubscribe.call(this, node);
 	if (this._targets !== undefined) {
-		Signal.prototype._unsubscribe.call(this, node);
-
 		// Computed signal unsubscribes from its dependencies when it loses its last subscriber.
 		// This makes it possible for unreferences subgraphs of computed signals to get garbage collected.
 		if (this._targets === undefined) {
@@ -699,8 +700,11 @@ interface ReadonlySignal<T = any> {
  * @param fn The effect callback.
  * @returns A new read-only signal.
  */
-function computed<T>(fn: () => T): ReadonlySignal<T> {
-	return new Computed(fn);
+function computed<T>(
+	fn: () => T,
+	options?: SignalOptions<T>
+): ReadonlySignal<T> {
+	return new Computed(fn, options);
 }
 
 function cleanupEffect(effect: Effect) {

packages/preact/src/index.ts

@@ -372,11 +372,11 @@ export function useSignal<T>(value?: T, options?: SignalOptions<T>) {
 	);
 }
 
-export function useComputed<T>(compute: () => T) {
+export function useComputed<T>(compute: () => T, options?: SignalOptions<T>) {
 	const $compute = useRef(compute);
 	$compute.current = compute;
 	(currentComponent as AugmentedComponent)._updateFlags |= HAS_COMPUTEDS;
-	return useMemo(() => computed<T>(() => $compute.current()), []);
+	return useMemo(() => computed<T>(() => $compute.current(), options), []);
 }
 
 let oldNotify: (this: Effect) => void,

packages/react/runtime/src/index.ts

@@ -394,10 +394,13 @@ export function useSignal<T>(value?: T, options?: SignalOptions<T>) {
 	);
 }
 
-export function useComputed<T>(compute: () => T): ReadonlySignal<T> {
+export function useComputed<T>(
+	compute: () => T,
+	options?: SignalOptions<T>
+): ReadonlySignal<T> {
 	const $compute = useRef(compute);
 	$compute.current = compute;
-	return useMemo(() => computed<T>(() => $compute.current()), Empty);
+	return useMemo(() => computed<T>(() => $compute.current(), options), Empty);
 }
 
 export function useSignalEffect(cb: () => void | (() => void)) {