open-index/open-npm huggingface dataset:
npm package: @resinfo/async
Description: A ReScript module providing a lazy, typesafe API for writing asynchronous code.
Author: Oliver Fencott
Latest version: 4.0.2

# @resinfo/async

A ReScript module providing a lazy, typesafe API for writing asynchronous code.

## Installation

via NPM.

```bash
yarn add @resinfo/async
# or
npm install --save @resinfo/async
```

## Usage:

```rescript
module Async = Resinfo_async

// Construct from a promise
let fetch = url => {
  Async.fromPromise(
    // assume "get" is a previously defined promise function
    () => get(url),
    ~resolve=json => Ok(json),
    ~reject=_ => Error()
  )
}

// This is a regular value that can be passed around like
// any other; it isn't run until explicitly called
let fetchProfile = {
  fetch("https://api.github.com/users/resinfo")
  ->Async.map(result => {
    switch result {
      | Ok(json) => json.login
      | Error() => "Unable to get user"
    }
  })
}

// Run as callback
fetchProfile->Async.run(name => {
  Js.log2("Name is", name)
})

// Run as promise
fetchProfile
  ->Async.toPromise
  ->Js.Promise.then_(name => {
    Js.log2("Name is", name)

    Js.Promise.resolve()
  }, _)


```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @resinfo/parser
Description: @resinfo/parser is a parser combinator library for ReScript.
Author: Oliver Fencott
Latest version: 2.0.0-alpha

# ReScript Parser

`@resinfo/parser` is a parser combinator library for ReScript.

### Note:

Please be aware that this is considered alpha quality software. While there is a test suite that includes a JSON parser and a simple s-expression parser, you might want to write your own tests before using in production.

## Installation

via NPM.

```
yarn add @resinfo/parser
# or
npm install --save @resinfo/parser
```

## Usage

```rescript
module P = Res_parser

// Define our AST
type sign = Plus | Subtract | Multiply
type number = SingleDigit(int)
type expression = Expression(number, sign, number)

// Parse sign and transform into AST node
type sign_ = P.t<sign>
let sign: sign_ = P.choice([
  P.char('+')->P.map(_ => Plus),
  P.char('-')->P.map(_ => Subtract),
  P.char('x')->P.map(_ => Multiply),
])

// Helper that returns any parser
// that's found to be wrapped in whitespace
type manyWhitespace = P.t<list<char>>
let manyWhitespace: manyWhitespace = P.many(P.char(' '))

// Parse single digit and transform into AST node
type singleDigit = P.t<number>
let singleDigit: singleDigit =
  P.satisfy(char => char >= '0' && char <= '9')
  ->P.map(Char.escaped)
  ->P.map(int_of_string)
  ->P.map(x => SingleDigit(x))
  ->P.between(manyWhitespace, manyWhitespace)

// Combine sign and digit parsers into fully typed AST.
type parser = P.t<expression>
let parser: parser =
  singleDigit
  ->P.andThen(sign)
  ->P.andThen(singleDigit)
  ->P.map((((left, sign), right)) => Expression(left, sign, right))

// Run our parser against an input string.
type result = result<(expression, string), string>
let result: result = P.run(parser, " 1 +  4  ")

// Result is a tuple of a valid AST and the state object.
result == Ok(Expression(SingleDigit(1), Plus, SingleDigit(4)), _)

```

## Notes:

