@magnet/class

Signal-based class-name utilities created with Magnet in mind, but usable with any signal implementation.

Install

JSR

deno add jsr:@magnet/class

npm via JSR

npx jsr add @magnet/class

npm

npm install @magnet-js/class

API

lister

Flattens arbitrary class-name segments into a signal-based array of strings. Segments may be strings, falsy values, nested arrays, or signals of those.

import { lister } from "@magnet/class";
import { tc39 } from "@magnet/signal";

const { computed, state } = tc39;

const list = lister(computed);
const isActive = state(true);
const classes = list("btn", ["primary", isActive]);

console.log(classes.get()); // ["btn", "primary", "active"]

A Transformer can be provided inline or via the factory:

const sort = (classes: string[]) => classes.sort();

// Inline
list(sort, "c", "a", "b");

// Constructor
const sorted = lister(computed, sort);
sorted("c", "a", "b");

mapper

Turns a record of conditions into a signal-based array of class names. Object keys with truthy values become class names; falsy values produce empty strings.

import { mapper } from "@magnet/class";
import { tc39 } from "@magnet/signal";

const { computed, isSignal, state } = tc39;

const map = mapper(isSignal, computed);
const classes = map({
  active: state(true),
  disabled: state(false),
});

console.log(classes.get()); // ["active", ""]

A Transformer can also be provided inline or via the factory:

const transform = (classes: string[]) => classes.filter(Boolean).sort();

// Inline
map(transform, { b: true, a: true });

// Constructor
const transformed = mapper(isSignal, computed, transform);
transformed({ b: true, a: true });

Combining lister and mapper

Use mapper for object-syntax conditions and lister to merge the result with other class segments. Because both return Computed<string[]>, they compose naturally:

const flags = map({
  active: state(true),
  disabled: state(false),
});

const classes = list("btn", flags);
console.log(classes.get()); // ["btn", "active", ""]

License

MIT © 2026 Fernando G. Vilar.