Class Projector<T>

Projectors act like atoms, so they can be consumed by other projectors or other atom-consuming API functions.

There is a slight optimization that Projector will do, it will try and sniff if any input atom-like objects are a ReadonlyAtom, and if so it will only subscribe to them if there are subscribers to the Projector so that the readonly atom isn't running when nothings is subscribed.

NOTE

Due to the fact that projectors subscribe to the atoms they are created with, if you wish to stop using a projector (have it fall out of scope) you must manually call unsubscribeFromAtoms or else the projector will not be garbage collected as it's subscription function to all atoms will keep it in memory. If the atoms that thep projector was created for/with will also fall out of scope this is not required.

Examples

Probably the simpleist example of a projector is summing up multiple count atoms.

const counter1 = atom(0);
const counter2 = atom(0);

const display1 = document.getElementById("display-counter-1");
counter1.subscribe((count) => {
  display1.textContent = `Current count: ${count.value}`;
});

const incr1 = document.getElementById("increment-counter-1");
incr1.addEventListener("click", () => counter1.update((n) => n + 1));

const display2 = document.getElementById("display-counter-2");
counter2.subscribe((count) => {
  display2.textContent = `Current count: ${count.value}`;
});

const incr2 = document.getElementById("increment-counter-2");
incr2.addEventListener("click", () => counter2.update((n) => n + 1));

const sum = projector(counter1, counter2, (a, b) => a + b);

const sumDisplay = document.getElementById("display-sum");
sum.subscribe((sum) => {
  sumDisplay.textContent = `Total count: ${sum.value}`;
});

Projectors don't always have to be used with multiple atoms, somtimes you just want to be able to have and update data from a single atom in a different way. Like showing the full name for a user.

const user = atom({
  firstName: 'Peter',
  lastName: 'Programmer',
});

const fullName = projector(user, u => `${u.firstName} ${u.lastName}`);

const firstNameInput = document.getElementById('first-name');
firstNameInput.value = user.value.firstName;
firstNameInput.addEventListener('input', event => {
  user.update(oldUser => ({ ...oldUser, firstName: event.target.value }));
});

const lastNameInput = document.getElementById('last-name');
lastNameInput.value = user.value.lastName;
lastNameInput.addEventListener('input', event => {
  user.update(oldUser => ({ ...oldUser, lastName: event.target.value }));
});

const fullNameDisplay = document.getElementById('display-full-name');
fullNameDisplay.textContent = fullName.value;
fullName.subscribe(name => {
  fullNameDisplay.textContent = name.value;
});

A simple and clean way to control how data is rendered, just modify fullName's projection function to, say, change the computed value to last, first instead.

internal

DO NOT USE Prefer using the projector factory function to manually creating instances of this class.