open-index/open-npm huggingface dataset:
npm package: @gbrlcoelho/scaffold-cli
Description: A CLI tool to scaffold components, sub-modules, hooks, utils and services.
Author: Gabriel Coelho
Latest version: 1.2.1

# Scaffold CLI

This is a CLI tool to scaffold components, modules, and hooks for React applications.

## Installation

You can use the CLI without installing it by using `npx`:

```sh
npx @gbrlcoelho/scaffold-cli create <path>
```

Where `<path>` is the path to the folder where you want to scaffold the component, module, or hook.

## Usage

### Create a Component

To create a component, select 'Component' when prompted for the type. The CLI will create a new directory with the name you provide, and it will generate the necessary files including `index.ts`, `<name>.tsx`, `types.ts`, `styles.ts`, and a `__tests__` directory with a `<name>.test.tsx` file.

### Create a Hook

To create a hook, select 'Hook' when prompted for the type. The CLI will append an export statement to the `index.ts` file in the hooks directory and create a new hook file with the name you provide. It will also create a `__tests__` directory with a `<name>.test.ts` file.

### Create a Submodule

To create a module, select 'Module' when prompted for the type. The CLI will prompt you to select a directory to create the module in. It will then create a new directory with the name you provide, and generate the necessary files including `index.ts`, a `screens` directory with a screen file and a `translations` directory.

### Util

To create a util, select 'Util' when prompted for the type. The CLI will prompt you to select the type of util you want to create (e.g. `strings`, `objects`, `arrays`, `numbers`, `dates`, `validations`, `others`, etc.). It will then create a new file with the name you provide, type, and the necessary imports.

### Service

To create a service, select 'Service' when prompted for the type. The CLI will prompt you to select or create a directory to create the service in (e.g. `auth`, `products`, `users`, etc.). It will prompt again to select the type of service you want to create (e.g. `cart` or `wishlist` for the `products` service) or create a new one. It will then create a new file with the name you provide, type, and the necessary imports.
npm package: @gbrogio/gbrogio-cli
Description: A cli to power up your code velocity.
Author: Guilherme Brogio
Latest version: 1.0.2

# ![GUilherme Brogio CLI - LOGO](./assets/logo.svg)

> A cli to clone your template projects more easily and fast. One command and your project are created with all package installed.

- Improve your code velocity with this simple cli.
- Getting project template from (GITHUB).

## Instalação

Instale my-project com npm

```bash
  npm i -g @gbrogio/gbrogio-cli
```

---

## Commands 🤖

```bash
  • --init  -i  Initialize creation of the config file for cli works.

  • create  c   Initialize creation of new project from template repository.
  • update  u   Initialize update of the config file.
```

---
---
<a id="ghp-access-token"></a>

## GHP Access Token 🗝️

The GitHub Personal access token are an alternative to using passwords for authentication to GitHub when using the GitHub API or the command line. Personal access tokens are intended to access GitHub resources on behalf of yourself... [read mode](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)

Follow the tutorial to generate your:
[Creating a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-personal-access-token-classic)

> In step 6 you can use the name "gbrogio-cli".

For update your ghp token when it expires usage:

```bash
  $ gbrg u -ght <your-gh-token-here>
  # or
  $ gbrogio u -ght <your-gh-token-here>
```

---
---

## Creating a template repository

