@solid-primitives/signal-builders

@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.

Object

• omit - get an object copy without the provided keys
• pick - get an object copy with only the provided keys
• merge - Merges multiple objects into a single one.

Convert

• string - turns passed value to a string
• float - turns passed string to an float number
• int - turns passed string to an intiger
• join - join array with a separator to a string

Number

• add - a + b + c + ...
• substract - a - b - c - ...
• multiply - a * b * c * ...
• divide - a / b / c / ...
• power - a ** b ** c ** ...
• clamp - clamp a number value between two other values
• round - Math.round()
• ceil - Math.ceil()
• floor - Math.floor()

String

• add - a + b + c + ...
• lowercase - signal builder String.prototype.toLowerCase()
• uppercase - signal builder String.prototype.toUpperCase()
• capitalize - capitalize a string input e.g. "solidJS" -> "Solidjs"
• substring - signal builder String.prototype.substring()
• template - Create reactive string templates

A call for feedback

signal-builders package is now a proof of concept of a fresh and experimental idea. Therefore all feedback/ideas/issues are highly welcome! :)

Changelog

See CHANGELOG.md