conversions

function changes<A>(behavior: Behavior<A>): Stream<Signal<"behavior-change", A>>

import { stepper, changes } from "cereb/frp";

const position = stepper({ x: 0, y: 0 }, pointerStream, (s) => s.value);

// Convert to a stream of changes
const positionChanges = changes(position);

positionChanges.on((signal) => {
  console.log("Position changed to:", signal.value);
});

function sample<A>(behavior: Behavior<A>, intervalMs: number): Stream<Signal<"sampled", A>>

import { time, sample } from "cereb/frp";

const t = time();

// Sample time every 100ms
const timeSamples = sample(t, 100);

timeSamples.on((signal) => {
  console.log("Time:", signal.value);
});

function sampleOn<A, S extends Signal>(
  behavior: Behavior<A>,
  trigger: Stream<S>
): Stream<Signal<"sampled-on", { value: A; trigger: S }>>

import { constant, sampleOn } from "cereb/frp";
import { dom } from "cereb";

const counter = stepper(0, incrementStream, (s) => s.value);
const clicks = dom(button, "click");

// Sample counter value on each click
const counterOnClick = sampleOn(counter, clicks);

counterOnClick.on((signal) => {
  console.log("Counter at click:", signal.value.value);
  console.log("Click event:", signal.value.trigger);
});

function animationFrame<A>(behavior: Behavior<A>): Stream<Signal<"frame", { value: A; timestamp: number }>>

import { combine, animationFrame } from "cereb/frp";

const transform = combine(
  positionBehavior,
  scaleBehavior,
  (pos, scale) => `translate(${pos.x}px, ${pos.y}px) scale(${scale})`
);

// Render on every frame
const unsubscribe = animationFrame(transform).on(({ value }) => {
  element.style.transform = value.value;
});

// Later: stop the animation loop
unsubscribe();

function elapsedTime(): { elapsed: Behavior<number>; dispose: () => void }

import { elapsedTime } from "cereb/frp";

const { elapsed, dispose } = elapsedTime();

// Sample elapsed time
console.log("Elapsed:", elapsed.sample()); // 0
// ... later ...
console.log("Elapsed:", elapsed.sample()); // e.g., 1234.56

// Use with animations
elapsed.onChange((t) => {
  const progress = Math.min(t / 1000, 1); // 0 to 1 over 1 second
  element.style.opacity = String(progress);
});

// Clean up when done
dispose();