Inspired by (and essentially converted from) the excellent [series](https://fsharpforfunandprofit.com/parser/) and [library](https://github.com/swlaschin/fsharpforfunandprofit.com_code/blob/master/posts/understanding-parser-combinators/understanding-parser-combinators.fsx) by Scott Wlaschin, originally written in F#. This was itself inspired by the equally excellent (though slightly more esoteric) [paper](https://www.cs.nott.ac.uk/~pszgmh/monparsing.pdf) by Graham Hutton and Erik Meijer on Monadic Parsers ([Haskell video](https://www.youtube.com/watch?v=dDtZLm7HIJs)).

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @resir014/kait
Description: @resir014's personal reusable hooks.
Author: Resi Respati
Latest version: 0.2.0

# @resir014/kait

> @resir014's personal reusable hooks.

## Install

```bash
# yarn
$ yarn add @resir014/kait
# npm
$ npm i @resir014/kait
```

## Hooks

Below is a documentation of the hooks included in this package.

### `useVerticalScroll`

Handles checking if the user has scrolled to a certain vertical scroll position.

```jsx
const shallowThreshold = useVerticalScroll(0, 249)
const mediumThreshold = useVerticalScroll(250, 499)
const deepThreshold = useVerticalScroll(500)
```

### `useMedia`

Listens for changes in screen size and matches it based on the passed media query.

```jsx
import * as React from 'react'
import { useMedia } from '@resir014/kait'

function MediaExample() {
  const mobile = useMedia('(max-width: 640px)')

  return <Layout>{mobile ? <MobileHeader /> : <DesktopHeader />}</Layout>
}
```

### `useIsMounted`

Returns if the component the hook currently sits in is mounted or not.

```jsx
import * as React from 'react'
import { useIsMounted } from '@resir014/kait'

function IsMountedExample() {
  const [data, setData] = React.useState(null)
  const isMounted = useIsMounted()

  React.useEffect(() => {
    fetchFromAPI().then((res) => {
      if (isMounted.current) {
        setData(res)
      }
    })
  }, [])

  // ...
}
```
npm package: @resir014/lerp
Description: Simple linear interpolation.
Author: Resi Respati
Latest version: 0.1.1

# @resir014/lerp

> Simple linear interpolation.

## Install

```bash
# yarn
$ yarn add @resir014/lerp
# npm
$ npm i @resir014/lerp
```

## The problem

You're working on an article page for a content-heavy site, and you were tasked with two things.

First, you needed to implement a "scroll to" feature in your article page, which will scroll the reader into a certain percentage of an article's content.

Secondly, you needed to create a "progress bar", showing your visitors how far in an article they are.

![progress-bar](images/progress-bar.gif)

But in the design handed into you, the content is located not quite above the fold. This means finding the value between two arbitrary `window.scrollY` values in your page.

How would you go about doing that?

## The solution

Linear interpolation! It's the fancy mathematics term to measure a value between a certain range (e.g. 25-100), but it's a perfect solution to the problem mentioned above.

For more interesting uses of linear interpolation, [read this Twitter thread](https://twitter.com/mattdesl/status/1031305279227478016) by Matt DesLauriers, and [this blog post](https://www.trysmudford.com/blog/linear-interpolation/).

## Usage

```ts
import { lerp, lerpInverse } from '@resir014/lerp'

// Gets the '50% position' value between 1 and 2.
lerp(1, 2, 0.5) // 1.5
// Gets the percentage of a value between 1 and 2.
lerpInverse(1.5, 1, 2) // 0.5 (50%)
```

## Helper functions

Sometimes, when you're performing `lerpInverse` calculations, the percentage value returned could be either bigger, or smaller than what was intended. To help mitigate this, a `clamp` function is provided.

```ts
import { clamp } from '@resir014/lerp'

// clamp a value between a min-max range.
clamp(1.1, 0, 1) // 1
clamp(-0.2, 0, 1) // 0
clamp(0.5, 0, 1) // 0.5
```
npm package: @resistdesign/cjs
Description: A JavaScript Database Collection Manager with Context Driven Typing and Relationship Mapping.
Author: Resist Design
Latest version: 0.0.3

# Collection JS

A JavaScript Database Collection Manager with Context Driven Typing and Relationship Mapping.

## Installation

Run `npm i -S @resistdesign/cjs`

## Usage

```js
import Collection from '@resistdesign/cjs';

async function createTodo() {
  const todoContext = {
    title: String,
    description: String,
    createdOn: Date
  };
  // Cyclical, nested items.
  todoContext.childTodos = [todoContext];
  const todos = await Collection.getCollectionStructure({
    name: 'Todos',
    db: 'mongodb://localhost:27017/example-db',
    context: todoContext,
    deleteNested: {
      childTodos: true
    }
  });
  const createdOn = new Date();

  return await todos.create([
    {
      title: 'Wash Clothes',
      description: `Get them very clean, you're going to need to look your best! :)`,
      createdOn
    },
    {
      title: 'Jump Rope',
      description: 'Time to stay in shape!',
      createdOn,
      childTodos: [
        {
          title: 'Learn Tricks',
          description: `You'd look silly just hopping up and down like that without a little pizzazz.`,
          createdOn
        }
      ]
    }
  ]);
}

