open-index/open-npm huggingface dataset:
npm package: @pipli/core
Description: This package contains utility functions and modules that that can be used across different services and projects.
Author: Deep
Latest version: 0.0.6

# Core

`core` is a Node.js package that contains a collection of utility functions and tools that can be used across different services and projects. The goal of this package is to reduce code duplication by providing a common set of tools and utilities that can be easily shared between different services.

## Installation

To use `core` package in your project, run:

```sh
npm i --save @pipli/core
```

## Usage

To use `core` in your project, simply require it in your code:

```typescript
import { capitalize } from 'core'

const myString = 'hello, world'
const capitalizedString = capitalize(myString)

console.log(capitalizedString) // Output: "Hello, world"

```
## Publishing package

1. First, make sure you're logged in to npm by running the following command in your terminal and entering your npm credentials when prompted:

```sh
  npm login
```

2. Update the version number in your package.json file

```sh
  npm version <new-version>
```

Replace <new-version> with the new version number (e.g. 1.0.1).

3. Once you're logged in, you can build your package by running the following command in your package directory:
 
```sh
  npm run build
```

This will create a `lib` folder containing the compiled and bundled code for your package.
Make sure to run ```npm run format``` and ```npm run lint``` before building the package to check for any eslint error. 

4. Now you're ready to publish your package to the npm registry. You can do this by running the following command:

```sh
  npm publish
```

That's it! Your package is now published and ready for others to use. 
## Documenting Utility Functions and classes with TypeDoc

TypeDoc provides a set of tags for documenting TypeScript code. Here's an example of how to use TypeDoc syntax to document a utility function:

```typescript
/**
 * Capitalizes the first letter of a string.
 *
 * @param str - The input string to capitalize.
 * @returns The capitalized string.
 */
export function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
```

classes can be documented using the below syntax

```typescript
export class Statistics {
  /**
   * Returns the average of two numbers.
   *
   * @remarks
   * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
   *
   * @param x - The first input number
   * @param y - The second input number
   * @returns The arithmetic mean of `x` and `y`
   */
  public static getAverage(x: number, y: number): number {
    return (x + y) / 2.0;
  }
}

```

You can use the following command to generate documentation for the package

```sh
npm run doc:generate
```

This command generates documentation for the package and outputs it to the docs directory.
npm package: @piplup/cache-buster
Description: React library that helps in busting cache
Latest version: 3.2.4

# @piplup/cache-buster

