open-index/open-npm huggingface dataset:
npm package: @llkennedy/mercury
Description: Client wrappers for mercury, specifically for websocket logic.
Author: Luke Kennedy
Latest version: 0.3.1

# HTTP -> gRPC Client

This is a client library for the [mercury](https://github.com/llkennedy/mercury) proxy system.

HTTP Requests and WebSockets wrapped by the clients created by this library will be compliant with the assumptions and patterns laid out in that system.

This is not at all required to use `mercury`, you can implement canonical JSON HTTP requests for gRPC endpoints trivially yourself, and the custom logic surrounding websockets -> gRPC streams isn't terribly complex (basically just "EOF" as a CloseSend equivalent), but it's designed to make life as easy as possible when using `mercury` and web-ui gRPC in general.
npm package: @llkennedy/protoc-gen-tsjson
Description: Typescript bindings for canonical JSON representation of gRPC messages.
Author: Luke Kennedy
Latest version: 0.5.0

# protoc-gen-tsjson

Generate Typescript (and javascript) bindings for canonical JSON representation of proto messages, for when gRPC-web isn't doing it for you.

Primarily designed for use with [httpgrpc](https://github.com/LLKennedy/httpgrpc) but can be used on its own if you just want JSON proto message classes in your JS/TS project.

## Pre-requisites

If you cannot obtain a pre-built binary (e.g. the releases section of this project, once it has some) you will require Go >= 1.16 to compile the protoc plugin.

## Installing

```
go install github.com/LLKennedy/protoc-gen-tsjson
```

Alternatively, building the binary for your environment ahead of time and ensuring the result is on the path will also work. Protoc simply adds "protoc-gen" to any "plugin_out"-style options then attempts to execute "protoc-gen-plugin" blindly. Although Go was used to write this plugin, and is required to build the binary, it is not required for use with protoc, or for use with the output files.

## Usage

```
protoc --proto_path=<paths> --tsjson_out=<output path> <proto files>
```
npm package: @lllhys/lazy-cascader
Description: A vue component based on 'element-ui' and 'vue-virtual-scroller' also add 'infinite-scroll'
Latest version: 0.1.3

<p align="center">
    <h3 align="center">lazy-cascader</h3>
    <br>
    <p align="center">
        <a href="https://www.npmjs.com/package/@lllhys/lazy-cascader"><img src="https://img.shields.io/npm/v/@lllhys/lazy-cascader?maxAge=2592000"></a>
        <a href="https://www.npmjs.com/package/@lllhys/lazy-cascader"><img src="https://img.shields.io/npm/dt/@lllhys/lazy-cascader"></a>
        <a href="https://github.com/llllhy/lazy-cascader/stargazers"><img src="https://img.shields.io/github/stars/vueblocks/elp-cascader.svg"></a>
    </p>
    <p align="center">
       Cascader based on 'element-ui' and 'vue-virtual-scroller'<br>
    </p>
</p>

# @lllhys/lazy-cascader

> fork于[vueblocks/elp-cascader](<https://github.com/vueblocks/elp-cascader>), 并添加了infinite scroll。


> 基于`element-ui`和`vue-virtual-scroller`的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。

[Demo](<https://llllhy.github.io/lazy-cascader/>)

## 效果预览

![lazy-cascader](./demo.gif)

## install 安装

```shell
npm i @lllhys/lazy-cascader --save
# or
yarn add @lllhys/lazy-cascader
```

## 全局调用

在main.js中写入下面的代码

```javascript
import '@lllhys/lazy-cascader/lib/lazy-cascader.css'
import LazyCascader from '@lllhys/lazy-cascader'
Vue.use(LazyCascader)
```

页面中直接使用

```html
<template>
  <div id="app">
    <lazy-cascader v-model="value" :options="options" />
<!--    <lazy-cascader-panel v-model="value" :options="options" />-->
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      options: [
        {
          value: 'test',
          label: '测试',
          children: []
        }]
    }
  }
}
</script>
```

**Attributes、Events、Methods、Props**

详见[ElementUI-Cascader](https://element.eleme.io/#/zh-CN/component/cascader)


## 💡 与Element cascader的区别项

1. el-cascader当option重复时，会出一个空白节点

    解决逻辑：重复时保留老节点，舍去新节点
    
2. el-cascader多选状态下，第一个搜索词选中内容后，搜索词被清空

    解决逻辑：保留第一个搜索词
3. 支持infinite scroll下拉后加载新的分页数据

4. props中新增属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| selectWithExpand | 单选且checkStrictly为true时是否展开下一级 | boolean | - | false |
| lazyMultiCheck | 多选且懒加载时取值 | boolean | - | false |
| panelLabels | 面板标题 | Array | - | [] |
| checkAll | 多选且checkStrictly为true时全选 | boolean | - | false |
| panelSearch | 面板搜索 | boolean | - | false |
| expandPanels | 默认展开面板数 | number | - | 0 |
| infiniteScroll | 是否开启无限滚动 | number | - | false |

5. 开启lazy无限滚动才会生效，lazyLoad函数修改，参数加入pageNo，回调数据变为```{list: [], isEnd: Boolean}```

7. Cascader、CascaderPanel 新增事件

| 参数 | 说明 | 回调参数
| --- | --- | --- |
| lazy-loaded | 惰性加载完毕后触发 | 选中节点的值 |

[CHANGELOG](CHANGELOG.md)
npm package: @lllhys/modal
Description: A mobile side modal component, to achieve a complete life cycle of the object, built-in commonly used keyframe animation, while providing an event listener callback.
Author: l@lllhy.com
Latest version: 1.0.6

# @lllhys/modal

A mobile side modal component, to achieve a complete life cycle of the object, built-in commonly used keyframe animation, while providing an event listener callback.

## Docs

You can see our docs on https://lllhys.github.io/modal/

## Install

```shell
yarn add @lllhys/modal
# or
npm install @lllhys/modal
```

## Usage

This is a simple demonstration of how to use `Modal`, please read the documentation if you want to learn more.[Doc](https://lllhys.github.io/modal/)

```tsx | pure
import Modal, {ModalContainer, IModalProps} from '@lllhys/modal';

interface IProps {

}

const ModalFC = (props: IModalProps<IProps>) => {

}

// App.jsx

const App = () => {
  const handleClick = () => {
    const modal = Modal.createModal(ModalFC);
  }
  return <>
    <button onClick = {handleClick} > open < /button>
    < ModalContainer / >
    </>
}


```
npm package: @lllllxt/create-template
Description: 通过命令快速生成模板
Author: lllllxt
Latest version: 1.0.3

# create-template

通过命令快速生成模板

## 安装
```
npm i @lllllxt/create-template -g
```

## 配置
配置目前在包里的 config.js 中设置
```
{
    root: __dirname, // 模板根路径
    tplDir: './template', // 存放模板的文件夹
    tplUrlMap: {
        // 模板名 : 模板链接
        "base.vue": "https://gitee.com/lllllxt/template/raw/master/vue/base.vue"
    }
}
```
配置本地模板: 

在 tplDir 下新建 [ 模板名.tpl ] 文件即可

## 使用
``` ct <模板名> <目标路径> [是否更新模板] ```

模板名: 上述[配置](#配置)中的模板名

目标路径: 相对当前执行命令目录的路径

㊙️ 关于生成文件后缀，目标路径后缀 > 模板名后缀，都没有则无后缀

## 模板关键字

key | description
---|---
#FILENAME_BASE# | 不带后缀的文件名
#FILENAME#| 带后缀的文件名

目前支持两个关键字, 有需要请提 [issues](https://github.com/lllllxt/create-template/issues) 或 [PR](https://github.com/lllllxt/create-template/pulls)
npm package: @lllllxt/debounce
Description: 防抖函数
Author: lllllxt
Latest version: 1.0.3

# debounce

防抖函数，懂的都懂

## 安装

```
npm i @lllllxt/debounce
```

## 使用

`debounce(fn, [delay=500], [immediate=false])`

| 参数      | 类型/默认      | 描述                 |
| --------- | -------------- | -------------------- |
| fn        | function       | 要防抖动的函数       |
| delay     | number，500    | 需要延迟的毫秒数     |
| immediate | boolean，false | 是否立即执行 fn 函数 |
npm package: @lllllxt/deep-clone
Description: 深拷贝, 支持基本数据类型(string, number, boolean, null, undefined, symbol), 以及(Date, RegExp, Array, Object, Map, Set)
Author: lllllxt
Latest version: 1.0.2

# DeepClone

深拷贝, 支持基本数据类型(string, number, bigint, boolean, null, undefined, symbol), 以及(Date, RegExp, Array, Object, Map, Set, Class)

https://lllllxt.github.io/DeepClone/

## 使用方法

### 通过npm安装
```
npm i @lllllxt/deep-clone -S
```

```
import clone from '@lllllxt/deep-clone'

const clone = request('@lllllxt/deep-clone')

clone({a: 1, b: {c: 2}}) // => {a: 1, b: {c: 2}}
```

### 通过```<script>```标签引用
[clone.min.js](https://github.com/lllllxt/DeepClone/blob/master/deep-clone.min.js)

此方法是向window对象中注册一个 ```clone``` 对象


## 其他
欢迎PR或提交issues :smiley:

## License
This project is licensed under the MIT License
npm package: @lllllxt/event-bus
Description: event-bus
Author: lllllxt
Latest version: 1.0.2

# event-bus

> 事件处理器(广播/订阅)，可设置分组，按分组取消订阅

### 通过npm安装
```
npm i @lllllxt/event-bus
```

```
import EventBus from '@lllllxt/event-bus'

const EventBus = request('@lllllxt/event-bus')
```


### 通过```<script>```标签引用
[event-bus.min.js](https://github.com/lllllxt/event-bus/blob/master/event-bus.min.js)

此方法是向window对象中注册一个 ```EventBus``` 对象

#### 说明
方法 | 描述
---|---
EventBus.on(eventName: String, fn: Function, group?: String = 'default') | 订阅
EventBus.once(eventName: String, fn: Function, group?: String = 'default') | 订阅一次
[EventBus.off(eventName?: String, fnOrGroup?: Function  String, group?: String)](#EventBus.off)| 取消订阅
EventBus.removeGroup(group: String) | 移除分组订阅
EventBus.emit(eventName: String, ...args: any[]) | 广播事件

###### EventBus.off
*渐进式精准取消订阅*

1. eventName为空时取消全部订阅；
1. fnOrGroup为空时取消所有eventName订阅；
1. group为空时取消匹配到fnOrGroup的所有eventName订阅。
## License
This project is licensed under the MIT License
npm package: @lllllxt/storage-idb-message
Description: 基于LocalStorage + IndexedDB 封装的消息传递的模块
Author: lllllxt
Latest version: 1.0.1

# storage-idb-message

> 基于 LocalStorage + IndexedDB 封装的消息传递的模块，在同源(不跨域)的前提下，用于同一页面多个 iframe、跨 tab 页面、移动端不同 webview 页面之间的消息传递

### 做这玩意的初衷

本来我是只用 LocalStorage 做消息传递的， 但后来某次在 Chrome 上传递的数据>5M 导致数据丢失，于是乎就有了用 LocalStorage 做指令，IndexedDB 做数据存储这个想法了

参考：

LocalStorage 储存空间在 2.5MB 到 10MB 之间（各家浏览器不同），而 IndexedDB 比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

### 通过 npm 安装

```
npm i @lllllxt/storage-idb-message
```

```
import StorageIdbMessage from '@lllllxt/storage-idb-message'

const StorageIdbMessage = request('@lllllxt/storage-idb-message')

const _SIM = new StorageIdbMessage(opts: Opts)

// 监听指令
_SIM.response = (orderName, data) => {
    console.log(orderName, data)
})

// 发送指令
_SIM.send(YourOrder, AnyData)

```

### 通过`<script>`标签引用

[storage-idb-message.min.js](https://github.com/lllllxt/storage-idb-message/blob/master/storage-idb-message.min.js)

此方法是向 window 对象中注册一个 `StorageIdbMessage` 对象

#### 参数(Opts)

| 参数       | 描述                                               |
| ---------- | -------------------------------------------------- |
| storageKey | 指令的 LocalStorage key 名称                       |
| clearIdb   | 默认 true，是否在 response 后清除 IndexedDB 的数据 |
| force      | 默认 false，调用 clearCache 清除缓存               |

#### 方法

| 方法                               | 描述                     |
| ---------------------------------- | ------------------------ |
| send(order: String, data: any)     | 发送                     |
| response(order: String, data: any) | 响应其他页面传过来的指令 |

#### 静态方法

| 方法                                               | 描述                |
| -------------------------------------------------- | ------------------- |
| clearCache(successFn?: Function, errFn?: Function) | 清除 indexedDB 缓存 |

## License

This project is licensed under the MIT License
npm package: @lllllxt/throttle
Description: 节流函数
Author: lllllxt
Latest version: 1.0.2

# throttle

节流函数，懂的都懂

## 安装

```
npm i @lllllxt/throttle
```

## 使用

`throttle(fn:, [wait=500], [option])`

| 参数            | 类型/默认     | 描述                 |
| --------------- | ------------- | -------------------- |
| fn              | function      | 要节流的函数         |
| wait            | number，500   | 需要节流的毫秒数     |
| option          | object, {}    | 选项                 |
| option.leading  | boolean，true | 是否在节流开始前调用 |
| option.trailing | boolean，true | 是否在节流结束后调用 |

参数和 [Loadsh.throttle](https://lodash.com/docs/4.17.15#throttle) 的完全一样, 但是自我感觉我实现得好一点 :joy:



> 也不知道是不是我得问题, 在使用 `Loadsh.throttle` ( v4.17.15 ) 时 `leading` , `trailing` 同时 `false` 时调用 `fn` 的时间间隔并不是 `wait` 所设定的时间
npm package: @lllllxt/vue-storage-idb-message
Description: vue插件 - storage-idb-message
Author: lllllxt
Latest version: 1.0.0

# vue-storage-idb-message

> 基于 [storage-idb-message](https://github.com/lllllxt/storage-idb-message) 的vue插件



### 通过 npm 安装

```
npm i @lllllxt/vue-storage-idb-message
```


### 通过`<script>`标签引用

[storage-idb-message.min.js](https://github.com/lllllxt/storage-idb-message/blob/master/storage-idb-message.min.js)

此方法是向 window 对象中注册一个 `VueStorageIdbMessage` 对象

#### 使用
```
// main.js
import VueStorageIdbMessage from '@lllllxt/vue-storage-idb-message'
const opts = {
    name: '666' // 默认是 SIM
}
Vue.use(VueStorageIdbMessage, opts)

// a 标签页 的组件, 发送指令
export default {
    name: 'TestA',
    methods: {
        sendOrder(){
            this.$666.send('log', { name:'lllllxt', age: 18 })
        }
    }
}


// b 标签页 的组件, 监听指令
export default {
    name: 'TestB',
    666: {
        log(data){
            // do something
            console.log(data) // { name:'lllllxt', age: 18 }
        }
    }
}

```

#### 参数(opts)

| 参数       | 描述                                               |
| ---------- | -------------------------------------------------- |
| name | 默认“SIM”，用作$options属性键名，                       |
| [options](https://github.com/lllllxt/storage-idb-message#%E5%8F%82%E6%95%B0opts)   | storage-idb-messagede参数 |


#### 方法

| 方法                               | 描述                     |
| ---------------------------------- | ------------------------ |
| send(order: String, data: any)     | 发送                     |


## License

This project is licensed under the MIT License
npm package: @llllvvuu/nextra-theme-docs
Description: A Nextra theme for documentation sites.
Author: Shu Ding
Latest version: 2.10.5

# nextra-theme-docs

A documentation site theme for [Nextra](https://github.com/shuding/nextra).

## Example

[nextra.vercel.app](https://nextra.vercel.app/)
npm package: @llllvvuu/subsquid-drizzle-store
Description: DrizzleORM backend for the Subsquid EVM indexer
Latest version: 0.1.3

# `@llllvvuu/subsquid-drizzle-store`

```sh
pnpm install @llllvvuu/subsquid-drizzle-store
```

Caveats:

- Only supports Postgres
- Does not support hot blocks

## Example

```typescript
import { DrizzleDatabase } from '@llllvvuu/subsquid-drizzle-store'
import { drizzle } from 'drizzle-orm/node-postgres'
import { numeric, pgTable, text, varchar } from 'drizzle-orm/pg-core'
import pg from 'pg'
const { Client } = pg

const client = new Client({ connectionString: process.env['DB_URL'] })
await client.connect()
export const db = drizzle(client)

export const transfer = pgTable('transfer', {
  id: varchar('id').primaryKey(),
  from: text('from').notNull(),
  to: text('to').notNull(),
  value: numeric('value').notNull(),
})

// ...

const store = new DrizzleDatabase(db)
processor.run(store, async ctx => {
  const transfers: { id: string; from: string; to: string; value: string }[] =
    []
  for (let block of ctx.blocks) {
    for (let log of block.logs) {
      let { from, to, value } = usdtAbi.events.Transfer.decode(log)
      transfers.push({
        id: log.id,
        from,
        to,
        value: String(value),
      })
    }
  }
  if (transfers.length === 0) return
  await ctx.store.insert(transfer).values(transfers)
})
```
npm package: @lllulu/hfeui
Description: A components library example
Latest version: 0.0.5

# varlet-cli-app

### Reference

[@varlet/cli 中文文档](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md)
[@varlet/cli documentation](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.en-US.md)

### Quickstart

```shell
pnpm install
pnpm dev
```

### Commands

#### Start the development server

```shell
pnpm dev
```

#### Build documentation site

```shell
pnpm build
```

#### Building component libraries

```shell
pnpm compile
```

#### Lint code

```shell
pnpm lint
```

#### Run unit test

```shell
pnpm test
```

#### Run unit test in watch mode

```shell
pnpm test:watch 
or
pnpm test:watchAll 
```

#### Mount Git Hooks

```shell
npx simple-git-hooks
```

#### Generate changelog

```shell
pnpm changelog
```

#### Release

tips: 
- 1.The registry of npm must be the official source of npm
- 2.The npm must be logged in

```shell
pnpm release
```

#### Create component template files

```shell
pnpm run create
```