> If you want to use a private repository, you will need ghp access token, follow the [last step](#ghp-access-token).

- Now [create your github repository](https://docs.github.com/en/get-started/quickstart/create-a-repo) and add your projects templates.
Then run the command:

  ```bash
    $ gbrg -i
    # or
    $ gbrogio --init
  ```

- Response the Answers correctly.
- Now run the command

  ```bash
    $ gbrg c
    # or
    $ gbrogio create
  ```

if your want to use another repository usage:

  ```bash
    $ gbrg c --rp https://github.com/<owner>/<repo>
    # or
    $ gbrogio create --repository https://github.com/<owner>/<repo>
  ```

> Run for more details:\
  > ```$ gbrg -h create -m```

---

## Feedback 📫

Have some feedback, talk with me guilhermebrogio.ps@gmail.com

## Creators

- [@gbrogio](https://www.github.com/gbrogio)

---

## Licença 📜

read the [MIT LICENSE](./LICENSE)
npm package: @gburnett/generator-json-server
Description: json-server project boilerplate
Author: gburnett
Latest version: 0.1.1

> json-server project boilerplate

## Installation

```bash
yarn global add yo
yarn global add @gburnett/generator-json-server
```

Then generate your new project:

```bash
yo @gburnett/json-server
```

## License

MIT © [gburnett]()
npm package: @gburnett/react-detect-print
Description: Detect printing status in a react.js application. Forked from tacomanator/react-detect-print
Author: gburnett
Latest version: 0.3.0

# react-detect-print

Detect printing status in a react.js application.

## What

Detect printing state such that be used within logic inside of a react.js application.

## Example

```jsx
import useDetectPrint from "react-detect-print";

const Component = (props) => {
  const printing = useDetectPrint();
  const color = printing ? "blue" : "red";
  return (
    <div>
      Printing? <span style={{ color }}>{JSON.stringify(props.printing)}</span>
    </div>
  );
};
```

## Should I use this?

In most cases you can use media queries to adjust page content for printing. For cases in which this is not possible or extremely inconvenient, this library may fit the bill.

## Approach

The library previously used the approach detailed [in this blog post](https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/), but that method was deprecatd. It has been redone using `window.addEventListener("beforeprint/afterprint")` as well as changing the way it is used from a HOC to a hook.

## Installation

```
npm install --save react-detect-print
```
npm package: @gburnett/riot-testing-library
Description: A simple testing library for testing Riot.js components with dom-testing-library
Author: gburnett
Latest version: 0.2.1

# riot-testing-library
A simple testing library for testing [Riot.js](https://riot.js.org/) components with [dom-testing-library](https://testing-library.com/)

## Basic Example

For a basic example see how I
[test](https://github.com/gburnett/riot-testing-library/blob/master/example/hidden-message.test.js)
the [hidden message component](https://github.com/gburnett/riot-testing-library/blob/master/fixtures/hidden-message.riot).

``` html
<hidden-message>
  <div>
    <label for='toggle'>Show Message</label>
    <input id='toggle' type='checkbox' onchange={e => setShowMessage(e.target.checked)} checked={state.showMessage} />
    <div if={state.showMessage}>{props.message}</div>
  </div>
  <script>
    export default {
      onMounted() {
        this.update({ showMessage: false })
      },
      setShowMessage(showMessage) {
        this.update({ showMessage });
      }
    }
  </script>
</hidden-message>
```

``` javascript
import {
  render,
  cleanup,
  fireEvent
} from "../dist/riot-testing-library.esm.js";
import "@testing-library/jest-dom/extend-expect";
import HiddenMessage from "../tmp/hidden-message";

describe("components/hidden-message", () => {
  afterEach(cleanup);

  it("shows the children when the checkbox is checked", () => {
    const message = "Oh hai, Mark!";
    const { queryByText, getByLabelText, getByText } = render(HiddenMessage, {
      attributes: { message }
    });

    expect(queryByText(message)).toBeNull();

    fireEvent.click(getByLabelText("Show Message"));

    expect(getByText(message)).toBeInTheDocument();
  });
});
```

## Acknowledgement
This is an attempt to test riot components in the way that Kent
C. Dodds suggests testing react components.

For more info see
[react-testing-library](https://github.com/testing-library/react-testing-library).
See also [this blog post](https://kentcdodds.com/blog/testing-implementation-details)
npm package: @gburning/vite-plugin-favicons
Description: Simple Vite plugin to generate favicons from source image. Nothing more, nothing less.
Latest version: 1.0.2

# @gburning/vite-plugin-favicons

Simple Vite plugin using [favicons](https://github.com/itgalaxy/favicons) library under the hood
to generate favicons with manifest files from yor source image. Nothing more, nothing less.

1. Add plugin to your Vite configuration

    ```js
    // vite.config.js
    import favicons from "@gburning/vite-plugin-favicons"

    export default {
        plugins: [favicons("src/assets/icon.svg")],
    }
    ```

1. Then just enter `<!-- FAVICONS -->` comment at the end of head section in the `index.html` file

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>My Vite app</title>
        <!-- FAVICONS -->
    </head>
    <body>
        <div id="app"></div>
        <script
            type="module"
            src="/src/main.ts"
        ></script>
    </body>
</html>
```

## Contribution

You're free to contribute to this project by submitting [issues](https://github.com/gburning/vite-plugin-favicon/issues) and/or [pull requests](https://github.com/gburning/vite-plugin-favicon/pulls).

### TODO

-   [x] Refactor to use TypeScript
-   [x] Fix issues when using dev server
-   [ ] Re-build in watch mode when source changes
-   [ ] Implement semantic-release
-   [ ] Add tests
-   [ ] Use https://vite.dev/guide/env-and-mode.html#html-constant-replacement for html replacement instead?

## License

This project is licensed under [MIT](https://github.com/gburning/vite-plugin-favicon/blob/latest/LICENSE).

[favicons]: https://github.com/haydenbleasel/favicons

Based on (`@peterekjs/vite-plugin-favicons`)[https://github.com/peterekjs/vite-plugin-favicons]
npm package: @gbvflabs/china-area
Description:  Ant Design Cascader级联选择 中国省市区三级数据
Author: GBVFtou
Latest version: 0.0.3

# china-area

中华人民共和国行政区划（三级）：省级、地级、县级。适用于Ant Design Cascader级联选择组件。

## 数据来源

- 民政部：
  - [中华人民共和国民政部-中华人民共和国行政区划代码](https://www.mca.gov.cn/n156/n186/index.html)
- 本项目已更新至：
  - [2022年中华人民共和国县以上行政区划代码（截止时间：2024-07-25，发布时间：2023-04-23）](https://www.mca.gov.cn/mzsj/xzqh/2022/202201xzqh.html)

## 数据下载

| 文件列表                     | JSON                                                         |
| ---------------------------- | ------------------------------------------------------------ |
| 省级（省份、直辖市、自治区） | [provinces.json](https://github.com/wkl007/antd-china-area-data/blob/master/dist/provinces.json) |
| 地级（城市）                 | [cities.json](https://github.com/wkl007/antd-china-area-data/blob/master/dist/cities.json) |
| 县级（区县）                 | [areas.json](https://github.com/wkl007/antd-china-area-data/blob/master/dist/areas.json) |

## 数据更新

```
$ yarn

$ yarn fetch
```
npm package: @gby/clipboard
Description: @gby/clipboard 称为 库构建模板，又称 公共代码构建模板 ，是专门用于构建 公共代码（如：封装的库、工具等） 的 vite 配置模板，当需要开发和构建公共代码时，直接克隆本项目即可，并默认在的 src 目录下开发即可；
Author: 郭斌勇
Latest version: 1.0.0

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/library-vite-template
[发行地址]: https://github.com/GuoBinyong/library-vite-template/releases
[issues]: https://github.com/GuoBinyong/library-vite-template/issues

[码云仓库]: https://gitee.com/guobinyong/library-vite-template



**目录**  

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /code_chunk_output -->


---------------------


# 1. 背景

# 2. 简介
拷贝到剪贴板

**具有以下特性：**  
- 支持 http、https、localhost 等环境
- 函数式拷贝，不需要传递 DOM 元素，直接调用函数即可
- 自动回退机制：如果当前环境支持 navigator.clipboard，则会优先使用 `navigator.clipboard` 来拷贝，否则，回退到 `document.execCommand('copy')` 的方式

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/library-vite-template>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- 微信：keyanzhe





# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
通过 npm （或 yarn、pnpm 等包管理器）安装
```shell
npm install @gby/clipboard
```




## 3.2. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 library-vite-template：


1. 引用 library-vite-template
   ```html
   <script src="path/to/package/clipboard.iife.js"></script>
   ```
   
2. 使用全局的 `GBYClipboard`
   ```html
   <script>
   // 使用全局的 GBYClipboard
   GBYClipboard.copyToClipboard('要复制的文本');
   </script>
   ```

# 4. 教程
```js
import { copyToClipboard } from "@gby/clipboard";

// 复制文本到剪贴板
copyToClipboard('要复制的文本');
```
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/convers
Description: convers 提供了一些常用的 file-conver 转换器
Author: 郭斌勇
Latest version: 1.5.3

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/file-conver
[发行地址]: https://github.com/GuoBinyong/file-conver/releases
[issues]: https://github.com/GuoBinyong/file-conver/issues

[码云仓库]: https://gitee.com/guobinyong/file-conver



> 目录

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)



# 1. 背景
当需要对旧项目进行改造，改造过程中需要很多重复的操作，比如：  
   将下面全局的模块使用方式：  
   ```js
   new Cesium.Cartesian3();
   ```
   改成成员导入方式：  
   ```js
   import {Cartesian3} from "cesium"
   new Cartesian3();
   ```
借助正则，这些都可以通过代码来操作。但对于不熟悉 Node 的同学，写一个批量处理这些文件的工具还是比较耗时的，优其只是偶尔用一下的时候。

所以，为了方便没有 Node 经验的同学能够快速实现自己的处理脚本，所以本工具就诞生了。
# 2. 简介
file-conver 用于批量处理文件，可自定义处理逻辑。它提供了遍历文件、读取文件 和 写入文件 的能力，提供了链式的自定义处理器逻辑，可以让用户方便的自定义 和 拆分 处理逻辑。并且支持一个文件转换成多个文件的机制。

**具有以下特性：**  
- 批量处理文件
- 链式的自定义处理逻辑，方便自定义 和 拆分处理逻辑
- 带有命令行工具，并且支持配置文件
- 支持一个文件转换成多个文件的机制
- 支持异步转换
- 支持 JSAPI 调用

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/file-conver>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- QQ：guobinyong@qq.com
- 微信：keyanzhe





# 3. 安装方式
通过 npm （或 yarn、pnpm 等包管理器）安装
```
npm install @gby/convers
```


# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/deep-copy
Description: deep-copy 深拷贝，可对任意数据进行深度拷贝，包括 函数 function、正则 RegExp、Map、Set、Date、Array、URL 等等；支持含循环引用对象的拷贝，并且不会丢失成员的引用关系 和 类型信息，支持扩展，可根据数据类型定制拷贝逻辑，也可指定拷贝深度；所以，通过它可实现对任意类型的数据进行任意想要的拷贝
Author: 郭斌勇
Latest version: 4.0.0

[教程]: ./docs/教程.md
[API接口文档]: ./docs/API.md

[GitHub仓库]: https://github.com/GuoBinyong/deep-copy
[发行地址]: https://github.com/GuoBinyong/deep-copy/releases
[issues]: https://github.com/GuoBinyong/deep-copy/issues

[码云仓库]: https://gitee.com/guobinyong/deep-copy



[循环引用]: ./docs/assets/循环引用.svg

目录
=========

<!-- TOC -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
    - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
    - [3.2. 方式2：直接下载原代码](#32-方式2直接下载原代码)
    - [3.3. 方式3：通过`<script>`标签引入](#33-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /TOC -->


内容
=====



# 1. 背景
开发中，经常需要对一个对象进行深拷贝操作，目前经常用到的深拷贝的方式有以下几种：
- 将对象序列化成 JSON 字符串后，再反序化成对象 `let copy = JSON.parse(JSON.stringify(value))`
- 第三方库提供的深拷贝工具，如 Lodash 的 `_.cloneDeep(value)` 和 `_.cloneDeepWith(value, customizer)`

但这些方法有以下缺点：
- 不支持对象成员循环引用，比如下面这种：
   ![循环引用][]
- 拷贝后会丢失类型信息，变成了普通的对象
- 拷贝后会丢失成员引用关系信息
- 不能根据类型自定义拷贝规则
- 只能拷贝可枚举的属性
- 不能拷贝函数
- 不能指定拷贝深度


为了解决这些问题，**deep-copy** 就出现了👏




# 2. 简介
deep-copy 是一个深拷贝工具，可对任意数据进行深度拷贝，包括 函数 function、正则 RegExp、Map、Set、Date、Array、URL 等等；支持含循环引用关系的对象的拷贝，并且不会丢失成员的引用关系信息 和 类型信息，支持扩展，可根据数据类型定制拷贝逻辑，也可指定拷贝深度；所以，通过它可实现对任意类型的数据进行任意想要的拷贝；

**具有以下特性：**  
- 支持对象成员循环引用
- 拷贝后不会丢失类型信息 和 成员引用关系信息
- 可指定拷贝深度
- 即能拷贝可枚举的成员，也可拷贝不可枚举的成员
- 可拷贝函数
- 可根据类型自定义拷贝规则
- 支持预设拷贝规则
- 支持创建多个不同预设拷贝规则的拷贝函数

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/deep-copy>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- QQ：guobinyong@qq.com
- 微信：keyanzhe





# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
```
npm install @gby/deep-copy
```

## 3.2. 方式2：直接下载原代码
您可直接从项目的 [发行地址][] 下载 源码 或 构建后包文件；

您可以直接把 源码 或 构建后 的包拷贝到您的项目中去；然后使用如下代码在您的项目中引入 `deepCopy`：
```
import { deepCopy } from "path/to/package/deep-copy";
```
或者
```
import deepCopy from "path/to/package/deep-copy";
```



## 3.3. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 deep-copy：


1. 引用 deep-copy
   ```
   <script src="path/to/package/deep-copy.iife.js"></script>
   ```
   
2. 使用全局的 `deepCopy`
   ```
   <script>
   // 使用全局的 deepCopy
       const copy = deepCopy.deepCopy(value);
   </script>
   ```

# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/destroyable
Description: @gby/destroyable 提供了用于构建可销毁对象的类的基类，用于使得地管理可销毁对象的生命周期
Author: 郭斌勇
Latest version: 5.2.1

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/destroyable
[发行地址]: https://github.com/GuoBinyong/destroyable/releases
[issues]: https://github.com/GuoBinyong/destroyable/issues

[码云仓库]: https://gitee.com/guobinyong/destroyable



**目录**  

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /code_chunk_output -->


---------------------


# 1. 背景

# 2. 简介
库的简单介绍

**具有以下特性：**  
- 特性1
- 特性2
- 特性3

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/destroyable>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- 微信：keyanzhe





# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
通过 npm （或 yarn、pnpm 等包管理器）安装
```shell
npm install destroyable
```




## 3.2. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 destroyable：


1. 引用 destroyable
   ```html
   <script src="path/to/package/destroyable.iife.js"></script>
   ```
   
2. 使用全局的 `LibraryViteTemplate`
   ```html
   <script>
   // 使用全局的 LibraryViteTemplate
   </script>
   ```

# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/event
Description: @gby/event 称为 库构建模板，又称 公共代码构建模板 ，是专门用于构建 公共代码（如：封装的库、工具等） 的 vite 配置模板，当需要开发和构建公共代码时，直接克隆本项目即可，并默认在的 src 目录下开发即可；
Author: 郭斌勇
Latest version: 1.1.0

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/event
[发行地址]: https://github.com/GuoBinyong/event/releases
[issues]: https://github.com/GuoBinyong/event/issues

[码云仓库]: https://gitee.com/guobinyong/event



**目录**

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [背景](#背景)
- [简介](#简介)
- [安装](#安装)
  - [通过 npm 安装](#通过-npm-安装)
  - [通过 `<script>` 标签引入](#通过-script-标签引入)
- [快速上手](#快速上手)
- [教程](#教程)
- [API 文档](#api-文档)

<!-- /code_chunk_output -->


---------------------


# 背景

Web 提供了 `EventTarget`，Node.js 提供了 `EventEmitter`，但两者行为不一致，无法跨平台复用。此外，实际开发中常需要根据监听器数量来决定是否开启某些计算（如数据订阅、动画循环），而现有方案都不提供开箱即用的监听器计数事件。

`@gby/event` 提供了一套统一、轻量的事件 API，解决上述两个问题。

# 简介

`@gby/event` 是一个跨平台的事件库，核心导出两个类：

- **`EventTrigger`** — 基础事件发射器
- **`CountEventTrigger`** — 在 `EventTrigger` 基础上，额外提供监听器计数变化事件

**特性：**
- 自动去重：同一函数引用对同一事件只注册一次，避免重复触发
- AbortSignal 支持：监听器可随 `AbortController` 的中止自动解绑
- 有限次数监听：`addListenerWithTimes` 到达指定次数后自动移除
- 监听器计数事件：`CountEventTrigger.countChangeEvents` 可订阅任意事件的监听器增减
- 异常隔离：`ignoreError` 为 `true` 时，单个监听器抛出异常不影响后续监听器执行
- 完整 TypeScript 类型支持，事件参数类型安全

**详情请看：**
- 主页：<https://github.com/GuoBinyong/event>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- 微信：keyanzhe




# 安装

## 通过 npm 安装

```shell
npm install @gby/event
```

## 通过 `<script>` 标签引入

从 [发行地址][] 下载以 `.iife.js` 为后缀的文件，然后在页面中引入：

```html
<script src="path/to/event.iife.js"></script>
<script>
  const { EventTrigger, CountEventTrigger } = GbyEvent;
</script>
```

# 快速上手

```ts
import { EventTrigger } from '@gby/event';

type MyEvents = {
  greet: [name: string];
  ping:  [];
};

const et = new EventTrigger<MyEvents>();

// 添加监听器
const remove = et.addListener('greet', (name) => {
  console.log(`Hello, ${name}!`);
});

et.emit('greet', 'Alice'); // Hello, Alice!

// 移除监听器
remove();
et.emit('greet', 'Bob');   // 不再触发
```

# 教程

详情跳转至 [教程][]

# API 文档

详情跳转至 [API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/event-bus
Description: event-bus 是基于原生 EventTarget 类来开发的事件总线，无依赖（零依赖），充分复用原生的能力增加了易用性。拥有极少的代码就实现了 EventBus 的核心功能，而且还具备精确且完善的 TypeScript 类型系统
Author: 郭斌勇
Latest version: 1.3.0

[git仓库]: https://github.com/GuoBinyong/event-bus
[发行地址]: https://github.com/GuoBinyong/event-bus/releases
[issues]: https://github.com/GuoBinyong/event-bus/issues

[码云仓库]: https://gitee.com/guobinyong/event-bus


[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md



**目录：**  

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /code_chunk_output -->

---------------

# 1. 背景
npm 上有很多事件总线的库，它们基本上都有以下特点 和 缺点：
- 没有继承任何已有的类，都是重新实现的；（没有发挥 `EventTarget` 的功能）
- 自己单独维护了事件和监听函数的映射关系；（多此一举，执行效率不高）
- 监听事件 和 触发事件的方法与 Dom 中的 `EventTarget` 不一致。（增加学习成本）
- 没有完善的类型提示：不能针对不同的事件提示更加精确的数据数据类型

其实 `EventTarget` 完全可以胜任事件总结的任务，`window` 也是一个较理想的事件总线实例。只是从理想的角度出发，他们还有以下小小的不足之处：
- 缺乏更丰富的 和 便捷的 添加事件的 API，如： 一次性监听方法 `onceListen()` 等。
- 没有事件类型提示：不能针对不同的事件提示更加精确的数据数据类型
- 派发事件时，需要手动配置 `Event` 对象的某些属性，如：`{bubbles: false,cancelable: true,composed: false}`
- `window` 上会经常触发很多不相关的事件，这会增加事件检索成本

鉴于以上原因，该库就诞生了。


# 2. 简介
event-bus 是基于原生 EventTarget 类来开发的事件总线，无依赖（零依赖），充分复用原生的能力增加了易用性。拥有极少的代码就实现了 EventBus 的核心功能，而且还具备精确且完善的 TypeScript 类型系统。


**具有以下特性：**  
- 基于 `EventTarget` 实现，拥有极少量的代码 和 极高的性能
- 拥有丰富、易用的 API，如：一次性监听、指定次数的监听 等等
- 派发事件时，自动配置 Event 相关属性为合适的值
- 完善的类型系统，能自动根据事件名字来推导出 event 的类型


**详情请看：**  
- 主页：<https://github.com/GuoBinyong/event-bus>
- [GitHub仓库][git仓库]
- [码云仓库][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- 微信：keyanzhe

# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
```shell
npm install @gby/event-bus
```


## 3.2. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为后缀的文件，然后使用如下代码引用 和 使用 event-bus：


1. 引用 event-bus
   ```html
   <script src="path/to/package/event-bus.iife.js"></script>
   ```
   
2. 使用全局的 `EventBus`
   ```html
   <script>
   // 使用全局的 EventBus
       const eBus = new EventBus();
   </script>
   ```


# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]
npm package: @gby/markdown-it-import
Description: markdown-it-import 是一个可让 markdown-it 支持导入 import 功能的插件，兼容 VitePress、VuePress，可扩展、可自定导入语法，超级可配置，默认使用 Markdown Preview Enhanced 的导入语法
Author: 郭斌勇
Latest version: 1.0.0

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/markdown-it-import
[发行地址]: https://github.com/GuoBinyong/markdown-it-import/releases
[issues]: https://github.com/GuoBinyong/markdown-it-import/issues

[码云仓库]: https://gitee.com/guobinyong/markdown-it-import

[markdown-it]: https://markdown-it.github.io/markdown-it

[Markdown Preview Enhanced]: https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/file-imports

[VitePress]: https://vitepress.dev/

[VuePress]: https://vuepress.vuejs.org/

**目录**  

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /code_chunk_output -->


---------------------


# 1. 背景
假如你想在自己的所有文章下面都加上一段个人简介，而个人简介的内容都是相同的，一种方案是复制粘贴！但如果后来你更新的个人简介，你就需要在去更新每个文档！

更好的方案是：个人简介单独写在一个文档中，假设文档的路径是 `片段/个人简介.md`，每篇文章只需要导入该文档，如：
`@import "片段/个人简介.md"` Markdown 渲染引擎就会自动内联该文档的内容；当我们需要更新 个人简介 时，只需在 `片段/个人简介.md` 这个文档中更新一次即可，其它导入该文档的文档都会自动更新！

若要实现这个方案，就需要对 Markdown 的语法进行扩展！所以，本插件诞生了！
# 2. 简介 
本库是 [markdown-it][]  的一个插件，专门用于扩展 markdown-it 导入语法，它有以下特性：

**具有以下特性：**  
- 导入文件时支持定义选项
- 可以完全自定义导入语法，实现自己的导入规则
- 对于 `.md` 格式的文件可以选择是导入为代码块，还是内联
- 默认实现了 [Markdown Preview Enhanced 的导入语法][]
- 兼容 [VitePress][] 和 [VuePress][]
- TypeScript 编写


**详情请看：**  
- 主页：<https://github.com/GuoBinyong/markdown-it-import>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- 微信：keyanzhe





# 3. 安装方式
::: code-group

```shell
npm install --save-dev @gby/markdown-it-import
```

```shell
pnpm add -D @gby/markdown-it-import
```
:::


# 4. 教程
详情跳转至[教程][]

## markdown-it

```ts
import MarkdownIt from "markdown-it"
import importPlugin from "../dist/markdown-it-import.mjs";

const md = new MarkdownIt();

md.use(importPlugin);

```
也可以传递一个选项
```ts
// 也可以给插件传递一些选项
md.use(importPlugin,{
    /**
     * 导入信息的获取函数
     * @defaultValue 支持vitePress 路径的 getInfo_MPE ，Markdown Preview Enhanced 导入信息获取函数选项的函数
     */
    getInfo?:function(lineText:string,state:State, startLine: number, endLine: number, silent: boolean){
      // 自定义导入语法的解析
      return {
         // 配置相应的参数
      }
    };
    /**
     * 当导入的文件是 md 文件时，是否总是包含 md 文件，而不是渲染为代码块
     * 
     * @defaultValue true
     */
    includeMD:true;
});
```



## VitePress
在VitePress的配置中添加以下配置
```js
import {importPlugin} from "@gby/markdown-it-import"

export default {
  markdown:{
    config:(md)=>{
      md.use(importPlugin)
    }
  }
}
```

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/task-pool
Description: task-pool 提供了任务池的功能，可控制任务的并发；即便于独立使用，又便于管理已有的任务业务
Author: 郭斌勇
Latest version: 1.0.2

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/task-pool
[发行地址]: https://github.com/GuoBinyong/task-pool/releases
[issues]: https://github.com/GuoBinyong/task-pool/issues

[码云仓库]: https://gitee.com/guobinyong/task-pool



> 目录

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)



# 1. 背景

# 2. 简介
库的简单介绍

**具有以下特性：**  
- 特性1
- 特性2
- 特性3

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/task-pool>
- [GitHub仓库][]
- [码云仓库][]
- [教程][]
- [API接口文档][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- QQ：guobinyong@qq.com
- 微信：keyanzhe





# 3. 安装方式
目前，安装方式有以下几种：


## 3.1. 方式1：通过 npm 安装
```
npm install task-pool
```




## 3.2. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 task-pool：


1. 引用 task-pool
   ```
   <script src="path/to/package/task-pool.iife.js"></script>
   ```
   
2. 使用全局的 `task-pool`
   ```
   <script>
   // 使用全局的 task-pool
   </script>
   ```

# 4. 教程
详情跳转至[教程][]

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gby/uniqueid
Description: uniqueid 无任何依赖，提供了获取唯一标识相关的工具，比如：UUID、UCID、Fingerprint、浏览器指纹、唯一标识符 等等
Author: 郭斌勇
Latest version: 1.2.0

[GitHub仓库]: https://github.com/GuoBinyong/uniqueid
[发行地址]: https://github.com/GuoBinyong/uniqueid/releases
[issues]: https://github.com/GuoBinyong/uniqueid/issues

[码云仓库]: https://gitee.com/guobinyong/uniqueid



目录
=========

<!-- TOC -->

- [1. 简介](#1-简介)
- [2. 安装方式](#2-安装方式)
    - [2.1. 方式1：通过 npm 安装](#21-方式1通过-npm-安装)
    - [2.2. 方式2：直接下载原代码](#22-方式2直接下载原代码)
    - [2.3. 方式3：通过`<script>`标签引入](#23-方式3通过script标签引入)
- [3. API接口](#3-api接口)

<!-- /TOC -->


内容
=====



# 1. 简介
uniqueid 无任何依赖，提供了获取唯一标识相关的工具，比如：UUID、UCID、Fingerprint、浏览器指纹、唯一标识符 等等。

之所以要重复造这个轮子，是因为网上找的其它浏览器指纹库会在浏览器启动前期每次刷新会得到不同的指纹。


**具有以下功能：**  
- 获取浏览器指纹：即使在浏览器启动前期也非常稳定；之所以要重复造这个轮子，是因为网上找的其它浏览器指纹库会在浏览器启动前期每次刷新会得到不同的指纹。
- 获取 UUID、UCID
- 获取唯一字符串
- 等等

**详情请看：**  
- 主页：<https://github.com/GuoBinyong/uniqueid>
- [GitHub仓库][]
- [码云仓库][]


**如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：**
- 给该仓库提交 [issues][]
- 给我 Pull requests
- 邮箱：<guobinyong@qq.com>
- QQ：guobinyong@qq.com
- 微信：keyanzhe





# 2. 安装方式
目前，安装方式有以下几种：


## 2.1. 方式1：通过 npm 安装
```
npm install --save-prod @gby/uniqueid
```

## 2.2. 方式2：直接下载原代码
您可直接从项目的 [发行地址][] 下载 源码 或 构建后包文件；

您可以直接把 源码 或 构建后 的包拷贝到您的项目中去；然后使用如下代码在您的项目中引入 `uniqueid`：
```
import { getUUID,getUCID } from "path/to/package/uniqueid";
```




## 2.3. 方式3：通过`<script>`标签引入
您可直接从项目的 [发行地址][] 中下载以 `.iife.js` 作为缀的文件，然后使用如下代码引用 和 使用 uniqueid：


1. 引用 uniqueid
   ```
   <script src="path/to/package/uniqueid.iife.js"></script>
   ```
   
2. 使用全局的 `uniqueid`
   ```
   <script>
   // 使用全局的 uniqueid
       const uuid = uniqueid.getUUID();
   </script>
   ```

# 3. API接口
+ `setKeyPrefix(keyPrefix:string)`：设置 用于存储 id 的 key 的前缀
+ `getUUID():string`: 获取 UUID 通用唯一识别码，用于标识浏览器，对于不同电脑实体的不同浏览器 会有不同的值
+ `setUUID(id:string)`：设置 UUID
+ `getUCID():string`：获取 UCID，如果不重置，则对于每个浏览器中的同一个域名，每次获取的值都一样
+ `setUCID(id:string)`：设置 UCID
+ `createUniqueIdentifier():string`：生成唯一的标识符，每次调用生成的都不一样
+ `getCanvasFingerprint():string`：获取浏览器的Canvas指纹，用来标识设备上的浏览器，理论上，对于 不同计算机实体的不同浏览器会生成不同的指纹标识
+ `murmurhash3_32_gc(key:string):number`：MurmurHash3 算法





--------------------

> 有您的支持，我会在开源的道路上，越走越远

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)
npm package: @gc-julien/vue-wysiwyg-improved-html
Description: An improvement of the classic WYSIWYG HTML editor for Vue.js
Author: Gregory
Latest version: 1.7.17

Forked from [vue-wysiwyg](https://github.com/chmln/vue-wysiwyg)

[![](https://user-images.githubusercontent.com/11352152/30252159-1bbb9cfe-963b-11e7-966c-b44116c74a86.png)](https://chmln.github.io/vue-wysiwyg/)


## Usage
Works in IE11 (no, really, it does).

### Install vue-wysiwyg

``` bash
npm install vue-wysiwyg --save
```
OR

``` bash
yarn add vue-wysiwyg
```

In your `main.js`:

```js
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {}); // config is optional. more below
```

Also make sure to load the stylesheet.
The exact syntax will depend on what preprocessor you use.

```css
@import "~vue-wysiwyg/dist/vueWysiwyg.css";
```

In your components:
```html
<wysiwyg v-model="myHTML" />
```

## Config options

All keys are optional.

```js
{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px",

  // set to 'true' this will insert plain text without styling when you paste something into the editor.
  forcePlainTextOnPaste: true,

  // forces HTML on paste
  forceHtmlOnPaste: true,

  //sanitize-html options
  htmlSanitizeOptions: {},

  // if true, clears selection every time an action is issued
  clearSelection: false
}
```
Available Modules:
 - bold
 - italic
 - underline
 - justifyLeft
 - justifyCenter
 - justifyRight
 - headings
 - link
 - code
 - orderedList
 - unorderedList
 - image
 - table
 - removeFormat
 - separator

Note on the image upload API endpoint:
- Image is uploaded by `multipart/form-data`
- Your endpoint must respond back with a string, the URL for the image - e.g. `http://myapp.com/images/12345.jpg`