[![npm](https://img.shields.io/npm/v/@piplup/cache-buster)](https://www.npmjs.com/package/@piplup/cache-buster)

Cache buster library (<1kb) for React that helps in busting cache by checking changes for a unique release ID and calling window.location.reload when a change is detected in release ID.

## Installation

You can install @piplup/cache-buster using:

```bash
npm install @piplup/cache-buster

// or

yarn add @piplup/cache-buster

// or

pnpm add @piplup/cache-buster
```

## Usage

1. **Integration with your build process**:

   Include a script in your package.json to generate a release ID before building your application:

```json
{
  "scripts": {
    "build": "piplup-cache-buster --publicDir=public && react-scripts build"
  }
}
```

Alternatively, if you are using `vite` to build your react application. You can use `@piplup/vite-plugin-cache-buster` and update your vite configuration file (usually `vite.config.js` or `vite.config.ts`) to the following:

```javascript
import { vitePluginCacheBuster } from '@piplup/vite-plugin-cache-buster';

export default {
  // Other Vite config options...
  plugins: [vitePluginCacheBuster() /*...other plugins */],
};
```

2. **Integrate CacheBuster into your application**:

```jsx
import { CacheBuster } from '@piplup/cache-buster';

function App() {
  return (
    <>
      <CacheBuster
        loading={null} // Optional: Add a loading component to display loading.
        verbose={false} // Optional: If true, logs will be visible.
        storageKey="RELEASE" // Optional: local storage key for storing the unique release ID.
        enabled={process.env.NODE_ENV === 'production'}
      />
      <YourApp />
    </>
  );
}

export default App;
```

## Props

- `enabled` (optional): Boolean indicating whether the cache busting functionality should be enabled. Default is `true`.
- `loading` (optional): React node to be displayed while checking for updates. Default is `null`.
- `verbose` (optional): Boolean indicating whether verbose logging should be enabled. Default is `false`.
- `storageKey` (optional): local storage key for storing the unique release ID. Default is `RELEASE`
- `children` (optional): The child components to render within the cache buster.

## How It Works

`CacheBuster` fetches a release ID from the public folder using a predefined file name. It then compares this ID with the one stored in the browser's local storage. If a new release is detected, it reloads the page. Otherwise, it proceeds to render the child components.

## Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @piplup/code-infra
Description: Infra scripts and configs to be used across Piplup
Author: Sadik Malik
Latest version: 1.2.0

# @piplup/code-infra

Infra scripts and shared configuration for Piplup projects.

## Overview

This package provides reusable scripts and configuration for linting and formatting setup across Piplup repositories. It is designed to be used as a base for consistent code quality and tooling.

## Usage

### Install

This package is intended to be used as a dependency in your project:

```sh
pnpm add -D @piplup/code-infra
```

### Configuration

- **ESLint**: Exports a base config and helpers from `./eslint`
- **Prettier**: Exports a base config from `./prettier`
npm package: @piplup/react-acl
Description: A lightweight React library for managing access control lists (ACL) in your application
Latest version: 3.2.4

# @piplup/react-acl

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/react-acl)

A lightweight React library for managing access control lists (ACL) in your application.

## Installation

You can install `@piplup/react-acl` using:

```bash
npm install @piplup/react-acl

# or

yarn add @piplup/react-acl

# or

pnpm add @piplup/react-acl
```

## Documentation

For documentation, please refer to the [website](https://www.piplupjs.com).
npm package: @piplup/rhf-adapters
Description: A library designed to streamline the integration of react-hook-form with UI frameworks by managing boilerplate code.
Latest version: 4.5.1

# @piplup/rhf-adapters

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/rhf-adapters)

This package contains a set of useful components, hooks and adapter build on top of `@piplup/rhf-core` for integrating libraries like `@mui/material`, `@mui/x-date-pickers`, `react-number-format`, `mui-chips-input`, `mui-one-time-password-input` and more with `react-hook-form`.

## Installation

```bash
npm install @piplup/rhf-adapters @piplup/rhf-core react-hook-form
```

or

```bash
yarn add @piplup/rhf-adapters @piplup/rhf-core react-hook-form
```

or

```bash
pnpm add @piplup/rhf-adapters react-hook-form
```

## Components & Usage

Refer to [storybook](https://www.piplupjs.com) examples for list of available components and its usage.
npm package: @piplup/rhf-core
Description: Core library containing hooks and utility functions designed to streamline the integration of react-hook-form with UI frameworks, by managing boilerplate code.
Latest version: 4.5.1

# @piplup/rhf-core

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/rhf-core)

This package builds upon `react-hook-form` by offering additional utility hooks such as `useControllerAdapter`, `useFieldStateAdapter`, `useFormStateAdapter`, `useFieldState`, `useFormState`, `useFormSetFocus` and `useFormReset`. These hooks simplify component composition and help reduce boilerplate code.

## Installation

```bash
npm install @piplup/rhf-core react-hook-form
```

or

```bash
yarn add @piplup/rhf-core react-hook-form
```

or

```bash
pnpm add @piplup/rhf-core react-hook-form
```

## Hooks

- [useFieldState](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-field-state-adapter.ts)
- [useFormSetFocus](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-form-set-focus.ts)
- [useFormReset](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-form-reset.ts)
- [useControllerAdapter](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-controller-adapter.ts)
- [useFieldStateAdapter](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-field-state-adapter.ts)
- [useFormStateAdapter](https://github.com/sadik-malik/piplup-react-hook-form/blob/main/packages/rhf-core/src/hooks/use-form-state-adapter.ts)

## Components & Usage

Refer to [storybook](https://www.piplupjs.com) examples for list of available components and its usage.
npm package: @piplup/use-event-listener
Description: React hook designed to simplify the process of adding event listeners to various DOM elements in React applications.
Latest version: 3.2.4

# @piplup/use-event-listener

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/use-event-listener)

## ⚠️ Deprecation Warning

> **Important Notice:** `useEventListener` hook has been moved to [@piplup/utils](https://github.com/sadik-malik/piplup/blob/main/packages/utils/README.md), While it may continue to work for existing projects, we recommend migrating to the new package.

`useEventListener` is a custom React hook designed to simplify the process of adding event listeners to various DOM elements in React applications.

## Installation

You can install `useEventListener` via npm or yarn:

```bash
npm install @piplup/use-event-listener

# or

yarn add @piplup/use-event-listener

# or

pnpm add @piplup/use-event-listener
```

## Usage

```jsx
'use client';

import * as React from 'react';
import { useEventListener } from '@piplup/use-event-listener';

function App() {
  const handleResize = (event) => {
    console.log('Window has been resized!', event);
  };

  useEventListener('resize', handleResize);

  return <div>useEventListener Demo</div>;
}
```

## API

### `useEventListener(eventName, handler, element, options)`

- `eventName` (`string`): The name of the event to listen for, such as `'click'`, `'resize'`, etc.
- `handler` (`function`): The event handler function that will be called when the event is triggered.
- `element` (`RefObject`): A React ref object referencing the DOM element to which the event listener will be attached. If not provided, the event listener will be attached to the `window` object.
- `options` (`AddEventListenerOptions | boolean`, optional): Additional options to pass to the `addEventListener` function.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @piplup/use-local-storage
Description: React hook for reading values from the browser localStorage and listening to changes in it.
Latest version: 3.2.4

# @piplup/use-local-storage

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/use-local-storage)

## ⚠️ Deprecation Warning

> **Important Notice:** `useLocalStorage` hook has been moved to [@piplup/utils](https://github.com/sadik-malik/piplup/blob/main/packages/utils/README.md), While it may continue to work for existing projects, we recommend migrating to the new package.

`useLocalStorage` - Use your browser localStorage as a reactive storage. It's a hook for reading values from the browser localStorage and listening to changes in it. Any updates made to localStorage using the `setItem` and `removeItem` helper functions will trigger a state update for the useLocalStorage hook.

## Installation

```bash
npm install @piplup/use-local-storage

# or

yarn add @piplup/use-local-storage

# or

pnpm add @piplup/use-local-storage
```

## Usage

```jsx
import * as React from 'react';
import { useLocalStorage } from '@piplup/use-local-storage';

function App() {
  // Usage
  const value = useLocalStorage('myKey', 'defaultValue');

  return (
    <div>
      <p>Stored Value: {value}</p>
    </div>
  );
}
```

## API

### `useLocalStorage(key: string, initialValue: null | string = null): null | string`

A hook for reading from and listening to changes in `localStorage`.

- `key`: The key under which to store the value in `localStorage`.
- `initialValue`: The initial value to be used if no value is stored in `localStorage` under the specified key.

Returns the stored value or `null` if no value is stored.

### `getItem(key: string): null | string`

A wrapper around `localStorage.getItem`. On the server, `localStorage` is not available so a `null` value is returned. On the client side, the actual value will be read and returned.

### `setItem(key: string, value: string): void`

A wrapper around `localStorage.setItem`. On the server, `localStorage` is not available so no operation will be performed. On the client side, the value will be set in `localStorage`, and an event will be dispatched which will be helpful for triggering side effects in the `useLocalStorage` hook.

### `removeItem(key: string): void`

A wrapper around `localStorage.removeItem`. On the server, `localStorage` is not available so no operation will be performed. On the client side, the value will be removed from `localStorage`, and an event will be dispatched which will be helpful for triggering side effects in the `useLocalStorage` hook.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @piplup/vite-plugin-cache-buster
Description: Vite plugin for integrating @piplup/cache-buster with vite
Latest version: 3.2.4

# @piplup/vite-plugin-cache-buster

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@piplup/vite-plugin-cache-buster)

A Vite plugin to automatically run cache busting during the build process using `@piplup/cache-buster`.

## Installation

You can install the plugin via npm or yarn:

```bash
npm install -D @piplup/vite-plugin-cache-buster

# or

yarn add -D @piplup/vite-plugin-cache-buster

#or

pnpm add -D @piplup/vite-plugin-cache-buster
```

## Usage

In your Vite configuration file (usually `vite.config.js` or `vite.config.ts`), import and use the plugin:

```javascript
import { vitePluginCacheBuster } from '@piplup/vite-plugin-cache-buster';

export default {
  // Other Vite config options...
  plugins: [vitePluginCacheBuster()],
};
```

## Options

The plugin accepts the following options:

- `publicDir` (string, optional): Specifies the directory containing the public files. Default is `public`.
- `debug` (boolean, optional): Enables debug mode. Default is `false`.

You can pass options to the plugin when importing it:

```javascript
import { vitePluginCacheBuster } from '@piplup/vite-plugin-cache-buster';

export default {
  // Other Vite config options...
  plugins: [vitePluginCacheBuster({ publicDir: 'custom-public' })],
};
```

## How It Works

The plugin hooks into Vite's build process and runs the `piplup-cache-buster` command from `@piplup/cache-buster` during the build if it's a production build (`NODE_ENV=production`) or when debug mode is enabled.

## License

This plugin is open-source and available under the [MIT License](LICENSE).
npm package: @pipobscure/sea
Description: Node SEA Builder
Latest version: 1.0.8

# @pipobscure/sea

**This works agains [Future Node Versions ONLY](https://github.com/nodejs/node/pull/50960)**

This is my convenient [SEA](https://nodejs.org/dist/latest-v20.x/docs/api/single-executable-applications.html) builder. The way it is used is to simply run your scripts while hooked into it (preferably in a mode where it requires all files yet does not actually run for a long time).

In `package.json` you can use the follwing to configure your SEA:
```
{
	"sea": {
		"executable": "seatest", // the name of the resulting executable
		"assets": [ "assets/**/*" ], // an optional array of globs specifying files to bundle
		"exclude": [], // an optional array of globs to exclude
		"hash": true, // optional boolean if files require hash sha256 checking,
		"compression": "brotli" // optional (brotli|gzip|deflate) if assets should be compressed
	}
}
```

With that configuration done run your package in a way that ensures all code is `require`d.

```
#> node -r @pipobscure/sea lib/myscript.js
```

This hooks into the require system and records all the scripts and native addons loaded.
Just before exiting, it writes it to `{executable}.resolv`.

The last stepp is to simply run `npm exec @pipobscure/sea` which uses the config in `package.json` and `{executable}.resolv` to bundle everything up and inject it into a node executable.

**_Have fun and play with in the sea!_**