@solid-primitives/signal-builders NPM

@solid-primitives/signal-builders

A collection of chainable and composable reactive signal calculations, AKA Signal Builders.

Installation

npm install @solid-primitives/signal-builders
# or
yarn add @solid-primitives/signal-builders

How to use it

Signal builders create computations when used, so they need to be used under a reactive root.

Note, since all of the signal builders use createMemo to wrap the calculation, updates will be caused only when the calculated value changes. Also the calculations should stay 'pure' – try to not cause side effects inside them.

Array

import { push, flatten, remove } from "@solid-primitives/signal-builders";

const [fruits, setFruits] = createSignal(["apples", "bananas", "oranges", "tomatoes"]);
const [toRemove, setToRemove] = createSignal("tomatoes");

const list = flatten(remove(push(fruits, ["kiwis", "avocados"]), toRemove));

list(); // ["apples", "bananas", "oranges", "kiwis", "avocados"]

Object

import { update, merge } from "@solid-primitives/signal-builders";

const [user, setUser] = createSignal({ name: { first: "John", last: "Doe" } });
const [last, setLast] = createSignal("Solid");

const modifiedUser = merge(update(user, "name", "last", last), { age: 21 });

modifiedUser(); // { name: { first: "John", last: "Solid" }, age: 21 }

Number

import { add, multiply, clamp, int } from "@solid-primitives/signal-builders";

const [input, setInput] = createSignal("123");
const [ing, setIng] = createSignal(-45);
const [max, setMax] = createSignal(1000);

const value = clamp(multiply(int(input), add(ing, 54, 9)), 0, max);

String

import { lowercase, substring, template, add } from "@solid-primitives/signal-builders";

const [greeting, setGreeting] = createSignal("Hello");
const [target, setTarget] = createSignal("World");

const message = template`${greeting}, ${target}!`;
message(); // => Hello, World!

const solidMessage = lowercase(add(substring(message, 0, 7), "Solid"));
solidMessage(); // => hello, solid

List of builders

Array

push - basically Array.prototype.push()
drop - drop n items from the array start
dropRight - drop n items from the end of the array
filter - basically Array.prototype.filter()
filterOut - filter out passed item from an array
remove - removes passed item from an array (first one from the start)
removeItems - removes multiple items from an array
splice - signal-builder Array.prototype.splice()
slice - signal-builder Array.prototype.slice()
map - signal-builder Array.prototype.map()
sort - signal-builder Array.prototype.sort()
concat - Append multiple arrays together
flatten - Flattens a nested array into a one-level array
filterInstance - filter list: only leave items that are instances of specified Classes
filterOutInstance - filter list: remove items that are instances of specified Classes

Object/Array

get - Get a single property value of an object by specifying a path to it.
update - Change single value in an object by key, or series of recursing keys.