afiiif / dev-disk

A tiny utility library for JavaScript/TypeScript project

Dev Disk 💽

The tiny utility library for JavaScript/TypeScript project.

This library is intentionally minimalist, designed to handle most cases.
It's deliberately not built to handle rare cases to keep its size from becoming bloated.

Basically it is the improved version & unnecessary-utilities-removed version of my previous libraries:

• FloppyDisk.js
• React Power-Ups

Also, Dev Disk supports ESM & CommonJS ✅
You can check it out at https://www.npmjs.com/package/dev-disk.

Composition

• Vanilla JS 👉 import { ... } from "dev-disk"
• React JS 👉 import { ... } from "dev-disk/react"

If you're interested in diving deeper, feel free to check out the source code.

Vanilla JS Utilities

Common Helpers

• noop - Empty function
• identity - Identity function
• hasValue - Check if a value is not undefined and not null
• isObject - Check if a value is object (Record<string, any>)
• getValue - If the value is a function, it will get the returned value, otherwise it will get the value
• getHash - Get stable hash (string) from object/array
• swapKeyValue - Get a swaped key-value object
• sleep - Delay the next operation for a specific duration
• split2 - Split string into 2 parts
• cn - A minimalist className utility
• shallow - Shallow compare

Error Handling

• createError - Create an Error instance with custom props
• noThrow - Higher-order function to prevent a function throwing error when invoked
• noReject - Higher-order function to prevent an async function throwing promise-rejection error when invoked

Data-Fetching Related

• objectToQueryString - Convert object to search param (string)
• queryStringToObject - Convert search param (string) to object
• http - Minimalist abstraction for fetch API
  • http.get
  • http.post
  • http.put
  • http.delete
  • http.gql

Publish-Subscribe Pattern

• initStore - Create vanilla JS store that can be subscribed
• initStores - Same as initStore but for multiple stores, publish/subscribe/access the value using a store-key (that will be serialized into a string).

React JS Utilities

• useIsomorphicLayoutEffect - Basically just useLayoutEffect without warning
• useBoolean - Handle boolean state with useful utility functions
• useDebounceFn - Debounces a function
• useThrottleFn - Throttles a function
• useIntersectionObserver - Track intersection of a DOM element

Global-State Manager Using Publish-Subscribe Pattern

• createStore - Just like Zustand's, but with store event & auto shallow compare (see vanilla initStore)
• createStores - React implementation for vanilla initStores
• createQuery - Just like react-query's useQuery, but using Zustand's pattern.
• createAsyncAction - Just like react-query's useMutation, but using Zustand's pattern