open-index/open-npm huggingface dataset:
npm package: @rainyjune/yuanjs
Description: YuanJS, just another small JavaScript library
Author: Kang CHEN
Latest version: 0.1.1

yuanjs
======

Features:
 * Deferred Object
 * HTTP (Ajax) request
 * Custom Events
 * DOM Events
 * Selectors
 * Sets

Supported browsers:
 * Internet Explorer 9+
 * Firefox
 * Chrome
 * Safari
 * Opera

## How to build your own YuanJS

Clone a copy of the main YuanJS git repo by running:

    git clone https://github.com/rainyjune/yuanjs.git

Enter the YuanJS directory and install required grunt plugins:

    cd yuanjs && npm install
    npm build

The bundled files will be replaced in the `build` directory.
npm package: @rainzoneg/sidebar
Description: Custom sidebar implementation using the <aside> HTML element and Tailwind CSS
Author: Samuel Nathaniel Halim
Latest version: 1.0.0

# Sidebar

A custom react sidebar component implementation using the `<aside>` HTML element.

Built using Typescript and using Tailwind CSS.

Note: Your project needs to have Tailwind CSS installed and configured for this component to work properly!

## Installation

`npm install @rainzoneg/sidebar`

## Requirements

Your project must have Tailwind CSS installed and configured.

## Usage

`import { Sidebar } from "@rainzoneg/sidebar";`

## Example Usage

```
import { Sidebar } from "@rainzoneg/sidebar";

export default function Home() {
  const [open, setOpen] = useState(false);

  const openSidebar = () => {
    if (open) {
      setOpen(false);
    } else {
      setOpen(true);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="flex justify-between items-center">
        <button onClick={openSidebar} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          {open ? "Close Sidebar" : "Openz Sidebar"}
        </button>
        <Sidebar open={open} side={direction}>
	  <div>Hello World!</div>
	</Sidebar>
      </div>
    </div>
  );
}

```
npm package: @rair/eth-auth
Description: Express middleware for authenticating via Etherum keys and MetaMask
Author: Willem Olding
Latest version: 0.2.0