createTodo();
```

## API

View the API documentation [here](http://cjs.resist.design/docs).

## License

MIT
npm package: @resistdesign/google-drive-browser-api
Description: A Google Drive API implementation for the browser.
Author: Resist Design
Latest version: 1.1.1

# Google Drive Browser API

## Install

`npm i -S @resistdesign/google-drive-browser-api`

## Usage

```js
import {
  GoogleSignIn,
  GoogleDrive
} from '@resistdesign/google-drive-browser-api';

const app = async () => {
  const googleSignIn = new GoogleSignIn({
    apiKey: '...',
    clientId: '...',
    scopes: ['...'],
    discoveryDocs: ['...']
  });
  
  // Load the the Google API code.
  await googleSignIn.initialize();
  
  // `getAuthToken` will automatically initiate a sign in prompt to
  // the user if the user is not yet signed in.
  const authToken = await googleSignIn.getAuthToken();
  const {
    gapi: {
      client: {
        drive
      } = {}
    } = {}
  } = googleSignIn;
  const googleDrive = new GoogleDrive({
    authToken,
    drive
  });
  const result = await googleDrive.create(
    {
      mimeType: 'text/plain',
      name: 'My Text Files.txt',
      description: 'The file description.',
      properties: {
        myProperty: 'My Property Value'
      }
    },
    'root' // Or a folder id.
  );
  
  console.log(result);
};

// Run the app.
app();
```
npm package: @resistdesign/incarnate
Description: Dependency Injection (DI) with Lifecycle features for JavaScript.
Author: Resist Design
Latest version: 1.1.0

# Incarnate [![Build Status](https://travis-ci.org/resistdesign/incarnate.svg?branch=master)](https://travis-ci.org/resistdesign/incarnate)

Dependency Injection (DI) with Lifecycle features for JavaScript.

## Usage

See the website: http://incarnate.resist.design

## License

[MIT](LICENSE.txt)
npm package: @resistdesign/jsx-compiler
Description: Compile JSX using WebPack without a local WebPack config.
Author: Resist Design
Latest version: 2.3.0

# JSX Compiler

Compile JSX using WebPack without a local WebPack config.

## Install

`npm i -g @resistdesign/jsx-compiler`

## Usage

1. `jsxc`
1. `jsxc src/app.jsx`
1. `jsxc src/**/*.jsx dist`

See: `jsxc -h`
npm package: @resistdesign/node-googlehome
Description: It uses Node.js to communicate with Google Home.
Author: _Ghostrick_
Latest version: 1.1.0

# node-googlehome
It uses Node.js to communicate with Google Home.  
  
[![npm version](https://badge.fury.io/js/node-googlehome.svg)](https://badge.fury.io/js/node-googlehome)
[![Build Status](https://travis-ci.org/Ghostrick/node-googlehome.svg?branch=master)](https://travis-ci.org/Ghostrick/node-googlehome)

## Install
### npm
```bash
$ npm install node-googlehome --save
```
### yarn
```bash
$ yarn add node-googlehome
```

## Usage
```js
const GoogleHome = require('node-googlehome')

/**
 * search google home.
 * @param {waitTime: number(default: 1000)}
 */
GoogleHome.search(1000)
  .then(resp => { console.log(resp) })

/**
 * connect google home with IP.
 * @param {ip_address: string}
 */
let device = new GoogleHome.Connecter('192.168.11.13')

/**
 * setting language
 * @param {{lang: string(default: 'en')}}
 */
device.config({lang: 'ja'})


/**
 * Start speaker.
 * If you do this, google home will immediately sound when you call speak() or playMedia()
 */
device.readySpeaker()
  .then(() => { /* do something */ })

/**
 * play media. pass media url.
 * @param {url: string}
 */
device.playMedia('http://www.hypertrombones.jp/sample/system7.mp3')
  .then(console.log)
  .catch(console.log)

/**
 * google home speak!
 * @param {message: string, speed: number(default:1), timeout: number(default: 3000)}
 */
device.speak('こんにちは！')
  .then(console.log)
  .catch(console.log)
