Chapter 1: map — The Static Dependency Graph

The most fundamental and frequently used transformation in Timeline is .map(). It transforms the value of one Timeline into another according to a specific rule (a function), generating a new Timeline.

Its essence is to define an immutable, “static” relationship between two Timelines.

API Definition

F#: map: ('a -> 'b) -> Timeline<'a> -> Timeline<'b>

TS: .map<B>(f: (value: A) => B): Timeline<B>

map takes a pure function f as an argument, which accepts a value of type A and returns a value of type B.

TypeScript

const numbers = Timeline(5);

// Pass a function: (x: number) => string
const labels = numbers.map(x => `Score: ${x}`);

console.log(labels.at(Now)); // "Score: 5"share

// When the source is updated, labels is automatically updated as well
numbers.define(Now, 100);
console.log(labels.at(Now)); // "Score: 100"

Dependency Graph

When you call map, a Dependency is registered internally between the two Timelines. The entire network of these relationships is called the Dependency Graph.

The dependency created by map is Static. Once you define the relationship labels = numbers.map(...), the rule itself—the transformation of the value—does not change later.

This simple concept of a “static dependency” is the foundation for understanding the “dynamic” dependencies constructed by bind and using, which will be introduced later.

Canvas Demo

https://g.co/gemini/share/1560a1f89a35