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

@saintno/needed-tools

v0.3.5

Published

Collection of needed tools for web project

Downloads

35

Readme

JS Needed tools

Collection of saintno's useful tools

Install this into your project

  • Run in cmd:
yarn add @saintno/needed-tools

Methods and Classes

Browser

Return set of Browser's feature

import { Browser } from "@saintno/needed-tools";
// Detect browser
Browser.isOpera: boolean;
Browser.isSafari: boolean;
Browser.isChrome: boolean;
Browser.isIE: boolean;
Browser.isFirefox: boolean;
Browser.isEdge: boolean;
Browser.isBlink: boolean;
// Detect features
Browser.isMobile: boolean; // Return `true` if current browser is in mobile
Browser.isTouchScreen: boolean; // Return `true` if current browser's screen have touch
Browser.isDarkMode: boolean; // Return `true` if current browser is in darkmode

CommonRegex

Return some useful regex

import { CommonRegex } from "@saintno/needed-tools";
CommonRegex.hex = /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i,
CommonRegex.number = /^-?\d*\.?\d*$/,
CommonRegex.phone = /^\+?[\d\s]{8,}$/,
CommonRegex.email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

Logger

Useful class to log info in console

import { Logger } from '@saintno/needed-tools';
// Logger need `name` of object that log belongs to
// Logger(object_name, activated?, config_override?)
const MainScreenLogger = new Logger('MainScreen');
// For type of login:
// i: Info: For some output of function or data's contents
// w: Warning: Something wrong happen but your app still work as normal
// b: Bug: Critical error happen and will stop your app
// d: Doing: Log about running job, background services
// Log functions need 3 params: fnName, fnMessage, fnData
MainScreenLogger.i('useEffect', 'Hello from useEffect'); // Without data
MainScreenLogger.i('useEffect', 'Hello from useEffect with data', { name: 'Kiss me' }); // With data
MainScreenLogger.w('useEffect', 'Prefetch cache failed', e);
MainScreenLogger.b('useEffect', 'Cant detect screens size', e);
MainScreenLogger.d('Web3Provider', 'Getting list of address');

// Generate own customize log
// print(msg: string, opts?: { background: string; color: string; bold: boolean }): void
MainScreenLogger.print("Hello World!", { background: "#ffffff"; color: "ff00ff"; bold: true });

// Bug fallback, in case when bug happen, bind your fallback to tracking bug or alert it to user
MainScreenLogger.setBugFallback(({fnName, fnMessage, fnData}) => {
    // Do some bug tracking or alert
});

QueueManager

Make an queue into your code, init an queue and pushing job into it, the queue will do the job in queue each time you call add, all the job in queue will be trigger parallel with max worker by max_job

import { QueueManager } from '@saintno/needed-tools';
// QueueManager(name_of_queue, max_job = 4, log = true)
const MainQueue = new QueueManager('MainQueue');
// Push an job into queue without wait
MainQueue.add(() => {
  console.log('Hello world!');
});
// With high priority, this job will be place in top of queue
MainQueue.add(() => {
  console.log('Hello world!');
}, true);
// Push and wait with high priority
await MainQueue.wait(() => {
  console.log('Hello world!');
}, true);

CacheManager

Caching everything in IndexDB with CacheManager

import { CacheManager } from '@saintno/needed-tools';
// CacheManager(store_name_of_cache, activated = true, log = true)
const MainCache = new CacheManager('MainCache');

// Set some cache with `set`
MainCache.set({
  key: 'DATA_2022',
  data: [{ name: '1' }, { name: '2' }],
  tl: CacheManager.TIME['5min'], // Caching in 5min
  tags: ['DATA'], // Will be auto matic delete if call clean by tag
  onStorage: false, // False will store on ram
});

// Get some cache with `get` and fallback into generator
const data = await MainCache.get({
  key: 'DATA_2022',
  tl: CacheManager.TIME['5min'], // Caching in 5min
  tags: ['DATA_2'], // Will be auto matic delete if call clean by tag
  generator: async () => [{ name: '1' }, { name: '2' }], // If cache not found => call generator => set new cache => return data from generator
  onStorage: false, // False will store on ram if generator return data
});

// Clear all cache with tag
MainCache.clearByTag('DATA');
MainCache.clearByTags(['DATA', 'DATA_2']); // Multiple tags

// Clear all cache in store
MainCache.clear();

APIQueueItem

Call api much more easier with Cache and Queue

import { APIQueueItem } from '@saintno/needed-tools';
// Support 5 methods: GET, POST, PUT, DELETE, PATCH
// Only GET method support caching, set cache on other method will not works
const data = new APIQueueItem('https://google.com.vn').get(); // Default without cache and placing bottom of queue
const data = new APIQueueItem('https://google.com.vn').high().get(); // Calling without cache and high priority

// Setting cache, without queue, type binding
const data = new APIQueueItem('https://google.com.vn')
  .cache({
    tl: '5min', // Caching time
    tags: ['DATA'], // Tag of this cache on CacheManager
    deps: ['DATA_1'], // Auto clear other tags when call this
  })
  .now() // Bypass queue, call directly into fetch
  .get<IAppData>();

// Post method, high priority
new APIQueueItem(`https://google.com.vn/${id}`).high().post({ name: 'SaintNo' });

// Default APIQueueItem will use fetch instance, if you want customize that instance, using hooks:
APIQueueItem.setHook({
  beforeCall: (url: string, config: RequestInit) => {
    return { config, url };
  },
  beforeReturn: (data: any, _config: RequestInit) => {
    return data;
  },
  onError: (error: Response, _config: RequestInit): any => {
    throw error;
  },

Other Tools

Some tools that may useful

import { Tools } from '@saintno/needed-tools';

// Delay function for fake api, fake loading...
await Tools.delay(3000); // Delay 3s

// Get current mouse position
Tools.getMousePosition(); // Return {x: number, y: number} in screen

// Get element offset position in parent element
Tools.getWindowRelativeOffset(parent_ele, child_ele);
// This will return offset object
const offset = {
  left: 0, // Pixel offset from parent left
  top: 0,
  right: 0,
  bottom: 0,
};

Technologies

  • Typescript : Language
  • BunJS : Bundler
  • @kvs/env : Storage
  • chalk : Colorful console
  • lru-cache : Ram Cache
  • queue-typed : API queue

Maintainer

@tctien342