npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@solid-primitives/signal-builders

v0.1.17

Published

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

Downloads

5,107

Readme

@solid-primitives/signal-builders

turborepo size version stage

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