DomRenderer

The DOM's Renderer: project turns a Frame's values into a style patch, grouping the transform keys into one transform and drawing a bare number on a length in px, and its commit writes the patch onto an element. The rest is for a binding's layout projection: an element's own move, scale, rotation and opacity, read from its values, and its transform template.

import * as DomRenderer from "@wardic/dom/DomRenderer"

DomRenderer.project({ x: 100, opacity: 0.5 }) // { transform: "translateX(100px)", opacity: 0.5 }

Type Aliases

LengthKey

type LengthKey = typeof LENGTH_KEYS[number];

One of LENGTH_KEYS: a CSS property a bare number on is drawn in px.

TransformTemplate

type TransformTemplate = (values, generated) => string;

A transform template, as Motion's transformTemplate: the element's whole transform, from its values and the transform Wardic would draw (generated). project calls it:

at a plain render, with its transform keys in their units (x: "10px", rotate: "45deg", scale: 1.5), and generated "" when every one is at its identity, or it has none;
while a projection moves it, with its values as they are (x: 10) and the projection's transform; once nothing moves it, as at a plain render;
held for a measure, with its values and "" (heldTransformOf).

Parameters

values

Readonly<Record<string, string | number>>

generated

string

Returns

string

Example

const centred: DomRenderer.TransformTemplate = (_values, generated) => `translateX(-50%) ${generated}`

Variables

layer

const layer: Layer.Layer<Renderer.Renderer>;

Core's Renderer for the DOM: project and a commit that writes a patch onto an element's style. It needs nothing.

LENGTH_KEYS

const LENGTH_KEYS: readonly ["border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "width", "min-width", "max-width", "height", "min-height", "max-height", "top", "right", "bottom", "left", "inset", "inset-block", "inset-block-start", "inset-block-end", "inset-inline", "inset-inline-start", "inset-inline-end", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "padding-block", "padding-block-start", "padding-block-end", "padding-inline", "padding-inline-start", "padding-inline-end", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "margin-block", "margin-block-start", "margin-block-end", "margin-inline", "margin-inline-start", "margin-inline-end", "gap", "row-gap", "column-gap", "font-size", "letter-spacing", "background-position-x", "background-position-y"];

The CSS properties a bare number on is a length, drawn in px, spelled as Wardic's keys are (margin-top): Motion's, and min-width, min-height, the gaps and letter-spacing. The Solid bindings' value types take a number on these and on no other length, so a number never draws CSS a browser drops. line-height isn't one: CSS reads its bare number as a multiple. A number on any other key, opacity, z-index, a custom property, is drawn as it is; a string always is.

TEMPLATE_KEY

const TEMPLATE_KEY: "@transformTemplate" = "@transformTemplate";

The key an element's transform template rides under in its values, as its projection rides under Projection.KEY: project calls it for the element's transform. Namespaced, @transformTemplate, so it never collides with a CSS property or a value's key.

Functions

heldTransformOf()

function heldTransformOf(values): string;

The transform a measure holds an element at, as Motion's transformTemplate(values, ""): its template's, with no transform of Wardic's, so a static part of it, centring say, is in the box measured. "" for an element with none, which the measure clears it to.

Parameters

values

Readonly<Record<string, unknown>>

Returns

string

ownOpacityOf()

function ownOpacityOf(values): number;

An element's own opacity, from its values: what the renderer draws, 1 when it's absent or not a number. A binding hands it to the element's layout node, so a handover blends from the leaving element's opacity into it.

Parameters

values

Readonly<Record<string, unknown>>

Returns

number

ownRotateOf()

function ownRotateOf(values): number;

An element's own rotate, in degrees, from its values: what the renderer weaves into its projection, 0 when it's absent or not a number. A binding hands it to the element's layout node, so a handover blends from a twin's rotation into its own.

Parameters

values

Readonly<Record<string, unknown>>

Returns

number

ownScaleOf()

function ownScaleOf(values): Point;

An element's own scale on each axis, from its values: what the renderer draws on top of its projection. A binding hands it to the element's layout node, so a handover starts from where a twin is drawn, and a follower is drawn where its lead is.

Parameters

values

Readonly<Record<string, unknown>>

Returns

Point

ownTranslateOf()

function ownTranslateOf(values): Point;

An element's own move, from its values: what the renderer draws on top of its projection. A binding hands it to the element's layout node, so a twin, a handover and a follower start from, and are drawn, where it's drawn.

Parameters

values

Readonly<Record<string, unknown>>

Returns

Point

project()

function project(values): Patch;

A Frame's values as a DOM style patch, pure. The transform keys become one transform, each left out at its identity, and none when every one is; with no transform key there's no transform, so a class's shows. A node's projection, when its values carry one under Projection.KEY, becomes its transform instead, with the element's own move, rotation, skew and scale drawn on it. Every other key is copied across, a bare number on a length in px. A binding's server render, which builds no runtime, projects with it directly.

DomRenderer.project({ x: 0, scale: 1, width: 200 }) // { transform: "none", width: "200px" }