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

onstage-js-utils

v1.20.0

Published

My utilities for DRY coding on javascript land

Downloads

34

Readme

I was listening to this beautiful piece 🎻 while working on this.

This package has been created under the functional paradigm in Javascript. It means to be more declarative over imperative.

 x = expression_1;
 y = expression_2;
 z = expression_3(x + y);
 
 // The upper 3 lines could be written as
 z = xy()

Installation

npm

npm i onstage-js-utils

yarn

yarn add onstage-js-utils

String

All string manipulations

  • concatURLs This function will concatenate your base URL to any path you want without any fear of double slashes //
import { concatURLs } from "onstage-js-utils";

concatURLs("https://example.com/", "/users") // output: https://example.com/users
concatURLs("https://example.com", "users")   // output: https://example.com/users
concatURLs("https://example.com", "//users") // output: https://example.com/users
  • combineURLs This function is deprecated version of concatURLs

  • withQueries Append query strings to end of URLs

import { withQueries } from "onstage-js-utils";

const url = withQueries("/someone", "name=John") // /someone?name=John
withQueries(url, "age=34") // /someone?name=John&age=34

const url = withQueries('/someone', {name: 'John', age: 33}) // /someone?name=John&age=33
  • withUnderscore() Replaces strings seperator with _.
withUnderscore('onstage-js-utils'); // onstage_js_utils
withUnderscore('onstage.js.utils'); // onstage_js_utils
withUnderscore('onstage.js-utils'); // onstage_js_utils
  • toSnakeCase() The most reasonable use case could be converting keys of request data to snake cases on saving to database.
import {toSnakeCase} from "onstate-js-utils";

const snakedCase = Object
                .keys(data)
                .reduce((acc, key) => {
                    acc[toSnakeCase(key)] = data[key];
                    return acc;
                }, {});

Localization

  • getLocale

Locale time of the user's browser

import { getLocale } from "onstage-js-utils";

getLocale() // en-US
  • getTimeZone

Find users's browser time zone

import { getTimeZone } from "onstage-js-utils";
getTimeZone() // Canada/Central

DOM

  • toImageSource(src: string | File ) Most of the time that we have an img tag there is a condition for getting src attribute from url or blob at the same place.

import { toImageSource } from "onstage-js-utilities";

<img src={toImageSource(src || file)} />

Objects and Arrays

  • objectsDiff(changed: Object, base: Object) This function compares two objects and returns the changes
import { objectsDiff } from "onstage-js-utilities";

const base = {
    price: 99.9,
    type: "product"
}

const changed = {
    price: 99.9,
    type: "orders"
}

objectsDiff(changed, base)
// { type: "orders" }

Interceptors

  • fetchJsonRes(res: Response)
import {fetchJsonRes, concatURLs} from "onstage-js-utilities";

fetch(concatURLs(HOST, "users"))
    .then(fetchJsonRes)
    .then(json => {
        // json data
    })
    .catch(err => {
        // when the data is not json
    })

Timers and Delay

  • delay(ms: number) creates a delay for async procedures
import { delay } from "onstage-js-utilities";

async () => {
  await delay(1500)
  // after 1500 milliseconds and more
}
  • randomDelay(range: number | [number, number]) delay process between min and max numbers
import { randomDelay } from "onstage-js-utilities";

async () => {
  await randomDelay(2000) // between 0 - 2000
  await randomDelay([1000, 3000]) // between 1000 - 3000
}

Ranges

  • range(start: number, end: number) creates an array of numbers between start and end, excluding the end.
import { range } from "onstage-js-utilities";

range(1, 5)

// [1, 2, 3, 4]
  • rangeLetters(start: string, end: string) return an array of letters(lowercase) between start and end, including the end.
import { rangeLetters } from "onstage-js-utilities";

rangeLetters('a', 'e')

// ['a', 'b', 'c', 'd', 'e']