open-index/open-npm huggingface dataset:
npm package: @mxmweb/zui-elements
Description: 一个用于快速初始化项目的工具库，提供了一系列常用的工具函数和组件。
Author: hanfeng_Zhang
Latest version: 1.2.6

# @mxmweb工具库开发环境说明文档

一个用于快速初始化项目的工具库，提供了一系列常用的工具函数和组件。

## 特性

- 🚀 快速初始化项目
- 📦 自动配置开发环境
- 🛠 提供常用工具函数
- 🎨 内置 UI 组件
- 📝 TypeScript 支持
- 🔧 可配置性强



## 开发指南

### 环境要求

- Node.js >= 18
- pnpm >= 8

### 本地开发

1. 克隆仓库
```bash
git clone https://github.com/your-username/mxmweb.git
cd mxmweb/apps/init
```

2. 安装依赖
```bash
pnpm install
```

3. 启动开发服务器
```bash
pnpm dev  启动全部工程
pnpm --filter @mxmweb/fileviewer dev   启动指定开发工程
```

### 构建

```bash
pnpm build
```

### 代码规范

- 使用 TypeScript 编写代码
- 遵循 ESLint 和 Prettier 配置
- 使用 EditorConfig 保持一致的代码风格
- 编写清晰的提交信息，遵循 [Conventional Commits](https://www.conventionalcommits.org/)

### 提交规范

提交信息应该遵循以下格式：

```
<type>(<scope>): <subject>

<body>

<footer>
```

类型（type）：
- feat: 新功能
- fix: 修复
- docs: 文档
- style: 格式
- refactor: 重构
- test: 测试
- chore: 构建过程或辅助工具的变动

### 发布流程

1. 确保代码已经提交并推送到 main 分支
2. 运行发布命令：
```bash
pnpm release
```

3. 或者使用预发布测试：
```bash
pnpm release:dry
```

### GitHub Actions 配置

1. 在 GitHub 仓库设置中添加以下 Secrets：
   - `NPM_TOKEN`: npm 发布令牌
   - `GITHUB_TOKEN`: GitHub 令牌（自动提供）

2. 确保仓库设置中启用了 Actions：
   - 进入仓库的 Settings > Actions > General
   - 在 "Actions permissions" 中选择 "Allow all actions and reusable workflows"

3. 推送代码到 main 分支，Actions 将自动运行：
   - 安装依赖
   - 构建项目
   - 运行测试
   - 发布到 npm
   - 创建 GitHub Release
   - 更新 CHANGELOG.md

## 目录结构

```
src/
├── application/     # 应用入口
├── components/      # UI 组件
├── hooks/          # React Hooks
├── utils/          # 工具函数
└── types/          # 类型定义
```

## 贡献指南

欢迎提交 Pull Request 或创建 Issue。在提交代码前，请确保：

1. 代码符合项目规范
2. 添加了必要的测试
3. 更新了相关文档
4. 提交信息符合规范

## 许可证

MIT
npm package: @mxmweb/zui-icons
Description: 基于 Vite + SVGR 的图标库，支持组件化渲染与懒加载索引。
Author: hanfeng_Zhang
Latest version: 1.2.13

# @mxmweb/zui-icons

基于 Vite + SVGR 的图标库，支持组件化渲染与懒加载索引。

## 安装

请在宿主项目安装 peer 依赖（版本以你的平台统一为准）：

```bash
# pnpm（推荐）
pnpm add @mxmweb/zui-icons react react-dom

# 或 yarn
# yarn add @mxmweb/zui-icons react react-dom

# 或 npm
# npm i @mxmweb/zui-icons react react-dom
```

> 注意：本包把 `react`、`react-dom` 作为 peerDependencies，不会被打包进来。

## 使用

- Icon 组件（按路径渲染）

```tsx
import { Icon } from '@mxmweb/zui-icons';

export default () => (
  <div>
    <Icon type="rag/pdf" width={24} height={24} />
  </div>
);
```

- Icons 索引对象（一次性加载，适用于构建期确定场景）

```tsx
import { Icons } from '@mxmweb/zui-icons';

const Pdf = (Icons as any).rag?.pdf;

export default () => (Pdf ? <Pdf width={24} height={24} /> : null);
```

- LazyIcons 懒加载索引（按需异步加载，首屏更轻）

```tsx
import { LazyIcons } from '@mxmweb/zui-icons';

const Pdf = (LazyIcons as any).rag?.pdf;

export default () => (
  <React.Suspense fallback={null}>
    {Pdf ? <Pdf width={24} height={24} /> : null}
  </React.Suspense>
);
```

## 目录与命名

- 放置于 `src/**/xxx.svg` 的图标，会被自动收录为 `Icons.<目录>.<文件名>`，并可通过 `<Icon type="目录/文件名" />` 渲染。
- 例如：`src/rag/pdf.svg` → `Icons.rag.pdf` / `<Icon type="rag/pdf" />`

## 本地开发

```bash
# 安装依赖（在 monorepo 根执行）
pnpm i

# 启动示例（在本包目录）
pnpm -C ui/zui-icons run dev
```

## 发布说明

- 构建产物默认外部化 `react`、`react-dom` 等，不会内联第三方依赖。
- `dist/package.json` 会声明 `peerDependencies`，请确保宿主项目已安装对应版本。
npm package: @mxmweb/zui-theme
Description: 一个用于快速初始化项目的工具库，提供了一系列常用的工具函数和组件。
Author: hanfeng_Zhang
Latest version: 2.2.0

# @mxmweb工具库开发环境说明文档

一个用于快速初始化项目的工具库，提供了一系列常用的工具函数和组件。

## 特性

- 🚀 快速初始化项目
- 📦 自动配置开发环境
- 🛠 提供常用工具函数
- 🎨 内置 UI 组件
- 📝 TypeScript 支持
- 🔧 可配置性强



## 开发指南

### 环境要求

- Node.js >= 18
- pnpm >= 8

### 本地开发

1. 克隆仓库
```bash
git clone https://github.com/your-username/mxmweb.git
cd mxmweb/apps/init
```

2. 安装依赖
```bash
pnpm install
```

3. 启动开发服务器
```bash
pnpm dev  启动全部工程
pnpm --filter @mxmweb/fileviewer dev   启动指定开发工程
```

### 构建

```bash
pnpm build
```

### 代码规范

- 使用 TypeScript 编写代码
- 遵循 ESLint 和 Prettier 配置
- 使用 EditorConfig 保持一致的代码风格
- 编写清晰的提交信息，遵循 [Conventional Commits](https://www.conventionalcommits.org/)

### 提交规范

提交信息应该遵循以下格式：

```
<type>(<scope>): <subject>

<body>

<footer>
```

类型（type）：
- feat: 新功能
- fix: 修复
- docs: 文档
- style: 格式
- refactor: 重构
- test: 测试
- chore: 构建过程或辅助工具的变动

### 发布流程

1. 确保代码已经提交并推送到 main 分支
2. 运行发布命令：
```bash
pnpm release
```

3. 或者使用预发布测试：
```bash
pnpm release:dry
```

### GitHub Actions 配置

1. 在 GitHub 仓库设置中添加以下 Secrets：
   - `NPM_TOKEN`: npm 发布令牌
   - `GITHUB_TOKEN`: GitHub 令牌（自动提供）

2. 确保仓库设置中启用了 Actions：
   - 进入仓库的 Settings > Actions > General
   - 在 "Actions permissions" 中选择 "Allow all actions and reusable workflows"

3. 推送代码到 main 分支，Actions 将自动运行：
   - 安装依赖
   - 构建项目
   - 运行测试
   - 发布到 npm
   - 创建 GitHub Release
   - 更新 CHANGELOG.md

## 目录结构

```
src/
├── application/     # 应用入口
├── components/      # UI 组件
├── hooks/          # React Hooks
├── utils/          # 工具函数
└── types/          # 类型定义
```

## 贡献指南

欢迎提交 Pull Request 或创建 Issue。在提交代码前，请确保：

1. 代码符合项目规范
2. 添加了必要的测试
3. 更新了相关文档
4. 提交信息符合规范

## 许可证

MIT
npm package: @mxnet/build
Description: build vue,react app
Author: hooks_28
Latest version: 0.6.6

<!--
 * @Author: 邱狮杰
 * @Date: 2022-05-10 23:05:45
 * @LastEditTime: 2022-08-20 22:05:16
 * @Description:
 * @FilePath: /repo/packages/build/README.md
-->

# `@mxnet/build`

> description

脚手架的基础建设 与 `vite` 结合

## Usage

```typescript
import { ViteConfiguration } from "@mxnet/build";
// ViteConfiguration 是一切配置的开始

// 我们应该考虑清楚我们的 project run 在哪个场景？ mobile ? pc ?
const config = new ViteConfiguration().setScenes("mobile"); // 设置场景

// 考虑技术选型

// 第一个参数是技术栈名称,第二个参数则会根据场景提示相应的配置，可忽略,忽略则注入 mobile 下 vue 的默认配置 , 可以 default:false 拒绝注入
config.setTechnologyStack("vue", { default: false });

// 导出配置传递给vite
config.getConfig();
```

```typescript
// 构建一个 基础的 mobile vue vite config
import { ViteConfiguration } from "@mxnet/build";
const config = new ViteConfiguration()
  .setScenes("mobile")
  .setTechnologyStack<"vue", "mobile">("vue", { default: false })
  .getConfig({} /* vite config */);
```

## 全局默认配置

- 默认路径别名 `~/`

```typescript
import {} from '~/assets/
```

## `mobile` 下的默认配置

### `vue` and `react`

- `postcss-px-to-viewport` : `px` 转 `vw` `postcss` 插件 默认开启，可以关闭可配置

```typescript
// 禁用 postcss-px-to-viewport
const config = new ViteConfiguration()
  .setScenes("mobile")
  .setTechnologyStack<"vue", "mobile">("vue", { postcssPxToViewport: false });
// 配置 postcss-px-to-viewport
const config = new ViteConfiguration()
  .setScenes("mobile")
  .setTechnologyStack<"vue", "mobile">("vue", { postcssPxToViewport: {} });
```

## more

### vconsole

- tips: 默认不开启`vconsole`, 你也可以通过配置修改。[更多配置见](https://github.com/vadxq/vite-plugin-vconsole#options)

```ts
const viteConfig = new ViteConfiguration()
  .setScenes("mobile")
  .setTechnologyStack("vue")
  .addVConsole()
  .getConfig({});
```

```ts
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    return new ViteConfiguration().setScenes('mobile').setTechnologyStack('vue').addVConsole({
        entry: [path.resolve('src/main.ts')],
        localEnabled: command === 'serve',
        enabled: command !== 'serve' || mode === 'test',
        config: { // vconsole options
          maxLogNumber: 1000，
          theme: 'light'
        }
    }).getConfig({
    })
};
```

### auto import api

- [选项参考](https://github.com/antfu/unplugin-auto-import)

- `addAutoImport(options?) api` 会根据技术栈 `setTechnologyStack api` 自动生成对应的`.d.ts`文件

- 技术栈 `vue` 会默认生成 `vue pinia vue-router .d.ts`文件

- 技术栈 `react` 会默认生成 `react .d.ts`文件

```ts
const config = new ViteConfiguration()
  .setScenes("mobile")
  .setTechnologyStack("vue")
  .addAutoImport()
  .getConfig() as UserConfig;
```

### addRouteLazyLoading

> 此选项只对 `vue` 生效,且在类型上做了限制,在技术栈设置为 `react` 时候此选项不会被提醒,类型检查期间会报错

```ts
/**
 * @desc 定义vue路由分块, useage see link
 * @see https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-vite
 */
new ViteConfiguration().setTechnologyStack("vue").addRouteLazyLoading({});
```

## Plugin
npm package: @mxnet/generatewechatpage
Description: 生成微信小程序页面
Author: hooks_28
Latest version: 0.1.3

<!--
 * @Author: 邱狮杰
 * @Date: 2022-08-05 22:24:30
 * @LastEditTime: 2022-08-13 17:02:20
 * @Description:
 * @FilePath: /repo/script/generateWeChatPage/README.md
-->

# `generateWeChatPage`

> 自动生成小程序页面 路由 `components` 和 `hooks` 文件夹

## Usage

### parameters

```ts
export interface pagesConfig {
  // 生成路由 true
  generateRoute?: boolean;
  // 生成 components 文件夹 默认 true
  generateComponents?: boolean;
  // 生成 hooks 文件夹 默认 true
  generateHooks?: boolean;
  path: string;
}

// 生成文件的基本配置
export interface generateWeChatPageReadOptions {
  // 定义 generateWeChat 函数文件的位置  用于获取绝对路径 后续方便获取 rootDir, pagesConfigPath,routerFilePath,routeVariableName 的绝对路径
  defineGenerateWeChatPagePath: string;
  pages: string[] | pagesConfig[];
  rootDir: string;
  // 路由文件地址
  routerFilePath?: string;
  // 路由变量名
  routeVariableName?: string;
  // pages 配置文件路径
  pagesConfigPath: string;
  // 模版文件路径
  templateFilePath?: string;
  // 替换index内容处理函数 ,data 为 templateFilePath 文件内容
  replaceHandler?: (data: string) => string;
}
```

### cjs

```ts
const { generateWeChatPage } = require("@mxnet/generateWeChatPage");
```

### esm

```ts
import { generateWeChatPage } from "@mxnet/generateWeChatPage";
import { resolve } from "path";

generateWeChatPage({
  defineGenerateWeChatPagePath: resolve(__dirname),
  pages: [
    {
      path: "/index/index/index",
      generateComponents: true,
      generateHooks: true,
      generateRoute: false,
    },
    // 默认创建 路由 hooks components
    "/work/index",
  ],
  rootDir: "pages",
  // 自动补全 app.config.ts 中 pages 字段
  pagesConfigPath: "pages/config.ts",
  // 自动生成路由
  routerFilePath: "hooks/router.ts",
});
```

![result](/script/generateWeChatPage/result.png)
npm package: @mxnet/imagetransition
Description: image,vue,typescript,transition
Author: hooks_28
Latest version: 0.1.4

<!--
 * @Author: 邱狮杰
 * @Date: 2022-09-12 22:09:41
 * @LastEditTime: 2022-09-17 14:34:39
 * @Description:
 * @FilePath: /repo/packages/imageTransition/README.md
-->

# `@mxnet/imageTransition`

> 图片过渡动画，启发来自 [你的图片加载，一点都不酷炫！不信 You Look Look...](https://juejin.cn/post/7122256732940107813)

## Usage

```ts
import { ImageTransitionAnimationPlugin } from "@mxnet/imagetransition";

import { createApp } from "vue";

const app = createApp(App);
// 注册全局组件 ImgWrapper 和 imgTs 指令
app.use(ImageTransitionAnimationPlugin);
```

```html
<img src="" v-imgTs="{def: src}" />
```

```html
<!-- src 预加载图片 classNames 注意s  def 占位图 -->
<ImgWrapper src="" classNames="" def="" />
```

## Principle

该指令会生成一个 `img` 元素在 指令元素后方

并且替换当前元素 `src` 为 默认占位图片`(def)`

这时会立即去请求真实的图片资源

请求回来后会将当前元素隐藏

显示真实图片资源

期间会有一系列钩子调用

来完成这个过渡动画

## Precautions

- 被指令标记的 `img` 元素必须是一个脱离文档流的元素

- 必须搭配 `vite-plugin-img-reload` 使用

- 只在 `img` 标签才生效

- `options`

```ts
interface ImageTransitionAnimationOptions {
  // 默认占位图片
  def: string;
}
```
npm package: @mxnet/style
Description: common style
Author: hooks_28
Latest version: 0.0.4

<!--
 * @Author: 邱狮杰
 * @Date: 2022-06-10 21:51:06
 * @LastEditTime: 2022-06-12 11:49:27
 * @Description: 
 * @FilePath: /repo/packages/style/README.md
-->
# `style`

> 常用效果

## Usage

```ts
// 默认导入
// 常用的居中样式
// 通过 * 匹配符影响全局的样式(小程序不支持*匹配符,会导致报错)
import '@mxnet/style'
```
##  测试开发

```ts
import '@mxnet/style/src/test.css'
```

预览效果见`/__tests__/test.html`

```html
    <div class="test_Notification">开发中...</div>
```


## 文本溢出


```ts
import '@mxnet/style/src/overflowOmitted.css'
```

预览效果见`/__tests__/overflowOmitted.html`

- `lineOver` 当行省略,行内元素无效，无`width`属性无效 

- `moreLineOver_${line}` 多行省略,行内元素无效，无`width`属性无效 

```html
<!-- 溢出省略两行 -->
<div class='moreLineOver_2' style='width: 50vw'></div>
<!-- 溢出省略三行 -->
<div class='moreLineOver_3' style='width: 50vw'></div>
```

## 居中

```ts
import '@mxnet/style/src/drama.css'
```

预览效果见`/__tests__/drama.html`

- `flex-cr` 绝对居中更适用于父元素只包裹一个元素的情况下

- `flex_Ycr` 子元素Y轴居中

- `pos-cr` 基于父元素绝对居中

- `pos-Xcr` 基于父元素水平居中

- `pos-Ycr` 基于父元素垂直居中

## 快照


- `shutter class`定义快照容器 

- `style="--flaps: 9"` 定义快照旋转片

- `shutter_flap` 定义快照单个旋转片

- `style="--i: 0"` 定义旋转片在容器的旋转角度

预览效果见`/__tests__/shutter.html`

```ts
import "@mxnet/style/src/shutter.css"
```

```html
    <div class="shutter" style="--flaps: 9">
        <div class="shutter_flap shutter_flap__start"  style="--i: 0"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 1"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 2"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 3"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 4"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 5"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 6"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 7"></div>
        <div class="shutter_flap shutter_flap__start"  style="--i: 8"></div>
    </div>
```
npm package: @mxnet/types
Description: types
Author: hooks_28
Latest version: 0.1.4

<!--
 * @Author: 邱狮杰
 * @Date: 2022-08-28 10:51:40
 * @LastEditTime: 2022-08-28 14:30:52
 * @Description:
 * @FilePath: /repo/packages/types/README.md
-->

# `types`

> 常用类型声明和类型测试

## Usage

```ts
import types from "@mxnet/types";
```

### Test

```ts
import { Extends, Expect, Equal, IsAny, IsFalse } from "@mxnet/types";
// 检查类型是否为 true, 不为 true 时 编译器会报错, 通常搭配 Equal 使用
type result = Expect<false>;

// Equal 接受两个泛型参数 返回 boolean 传入 Expect 泛型 由编译器检查类型
type result1 = Expect<Equal<string, boolean>>;

// IsAny 检查是否类型为 any
type s = IsAny<number>; // false
// 检查 类型 是否 互为子集
type s = Extends<son, father>; // boolean

// IsFalse 检查类型是否为 false
type s = IsFalse<false>; // true
```

### types

- `fn` 定义一个普通函数

  - `T` 定义函数返回值

```ts
export type fn<T = unknown> = (...args: any[]) => T;
// 泛型参数为函数的返回值
type f = fn<number>;
const a: f = () => {
  return 1;
};
```

- `promiseFn` 定义一个 `promise` 函数

  - `T` 定义函数返回值

```ts
export type promiseFn<T = unknown> = (...args: any[]) => Promise<T>;
// 泛型参数为函数的返回值
type f = promiseFn<number>;
const a: f = async () => {
  return 1;
};
```

- `nonNullFnParameter` 获取一个函数参数 且 绝对不为空值

  - `T` 传入函数

```ts
export type nonNullFnParameter<T extends (...args: any) => any> = NonNullable<
  Parameters<T>
>;
const a = (n: number, l: string) => {};
type s = nonNullFnParameter<typeof a>; // [n:number, l:string];

const l = (...k: s) => {};
l(1, "");
```

- `mergeFnWithPromiseFn` 普通函数和 `promise` 函数的交叉类型

  - `T` 函数返回值类型 **默认 `unknown`**

  - `P` . `ArrayLike`形式的函数参数 **默认(any)**

  - `isP` 是否返回 `Promise` 函数 , `true` 是 `false` 不是 , **默认 `undefined` 返回 普通函数和 `promise` 函数**

```ts
export type mergeFnWithPromiseFn<
  T = unknown,
  P extends any[] = any,
  isP extends boolean | undefined = undefined
> = isP extends undefined
  ? fn<T, P> | promiseFn<T, P>
  : isP extends true
  ? promiseFn<T, P>
  : fn<T, P>;

const f = (n: mergeFnWithPromiseFn<void, [], undefined>) => {};

f(async () => {}); // success

f(() => {}); // success

const f = (n: mergeFnWithPromiseFn<void, [], false>) => {};
f(() => {}); // success
f(async () => {}); // error , 这里需要的是一个 普通函数类型 类型
```

- `isPromiseFn` 需要一个泛型函数 判断是否为 `Promise` 函数 , 返回结果 `boolean`

  - `f` 传入函数

```ts
export type isPromiseFn<f extends mergeFnWithPromiseFn<any, any, undefined>> =  Equal<ReturnType<f>, Promise<any>>;

type s = isPromiseFn(() => {}); // false
type a = isPromiseFn(async () => {}) // false
```
npm package: @mxnet/wechatpublicaccounthelper
Description: weChat public account helper,实现公众号在本地开发的polyfill
Author: hooks_28
Latest version: 0.2.5

<!--
 * @Author: 邱狮杰
 * @Date: 2022-07-17 21:57:48
 * @LastEditTime: 2022-08-03 22:25:24
 * @Description:
 * @FilePath: /repo/packages/weChatPublicAccountHelper/README.md
-->

# `weChatPublicAccountHelper`

> TODO: description

## flow chart

每个 `api` 通过继承 `ApiImplementation` 获取读写 `api` 配置,`wechat SDK api` 常用回调封装

并通过 `api.done()` 来完成调用

期间会判断当前环境是否注入 `wechat sdk`

当 `wechat sdk` 不存在时

会调用 根据 `api polyfill` 的预期行为, 该预期行为属于无 `wechat sdk` 时模拟 `wechat sdk`的预期行为

预期行为会返回 `succces` 的预期参数 并 `call success callback`

当 `wechat sdk` 存在时

将会把 `api.readConfiguration({})` 获取的所有参数传递给 `wechat sdk`,你仍然可以通过`api.success(()=>{})`等回调跟踪 `wechat sdk` 的行为

## Usage

### cjs

```ts
const wechatpublicaccounthelper = require("weChatPublicAccountHelper");
```

### esm

```ts
import * as wechatpublicaccounthelper from "wechatpublicaccounthelper";
import { ChooseImage } from "wechatpublicaccounthelper";
```

### umd

```html
<script src="./dist.umd"></script>
<script>
  new weChatPublicAccountHelper.GetLocalImgData().done();
</script>
```

### common use

```html
<script src="./dist.umd"></script>
<script>
  // 配置 weChatPublicAccountHelper
  new weChatPublicAccountHelper.BasicConfiguration({
    // 该baseSrc会在无 wechat sdk 的情况下，在部分api success 参数需要 图片 url 链接 的情况下返回 (如 GetLocalImgData)
    baseSrc: "abd",
  });
  new weChatPublicAccountHelper.GetLocalImgData()
    .success((res) => {
      // 该 res 和 wechat sdk 返回的数据结构兼容
      console.log(res.localData === "abd");
    })
    .done();
</script>
```

```html
<script src="./dist.umd"></script>
<script>
  // 以下 api 代之 wechat sdk api
  new weChatPublicAccountHelper.api()
    // wechat sdk succscc callback
    .success(() => {})
    // wechat sdk fail callback
    .fail(() => {})
    // wechat sdk complete callback
    .complete(() => {})
    // wechat sdk cancel callback 此回调只在部分 api 中存在
    .cancel(() => {})
    // wechat sdk trigger callback 此回调只在部分 api 中存在
    .trigger(() => {})
    // 该函数的参数会传入 wechat sdk api 中
    .readConfiguration({})
    .done();
</script>
```
npm package: @mxpicture/http-status-codes
Description: Http Status Codes, publishing both CommonJS and ESM builds
Author: MXPicture
Latest version: 0.1.28

# http-status-codes-lib

Example Node library using TypeScript and Zod. Produces:

- CommonJS build at `dist/cjs`
- ESM build at `dist/esm`
- Type declarations at `dist/types`

Usage (after npm publish or local link):

ESM:

```js
import { StatusCodes } from "http-status-codes-lib";
```

CommonJS:

```js
const { StatusCodes } = require("http-status-codes-lib");
```

Build:

```bash
npm install
npm run build
```

## Setup husky

```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli husky commitizen cz-conventional-changelog husky
npx husky-init
npm i
npm run prepare
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
```
npm package: @mxreakit/i18n
Description: Utils for react translations.
Author: Maxence Guidez
Latest version: 0.1.6

# MxReaKit - I18n
Provides tools to easily implement or upgrade internationalization in a React project.
> WARN: This package is experimental and subject to frequent changes. It is not intended for public use.

---

## Table of Contents
- [How to install?](#how-to-install)
- [How to set up?](#how-to-set-up)
- [How to translate?](#how-to-translate)
- [How to change the language?](#how-to-change-the-language)

---

## How to install?
1. Go to the root of your project (where your package.json file is located).
2. Run `npm i @mxreakit/i18n`.

---

## How to set up?
1. Create your translations.
    ```js
    export const translations = {
        en: {
            'hello': 'Home',
            'about': 'About Us',
        },
        fr: {
            'hello': 'Accueil',
            'about': 'À propos',
        },
        es: {
            'hello': 'Inicio',
            'about': 'Sobre nosotros',
        }
    };
    ```
2. Wrap your app with `I18nProvider`.
    ```js
    import { createRoot } from 'react-dom/client';
    import { I18nProvider } from '@mxreakit/i18n';
    import { BrowserRouter, Routes, Route } from 'react-router-dom';
    import { translations } from '@/your/path/to/translations.ts';
    
    const App = () => (
      <I18nProvider translations={translations} defaultLanguage="fr">
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </BrowserRouter>
      </I18nProvider>
    );
    
    createRoot(document.getElementById('root')!).render(<App />);
    ```
3. Remember to link your translations to the `I18nProvider` and select a default language (English if not specified).


---

## How to translate?
1. You need to follow the [steps to set up](#how-to-set-up) the package
2. Import the `useI18n()` hook and use the `t()` ou `tc()` functions by passing key translation.
    ```js
    import { useI18n } from '@mxreakit/i18n';

    export const HomePage = () => {
        const { t } = useI18n();

        return (
            <section>
                <h1>{t('hello')}</h1>
                <p>{t('about')}</p>
            </section>
        );
    };
    ```

---

## How to change the language?
1. You need to follow the [steps to set up](#how-to-set-up) the package
2. Import the `useI18n()` hook and use the `setLanguage()` function by passing key language.
    ```js
    import { useI18n } from '@mxreakit/i18n';

    export const HomePage = () => {
        const { setLanguage  } = useI18n();

        return (
            <section>
                <button onClick={() => setLanguage('en')}>EN</button>
                <button onClick={() => setLanguage('fr')}>FR</button>
            </section>
        );
    };
    ```
npm package: @mxreakit/icons
Description: Utils for svg icons.
Author: Maxence Guidez
Latest version: 0.1.2

# MxReaKit - Icons
Provides tools to import SVG icons in a React project.
> WARN: This package is experimental and subject to frequent changes. It is not intended for public use.

---

## Table of Contents
- [How to install?](#how-to-install)
- [How to set up?](#how-to-set-up)
- [How to use?](#how-to-use)

---

## How to install?
1. Go to the root of your project (where your package.json file is located).
2. Run `npm i @mxreakit/icons`.

---

## How to set up?
No setup needed.

---

## How to use?
1. Import icons needed and use them as normal components (You can specify a variant).
    ```js
    import { IconInstagram, IconLinkedIn } from '@mxreakit/icons';

    export const HomePage = () => {
        return (
            <section>
                <IconInstagram variant="negative" />
                <IconLinkedIn className="h-10 w-10 text-primary hover:text-background" />
            </section>
        );
    };
    ```
npm package: @mxsir/image-tiny
Description: Compress Images
Author: mxismean
Latest version: 0.1.0

# NPM 插件：图片压缩（浏览器端本地压缩）

## NPM 🔗

[@mxsir/image-tiny](https://www.npmjs.com/package/@mxsir/image-tiny)

## 概述

这是一款图片压缩插件，不依赖网络、服务器，实现的是客户端压缩；

压缩率近似 TinyPng；

支持格式：png、jpg、gif

## 安装

```bash
yarn add @mxsir/image-tiny
```

## 插件导出方法

```javascript
/**
 * @description: 图像压缩
 * @param {File} file 原始 File 文件对象
 * @param {Number} quality 压缩质量，10-90，建议 80
 * @return {Promise<File>} 压缩过的 File 文件对象
 */
imageTiny(file, quality = 80){...}
```

## 使用方法

```javascript
import imageTiny from '@mxsir/image-tiny';

// compressedFile 就是压缩过的图片文件
const compressedFile = imageTiny(file, quality = 80)

```

## ❗️注意

**引入项目特殊配置：**

由于插件里使用了 `wasm` 文件，这个文件不会自动打包到你的项目里，所以要特殊处理一下，你项目的构建工具需要把这个 `wasm` 文件 copy 到你的项目的静态文件目录里。


- vite 或 rollup 可以使用 `rollup-plugin-copy` 这个插件进行静态文件拷贝；

- webpack 可以用 `copy-webpack-plugin` 这个插件进行静态文件拷贝；


这样你的项目打包之后，打包产物里就会有这个 wasm 文件了，插件才可以正常运行。

vite 例子：

vite.config.ts

```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import copy from 'rollup-plugin-copy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [{ src: 'node_modules/@mxsir/image-tiny/dist/pngtiny-custom.wasm', dest: 'public' }],
      verbose: true,
      hook: 'writeBundle',
    }),
  ],
  build: {
    sourcemap: false,
  },
});

```
npm package: @mxsir/image-tiny-node
Description: Compress Images
Author: mxismean
Latest version: 0.0.2

# NPM 插件：图片压缩（node端压缩）

## NPM 🔗

[@mxsir/image-tiny-node](https://www.npmjs.com/package/@mxsir/image-tiny-node)

## 概述

这是一款在 node 端使用的图片压缩插件；

压缩率近似 TinyPng；

支持格式：png、jpg、gif

## 安装

```bash
yarn add @mxsir/image-tiny-node
```

## 插件导出方法

```javascript
/**
 * @description: 图像压缩
 * @param {Buffer} buffer 图片二进制数据流
 * @param {Number} quality 压缩质量，10-90，建议 80
 * @return {Promise<Buffer>} 压缩过的图片二进制数据流
 */
imageTiny(buffer, quality = 80) {}
```

## 使用方法

```javascript
const imageTiny = require('@mxsir/image-tiny-node');

// compressedFileBuffer 就是压缩过的图片文件 buffer 数据
const compressedFileBuffer = imageTiny(buffer, quality = 80)

```
npm package: @mxssfd/bundle-cli
Description: bundle compress js
Author: dyh
Latest version: 5.0.6

# bundle-cli

主要实现了在非构建环境下，无需配置，只通过命令对 js 或 ts 文件进行打包、babel 转译、压缩、混淆等功能

使用 rollup 打包压缩 js，如果入口是 typescript 文件，那么会自动开启 ts 打包。

# 命令

```
-input/-i                      文件入口
-output/-o                     输出文件
-module/-m                     模块类型
-help/-h                       帮助
-terser/-t                     压缩
-babel/-b                      开启babel
-libraryName/-name             打包后的名字,默认是时间戳
-uglify/-u                     开启uglify
-uglifyDropDebugger/-udd       移除debugger,需开启uglify
-uglifyDropConsole/-udc        移除console,需开启uglify
-eval/-e                       eval parker混淆模式
```

## 安装

```
npm i -g @mxssfd/bundle-cli
```

## 使用

```
bundle-cli inputPath outputPath
```

如果输出文件名不填，则为输入文件名.min.js
或

```
bundle-cli -input path -output path
```

## 压缩

```
bundle-cli inputPath outputPath -terser
```

## babel

```
bundle-cli inputPath outputPath -babel
```

## uglify

```
bundle-cli inputPath outputPath -uglify
```

去除 debugger

```
bundle-cli inputPath outputPath -udd
```

去除 console

```
bundle-cli inputPath outputPath -udd
```

## eval

eval 混淆

```
bundle-cli inputPath outputPath -eval
```
npm package: @mxssfd/img-zoom
Description: 原生ts/js html图片缩放库
Author: dyh
Latest version: 1.2.7

# 点击img图片 缩放显示大图插件

兼容ie9及以上

## example
[example](https://codepen.io/mengxinssfd/pen/jOGOaKN)

## Installation(安装)

```shell
npm install @mxssfd/img-zoom
```
或者cdn方式
```html
<script src="https://cdn.jsdelivr.net/npm/@mxssfd/img-zoom@1.2.5/lib-umd/index.min.js"></script>
```

## Usage(使用方法)

```javascript
// 使用该方式需babel编译后才支持ie 或者 import ImgZoom form "@mxssfd/img-zoom/lib-umd"
// 如果项目已使用babel建议使用此方法
import ImgZoom from "@mxssfd/img-zoom";
new ImgZoom(options);
```

或者

```html

<script src="lib-umd/index.js"></script>
<script>
    new ImgZoom(options);
</script>
```

## Options and Defaults(参数与默认参数)

```typescript
interface scaleOption {
    max?: number,  // 最大缩放倍数
    min?: number, // 最小缩放倍数
    step?: number, // 滚轮滚动一次的缩放倍数
    default?: number, // 点开图片时显示的缩放倍数
}

// 默认scale
const defaultScale: scaleOption = {
    max: 10,
    min: 0.1,
    step: 0.1,
    default: 1,
};

interface options {
    triggerEl?: string | Array<string | HTMLElement> | NodeListOf<HTMLElement>, // 触发显示大图的img的class或元素
    isClickViewImgClose?: boolean  // 是否点击图片时关闭大图
    scale?: ScaleOption, // 缩放
    dataset?: string, // 非img标签触发事件上必须有dataset保存图片地址
}

// 默认options
const defaultOptions: Options = {
    triggerEl: ".img-zoom",
    isClickViewImgClose: false,
    dataset: "data-img-zoom",
};

// 等于
new ImgZoom({
    scale: {
        max: 10,
        min: 0.1,
        step: 0.1,
        default: 1,
    },
    triggerEl: "img-zoom",
    dataset: "data-img-zoom",
    isClickViewImgClose: false,
});
```
也可以手动设置大图
```js
const iz = new ImgZoom();
iz.setImg(imgUrl)
```
npm package: @mxssfd/resume-starter
Description: resume starter
Author: DYH
Latest version: 0.2.3

# resume-starter

简历模板

# 预览

[在线预览](https://mengxinssfd.github.io/resume-starter/)

## 网页预览

![](1.jpg)

## PDF 文件预览

生成的 PDF 文件是没有网页版那样有色彩的，投递的简历简历花里胡俏的可是减分项。

ps：pdf 是没有黑边的，截图的时候不小心截到了，懒得换了
![](2.jpg)

# 使用方法

## 使用项目

1. clone 该项目
2. 运行 `pnpm install` 安装依赖
3. 打开 [src/data.ts](./src/data.ts) 文件，在文件内按需填写自己的信息
4. 运行 `npm run start` 启动项目
   - 点击页面左上角的 `生成PDF` 按钮可生成 PDF 文件
5. 运行 `npm run build` 打包项目

## 使用组件包

该项目已发布到 npm，可直接使用该库 `@mxssfd/resume-starter`,
使用该方式只需直接写自己个人信息即可。

具体例子见 [demo](https://stackblitz.com/edit/vitejs-vite-ycwykt?file=src%2Fmain.tsx)

# 渊源

该简历模板最初版本不是我写的，是于 18年在 github 上找的模板，来源于 https://github.com/gwuhaolin/resume ，
不过现在好像仓库被删掉了。

该项目最初是 webpack + vue2 的结构，且当时只有一个 App.vue 文件，全部东西都集中在一起，
后来我就重构了一遍，把它拆分成各个组件，数据分离出来。

再然后就是改成 vue3 + vite，最后则是现在这版 react + vite 的结构。

该简历模板样式我也没怎么动，感觉这样式还是挺简洁好看的，不过最开始是两栏的，我感觉有点挤就只保留了一栏。
npm package: @mxssfd/typedoc-theme
Description: - demo   - [example](https://mengxinssfd.github.io/typedoc-theme/)   - [request-template](https://mengxinssfd.github.io/request-template/) - [example-code](https://github.com/mengxinssfd/typedoc-theme/tree/main/example)
Author: DYH
Latest version: 1.1.7

# @mxssfd/typedoc-theme

- demo
  - [example](https://mengxinssfd.github.io/typedoc-theme/)
  - [request-template](https://mengxinssfd.github.io/request-template/)
- [example-code](https://github.com/mengxinssfd/typedoc-theme/tree/main/example)


<img width="1440" alt="截屏2023-04-11 17 56 04" src="https://user-images.githubusercontent.com/28827520/231126819-e2535010-9872-46ef-ae72-18645717f2ff.png">
<img width="1440" alt="截屏2023-04-11 17 55 25" src="https://user-images.githubusercontent.com/28827520/231126914-84d132fb-074a-453b-8514-69ea705b4faa.png">
<img width="1440" alt="截屏2023-04-11 17 56 49" src="https://user-images.githubusercontent.com/28827520/231126521-7fdaeced-ee87-4015-8be6-45371c3f35fd.png">
<img width="1440" alt="截屏2023-04-11 17 57 06" src="https://user-images.githubusercontent.com/28827520/231126464-26b811d7-c8fc-4e49-b744-a2b7b931f1a5.png">

## Installation

```shell
npm install typedoc @mxssfd/typedoc-theme -D
```

## Usage

use script command

```shell
typedoc --plugin @mxssfd/typedoc-theme --theme my-theme
```

or

use `typedoc.json`

```json
{
  "$schema": "https://typedoc.org/schema.json",
  "plugin": ["@mxssfd/typedoc-theme"],
  "theme": "my-theme"
}
```