Renderer

The Renderer: how an Environment writes animated values to what it draws, an element, a canvas context, a native view. It has two halves: project, pure, turns a Frame's values into the Environment's own Patch, grouping keys as it likes; and commit writes a patch onto a target, now. A binding writes its elements through its flush; applyTo writes a Frame stream outside one.

import * as Renderer from "@wardic/core/Renderer"

yield* Machine.toStream(Machine.springValues({ x: 100 })).pipe(Renderer.applyTo(target))

Classes

Renderer

An Environment's renderer. Both halves are plain functions, not Effects: they run once per element per frame. target is the Environment's own, opaque to core.

Extends

  • Context.Service

Properties

commit
readonly commit: (target, patch) => void;

Writes a patch onto target, now.

Parameters
target

unknown

patch

Patch

Returns

void

project
readonly project: (values) => Patch;

Turns a Frame's values into the Environment's patch: pure, so a binding can project values it doesn't write yet.

Parameters
values

Record<string, unknown>

Returns

Patch

Type Aliases

Patch

type Patch = Record<string, unknown>;

What project gives: a Frame's values in the Environment's own form, ready for commit. Opaque to core, so an Environment can group keys as it draws them: @wardic/dom writes x, y and scale as one transform.

Variables

applyTo

const applyTo: {
  <T>(target): <E, R>(stream) => Effect<void, E, Renderer | R>;
  <T, E, R>(stream, target): Effect<void, E, Renderer | R>;
};

Writes each Frame of stream onto target, projecting its values and committing them, one commit per Frame: for a Frame stream outside a binding, a canvas's, a native view's, a test's. A binding's elements go through its flush instead. stream gives Frames of a record of values, as Machine.springValues and Machine.animateValues do.

Call Signature

<T>(target): <E, R>(stream) => Effect<void, E, Renderer | R>;
Type Parameters
T

T

Parameters
target

T

Returns

<E, R>(stream) => Effect<void, E, Renderer | R>

Call Signature

<T, E, R>(stream, target): Effect<void, E, Renderer | R>;
Type Parameters
T

T

E

E

R

R

Parameters
stream

Stream<Frame<Record<string, unknown>>, E, R>

target

T

Returns

Effect<void, E, Renderer | R>

Example

yield* frames.pipe(Renderer.applyTo(target))