```

## Requirements
・Node.js >= v7
npm package: @resistdesign/rdx
Description: An HTML, ES2016, JSX compiler.
Author: Resist Design
Latest version: 2.0.10

# RDX

An HTML, ES2016, JSX compiler.

## ⚠️ WARNING: DO NOT USE ON WINDOWS FOR NOW!

## Badge

[![RDX Enabled](https://img.shields.io/badge/rdx-enabled-blue.svg?style=flat-square)](http://rdx.resist.design)

```markdown
[![RDX Enabled](https://img.shields.io/badge/rdx-enabled-blue.svg?style=flat-square)](http://rdx.resist.design)
```

## Usage

Compile modern **HTML** web applications that include **ES6+** JavaScript and **JSX** code.

1. **Compile**: `rdx compile -a src/path/app-name.html`
1. **Serve**: `rdx serve -a src/path/app-name.html --open`
1. Example app: https://github.com/resistdesign/rdx-example

## Installation

1. Requires:
    - NodeJS 4+
    - NPM 3+
1. Run: `npm i -g @resistdesign/rdx`

## Commands

1. `-h`: Usage/Help (All Commands). Example: `rdx app -h`
1. `-v`: Display the current RDX version.
1. `app`: Create an app with the default RDX structure.
1. `serve`: Serve an HTML application for live development.
    - WebPack Dev Server: https://webpack.github.io/docs/webpack-dev-server.html
1. `compile`: Compile an HTML application for deployment.

## Configure

Command flag values may be pre-configured by declaring them in the `package.json` file for a given project.

Example:

```json
{
    "name": "example-app",
    ...
    "rdx": {
        "serve": {
            "proxy": "http://example.com:80"
        }    
    }
}
```

**NOTE:** Flag values passed in the command line will supersede any pre-configured values.

## Supported Features

1. Multiple HTML Apps Per Project
1. Multiple JS Apps Per HTML App
1. Images (PNG, JPG, SVG, ICO)
  - Include in HTML: `<img src="/folder/file.svg">`
    - Just link for deployment: `<link rel="something" href="/folder/file.svg">`
  - Import in JS: `import MySrc from './folder/file.svg';`
    - Use in JSX: `<img src={MySrc}/>`
1. Fonts (WOFF, TTF, EOT, SVG, OTF)
1. CSS/LESS (Auto-Prefixed)
  - Hot reloading supported when imported into JS files.
1. ES6+ (Stage 0)
1. JSX

## Tech

1. WebPack: https://webpack.github.io
1. Babel: https://babeljs.io
1. React Hot Loader: https://gaearon.github.io/react-hot-loader

## License

MIT
npm package: @resize.to/transformer
Description: Transform an image stream using Sharp
Author: Fresh Codes
Latest version: 0.0.3

# resize.to transformer

[![Greenkeeper badge](https://badges.greenkeeper.io/resizeto/transformer.svg)](https://greenkeeper.io/)
[![Coverage Status](https://coveralls.io/repos/github/resizeto/transformer/badge.svg?branch=master)](https://coveralls.io/github/resizeto/transformer?branch=master)

Uses Sharp and streams to transform an image. It is meant to be used with an [options-parser](https://github.com/resizeto/options-parser). This is a building block for creating image transformation services.

Example of using it directly:

```
const fs = require('fs')
const inputPath = 'path/to/image.jpg'
const inputStream = fs.createReadStream(inputPath)
const outputPAth = 'path/to/transformed/image.jpg'
const outputStream = fs.createWriteStream(outputPath)
const transformer = new Transformer([
	backgroundalpha: 1,
	backgroundcolor: '#000',
	backgroundrgb: 'rgb(0, 0, 0)',
	blur: 10,
	fit: 'cover',
	gravity: 'center',
	height: 200,
	left: null,
	mirror: null,
	output: null,
	quality: 80,
	rotate: null,
	top: null,
	version: null,
	width: 400
], inputPath)
transformer.transform(inputStream, outputStream)
```
npm package: @resize/grid-me
Description: Universal web component to create resizable grid layouts
Author: Alessandro Genova
Latest version: 1.0.0

[![npm package](https://img.shields.io/npm/v/@resize/grid-me.svg)](https://www.npmjs.com/package/@resize/grid-me)
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d)

# GridMe - Universal Resizable Grid

`GridMe` is a universal grid layout built with [Stencil](http://stenciljs.com). It can be embedded in projects using any framework or even plain HTML. Under the hood `GridMe` leverages the [`SplitMe`](https://github.com/alesgenova/split-me) component.

![demo](./demo.gif)

## Installing

### Option 1 (HTML)

Add the `GridMe` script tag to your `index.html`:

```
<script src="https://unpkg.com/@resize/grid-me/dist/grid-me.js"></script>
```

### Option 2 (React / Angular / Vue)

Add `GridMe` to your project:

```
npm install --save @resize/grid-me
```

Import `GridMe` in your `index.js`:

```js
import { defineCustomElements as defineGridMe } from '@resize/grid-me/dist/loader';

defineGridMe(window);
```

## Basic Usage

Use the `grid-me` tag anywhere you like. Set the number of rows and columns in the layout through the `m` and `n` attributes respectively. Set where the inner elements should be placed through the `slot` attribute:

```html
<grid-me m="2" n="2">
  <div slot="0 0" class="fill red"></div>
  <div slot="0 1" class="fill green"></div>
  <div slot="1 0" class="fill green"></div>
  <div slot="1 1" class="fill red"></div>
</grid-me>

<style>
  .fill {
    height: 100%;
    width: 100%;
  }
</style>
```
npm package: @resizer-component/iframe-resizer
Description: Made with create-react-library
Author: nikolinaas
Latest version: 1.0.2

# resizer-component

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/resizer-component.svg)](https://www.npmjs.com/package/resizer-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save resizer-component
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'resizer-component'
import 'resizer-component/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [nikolinaas](https://github.com/nikolinaas)
npm package: @reskill/agent-aware
Description: Agent-aware RUM SDK - 用户行为采集库
Author: Kanyun Inc
Latest version: 0.2.0

# @reskill/agent-aware

让 AI 感知用户行为的 Web SDK。

## 安装

```bash
npm install @reskill/agent-aware
# 或
pnpm add @reskill/agent-aware
```

## 使用

### ES Module (推荐)

```typescript
import { initAgentAware } from '@reskill/agent-aware'

// 初始化（放在应用入口）
initAgentAware()

// 或自定义配置
const { stop } = initAgentAware({
  endpoint: 'http://localhost:4100/behaviors',
  debug: true,
})

// 停止追踪
stop()
```

### CommonJS

```javascript
const { initAgentAware } = require('@reskill/agent-aware')

const { stop } = initAgentAware({
  endpoint: 'http://localhost:4100/behaviors',
})
```

### 浏览器 Script 标签 (UMD)

```html
<script src="https://unpkg.com/@reskill/agent-aware/dist/index.umd.js"></script>
<script>
  AgentAware.initAgentAware()
</script>
```

## 模块格式支持

本包支持多种模块格式，适配不同的构建工具和运行环境：

| 格式 | 文件 | 用途 |
|------|------|------|
| **ESM** | `dist/index.js` | 现代前端项目（Vite、Next.js、Webpack 5+）支持 tree-shaking |
| **CommonJS** | `dist/index.cjs` | Node.js 项目、老旧构建工具 |
| **UMD** | `dist/index.umd.js` | 浏览器 `<script>` 标签直接引入 |

构建工具会根据 `package.json` 的 `exports` 字段自动选择合适的格式。

## 追踪的行为

| 类型 | 描述 |
|------|------|
| `click` | 普通点击 |
| `rage_click` | 愤怒点击（1秒内连续点击3次） |
| `dead_click` | 无效点击（点击后无响应） |
| `scroll` | 滚动（方向、深度、速度） |
| `hover` | 悬停（停留超过500ms） |
| `edit` | 编辑输入 |

## 配置选项

```typescript
interface AgentAwareConfig {
  endpoint?: string  // Server 地址，默认 http://localhost:4100/behaviors
  debug?: boolean    // 调试模式，默认 false
}
```

## 配合 Server 使用

需要先启动 Agent-aware Server：

```bash
npx agent-aware-server start
```

Server 运行在 `http://localhost:4100`。

## License

MIT