open-index/open-npm huggingface dataset:
npm package: @simon.gm/webpack-glsl-loader
Description: A webpack loader for glsl shaders - includes support for nested imports.
Author: Simon.gaomeng
Latest version: 0.0.4

# Webpack loader for GLSL shaders

Just like https://github.com/grieve/webpack-glsl-loader.

Except using `#import <./filaneme>` instead of `@import ./filename`.

To make llvm code styler work.

## Install

```shell
npm install --save-dev @simon.gm/webpack-glsl-loader
```
npm package: @simon04/npm2arch
Description: Convert NPM package to a PKGBUILD for ArchLinux
Author: Filirom1
Latest version: 2.2.0

npm2arch
========

Convert [npm](https://www.npmjs.com/) packages/[package.json](https://docs.npmjs.com/files/package.json) into a [PKGBUILD](https://www.archlinux.org/pacman/PKGBUILD.5.html) for [Arch Linux](https://www.archlinux.org/) integration.

This is a fork of the unmaintained [Filirom1/npm2arch](https://github.com/Filirom1/npm2arch).


Install
-------
### From AUR
yaourt -S [nodejs-npm2arch](https://aur.archlinux.org/packages/nodejs-npm2arch/)


### From sources

    git clone https://github.com/Filirom1/npm2arch
    cd npm2arch
    [sudo] npm install -g


Usage
-----

### npm2PKGBUILD

Transform an npm package into an Arch Linux `PKGBUILD`

    npm2PKGBUILD $NPM_NAME > PKGBUILD
    makepkg
    pacman -U nodejs-$NPM_NAME-$VERSION-any.pkg.tar.xz


### npm2aurball

Transform an npm package into an AUR tarball using `mkaurball`

    npm2aurball $NPM_NAME


### npm2archpkg

Transform an npm package into an Arch Linux package archive

    npm2archpkg $NPM_NAME
    pacman -U nodejs-$NPM_NAME-$VERSION-any.pkg.tar.xz


### npm2archinstall

Install an npm package with pacman

    npm2archinstall $NPM_NAME


License
-------

npm2arch is licensed under the [MIT License](https://github.com/Filirom1/npm2arch/blob/master/LICENSE).
npm package: @simon_he/animate-text
Description: @simon_he/animate-text
Author: Simon He
Latest version: 0.0.1

<span><div align="center">![picture](/assets//kv.png)</div></span>
word animate 

## Install
```
npm i @simon_he/animate-text
```

## Usage
```js
import animateText from '@simon_he/animate-text'
animateText({
  text: '大家好,我是Simon;来自上海;我热爱coding'.split(';'), // string or string[]
  infinity: true, // infinite loop
  container: '#app', // container selector
})
```

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
npm package: @simon_he/base-webcomponent
Description: webcomponent
Author: Simon He
Latest version: 0.0.17

## BaseWebComponent
提炼一个BaseWebComponent的class，提供了一些常用的方法基于class快速的生成新的webcomponent组件

## 安装
npm install @simon_he/base-webcomponent

## 使用
- 通过html返回原生的dom节点渲染

``` ts
export class UserCard extends BaseWebComponent {
  css() {
    return `:host {
      display: flex;
      align-items: center;
    }
   `
  }

  html(): string {
    const image = document.createElement('img')
    image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png'
    return image
  }
}
// 注册
export function registerComponent(name: string) {
  window.customElements.define(name, UserCard)
}
```

- 通过template返回原生html的字符串渲染
``` ts
export class UserCard extends BaseWebComponent {
  css() {
    return `:host {
      display: flex;
      align-items: center;
    }
   `
  }

  template(): string {
    return `
    <img src="https://semantic-ui.com/images/avatar2/large/kristy.png" class="image">
    `
  }
}

// 注册
export function registerComponent(name: string) {
  window.customElements.define(name, UserCard)
}
```

## Todo
- [x] 支持slot
- [x] 支持props


## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/clack-core
Description: Clack contains low-level primitives for implementing your own command-line applications.
Author: Nate Moore
Latest version: 0.3.9

# `@simon_he/clack-core`

Clack contains low-level primitives for implementing your own command-line applications.

Currently, `TextPrompt`, `SelectPrompt`, and `ConfirmPrompt` are exposed as well as the base `Prompt` class.

Each `Prompt` accepts a `render` function.

```js
import { TextPrompt, isCancel } from '@simon_he/clack-core';

const p = new TextPrompt({
  render() {
    return `What's your name?\n${this.valueWithCursor}`;
  },
});

const name = await p.prompt();
if (isCancel(name)) {
  process.exit(0);
}
```
npm package: @simon_he/colorize
Description: 一个基于[picocolors](https://github.com/SimonHe1995/picocolors)封装的colorful terminal输出库
Author: Simon He
Latest version: 0.0.1

## colorize
一个基于[picocolors](https://github.com/SimonHe1995/picocolors)封装的colorful terminal输出库

## Install
```
  npm i @simonhe/colorize
```

## Usage
```js
  import colorize from '@simonhe/colorize'

  colorize({
    text:'hi',
    color:'red',
  })
  colorize({
    text:'hi',
    bgColor:'red',
  })
  colorize({
    text:'hi',
    bgColor:'red',
    dimmed:true
  })
  /*
  color?: IColors
  bgColor?: IColors
  dimmed?: boolean
  bold?: boolean
  italic?: boolean
  underline?: boolean
  strikethrough?: boolean
  inverse?: boolean
  text: string
  */
```

## Why use picocolors
- No dependencies.
- 14 times smaller and 2 times faster than chalk.
- Used by popular tools like PostCSS, SVGO, Stylelint, and Browserslist.
- Node.js v6+ & browsers support. Support for both CJS and ESM projects.
- TypeScript type declarations included.
- NO_COLOR friendly.

## License
MIT

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/create_form
Description: @simon_he/create_form
Author: Simon He
Latest version: 0.0.8

# From
[repo](https://github.com/dishait/vue3-exports)

# vitesse-template

开箱即用的 `vite + vue3 + vitest + ts` 库模板，用来打包 `vue3` 的 `.vue` 组件与 `composition-api` 


<br />

## 特性 

### 开发时

- `typeScript`
- 构建工具 👉 `vite`
- 测试工具 👉 `vitest`
- 包管理工具 👉 `pnpm`
- 原子 `css` 引擎 👉 `unocss`
- `vue3`，支持 `sfc` 的 `setup` 语法糖


<br />

### 生产时

- 支持 `vue3` 的 `.vue` 组件
- 并行地打包 `js` 和打包类型声明
- 支持同时导出 `commonjs` 与 `esmodule` 两种规范 
- 支持导出 `.vue` 组件也支持的完全 `dts` 类型声明

<br />
<br />

## 动机

开发 `vue3` 相关的 `npm` 库时，可以直接用该模板进行快速开发，而不需要重新构建繁杂的开发环境。


<br />
<br />

## 使用

### 初始化

更改模板中的 `package.json`，`LICENSE` 和 `README.md` 为自己的信息 😜

#### 注意 

由于用到 `pnpm` 的 `workspace`，所以 `examples/vite/package.json` 也需要改 👇 

```diff
{
	...
	"devDependencies": {
-           "vue3-exports": "workspace:*",
+           "your-package-name": "workspace:*"
	}
    ...
}
```

<br />

### 命令

```shell
pnpm i # 安装依赖

pnpm dev # 开发

pnpm build # 打包

pnpm build-js # 仅打包 js

pnpm build-types # 仅打包类型

pnpm release # 发布

pnpm play # 启动 example

pnpm play:build # 打包 example

pnpm play:preview # 预览 example

pnpm test # 单元测试

pnpm test:ui # 单元测试(ui)

pnpm test:update # 单元测试(持续更新)
```

<br />

### 导出

在 `src/exports` 里导出即可

```ts
// 导出 composition-api
export { useInc } from './composables/inc'

// 导出 .vue 组件
export { default as Hello } from './components/Hello.vue'
```

## Try it now!

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/Simon-He95/vitesse-template/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash
npx degit Simon-He95/vitesse-template my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```
npm package: @simon_he/domtoimage
Description: domToImage
Author: Simon He
Latest version: 0.0.3

# Online Dom to Image


## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/fetch-npm
Description: 通过 `npm pack` 下载 *npm* 包，解压后，获取指定 `dist` 文件夹下的文件，然后读取文件返回文件内容字符串，并删除下载的包。
Author: Simon He
Latest version: 0.0.25

## Vitesse

通过 `npm pack` 下载 *npm* 包，解压后，获取指定 `dist` 文件夹下的文件，然后读取文件返回文件内容字符串，并删除下载的包。

## TODO

- [x] 使用 `os.tmpdir()` + `fs.mkdtemp` 创建临时目录，避免直接在 `dist` 目录下 `chmod 777` 并提升多实例安全性。（`src/index.ts` 中 `fetchAndExtractPackage` 已切换到系统临时目录）
- [x] 扩展 `dist` 匹配策略，完整解析 `package.json#exports` 的字符串和条件对象，确保能命中 `types`, `default`, `node`, `browser` 等多层声明。（`src/index.ts` 新增 `resolveExportTarget` 递归解析）
- [x] 为 `downloadWithHttp`/`downloadWithNpmHttp` 添加超时与 HTTP 状态码检查，并在 `response` 失败时中断写入，避免永远挂起或写入半成品。（`src/index.ts` 现使用 `streamTarballToFile`，默认 15s 超时，可通过 `FETCH_NPM_TIMEOUT` 配置）
- [x] 修复 `getTarballUrlFrom*` 中 `Uint8Array[]` 直接 `toString()` 的拼接方式，多包体积时会插入逗号导致 JSON 解析失败；使用 `Buffer.concat`。（已在 `src/index.ts` 的三处 registry 请求中处理）
- [x] `downloadWithNpmHttp` 在拿不到 `dist.tarball` 时应当 `reject` 并 `trim` CLI 输出，避免返回空字符串让后续 `tar.x` 抛出难以定位的错误。（`src/index.ts` 现在会 `trim` 并返回明确错误）
- [x] 支持用户指定 `registry`、`auth token`，以及在 HTTP 请求头里透传，方便私有包与企业镜像环境。（`fetchAndExtractPackage` 新增 `registry`/`authToken`/`headers`，内部透传到 HTTP 与 npm CLI）
- [x] 提供可选缓存目录，避免频繁重复下载同一个包版本；支持 `fetchAndExtractPackage({ cacheDir })` 与 CLI `--cache-dir`。（缓存命中时跳过网络下载，命中失败会写入缓存）
- [x] CLI 入口 `cli.mjs` 目前只 `import('./dist/index.js')`，补充参数解析、帮助文档与 stdout 输出，真正当成命令行工具使用。（现支持 `--dist`、`--registry`、`--header`、`--auth-token`、`--output` 等参数）
- [x] `Promise.any` 下载成功后，主动 `AbortController`/`req.destroy()` 取消剩余 HTTP 请求，并删除临时 `.tgz`，节省带宽与磁盘。（`raceDownloadTasks` + `streamTarballToFile` 支持 `cancel`）
- [ ] 补充测试：覆盖 scoped 包、显式版本、download fallback（http/npm/pack）与失败清理等场景，保证关键路径稳定。（见 `test/index.test.ts`）

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## CLI 使用

```bash
npx @simon_he/fetch-npm run <pkg> [--dist dist-suffix] [--registry https://registry.npmmirror.com] \
  [--header Authorization="Bearer <token>"] [--auth-token <token>] [--cache-dir ./.cache] [--output ./main.js]
```

- `--registry` 可以重复传入，按照顺序快速回退。
- `--header` 支持附加 HTTP 头，便于自定义认证方案。
- `--auth-token`（或设置 `FETCH_NPM_TOKEN`/`NPM_TOKEN`）会自动透传至 npm CLI 和 HTTP 请求。
- `--cache-dir` 用于复用已下载的 `.tgz` 文件（按包名 + tarball URL 加 `sha1` 存储），命中后会跳过网络请求。
- 使用 `--output` 将结果写入文件，否则直接输出到 `stdout`；配合 `--verbose` 可查看内部日志。
- 直接使用 API 时也可以传入 `fetchAndExtractPackage({ cacheDir: '.fetch-cache' })`。

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>
npm package: @simon_he/fetch-npm-cjs
Description: ## :coffee:
Author: Simon He
Latest version: 0.0.30

## Vitesse

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>

## TODO

- [x] Stage heavy tarball fallbacks so CDN/private resources get a chance to finish before `runFromOther` starts.
- [x] Cache resolved tarball URLs per `name@version` to skip redundant metadata downloads.
- [x] Stream tarball downloads directly into extraction to avoid writing and rereading `.tgz` files.
- [x] Reuse keep-alive HTTP agents and explicit request aborts/timeouts for every registry/mirror call.
- [x] Move `npm pack`/CLI fallbacks behind opt-in flags or final retry tiers to keep the fast path lightweight.

## Configuration

- `allowCliFallback`: per-call override that defaults to the environment flag (or `true` when unset). Set to `false` to skip the CLI fallback entirely, or `true` to force it even if the environment disabled it.
- `FETCH_NPM_ALLOW_CLI_FALLBACK`: global default for whether the `npm pack` fallback is allowed. Leave unset (or set to `true`) to keep compatibility, set to `false` to disable the CLI path everywhere without touching code.
- `signal`: pass an `AbortSignal` to the CJS fetch helpers to cancel CDN races early. When aborted, all in-flight CDN requests are stopped and heavy fallbacks are skipped.
- `allowRemoteImport`: ESM fetch option that lets you disable remote `import()` attempts (defaults to automatic detection). Set to `false` in Node environments to skip unsupported HTTPS imports and go straight to the CJS-based fallback, or `true` to force remote imports when running in runtimes that support them.
- `FETCH_NPM_ALLOW_REMOTE_ESM`: environment flag that controls the default `allowRemoteImport` behavior. Leave unset for auto-detection, set to `false` to always skip network imports, or `true` to attempt them even when the runtime might not support HTTPS specifiers.
npm package: @simon_he/git-fork
Description: git-fork
Author: Simon He
Latest version: 0.1.4

<div align="center"><a href="https://git-fork.vercel.app/" >
<img width=200 src="https://octodex.github.com/images/daftpunktocat-thomas.gif"/>
</a>
</div>

<div  align="center">
<h2>@simon_he/git-fork</h2>
<a href="https://www.npmjs.com/package/git-fork"><img src="https://img.shields.io/npm/dm/git-fork?style=social" alt="NPM version"></a>
<a href="https://github.com/Simon-He95/git-fork"><img src="https://img.shields.io/github/stars/Simon-He95/git-fork?style=social" alt="NPM version"></a>
</div>

## 目的
提供一个跳转到GitHub地址的小组件 `支持vue和react`

## 灵感来源
- [github-corners](https://tholman.com/github-corners/)
- [github-ribbons](https://github.com/superhugo/github-ribbons)

## 参数
```typescript
export interface Props {
  link: string ## GitHub地址
  position: 'left' | 'right' ## 组件位置
  content: string ## 组件内容
  color: string ## 组件背景颜色
  type: 'corners' | 'ribbons' | 'trapeziumType' ## 提供3种类型的组件
}
```

## 引入
```js
import { gitForkInVue, gitForkInReact } from "@simon_he/git-fork";

```

## 使用
```html
<!-- in vue -->
<gitForkInVue
      link="https://github.com/Simon-He95"
      type="ribbons"
      position="left"
    />
<!-- in react -->
<gitForkInReact
  link="https://github.com/Simon-He95"
  type="ribbons"
  position="left"
/>
```

## :coffee: 
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


## :question: 问题
[issues](https://github.com/Simon-He95/git-fork/issues)

## 依赖
`vue`、`unocss`、[`vite-plugin-inspector-lib-css`](https://github.com/Simon-He95/vite-plugin-Inspector-lib-css)、`veaury`
npm package: @simon_he/git-fork-react
Description: git-fork
Author: Simon He
Latest version: 0.0.7

<div align="center"><a href="https://git-fork-react.vercel.app/" >
<img width=200 src="https://octodex.github.com/images/daftpunktocat-thomas.gif"/>
</a>
</div>

<div  align="center">
<h2>@simon_he/git-fork-react</h2>
<a href="https://www.npmjs.com/package/@simon_he/git-fork-react"><img src="https://img.shields.io/npm/dm/@simon_he/git-fork-react?style=social" alt="NPM version"></a>
<a href="https://github.com/Simon-He95/git-fork-react"><img src="https://img.shields.io/github/stars/Simon-He95/git-fork-react?style=social" alt="NPM version"></a>
</div>

## 目的
提供一个跳转到GitHub地址的小组件

## 灵感来源
- [github-corners](https://tholman.com/github-corners/)
- [github-ribbons](https://github.com/superhugo/github-ribbons)

## 参数
```typescript
export interface Props {
  link: string //  GitHub地址
  position: 'left' | 'right' //  组件位置
  content: string // 组件内容
  color: string // 组件背景颜色
  type: 'corners' | 'ribbons' | 'trapeziumType' // 提供3种类型的组件
}
```

## 引入
```js
import GitForkReact from '@simon_he/git-fork-react'
```

## 使用
```html
<GitForkReact
      link="https://github.com/Simon-He95"
      type="ribbons"
      position="left"
    />
```

## :coffee:
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

## :question: 问题
[issues](https://github.com/Simon-He95/git-fork-react/issues)

## 依赖
`vue`、`unocss`、`veaury`

## vue版本
[`@simon_he/git-fork-vue`](https://github.com/Simon-He95/git-fork-vue)
npm package: @simon_he/git-fork-vue
Description: git-fork
Author: Simon He
Latest version: 0.0.18

<div align="center"><a href="https://git-fork-vue.vercel.app/" >
<img width=200 src="https://octodex.github.com/images/daftpunktocat-thomas.gif"/>
</a>
</div>

<div  align="center">
<h2>@simon_he/git-fork-vue</h2>
<a href="https://www.npmjs.com/package/@simon_he/git-fork-vue"><img src="https://img.shields.io/npm/dm/@simon_he/git-fork-vue?style=social" alt="NPM version"></a>
<a href="https://github.com/Simon-He95/git-fork-vue"><img src="https://img.shields.io/github/stars/Simon-He95/git-fork-vue?style=social" alt="NPM version"></a>
</div>

## 目的
提供一个跳转到GitHub地址的小组件

## 灵感来源
- [github-corners](https://tholman.com/github-corners/)
- [github-ribbons](https://github.com/superhugo/github-ribbons)

## 参数
```typescript
export interface Props {
  link: string // GitHub地址
  position: 'left' | 'right' // 组件位置
  content: string // 组件内容
  color: string // 组件背景颜色
  type: 'corners' | 'ribbons' | 'trapeziumType' // 提供3种类型的组件
}
```

## 引入
```js
import gitForkVue from '@simon_he/git-fork-vue'
```

## 使用
```html
<gitForkVue
      link="https://github.com/Simon-He95"
      type="ribbons"
      position="left"
    />
```

## :coffee:
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

## :question: 问题
[issues](https://github.com/Simon-He95/git-fork-vue/issues)

## 依赖
`vue`、`unocss`、[`unplugin-inspector-lib-css`](https://github.com/Simon-He95/unplugin-inspector-lib-css)

## react版本
[`@simon_he/git-fork-react`](https://github.com/Simon-He95/git-fork-react)
npm package: @simon_he/identify-image
Description: identify-image
Author: Simon He
Latest version: 0.0.1

# identify-image
根据图片识别最大可能的东西

# Install
```
npm i @simon_he/identify-image
```

# Usage
```
import identifyImage from '@simon_he/identify-image'
const info = await identifyImage('./person.jpg')
```

# Result
```js
[
  { className: 'analog clock', probability: 0.13620825111865997 },
  { className: 'magnetic compass', probability: 0.09165980666875839 },
  { className: 'guillotine', probability: 0.04591737687587738 }
]
```

# License
MIT

# Powered by
- [tensorflow.js](https://github.com/tensorflow/tfjs-models)

## :coffee: 
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/identify-person
Description: identify-person
Author: Simon He
Latest version: 0.0.3

# identify-person
抓取video中的人像与其他颜色的背景合成新的图片

## Install
```
  npm i -g @simon_he/identify-person
```

## Usage
```
  import identifyPerson from '@simon_he/identify-person'
  const { changeColor } = await identifyPerson(video, canvas, (base64) => {
    console.log(base64)
  })
  changeColor('red')
```

## License
MIT

# Powered by
- [tensorflow.js](https://github.com/tensorflow/tfjs-models)

## :coffee:
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/latest-version
Description: Resilient helper for resolving npm package versions with caching and retries.
Author: Simon He
Latest version: 0.1.15

# latest-version helper

Resilient utility that fetches the latest (or matching) npm package version by combining `npm view`, `npm show`, and the `latest-version` HTTP API. It adds caching, retries, semver-aware range resolution, and registry overrides so you always get a deterministic answer.

## Install

```bash
npm install @simon_he/latest-version
# or
pnpm add @simon_he/latest-version
```

Requires **Node.js 18.12+**.

## Usage

```ts
import { latestVersion, clearCache } from '@simon_he/latest-version'

const vue = await latestVersion('vue')
// => "3.5.12"

const legacyVue = await latestVersion('vue', { version: 'legacy' })
// => resolves dist-tag using the npm CLI

const pinnedNext = await latestVersion('next', { version: '^14.2.0', retries: 3 })
// => uses semver.maxSatisfying against the registry's full version list

clearCache() // optional helper when running in long-lived processes
```

## API

```ts
latestVersion(pkgname: string, options?: LatestVersionOptions): Promise<string>
clearCache(): void
```

### `LatestVersionOptions`

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `version` | `string` | `'latest'` | Dist-tag or semver range to resolve. |
| `retries` | `number` | `2` | Number of times to retry the entire strategy set when **all** attempts fail. (Deprecated `concurrency` still maps to this.) |
| `timeout` | `number` | `10_000` | Timeout per strategy in milliseconds. |
| `useCache` | `boolean` | `true` | Toggle in-memory caching for identical lookups. |
| `cacheTtl` | `number` | `5 * 60 * 1000` | Cache lifetime in milliseconds. |
| `cwd` | `string` | `process.cwd()` | Working directory passed to the npm CLI (so your `.npmrc` is respected). |
| `registryUrl` | `string` | npm default | Overrides the registry for both CLI calls and the HTTP fallback. |
| `omitDeprecated` | `boolean` | `false` | Skip deprecated releases (propagated to `latest-version`). |
| `includePrerelease` | `boolean` | `false` | Allow pre-release versions when resolving ranges. |

Caching uses a key derived from the package name + relevant options (registry/cwd/range). Entries expire lazily and via periodic cleanup when new entries are added. Call `clearCache()` whenever you need to reset memoized values.

## Development

```bash
npm run lint
npm run test
npm run build
```

Tests are fully mocked and do not touch the public npm registry, so they run quickly and deterministically.

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png" alt="sponsors"/>
  </a>
</p>
npm package: @simon_he/nums-wheel
Description: numsWheel
Author: Simon He
Latest version: 0.0.3

<p align="center">
<img  src="./assets/icon.jpg" alt="numsWheel">
</p>
<p align="center"><a href="https://www.npmjs.com/package/@simon_he/nums-wheel"><img src="https://img.shields.io/npm/v/@simon_he/nums-wheel?color=3fb883&amp;label=" alt="NPM version"></a></p>
<p align="center"><a href="https://www.hejian.club/posts/nums-wheel-zh">Docs</a></p>
<p align="center"> <a href="./README_en.md">English</a> | 简体中文</p>

## 此文是[simon-js-tool](https://www.npmjs.com/package/simon-js-tool)额外的numsWheel文档

## 更多
- 导出函数 [exports-function](https://github.com/SimonHe1995/exportsFunction)
- threejs [@simon_he/s-three](https://github.com/Simon-He95/sThree)
- Echarts [@simon_he/s-chart](https://github.com/Simon-He95/sCharts)

## numsWheel
- 数字滚轮控件
- 无需在onMounted中调用,可以在任意地方调用
- 基于odometer封装, 更简单的在业务中使用
- 参数:
  - container: string | HTMLElement 父容器
  - options: {  format: '(,ddd)' | '(,ddd).dd' | '(.ddd),dd' | '( ddd),dd' | 'd' 数字格式 startVal: number 起始数字 endVal: number 最终数字  duration: number 动画时长  animation: 'count' | 'countdown' 动画方式 }
```javascript
numWheel('#main', {  endVal: 9000.12 }) // 默认format: '(,ddd).dd' startVal: 0 duration: 500 animation: 'countdown', 可以自定义format, startVal, duration, animation
```
npm package: @simon_he/person-opacity-image
Description: person-opacity-image
Author: Simon He
Latest version: 0.0.1

## person-opacity-image
实时获取视频中人物的透明base64图片

## Install
```bash
npm install @simon_he/person-opacity-image
```

## Usage
```js
import PersonOpacityImage from '@simon_he/person-opacity-image'
onMounted(() => getPersonOpacityImage(video.value, (base64) => {
  console.log(base64)
}))
```

# License
MIT

# Powered by
- [tensorflow.js](https://github.com/tensorflow/tfjs-models)

## :coffee: 
<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/qargs
Description: Help you quickly process argv
Author: Simon He
Latest version: 0.0.5

## @simon_he/qargs
Help you quickly process argv

## Install
```bash
npm i @simon_he/qargs
```

## Usage
```javascript
import { getArgs } from '@simon_he/qargs'

const args = getArgs()
// run --help
args.has('help') // true

// run --username simon_he
args.get('username') // simon_he

// run --username simon_he --password 123456
args.get(['username','password']) // [simon_he,123456]

// run find
args.hasCommand('find') // true
```

## Options
```typescript
{
    args: string[];
    rawArgs: string;
    options: Options[];
    commanders: string[];
    has: (key: string) => boolean;
    get: (key: string | string[]) => string | boolean | (string | boolean | undefined)[] | undefined;
    hasCommand: (key: string) => boolean;
}
```

## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/runall
Description: 并行执行命令
Author: Simon He
Latest version: 0.0.2

## @simon_he/runall 
并行执行命令

## Install
```
  npm i @simon_he/runall 
```

## Usage
```
# Package.json
"scripts":{
    "run-all":"runall \"pnpm lint\"  \"pnpm i\"",
    "run-all":"runall \"lint*\" --parallel",
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 --cache",
    "lint:fix": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 --cache",
}
```


## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/s-charts
Description: s-charts
Author: Simon He
Latest version: 0.0.5

<p align="center">
<img  src="./assets/icon.jpg" alt="s-charts">
</p>
<p align="center"><a href="https://www.npmjs.com/package/@simon_he/s-charts"><img src="https://img.shields.io/npm/v/@simon_he/s-charts?color=3fb883&amp;label=" alt="NPM version"></a></p>
<p align="center"><a href="https://www.hejian.club/posts/toolsfunction-zh">Docs</a></p>
<p align="center"> <a href="./README_en.md">English</a> | 简体中文</p>

## sCharts
- 简单化echarts使用
- 可以让你的代码更加简洁,更加美观
- 不需要在onMounted中执行,可以在任意时刻使用
- 自动监听resize事件,自动更新canvas的大小
- 参数:
  - container: string | HTMLElement, 父容器
  - options: SChartsOption, echarts配置options,扩展了w: 初始化宽度, h: 初始化高度, theme: echarts主题, 所有的事件行为以on开头都会被调用
  - autoResize: boolean, 是否自动调整宽高
```javascript
const charts = sCharts('#main', {
  w: 500,
  h: 300,
  theme: 'dark',
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25],
    },
  ],
})
```
npm package: @simon_he/secret
Description: @simon_he/secret
Author: Simon He
Latest version: 1.0.4

# 💭 secret

<p align="center">
<img  src="./assets/kv.svg" alt="secret">
</p>
<p align="center"><a href="https://www.npmjs.com/package/@simon_he/secret"><img src="https://img.shields.io/npm/v/@simon_he/secret?color=3fb883&amp;label=" alt="NPM version"></a>
</p>
<p align="center"><a href="https://www.npmjs.com/package/@simon_he/secret"><img src="https://img.shields.io/npm/dm/@simon_he/secret?style=social"/>
<a href="https://github.com/Simon-He95/secret"><img src="https://img.shields.io/github/stars/Simon-He95/secret?style=social"/>
</a>
</a>
</p>

灵感启发于[geekris1/funnycode](https://github.com/geekris1/funnycode), 实现一种代码的加密和解密方式。

## 🔅 场景
也许你不想share你的代码到仓库,你可以在提交前去加密,这样在仓库里的代码则是加密的代码,如果在公司要离职了,你留下的提交记录都是注释了哦:smirk:

## :zap: 特性
这个密码是跟着你的电脑来的， 所以一旦你设定了一个初始密码之后, 之后的加密和解密都是基于这个初始密码的。所以难以泄露, 也无需担心这个密码忘记导致解码失败，之后的加密和解密都无需再次输入初始密码。这个密码会生成在该用户的下的secret_key.txt中。

## 🚀 安装
```bash 
  npm install -g @simon_he/secret
```
## :question:如何使用
- 选择encrypt或者decrypt 来进行加密或者解密
- 需要输入一个加密的密码

![img](./assets/choose.jpg)

## 🔧 用法
- 🔒  加密 : 需要指定一个key,作为解密的密钥

![img](./assets/key.jpg)

- 🔓  解密 : 需要指定一个key,作为解密的密钥

![img](./assets/key.jpg)


## 😏 技巧
- key可在package.json中提前配置
- includes可配置需要被加密的目录或文件类型
- ignore可配置需要忽略的目录或文件类型,目前会自动忽略.jpg | .png | .gif类型文件,如果有更多需要可配置在ignore中

```bash
  "secret": {
    "key": "123",
    "includes": [
      "**/*.js",
      "**/*.json"
    ],
    "ignore": []
  }
```

## ⚠ 提醒:
- 以防突发的错误导致代码的丢失, 请提前做一个备份 :)

## 🤐  常见状态:
- 错误的key

![img](./assets/validKey.jpg)

- 正确的加密

![img](./assets/encrypt.jpg)

- 正确的解密

![img](./assets/decrypt.jpg)
npm package: @simon_he/sponsorkit
Description: Toolkit for generating sponsors images
Author: Anthony Fu
Latest version: 0.0.10

# SponsorKit
灵感来源于 [antfu/sponsorkit](https://github.com/antfu-collective/sponsorkit), 支持了针对未开通 Github Sponsors 或 收到来自非 Github Sponsors 的赞助的用户的展示, 比如 wechat 、alipay...

## Usage
- 针对 GitHub Sponsors 用户的使用方法请参考 [antfu/sponsorkit的文档](https://github.com/antfu-collective/sponsorkit)
- 非 GitHub Sponsors 需要配置 `customGithubUser` 字段, 请参考 [Configurations](#configurations) 部分
- 默认 type 为 `all`, 可以通过配置文件修改, 同时生成 条形图 和 圆形图

Run:

```base
npx sponsorkit
```


## Configurations

Create `sponsorkit.config.js` file with:

```ts
import { defineConfig, presets } from '@simon_he/sponsorkit'
import { customGithubUser } from './sponsors'

const customGithubUser = [
  {
    user: 'github_username',
    monthlyDollars: 666,
  }
]

export default defineConfig({
  // includePrivate: true,
  type: 'all',
  tiers: [
    {
      title: 'Past Sponsors',
      monthlyDollars: -1,
      preset: presets.xs,
    },
    {
      title: 'Backers',
      // to replace the entire tier rendering
      // compose: (composer, tierSponsors, config) => {
      //   composer.addRaw(
      //     '<-- custom svg -->',
      //   )
      // },
    },
    {
      title: 'Sponsors',
      monthlyDollars: 10,
      preset: presets.medium,
      // to insert custom elements after the tier block
      composeAfter: (composer, _tierSponsors, _config) => {
        composer.addSpan(10)
      },
    },
    {
      title: 'Silver Sponsors',
      monthlyDollars: 50,
      preset: presets.large,
    },
    {
      title: 'Gold Sponsors',
      monthlyDollars: 100,
      preset: presets.xl,
    },
  ],
  customGithubUser
})
```

Also check [the example](./example/).

## Utils

You can also use SponsorKit programmatically:

```ts
import { fetchSponsors } from 'sponsorkit'

const sponsors = await fetchSponsors(token, login)
```

Check the type definition or source code for more utils available.

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg"/>
  </a>
</p>

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors_circle.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors_circle.svg"/>
  </a>
</p>

## License

[MIT](./LICENSE) License © 2022 [Anthony Fu](https://github.com/antfu)
npm package: @simon_he/starter-cli
Description: simon's starter cli 快速创建模板 cli
Author: Simon He
Latest version: 0.0.16

## starter-cli

simon's starter cli 快速创建模板 cli

## Usage

Install:

```bash
npm i -g @simon_he/starter-cli
# or
pnpm add -g @simon_he/starter-cli
```

Run:

```bash
# create under current directory
simon my-app

# create under a relative path
simon my-app ./projects

# non-interactive-ish helpers
simon my-app --template vitesse --path ./projects --no-open --no-gum

# list templates / version
simon --list-templates
simon --version

# overwrite existing directory (degit --force)
simon my-app --template vitesse --force

# choose package manager
simon my-app --template vitesse --pm npm

# do not clear screen
simon my-app --template vitesse --no-clear

# preview without cloning/installing
simon my-app --template vitesse --dry-run

# machine-readable output
simon --list-templates --json
simon --version --json
simon my-app --template vitesse --dry-run --json
```

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>
npm package: @simon_he/unfetch
Description: ## :coffee:
Author: Simon He
Latest version: 0.0.9

## Vitesse

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>
npm package: @simon_he/unpublish
Description: 快速取消发布包版本
Author: Simon He
Latest version: 0.0.8

# @simon_he/unpublish

快速取消发布包版本

## Install

```
npm i -g @simon_he/unpublish
```

## Usage

```
// 默认取消发布当前package.json中的version
unpublish

// 指定取消发布某个版本
unpublish 0.0.1

// params --force 强制取消发布
unpublish 0.0.1 --force
```

## License

[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/v-axios
Description: vAxios
Author: Simon He
Latest version: 0.0.10

<p align="center">
<img src="./assets/icon.jpg" alt="@simon_he/v-axios">
</p>
<p align="center"><a href="https://www.npmjs.com/package/@simon_he/v-axios"><img src="https://img.shields.io/npm/v/@simon_he/vAxios?color=3fb883&amp;label=" alt="NPM version"></a></p>
<p align="center"><a href="https://www.hejian.club/posts/vAxios">Docs</a></p>
<p align="center"> <a href="./README_en.md">English</a> | 简体中文</p>

本文是 [simon-js-tool] 的附加 vAxios 文档 (https://www.npmjs.com/package/simon-js-tool).

## 更多
- Export function [exports-function](https://github.com/SimonHe1995/exportsFunction)
- threejs [@simon_he/s-three](https://github.com/SimonHe1995/sThree)
- Echarts [@simon_he/s-chart](https://github.com/SimonHe1995/sCharts)
- numsWheel [@simon_he/nums-wheel](https://github.com/SimonHe1995/numsWheel)

## vAxios
- 基于axios的封装
- 重复的请求上一次会被自动取消
- 所有的请求都可以像post请求一样使用post(url, data, config)方式
```js
const axios = vAxios({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json'
  },
  interceptor: {
    request(config) {
      console.log(config)
      return config
    },
    response(response) {
      console.log(response)
      return response
    },
    requestError(error) {
      console.log(error)
      return Promise.reject(error)
    },
    responseError(error) {
      console.log(error)
      return Promise.reject(error)
    }
  }
})

axios.get('/api/get', { // get请求可以像其他请求一样传参
  id: 1,
  name: '22'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
}).finally(() => {
  console.log('finally')
})

axios.post('/api/get', {
  id: 1,
  name: '22'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
}).finally(() => {
  console.log('finally')
})
```
npm package: @simon_he/vue-watermark
Description: vue-watermark
Author: Simon He
Latest version: 0.0.4

<p align="center">
<img height="200" src="./assets/kv.png" alt="watermark">
</p>

vue3 水印组件 | vue3 watermark component

Lightweight, flexible watermark component for Vue 3. Supports text or image watermarks, rotation, DPI-aware rendering, theme-aware colors, and reactive updates.

## Install

```sh
npm i @simon_he/vue-watermark
```

## Usage

Using script setup in SFC:

```vue
<script setup lang="ts">
import { WaterMark } from '@simon_he/vue-watermark'

// optional: dynamic values
const rotation = -30
const logo = 'https://example.com/logo.png' // or inline SVG string, or HTMLImageElement
</script>

<template>
  <WaterMark
    text="vue-watermark"
    :rotation="rotation"
    :gap="20"
    :font-size="40"
    color="auto"
    auto-color-dark="rgba(255,255,255,0.35)"
    auto-color-light="rgba(0,0,0,0.3)"
  >
    <!-- your main content -->
  </WaterMark>
</template>
```

Or with an image/icon watermark:

```vue
<template>
  <WaterMark :image="logo" :image-scale="0.6" :rotation="-45">
    <div>content...</div>
  </WaterMark>
  <!-- You can also use kebab-case tag name -->
  <!-- <water-mark :image="logo" /> -->
</template>
```

Color options:

- color="auto" (default): Automatically chooses light/dark color based on `.dark` class on `html/body` or system preference `prefers-color-scheme`.
- Provide explicit color, including CSS variables: `color="var(--wm-color, rgba(0,0,0,0.3))"`.
- Customize auto colors:

```vue
<WaterMark
  color="auto"
  auto-color-dark="rgba(255,255,255,0.35)"
  auto-color-light="rgba(0,0,0,0.3)"
/>
```

Props summary:

- text: string = 'watermark'
- fontSize: number = 40
- gap: number = 20
- rotation: number = -45
- image: string | HTMLImageElement = '' (URL, data URL, inline SVG string, or preloaded Image)
- imageScale: number = 0.6 (relative max dimension of image inside tile)
- color: string = 'auto' (supports CSS variables via var(--name[, fallback]))
- autoColorDark: string = 'rgba(255,255,255,0.35)'
- autoColorLight: string = 'rgba(0,0,0,0.3)'
- styles: string = '' (inline styles appended to overlay, e.g. custom z-index)

Notes:

- CORS: when using remote images, ensure they allow cross-origin access or use data URLs/inline SVG to avoid a tainted canvas.
- The watermark overlay is non-interactive (`pointer-events: none`) and marked `aria-hidden` for accessibility.
- SSR: canvas operations are guarded; they only run in the browser.

## License

[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)

<a href="https://github.com/Simon-He95/sponsor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

<span><div align="center">![sponsors](https://www.hejian.club/images/sponsors.jpg)</div></span>
npm package: @simon_he/white-list
Description: ## :coffee:
Author: Simon He
Latest version: 0.0.48

## Vitesse

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>
npm package: @simonaco/create-graphless
Description: A CLI to bootstrap new serverless graphql projects
Author: Simona Cotin
Latest version: 1.0.5

# Graphless

CLI that generates the code you need for running Graphql with Azure Functions

## Prerequisites

1. A recent version of [Node](https://nodejs.org/en/download) (8+)

1. [Azure Functions CLI](https://docs.microsoft.com/azure/azure-functions/functions-run-local?WT.mc_id=graphqless-github-sicotin)

1. [Free Azure Account](https://azure.microsoft.com/en-us/free/?wt.mc_id=graphless-github-sicotin)

## How to run it

1. Install package ```npm i @simonaco/create-graphless -g```

1. Create new project by running ```create-graphless --git --install```

1. Run project ```npm start``` 

## License

[![Creative Commons License](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)