open-index/open-npm huggingface dataset:
npm package: @hydrant/eslint-config
Description: Our eslint config
Author: Filip Weiss
Latest version: 2.2.1

# eslint-config

hydra-newmedia eslint config comes with two different styles (`base` and `modern`) and a `vue` style for [vue](https://vuejs.org) project.

## Installation

`npm install --save-dev @hydrant/eslint-config eslint`

## Setup

### Base

Add these lines to your `package.json`:
```json
"eslintConfig": {
  "extends": "@hydrant/eslint-config/base"
}
```

### Modern

Add these lines to your `package.json`:
```json
"eslintConfig": {
  "extends": "@hydrant/eslint-config/modern"
}
```

### Vue

Install the package with all vue dependencies:

```
npm install --save-dev @hydrant/eslint-config eslint eslint-plugin-vue eslint-plugin-html
```

Add these lines to your `package.json`:
```json
"eslintConfig": {
  "extends": "@hydrant/eslint-config/vue"
}
```

## License

MIT
npm package: @hydrant/i18n-loader
Description: Also see the demo (`npm run dev`) for examples.
Latest version: 1.0.4

# i18n Loader

Also see the demo (`npm run dev`) for examples.

Use the loader as follows:

## Single Language

```js
import lang from './assets/lang/de-v1234.xml';
```

Result (`lang`) looks something like this:
```json
{
  "testId": "testContent",
  "framework_menu_title": "Menü"
}
```

## Multi Language

```js
const requireAll = require => require.keys().map(module => [module, require(module).default]);
const langs = requireAll(require.context('./assets/lang')).reduce((langs, item) => {
  // pattern: ./lc-someshit-v1234.ext → lc-someshit
  const key = item[0].match(/\.\/(.*)-v\d+/)[1];
  return Object.assign(langs, { [key]: item[1] });
}, {});
```

Result (`langs`) looks something like this:
```json
{
  "de": {
    "testId": "testContent",
    "framework_menu_title": "Menü"
  },
  "en": { ... }
}
```
npm package: @hydrant/lang-conversion
Description: ## install
Latest version: 0.2.5

# lang-conversion

## install

```bash
npm install --save @hydrant/lang-conversion
```

## usage

### deserialize (import)

```js
import { deserialize } from '@hydrant/lang-conversion';
const content = '{ "foo": "bar" }';

const result = await deserialize({ content, deserializer: 'json' });
```

You can also pass in `filename` instead of setting `deserializer`.

### serialize (export)

```js
import { serialize } from '@hydrant/lang-conversion';
const entries = [{ id: 'foo', value: 'bar' }];
const meta = { version: 3, date: '9.9.2020' };

const result = await serialize({ entries, meta, serializer: 'xml' });
```

You can also pass in `filename` instead of setting `serializer`.
npm package: @hydrant/lizenserino
Description: Licence scanning for hydra
Author: Filip Weiss
Latest version: 1.1.2

lizenserino
===========

## Usage

1. Navigate to project directory
2. Make sure `node_modules` are present (eg. `npm ci --production`)
3. Run `npx @hydrant/lizenserino > result.csv`

For all options (not many) type `npx @hydrant/lizenserino --help`

## Known Problems

**Results can still include devDependencies even if turned off (default):**

* Issue: https://github.com/npm/read-installed/issues/30
* Workaround: Install only prod dependencies with `npm ci --production`


**Some licenses do not get detected correctly:**

* Check all licenses with a `*` (star) suffix. Eg. `MIT*`
* Check uncommon license URLs. Eg. URLs that end with `…/README.md`
npm package: @hydration-tracker/core
Description: Core hydration tracking functionality for measuring React SSR hydration costs
Author: vsthakur101
Latest version: 1.0.2

# @hydration-tracker/core

Core hydration tracking functionality for measuring React SSR hydration costs. Framework agnostic.

## Installation

```bash
npm install @hydration-tracker/core
```

## Usage

```typescript
import { createTracker } from '@hydration-tracker/core';

const tracker = createTracker();
tracker.start();

// ... your app hydrates ...

const data = tracker.stop();
console.log(data.hydrationScore); // 0-100
console.log(data.totalHydrationTime); // in milliseconds
console.log(data.components); // per-component breakdown
```

## API

### `createTracker(options?)`

Creates a new hydration tracker instance.

#### Options

- `threshold` - Minimum hydration time (ms) to track a component (default: 1)

### Tracker Methods

- `start()` - Begin tracking hydration
- `stop()` - Stop tracking and return collected data
- `trackComponent(name, startTime, endTime)` - Manually track a component's hydration

### Return Data

```typescript
interface HydrationData {
  hydrationScore: number;      // 0-100 score
  totalHydrationTime: number;  // Total time in ms
  components: ComponentData[]; // Per-component breakdown
}
```

## License

MIT
npm package: @hydration-tracker/react
Description: React hooks for tracking hydration performance in SSR applications
Author: vsthakur101
Latest version: 1.0.2

# @hydration-tracker/react

React hooks for tracking hydration performance in SSR applications. Works with Next.js, Remix, and Astro.

## Installation

```bash
npm install @hydration-tracker/react
```

## Usage

### Basic Hook

```tsx
import { useHydrationTracker } from '@hydration-tracker/react';

function App() {
  const { data } = useHydrationTracker({
    onComplete: (data) => {
      console.log('Hydration score:', data.hydrationScore);
    }
  });
  
  return <div>...</div>;
}
```

### Track Individual Components

```tsx
import { useTrackHydration } from '@hydration-tracker/react';

function ExpensiveComponent() {
  useTrackHydration('ExpensiveComponent');
  
  return <div>...</div>;
}
```

### With Dashboard Visualization

```tsx
import { HydrationProvider, useHydrationData } from '@hydration-tracker/react';

function App() {
  return (
    <HydrationProvider>
      <YourApp />
      <HydrationDashboard />
    </HydrationProvider>
  );
}

function HydrationDashboard() {
  const data = useHydrationData();
  
  return (
    <div>
      <p>Score: {data?.hydrationScore}</p>
      <p>Time: {data?.totalHydrationTime}ms</p>
    </div>
  );
}
```

## API

### `useHydrationTracker(options?)`

Track hydration for the entire app.

#### Options

- `onComplete(data)` - Callback when hydration completes
- `threshold` - Minimum time (ms) to track (default: 1)

### `useTrackHydration(componentName)`

Track hydration for a specific component.

### `HydrationProvider`

Context provider for sharing hydration data across components.

### `useHydrationData()`

Access hydration data from any component within the provider.

### Export Functions

```tsx
import { 
  exportHydrationData, 
  copyHydrationDataToClipboard, 
  downloadHydrationData 
} from '@hydration-tracker/react';

// Get JSON string
const json = exportHydrationData();

// Copy to clipboard (async)
await copyHydrationDataToClipboard();

// Download as file
downloadHydrationData('my-app-hydration.json');
```

Use these to get your data into the [Hydration Cost Visualizer](https://hydration-cost-visualizer.vercel.app) dashboard.

## Peer Dependencies

- `react` >= 16.8.0

## License

MIT