# MetaAuth
Express middleware for handling authentication with [MetaMask](https://metamask.io) using "eth_signTypedData_v3"

## Usage
```
$ npm install meta-auth --save
```
Include the middleware in your express routes
```
const metaAuth = require('meta-auth')();

app.get('/auth/:MetaAddress', metaAuth, (req, res) => {
  // Request a challenge from the server
  res.send(req.metaAuth.challenge)
});

app.get('/auth/:MetaMessage/:MetaSignature', metaAuth, (req, res) => {
  if (req.metaAuth.recovered) {
    // Signature matches the cached address/challenge
    // Authentication is valid, assign JWT, etc.
    res.send(req.metaAuth.recovered);
  } else {
    // Sig did not match, invalid authentication
    res.status(400).send();
  };
});
```
MetaAuth will check the route parameters for `:MetaAddress`, `:MetaMessage`, and `:MetaSignature`

Parameter names may be changed when passing in an optional config.
```
const metaAuth = require('meta-auth')({
  message: 'msg',
  signature: 'sig',
  address: 'address'
});
```

### :MetaAddress
If MetaAuth finds `req.params.MetaAddress` set it will assign a challenge to the address. The challenge is located at `req.metaAuth.challenge`

### :MetaMessage & :MetaSignature
`:MetaMessage` is the previously issued challenge and `:MetaSignature` is the user's signature for the provided message. If the recovery address matches the address stored for the given challenge MetaAuth returns the recovery address. In the case of an error or no match `false` is returned.


### Config
```
const metaAuth = new MetaAuth({
  signature: 'MetaSignature',
  message: 'MetaMessage',
  address: 'MetaAddress',
  banner: 'Example Site Banner'
});
```

## Author of meta-auth original package:

* **Alex Sherbuck** - [I Gave](https://igave.io)

## Author of the fork to use EIP-712
* **Henrique Sena**
npm package: @rair/ingest
Description: Shared module for conversion, encryption and manifest creation
Author: Willem Olding
Latest version: 0.2.1

# `@rair/ingest`

A javascript module for handling the common file ingestion tasks for Rair. This includes transcoding, chunking and encryption.

## Examples

```javascript

````

## API

Exports a single object with the following functions:

### `ingest.encodeHLS(input, format='mp4', handlers = { print: () => {}, printErr: () => {}, onExit: () => {} })`

A sync operation. Calls into ffmpeg to convert video files to the approved RAIR encoding.

Accepts as input a binary file in any form that can be converted into a Uint8Array (e.g. typed array, buffer, arrayBuffer).

Optionally takes a format hint

Optionally takes a handlers object with closures to handle when the code prints, errors or exits.

Returns an array of named files. This includes the manifests and chunks for HLS streaming. e.g.
```js
[{ name: 'master.m3u8', data: Uint8Array },
{ name: 'segment_001.ts', data: Uint8Array }, ...]
```

```javascript
const file = document.getElementById('fileupload').files[0];
const fileData = await file.arrayBuffer()
let result = ingest.encodeHLS(fileData, 'mp4')
```

### `async ingest.encryptBrowser(hlsData, key)`

Encrypts the chunk files given an AES key.

Accepts hlsData which is an array of files as `{name, data}` objects identical to the result of `encodeHLS`.

Accepts a AES encryption key. This is a standard browser [CryptoKey](https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey) for AES-128-CBC encryption that has the `encrypt` usage set.

Returns a promise that resolves to a list of files where the `.ts` files are encrypted with the provided key.

```javascript
const key = await window.crypto.subtle.generateKey(
  {
    name: "AES-CBC",
    length: 128
  },
  true,
  ["encrypt"]
);
let result = ingest.encodeHLS(fileData, 'mp4')
const encryptedResult = await ingest.encryptBrowser(result, key)
```

### `async ingest.bundleAsZip(hlsData)`

Bundle up a list of files into a zip. Accepts the same format as the result of encodeHLS and return a blob which contains a binary zip file.

```javascript
let result = ingest.encodeHLS(fileData, 'mp4')
const zipBlob = await ingest.bundleAsZip(result)
// the zip blob can then be handed to the user file system
```
npm package: @rair/ingest-worker
Description: A web worker that can perform the ingestion operations without blocking the browser
Author: Willem Olding
Latest version: 0.2.1

# `@rair/ingest-worker`

A WebWorker for encoding and encryption

## Usage

In a browser hosted javascript file it is a simple as creating a worker and sending it messages to start execution.

Ensure `ingest-worker.js` is hosted on the webserver as it will be automatically requested by the browser in the worker constructor.

The worker 

The worker responds to messages of the form:
`{type: 'run', data: { fileData, format, aesKey? }}`

- The fileData should be an ArrayBuffer or Uint8Array containg the binary file data
- The format is a string (e.g. 'mp4') containing a hint to the file source encoding
- aesKey is optional and is a standard browser [CryptoKey](https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey) for AES-128-CBC encryption that has the `encrypt` usage set.

e.g.
```javascript
const aesKey = await window.crypto.subtle.generateKey(
  {
    name: "AES-CBC",
    length: 128
  },
  true,
  ["encrypt"]
);
``` 

## Example

```javascript
// requests the worker script and starts the worker
const worker = new Worker('ingest-worker.js')

// handler for any messages the worker triggers
const msg = e.data;
worker.onmessage = function(e) { 
  switch (msg.type) {
	  case "ready":
	  	// when it is ready send a message back instructing it to encode a file
	  	// The fileData should be an ArrayBuffer or Uint8Array containg the binary file data
	    worker.postMessage({type: "run", data: { file: fileData, format: 'mp4', aesKey }});
	    break;
	  case "stdout":
	    console.log(msg.data);
	    break;
	  case "stderr":
	    console.log(msg.data);
	    break;
	  case "done":
	  	// encoding is complete!
	  	// do something with msg.data
	    break;
  }
};
```
npm package: @rairulyle/svelte-web-vitals
Description: Svelte wrapper for web-vitals
Author: rairulyle
Latest version: 0.0.3

# Svelte wrapper for Web Vitals

[![npm version](https://badge.fury.io/js/@rairulyle%2Fsvelte-web-vitals.svg)](https://badge.fury.io/js/@rairulyle%2Fsvelte-web-vitals)

An Svelte wrapper that provides a simple way to enable [Core Web Vitals](https://web.dev/vitals/) metrics for the following platforms:

- [Vercel - Speed Insights](https://vercel.com/docs/concepts/speed-insights/api)
- Others (coming soon)

<img src="https://raw.githubusercontent.com/rairulyle/svelte-web-vitals/main/static/vercel-preview.png">

## Note

As of the moment, the svelte wrapper is still in `development`. The current version only supports <strong>Vercel - Speed Insights</strong> as default. The next version will support other platforms such as Google Analytics, Google Tag Manager, and more.

## Prerequisites

An analytics integration is required to use this package. Currently, only [Vercel - Speed Insights](https://vercel.com/docs/concepts/speed-insights) is supported.

## Installation

```bash
npm i @rairulyle/svelte-web-vitals -D
```

## Usage

1. import WebVitals to your root `+layout.svelte` file.

```svelte
<script lang="ts">
	import WebVitals from '@rairulyle/svelte-web-vitals';
</script>

<WebVitals />
```

2. Define the Analytics ID via `vite.config.ts` file. As of the moment, only Vercel is supported.

```ts
export default defineConfig({
	// Other configs here...
	define: {
		'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
	}
});
```

## Roadmap

- [x] Vercel - Speed Insights
- [ ] Google Analytics
- [ ] Google Tag Manager
- [ ] Others