open-index/open-npm huggingface dataset:
npm package: @modernjs/debug
Description: A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
Author: Zongmin Lei
Latest version: 1.0.1

# @modernjs/debug

A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers,
includes [visionmedia/debug](https://github.com/visionmedia/debug)
and [@types/debug](https://www.npmjs.com/package/@types/debug)
npm package: @modernkit/charts
Description: charts of Laf
Latest version: 3.0.0

# @modernkit/charts

[![NPM version](https://img.shields.io/npm/v/@modernkit/charts.svg?style=flat)](https://npmjs.com/package/@modernkit/charts)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/charts.svg?style=flat)](https://npmjs.com/package/@modernkit/charts)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernkit/design
Description: react design for laf
Latest version: 3.0.1

# @modernkit/design

[![NPM version](https://img.shields.io/npm/v/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernkit/hooks
Description: hooks of laf
Latest version: 3.0.1

# @modernkit/hooks

[![NPM version](https://img.shields.io/npm/v/@modernkit/hooks.svg?style=flat)](https://npmjs.com/package/@modernkit/hooks)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/hooks.svg?style=flat)](https://npmjs.com/package/@modernkit/hooks)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernkit/icons
Description: The Icon Library for laf
Latest version: 5.0.0

# @modernkit/design

[![NPM version](https://img.shields.io/npm/v/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernkit/ui
Description: react ui basic components for laf
Latest version: 5.0.0

# @modernkit/design

[![NPM version](https://img.shields.io/npm/v/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/design.svg?style=flat)](https://npmjs.com/package/@modernkit/design)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernkit/utils
Description: utils of laf
Latest version: 4.0.0

# @modernkit/utils

[![NPM version](https://img.shields.io/npm/v/@modernkit/utils.svg?style=flat)](https://npmjs.com/package/@modernkit/utils)
[![NPM downloads](http://img.shields.io/npm/dm/@modernkit/utils.svg?style=flat)](https://npmjs.com/package/@modernkit/utils)

## Install

```bash
$ pnpm install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @modernman00/shared-js-lib
Description: Reusable JS utilities for numerous js problems
Author: olawale olaogun
Latest version: 1.2.64

npm Usage Guide for @modernman00/shared-js-lib
This guide explains how to install and use the @modernman00/shared-js-lib package, now available on the npm registry, in your Node.js or JavaScript project.
Installation
To install the package from npm, run the following command in your project directory:
npm install @modernman00/shared-js-lib


This installs the latest published version from the npm registry.
Ensure you have an internet connection and npm access to the @modernman00 scope (authentication may be required if the package is private).

Usage
The package exports various utility functions from its modules (e.g., Http.js, Utility.js). Import and use them as follows:
Example: Using fetchData from Http.js
Assume Http.js exports a function to fetch data using Axios:
import { fetchData } from '@modernman00/shared-js-lib';

async function getUserData() {
    try {
        const userData = await fetchData('/api/users/1', { method: 'GET' });
        console.log(userData);
    } catch (error) {
        console.error('Error fetching data:', error.message);
    }
}

getUserData();

Example: Using sanitizeInput from Utility.js
Assume Utility.js exports a sanitization function:
import { sanitizeInput } from '@modernman00/shared-js-lib';

const cleanInput = sanitizeInput('<script>alert("xss")</script>');
console.log(cleanInput); // Sanitized output

Configuration

Ensure your project uses ES Modules by adding "type": "module" to your package.json, or use a bundler like Laravel Mix/Webpack.
If using Laravel Mix, configure an alias in webpack.mix.js:const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
   .webpackConfig({
       resolve: {
           alias: {
               '@shared': path.resolve(__dirname, 'node_modules/@modernman00/shared-js-lib')
           }
       }
   });



Updating the Package
To update to the latest version, run:
npm update @modernman00/shared-js-lib

Check the latest version on the npm website (https://www.npmjs.com/package/@modernman00/shared-js-lib) or with:
npm info @modernman00/shared-js-lib version

If a specific version is needed, install it directly:
npm install @modernman00/shared-js-lib@1.0.3

Rebuild assets if using a bundler:
npm run dev

Troubleshooting

Installation Fails: Ensure you have npm access and the package is published. Use verbose mode for details:npm install @modernman00/shared-js-lib --verbose


TypeScript Errors: Add declaration files (e.g., Http.d.ts) to the package if needed, and republish.
Permission Issues: If the package is scoped and private, log in to npm:npm login
npm package: @moderno/logger
Description: A log that doesn't hurt the eyes.
Author: Gianluca Romeo
Latest version: 1.0.1

![logo](https://github.com/glromeo/moderno/raw/master/logger/logo.png)

A small and fast library to generate logs that don't hurt the eyes!

#### References

* Coloured thanks to: [https://github.com/chalk/chalk](https://github.com/chalk/chalk)
* Logo created using: [https://maketext.io](https://maketext.io)
* Details extracted using: [https://v8.dev/docs/stack-trace-api](https://v8.dev/docs/stack-trace-api)
npm package: @moderno/web-modules
Description: ![logo](https://github.com/glromeo/moderno/raw/master/web-modules/logo.png)
Author: Gianluca Romeo
Latest version: 1.0.3

![logo](https://github.com/glromeo/moderno/raw/master/web-modules/logo.png)

The purpose of this library is to create ESM micro bundles to be served during development.
Similar to [esinstall](https://www.npmjs.com/package/esinstall) from which I took a LOT of inspiration the goal is to
make let the browser consume node_modules today.

## Installation

```
npm install @moderno/web-modules
```

## Javascript/Typescript API

```typescript
import {useWebModules} from "exnext-web-modules";

let {bundleWebModule} = useWebModules(options);

await bundleWebModule("react");  // bundles react into /web_modules/react.js

await bundleWebModule("lit-html");  // bundles lit-html into /web_modules/lit-html.js
                                    // because of the esm entry proxy this micro-bundle 
                                    // will include all the files in lib

await bundleWebModule("lit-html/directives/repeat.js");  // bundles lit-html/directives/repeat into 
                                                         // /web_modules/lit-html/directives/repeat.js
                                                         // NOTE: directives are not part of 
                                                         // lit-hmtl micro-bundle
```

## Comman Line Interface
It wouldbe a nice have to be able to create web_modules from the command line but I don't have the time to invest in this effort. 


A big thank you to Rich Harris for the amazing [Rollup.js](https://rollupjs.org), Guy Bedford for [cjs-module-lexer](https://github.com/guybedford/cjs-module-lexer)
and [es-module-lexer](https://github.com/guybedford/ed-module-lexer) without which this PoC couldn't be possible 
and Fred K. Schott because [Snowpack](https://www.snowpack.dev/) has been a great source of inspiration.
npm package: @modernpdf/core
Description: Core snapshot and PDF generation logic for ModernPDF
Author: Andrei Laguta
Latest version: 0.1.7

# @modernpdf/core

Core client library for [ModernPDF](https://modernpdf.dev).

> [!IMPORTANT]
> This is a **client library** designed to interact with the ModernPDF API. It is not a self-contained PDF generation engine (like Puppeteer or wkhtmltopdf). It handles DOM snapshotting and API communication.

## Features

- **DOM Snapshotting**: Captures current DOM state, inlines all CSS, converts Canvases to images, and preserves input/textarea values.
- **API Wrapper**: Simple, type-safe wrapper for the ModernPDF conversion API.
- **Lightweight**: Zero dependencies, works in any modern browser.

## Installation

```bash
npm install @modernpdf/core
# or
pnpm add @modernpdf/core
# or
yarn add @modernpdf/core
```

## Usage

### 1. Generating a PDF from a URL

If you just want to convert a public URL to a PDF:

```typescript
import { generatePdf } from '@modernpdf/core';

async function downloadPage() {
  const blob = await generatePdf(
    {
      source: { url: 'https://example.com' },
      pdf: { format: 'A4' },
    },
    { apiKey: 'YOUR_API_KEY' },
  );

  // Do something with the blob (e.g., save it or open in new tab)
  const url = URL.createObjectURL(blob);
  window.open(url);
}
```

### 2. Snapshotting the current page

This is useful for generating PDFs of dynamic web apps, dashboards, or "Save as PDF" buttons where you want to capture exactly what the user sees.

```typescript
import { snapshotElement, generatePdf } from '@modernpdf/core';

async function exportToPdf() {
  // 1. Capture the HTML and styles of the current page (or a specific element)
  const html = await snapshotElement(document.getElementById('report-container'));

  // 2. Send it to ModernPDF API for conversion
  const blob = await generatePdf(
    {
      source: { html },
      pdf: {
        format: 'A4',
        margin: { top: '1cm', bottom: '1cm' },
      },
    },
    { apiKey: 'YOUR_API_KEY' },
  );

  // 3. Download the result
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'report.pdf';
  a.click();
}
```

## API Reference

### `snapshotElement(rootElement?: HTMLElement): Promise<string>`

Captures the current state of a DOM element (defaults to `document.documentElement`).

- Inlines all external and internal CSS.
- Converts `<canvas>` elements to `<img>` tags.
- Inlines current values of `<input>`, `<textarea>`, and `<select>`.
- Removes `<script>` tags to ensure a static snapshot.

### `generatePdf(request: GeneratePdfRequest, options: ApiOptions): Promise<Blob>`

Sends a request to the ModernPDF API.

- `request.source`: Either `{ url: string }` or `{ html: string }`.
- `request.pdf`: Options like `format`, `landscape`, `margin`, `scale`, etc.
- `request.wait`: Wait conditions (e.g., `networkidle`, `selector`).

## License

MIT
npm package: @modernpdf/react
Description: React hook for ModernPDF snapshot and PDF generation
Author: Andrei Laguta
Latest version: 0.1.7

# @modernpdf/react

React hook for [ModernPDF](https://modernpdf.dev).

> [!IMPORTANT]
> This is a **client library** designed to interact with the ModernPDF API. It is not a self-contained PDF generation engine. It provides a convenient React hook to capture DOM snapshots and generate PDFs via the ModernPDF API.

## Installation

```bash
npm install @modernpdf/react
# or
pnpm add @modernpdf/react
# or
yarn add @modernpdf/react
```

## Usage

The `useSnapshot` hook manages the loading and error states for you.

```tsx
import { useSnapshot } from '@modernpdf/react';

export const ExportButton = () => {
  const { takeSnapshot, isLoading, error } = useSnapshot({
    apiKey: 'YOUR_API_KEY',
  });

  const handleExport = async () => {
    try {
      const blob = await takeSnapshot({
        // Optional: specify a root element to snapshot only a part of the page
        // rootElement: document.getElementById('my-dashboard'),
        pdf: {
          format: 'A4',
          margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' },
        },
      });

      // Simple way to download the file
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'snapshot.pdf';
      link.click();
    } catch (err) {
      console.error('Export failed:', err);
    }
  };

  return (
    <div>
      <button onClick={handleExport} disabled={isLoading}>
        {isLoading ? 'Generating PDF...' : 'Download PDF Snapshot'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
    </div>
  );
};
```

## API

### `useSnapshot(options: UseSnapshotOptions)`

Returns an object with:

- `takeSnapshot(options?)`: An async function that captures the DOM and returns a PDF `Blob`.
  - `options.rootElement`: The element to snapshot (defaults to `document.documentElement`).
  - `options.pdf`: format, margin, etc - see types for reference.
  - `options.wait`: Wait conditions for the API.
- `isLoading`: Boolean state indicating if the generation is in progress.
- `error`: Error object if the last request failed.

## License

MIT