Computed

Extension: Function.computed

Extends the global Function interface by adding a .computed method.

---

Overview

The .computed method transforms a zero-argument function into a reactive computed observable.

• The computed observable automatically recalculates its value whenever any of its dependent baseObservable instances emit a "valuechanged" event.
• It allows defining derived reactive state easily and declaratively.

---

Type Parameters

Parameter	Description
T	The return type of the computed function

---

Usage Example

const obsA = observable(10);
const obsB = observable(20);

// Create a computed observable summing obsA and obsB values
const computedSum = (() => obsA() + obsB()).computed(obsA, obsB);

console.log(computedSum()); // Outputs: 30

obsA(15);

console.log(computedSum()); // Reactively updates and outputs: 35

---

Method Signature

computed: computedConstructor;

• Accepts one or more baseObservable dependencies.
• Returns a computed<T> observable exposing the derived value reactively.

---

Interface: computed<T = any>

A reactive computed observable derived from a function.

---

Overview

• Implements all features of a baseObservable<T> (subscriptions, notifications).
• Exposes the current computed value via the .value readonly property.
• Updates automatically based on dependency changes.

---

Type Parameters

Parameter	Description
T	The computed value type

---

Properties

readonly value: T

• The current computed value.
• Always consistent with the latest dependency states.

---

Interface: computedConstructor

Constructor and static API interface for the .computed method.

---

Call Signature

<T>(this: () => T, ...observables: baseObservable[]): computed<T>;

• Converts a zero-argument function into a reactive computed observable.
• Tracks changes in provided observable dependencies.

---

Properties

readonly prototype: computed

• Prototype shared by all computed instances.
• Useful for extending or introspecting computed observables.

---

Function: cstr

A tagged template function for creating reactive computed strings.

---

Overview

• Processes tagged template literals that may embed baseObservable values.
• If no observables are present, returns a plain concatenated static string.
• If observables are present, returns a computed function that recomputes the string reactively whenever any embedded observables change.

---

Parameters

Name	Type	Description
strings	TemplateStringsArray	Array of literal string segments from the template
values	any[]	Interpolated values inside the template, some may be observables

---

Returns

• string if no observables detected in the interpolated values.
• computed<string> reactive function if observables are present.

---

Example Usage

const obsName = observable('Alice');
const obsAge = observable(30);

const greeting = cstr`Hello, ${obsName}! You are ${obsAge} years old.`;

console.log(greeting()); // "Hello, Alice! You are 30 years old."

obsName('Bob');

console.log(greeting()); // Reactively updates to "Hello, Bob! You are 30 years old."

---

Summary

• .computed is a powerful extension method to convert pure functions into reactive computed observables, automatically updating on dependencies.
• computed<T> observables expose derived values with all reactive capabilities.
• cstr enables reactive template string interpolation for dynamic, reactive UI-friendly strings.