open-index/open-npm huggingface dataset:
npm package: @mlytvyn/node-red-contrib-internal-logger
Description: Advanced logger for Node-Red
Author: Max Lytvyn
Latest version: 0.1.2

# node-red-contrib-advanced-logger

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

> A Node-RED Logging module.

[`Advanced Logger`](https://www.npmjs.com/package/node-red-contrib-advanced-logger) provides logging controls for Node-Red logging. 
It was originlly forked from [`Advance Logger`](https://www.npmjs.com/package/node-red-contrib-advance-logger)

## Installation

Install `node-red-contrib-advanced-logger` using [npm](https://www.npmjs.com/)

```bash
npm install --save node-red-contrib-advanced-logger
```

## Features

* Log to File, Console and Node-Red Debug window
* Log archiving.
* Log rotating.
* Logging levels.

## Usage

To use the node, launch Node-RED (see [running Node-RED](http://nodered.org/docs/getting-started/running.html) for help getting started).

The input payload should be JSON. 

Any attribute in the payload JSON can be use as the info type logging.

The input payload JSON should have following properties for warning and error logging.

* `warn` – warning logging
* `error` – error logging

## License

MIT © `Max Lytvyn`

[npm-url]: https://www.npmjs.com/package/node-red-contrib-advanced-logger
npm package: @mlz/admin
Description: 一套遵循编程猫组件使用规范的管理系统React组件库
Latest version: 0.9.92

<p align="center">
@mlz/admin 是遵循编程猫后台管理系统设计规范的 React 组件库
</p>
<p align="center" style="font-size: 32px">
🌈 https://mlz-admin.now.sh
</p>
<div align="center">

[![npm version](https://img.shields.io/npm/v/@mlz/admin?color=lightblue&label=%40mlz%2Fadmin)](https://github.com/juicecube/mlz-admin) [![codecov](https://codecov.io/gh/juicecube/mlz-admin/branch/master/graph/badge.svg?token=ZNPL3AMQ7Z)](https://app.codecov.io/gh/juicecube/mlz-admin/) ![actions](https://github.com/juicecube/mlz-admin/workflows/checkers/badge.svg) [![license](https://img.shields.io/badge/license-MIT-green.svg?color=lightblue)](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md) [![static](https://img.shields.io/npm/dm/@mlz/admin?label=downloads&color=lightblue)](https://www.npmjs.com/package/@mlz/admin)

</div>

---

## 使用方法

#### 1. 安装

```shell
$ npm install @mlz/admin -S
```

#### 2. 使用

```jsx
import { Button } from '@mlz/admin';

const App = () => <Button type="primary">❤️❤️❤️</Button>;
```

更多详细内容请访问本库的在线文档。

## 贡献指南

非常期待你的 PR！本库的开发代码，基于 [《贡献指南》](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md) ，所以请先仔细阅读。

## 讨论组

<img src="https://raw.githubusercontent.com/milobluebell/imgs-repo/master/WechatIMG9.jpeg" width="256" alt="Dingtalk Qrcode"/>
npm package: @mlz/amazingui
Description: 一个amazingui
Author: tywin
Latest version: 0.0.1

# 基于react的轻量级UI组件库
amazingui是笔者开发的基于react的轻量级组件库，目前不依赖任何第三方ui组件库，支持按需导入，可定制。官网地址website: [amazingui——基于react的轻量级UI组件库](https://amazingui-8578afmyv-986597535.vercel.app/)

获课和转介绍业务梳理的公用组件：https://notes.dingtalk.com/doc/QqWXw55WbyRpgG31?orgId=455324&dd_progress=false&showmenu=false

目前已开发完成如下ui组件：
* SharePoster 海报分享组件

正在开发的组件：
* TODO

后续会开发出更多优质轻量组件，敬请关注。

# 技术实现与版本
该组件库基于一下技术版本开发：
* react: 16.8.6
* react-dom: 6.8.6
* classnames

# 文档demo演示
<!-- <img src="01.png" />
<img src="02.png" />
<img src="03.png" /> -->

# 使用
npm i @mlz/amazingui

在mlzpack中使用
```
  loaderOptions: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        include: /node_modules\/@mlz\/amazingui\/dist/,
        use: [
          {
            loader: 'url-loader',
            options: {
              emitFile: true,
              limit: 3 * 1024,
              name: 'images/[name]__[hash:5].[ext]',
              publicPath: config.assetsPublicPath,
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        include: [/node_modules\/pant\/es/, /node_modules\/@mlz\/amazingui\/es/],
        use:
          [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                sourceMap: false,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => {
                  const plugin = [autoprefixer(), pxtorem(
                    {
                      rootValue: 100,
                      propList: [
                        '*',
                        '!border',
                        '!border-left',
                        '!border-right',
                        '!border-top',
                        '!border-bottom',
                      ],
                      selectorBlackList: [
                        'no_rem',
                      ],
                    },
                  )];
                  return plugin;
                },
              },
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass'),
              },
            },
          ],
      },
    ]
```
# todo
  不支持 import xx from 'xx.png'
  每次新安装一个包，需要重新npm i安装所有依赖包
  自动格式化不生效
# 技术交流与反馈
微信（wechat）：tangwei999733

欢迎提出更多issue以便让组件库更健壮
npm package: @mlz/cwebp-bin
Description: cwebp wrapper that makes it seamlessly available as a local dependency
Author: 1000ch
Latest version: 5.1.0

# cwebp-bin [![Build Status](https://travis-ci.org/imagemin/cwebp-bin.svg?branch=master)](https://travis-ci.org/imagemin/cwebp-bin)

> [WebP](https://developers.google.com/speed/webp/) is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

You probably want [`imagemin-webp`](https://github.com/imagemin/imagemin-webp) instead.


## Install

```
$ npm install cwebp-bin
```


## Usage

```js
const {execFile} = require('child_process');
const cwebp = require('cwebp-bin');

execFile(cwebp, ['input.png', '-o', 'output.webp'], err => {
	if (err) {
		throw err;
	}

	console.log('Image is converted!');
});
```


## CLI

```
$ npm install --global cwebp-bin
```

```
$ cwebp --help
```


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @mlz/doraemon
Description: 项目常用但lodash又没有的工具函数集合，哆啦A梦般方便实用
Author: urnotzane
Latest version: 0.10.5

# doraemon

项目常用但lodash又没有的工具函数集合，哆啦A梦般方便实用。

[![](https://img.shields.io/github/workflow/status/juicecube/doraemon/npm-publish?style=flat-square&logo=github)](https://github.com/juicecube/doraemon/actions?query=workflow%3Anpm-publish)
[![](https://img.shields.io/codecov/c/gh/juicecube/doraemon/master?style=flat-square&logo=codecov)](https://codecov.io/gh/juicecube/doraemon/branch/master)
[![](https://img.shields.io/bundlephobia/min/@mlz/doraemon?style=flat-square&logo=npm)](https://www.npmjs.com/package/@mlz/doraemon)
[![](https://img.shields.io/github/license/juicecube/doraemon?style=flat-square&logo=github)](https://github.com/juicecube/doraemon/blob/master/LICENSE)
[![](https://img.shields.io/badge/website-Doraemon-brightgreen?style=flat-square&logo=github)](https://da.ithen.cn)

## 使用

### 安装
```bash
npm i @mlz/doraemon@latest
```

### 按需引入

1. 安装babel-plugin-import
  ```bash
  npm i -D babel-plugin-import
  ```

2. .babelrc
  ```json
  {
    "plugins": [
      ["import", {
        "libraryName": "@mlz/doraemon",
        "camel2DashComponentName": false
      }]
    ]
  }
  ```
3. 引入（省略前两步时就不是按需引入了）
  ```typescript
  import { getUrlQuery } from '@mlz/doraemon';

  getUrlQuery('https://da.ithen.cn?name=doraemon');
  ```
4. 若不想安装babel-plugin-import，又想按需引入：
  ```typescript
  import getUrlQuery from '@mlz/doraemon/lib/getUrlQuery';

  getUrlQuery('https://da.ithen.cn?name=doraemon');
  ```

更多使用文档详看[Doraemon](https://da.ithen.cn)。

## TODO
[TODOS](https://github.com/juicecube/doraemon/projects/3);

## 开发
### 常用命令
```bash
# 单个文件测试
jest test/limitStringToTarget.test.ts
```

## 须知

- 如有问题或提需求请提[issue](https://github.com/juicecube/doraemon/issues)。
npm package: @mlz/eslint-config
Description: eslint 统一规范配置
Author: juicecube
Latest version: 1.0.0


# mlz-eslint-config

eslint 统一规范配置，集成了 [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)、[eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)、[eslint-plugin-promise](https://github.com/eslint-community/eslint-plugin-promise)、[eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)、[eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)

## Installation

`npm i -D @mlz/eslint-config`

## Usage

- 在项目根目录新建 `tsconfig.json` 文件，并写入下面👇代码

```js
{
  "extends": "@mlz/eslint-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
  }
}
```

- React 项目在根目录新建 `.eslintrc.json` 文件，并加入下面👇代码

```js
{
  "extends": "@mlz/eslint-config",
}
```

- 单纯 TypeScript 项目在根目录新建 `.eslintrc.json` 文件，并加入下面👇代码

```js
{
  "extends": ["@mlz/eslint-config:typescript"],
}
```

#### 不生效可能原因及解决方法：

- 1、eslint未启用或执行报错：

  调出eslint控制台（点击vscode右下角eslint打开控制台， 如找不到，则，点击左下角设置按钮 --> 选择setting --> 输入eslint --> 把 ```Eslint:Always Show Status``` 和 ```Eslint:Enable```勾选上 --> 点击任意js或ts文件则会出现，若还未出现请升级vscode版本），查看是否执行过程中出现错误


- 2、vscode版本过低（请升级到1.41.1或以上）

  mac中如果遇到无法升级，则确认```vscode```是否在应用程序中，如不在则手动把```vscode```移到应用程序中方可进行升级

---
## AutoFix

1、打开编辑器设置文件（以vscode为例）：
```js
command + P  -->  输入setting  --> 选择 settings.json文件
```

2、在文件中添加如下代码并保存：
```js
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },
```
3、修改文件后保存，便会自动修复空格、顺序等风格问题

---
## 配置说明

++++++

该项目中的配置为公司前端统一配置，除一些标明可自定义的配置外，其他配置最好不要随意更改，以保持前端代码风格的统一

++++++
#### tsconfig  

详情请见：tsconfig.json

|  配置  | 值 | 原因 |
|  ----  | ----  | ---- |
| target  | ESNext | 保留所有特性，配合 `@babel` 或 `swc` 使用
| module | ESNext | 使用ES的方式组织代码
| lib | ["DOM", "DOM.Iterable", "ESNext"] | 把这些库文件包含进编译的过程中保证编译的正确快速执行
| allowJs  | true | 允许检查js文件，保证js文件的质量
| checkJs  | true | 允许ts检查js文件的错误，保证js文件的质量
| jsx  | preserve | 输出.jsx且dom编译后还是原dom方便后续babel等编译
| sourceMap  | true | 输出.map文件，方便调试
| outDir  | build | 指定输出目录为build
| removeComments  | true | 删除编译后的所有的注释（使代码安全简洁，减少代码量）
| noImplicitAny  | true | 类型安全更加严格（强制类型检验）
| strictNullChecks  | true | null 和 undefined检查，避免错误（严格空校验）
| noUnusedLocals  | true | 不需要不用的变量
| noImplicitReturns  | true | 函数的所有路径都必须有返回值
| moduleResolution  | node | 使用node的模块解析策略
| baseUrl | . | 把tsconfig所在的目录当成是解析非相对模块的基准目录
| paths | - | 模块名到基于 baseUrl 的路径映射的列表
| allowSyntheticDefaultImports | true | 允许从没有设置默认导出的模块中默认导入
| experimentalDecorators | true | 启用装饰器

#### eslint

详情请见 `index.js` 和 `typescript.js` 文件
npm package: @mlz/imagemin-mozjpeg
Description: Imagemin plugin for mozjpeg
Author: Kevin Mårtensson
Latest version: 8.0.1

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

> [Imagemin](https://github.com/imagemin/imagemin) plugin for [mozjpeg](https://github.com/mozilla/mozjpeg)


## Install

```
$ npm install imagemin-mozjpeg
```


## Usage

```js
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async () => {
	await imagemin(['images/*.jpg'], 'build/images', {
		use: [
			imageminMozjpeg()
		]
	});

	console.log('Images optimized');
})();
```


## API

### imageminMozjpeg([options])(buffer)

Returns a `Promise<Buffer>`.

#### options

##### quality

Type: `number`

Compression quality, in range `0` (worst) to `100` (perfect).

##### progressive

Type: `boolean`<br>
Default: `true`

`false` creates baseline JPEG file.

##### targa

Type: `boolean`<br>
Default: `false`

Input file is Targa format (usually not needed).

##### revert

Type: `boolean`<br>
Default: `false`

Revert to standard defaults instead of mozjpeg defaults.

##### fastCrush

Type: `boolean`<br>
Default: `false`

Disable progressive scan optimization.

##### dcScanOpt

Type: `number`<br>
Default: `1`

Set DC scan optimization mode.

- `0` One scan for all components
- `1` One scan per component
- `2` Optimize between one scan for all components and one scan for 1st component plus one scan for remaining components

##### trellis

Type: `boolean`<br>
Default: `true`

[Trellis optimization](https://en.wikipedia.org/wiki/Trellis_quantization).

##### trellisDC

Type: `boolean`<br>
Default: `true`

Trellis optimization of DC coefficients.

##### tune

Type: `string`<br>
Default: `hvs-psnr`

Set Trellis optimization method. Available methods: `psnr`, `hvs-psnr`, `ssim`, `ms-ssim`

##### overshoot

Type: `boolean`<br>
Default: `true`

Black-on-white deringing via overshoot.

##### arithmetic

Type: `boolean`<br>
Default: `false`

Use [arithmetic coding](https://en.wikipedia.org/wiki/Arithmetic_coding).

##### dct

Type: `string`<br>
Default: `int`

Set [DCT](https://en.wikipedia.org/wiki/Discrete_cosine_transform) method:

- `int` Use integer DCT
- `fast` Use fast integer DCT (less accurate)
- `float` Use floating-point DCT

##### quantBaseline

Type: `boolean`<br>
Default: `false`

Use 8-bit quantization table entries for baseline JPEG compatibility.

##### quantTable

Type: `number`

Use predefined quantization table.

- `0` JPEG Annex K
- `1` Flat
- `2` Custom, tuned for MS-SSIM
- `3` ImageMagick table by N. Robidoux
- `4` Custom, tuned for PSNR-HVS
- `5` Table from paper by Klein, Silverstein and Carney

##### smooth

Type: `number`

Set the strength of smooth dithered input. (1...100)

##### maxMemory

Type: `number`

Set the maximum memory to use in kilobytes.

##### sample

Type: `string[]`

Set component sampling factors. Each item should be in the format `HxV`, for example `2x1`.

#### buffer

Type: `buffer`

Buffer to optimize.


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @mlz/imagemin-optipng
Description: Imagemin plugin for OptiPNG
Latest version: 7.1.1

# imagemin-optipng [![Build Status](http://img.shields.io/travis/imagemin/imagemin-optipng.svg?style=flat)](https://travis-ci.org/imagemin/imagemin-optipng)

> Imagemin plugin for OptiPNG


## Install

```
$ npm install imagemin-optipng
```


## Usage

```js
const imagemin = require('imagemin');
const imageminOptipng = require('imagemin-optipng');

(async () => {
	await imagemin(['images/*.png'], 'build/images', {
		use: [
			imageminOptipng()
		]
	});

	console.log('Images optimized!');
})();
```


## API

### imageminOptipng(options?)(buffer)

Returns a `Promise<Buffer>`.

#### options

Type: `object`

##### optimizationLevel

Type: `number`<br>
Default: `3`

Select an optimization level between `0` and `7`.

> The optimization level 0 enables a set of optimization operations that require minimal effort. There will be no changes to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams. The optimization level 1 enables a single IDAT compression trial. The trial chosen is what. OptiPNG thinks it’s probably the most effective. The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.

Level and trials:

1. 1 trial
2. 8 trials
3. 16 trials
4. 24 trials
5. 48 trials
6. 120 trials
7. 240 trials

##### bitDepthReduction

Type: `boolean`<br>
Default: `true`

Apply bit depth reduction.

##### colorTypeReduction

Type: `boolean`<br>
Default: `true`

Apply color type reduction.

##### paletteReduction

Type: `boolean`<br>
Default: `true`

Apply palette reduction.

##### interlaced

Type: `boolean | undefined | null`<br>
Default: `false`

Enable [Adam7](https://en.wikipedia.org/wiki/Adam7_algorithm) PNG interlacing on any images that are processed. Interlaced images look better when they're loaded partially, but usually interlace makes compression less efficient. Set to `undefined` or `null` to keep the same interlacing as the input image.

##### errorRecovery

Type: `boolean`<br>
Default: `true`

A reasonable amount of effort will be spent to try to recover as much data as possible of a broken image, but the success cannot generally be guaranteed.

#### buffer

Type: `Buffer`

Buffer to optimize.
npm package: @mlz/imagemin-webp
Description: WebP imagemin plugin
Author: Kevin Mårtensson
Latest version: 5.1.1

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

> WebP [imagemin](https://github.com/imagemin/imagemin) plugin


## Install

```
$ npm install imagemin-webp
```


## Usage

```js
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
	await imagemin(['images/*.{jpg,png}'], 'build/images', {
		use: [
			imageminWebp({quality: 50})
		]
	});

	console.log('Images optimized');
})();
```


## API

### imageminWebp(options?)(buffer)

Returns a `Promise<Buffer>` with the optimized image.

#### options

Type: `object`

##### preset

Type: `string`<br>
Default: `default`

Preset setting, one of `default`, `photo`, `picture`, `drawing`, `icon` and `text`.

##### quality

Type: `number`<br>
Default: `75`

Set quality factor between `0` and `100`.

##### alphaQuality

Type: `number`<br>
Default: `100`

Set transparency-compression quality between `0` and `100`.

##### method

Type: `number`<br>
Default: `4`

Specify the compression method to use, between `0` (fastest) and `6` (slowest). This parameter controls the trade off between encoding speed and the compressed file size and quality.

##### size

Type: `number`<br>

Set target size in bytes.

##### sns

Type: `number`<br>
Default: `80`

Set the amplitude of spatial noise shaping between `0` and `100`.

##### filter

Type: `number`<br>

Set deblocking filter strength between `0` (off) and `100`.

##### autoFilter

Type: `boolean`<br>
Default: `false`<br>

Adjust filter strength automatically.

##### sharpness

Type: `number`<br>
Default: `0`

Set filter sharpness between `0` (sharpest) and `7` (least sharp).

##### lossless

Type: `boolean`<br>
Default: `false`

Encode images losslessly.

##### nearLossless

Type: `number`<br>
Default: `100`

Encode losslessly with an additional [lossy pre-processing step](https://groups.google.com/a/webmproject.org/forum/#!msg/webp-discuss/0GmxDmlexek/3ggyYsaYdFEJ), with a quality factor between `0` (maximum pre-processing) and `100` (same as `lossless`).

##### crop

Type: `object { x: number, y: number, width: number, height: number }`

Crop the image.

##### resize

Type: `object { width: number, height: number }`

Resize the image. Happens after `crop`.

##### metadata

Type: `string | string[]`<br>
Default: `none`<br>
Values: `all` `none` `exif` `icc` `xmp`

A list of metadata to copy from the input to the output if present.

#### buffer

Type: `Buffer`

Buffer to optimize.
npm package: @mlz/mozjpeg
Description: mozjpeg wrapper that makes it seamlessly available as a local dependency
Latest version: 6.0.2

# mozjpeg-bin [![Build Status](https://travis-ci.org/imagemin/mozjpeg-bin.svg?branch=master)](http://travis-ci.org/imagemin/mozjpeg-bin)

> [mozjpeg](https://github.com/mozilla/mozjpeg) is a production-quality JPEG encoder that improves compression while maintaining compatibility with the vast majority of deployed decoders

You probably want [`imagemin-mozjpeg`](https://github.com/imagemin/imagemin-mozjpeg) instead.


## Install

```
$ npm install mozjpeg
```


## Usage

```js
const {execFile} = require('child_process');
const mozjpeg = require('mozjpeg');

execFile(mozjpeg, ['-outfile', 'output.jpg', 'input.jpg'], err => {
	console.log('Image minified!');
});
```


## CLI

```
$ npm install --global mozjpeg
```

```
$ mozjpeg --help
```


## License

MIT © [Imagemin](https://github.com/imagemin)
npm package: @mlz/optipng-bin
Description: OptiPNG wrapper that makes it seamlessly available as a local dependency
Latest version: 6.0.3

# optipng-bin [![Build Status](https://travis-ci.org/imagemin/optipng-bin.svg?branch=master)](https://travis-ci.org/imagemin/optipng-bin)

> [OptiPNG](http://optipng.sourceforge.net) is a PNG optimizer that recompresses image files to a smaller size, without losing any information

You probably want [`imagemin-optipng`](https://github.com/imagemin/imagemin-optipng) instead.


## Install

```
$ npm install --save optipng-bin
```


## Usage

```js
const {promisify} = require('util');
const {execFile} = require('child_process');
const optipng = require('optipng-bin');

const execFileP = promsify(execFile);

(async () => {
	await execFile(optipng, ['-out', 'output.png', 'input.png']);
	console.log('Image minified!');
})();
```


## CLI

```
$ npm install --global optipng-bin
```

```
$ optipng --help
```
npm package: @mlz/prettier-config
Description: prettier 统一规范配置
Author: juicecube
Latest version: 1.0.0


# mlz-prettier-config
prettier 统一规范配置

## Installation

`npm i -D @mlz/prettier-config`

## Usage
mlz-prettier-config 的使用有两种方式
#### 在项目根目录新建 `.prettierrc.json` 文件，并写入下面👇代码

```json
"@mlz/prettier-config"
```

#### 如需覆盖部分配置，在项目根目录新建 `.prettierrc.js` 文件，并写入下面👇代码

```js
module.exports = {
  ...require('@mlz/prettier-config'),
  semi: true,
}
```
npm package: @mlz/react-video-cz
Description: ## CLI Commands *   `npm install`: Installs dependencies
Latest version: 0.1.28

# React-video-cz

## CLI Commands
*   `npm install`: Installs dependencies

*   `npm run start`: Run a production-like server

*   `npm run build`: Production-ready build

## 使用

### 安装
```shell
npm install react-video-cz
```

### 引入
```jsx
import 'react-video-cz/lib/index.css';
import Videocz from 'react-video-cz';
```



### 事件钩子
组件已经暴露了大部分video的事件钩子，参看
[https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events)



### 注：

width和height样式弃用，组件默认占满容器



src?:string;    //资源链接

poster?:string;   //预览图链接

autoPlay?:boolean;   //是否自动播放

preload?:string;    //预加载

progressColor?:string;    //进度条已播部分的颜色

progressBackColor?:string;    //进度条未播部分的进度

thumb?:string;    //进度条拖动块的图片，base64

timeStyle?:Record<string, any>;  //时间样式

fullScreenBtn?:string; //全屏按钮图片，base64

pauseBtn?:string;   //暂停按钮图片，base64

playBtn?:string;   //播放按钮图片，base64

loading?:string;   //loading图片，base64

muted?:boolean;
loop?:boolean;

showCenterBtn?:boolean;
showController?:boolean;
showBottomProgress?:boolean;
showFullScreen?:boolean; // 是否显示全屏按钮

videoRef?:MutableRefObject<HTMLVideoElement>;     //获取video dom实例
npm package: @mlz/store
Description: [![Codacy Badge](https://api.codacy.com/project/badge/Grade/afd6f660b7ef4242a11acc1a067fc0be)](https://www.codacy.com/gh/juicecube/localStore?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=juicecube/localStore&amp;utm_campaign=Badge_Grade)
Author: Fukai
Latest version: 1.3.5

# @mlz/Store

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/afd6f660b7ef4242a11acc1a067fc0be)](https://www.codacy.com/gh/juicecube/localStore?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=juicecube/localStore&amp;utm_campaign=Badge_Grade)

封装localStorage, sessionStorage, cookie, indexDB.

## 安装
``` js
npm i @mlz/store
```

## 使用
``` ts
import createStore from '@mlz/store';

const store = createStore({}); // 默认是localStorage, 通过type: 'sessionStorage'|'cookieStorage'|'indexDB'区分

store.set({a: 1});
store.update({a: 1});
store.delete('a');
store.get('a');
```
npm package: @mlz/stylelint-config
Description: stylelint 统一规范配置
Author: juicecube
Latest version: 1.0.0

# mlz-stylelint-config

stylelint 统一规范配置，集成了 [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss)、[stylelint-config-recess-order](https://github.com/stormwarning/stylelint-config-recess-order)、[stylelint-scss](https://github.com/stylelint-scss/stylelint-scss)

> **Note**
> Stylelint v15 已经去掉了所有格式化相关的规则，所以无需安装 stylelint-config-prettier 插件

## Installation

`npm i -D @mlz/stylelint-config`

## Usage

#### 在项目根目录新建 `.stylelintrc.json` 文件，并写入下面👇代码

```json
{
  "extends": ["@mlz/stylelint-config"]
}
```

#### 或者新建 `.stylelintrc.js` 文件，并写入下面👇代码

```js
module.exports = {
  extends: ['@mlz/stylelint-config']
}
```

#### 不生效可能原因及解决方法

vscode 扩展 vscode-stylelint >= 14 版本，需要在 首选项->设置->扩展->Stylelint 找到 Validate 选项，添加 scss

## Options

详情请见 `index.js` 文件
npm package: @mlz/swiper
Description: ```tsx     <Carousel         onSlideChange={(activeIndex) => handleSlideChange(activeIndex)}         className="detail-wrap-swiper-container"         // 不监听拖拉的区域         noSwipingSelector="#mlz-controller"         // fullscreen={fullscreen}         // onF
Latest version: 1.2.1

## Swiper
```tsx
    <Carousel
        onSlideChange={(activeIndex) => handleSlideChange(activeIndex)}
        className="detail-wrap-swiper-container"
        // 不监听拖拉的区域
        noSwipingSelector="#mlz-controller"
        // fullscreen={fullscreen}
        // onFullscreenClose={handleFullscreenClose}
        // 抵抗距离 第一个或者最后一个的时候，可以拉动的距离
        resistanceDistance={84}
        // 最后一张时，继续拖拉的文案
        lastSlideMessage="最后一张了"
      >
        {pictures.map((item, index) => <CarouselItem
          onClick={handleCarouselClick}
          key={`course-detail-swiper-${ index}`}>
          <img
            className="detail-wrap-swiper-container-img"
            src={item} />
        </CarouselItem>)}
    </Carousel>
```


## npm库模版
使用npm模版来使得开发库更简单，不用自己搭建开发环境的配置库的打包。

### 特性
- 零配置, 在`npm install`之后使用`postinstall`钩子运行`init`脚本设置库的名字用于发布和打包
- 使用`rollup`来打包为`umd`和`commonjs`两种形式
- 集成`jest`来做单元测试
- 使用`@mlz/lint`来规范代码风格
- 使用`standard-version`自动发布生成版本号和生成changelog
- 配置了`github actions`来在代码push到master时候自动发布npm包

### 开发
`npm run start: rollup -c rollup.config.js -w & npm run example`
使用rollup来打包库的源文件到dist文件夹下，运行`npm run example`启动一个`react`项目来调试。

### 测试
1. `test`: jest跑项目中的所有测试文件，并输出测试覆盖率
2. `test:watch`: watch模式
3. `test:prod`: 推到远程仓库前执行test


### 打包和输出
`npm run build`
```
dist
├── lib //commonjs版本，webpack等打包工具使用
│   └── pkgName.js
├── types //类型定义
│   └── index.d.ts
└── umd //umd版本，可直接使用script标签引入
    └── pkgName.js
```
**注：**：使用package.json中的files文件来代替.npmignore

### 发布
1. 本地运行`npm run release`更新版本号和自动生成CHANGELOG.md
2. `git push`推送代码到`master`分支。触发`npmpublish`action，会自动运行`build test:prod`然后执行`npm publish`
所以开发流程应该是在特性分支进行开发，合并到`master`分支的触发`github action`进行自动发版。

**注意** 需要配置自己的仓库的`secrets.npm_token`到`.github/workflows/npmpublish.yml`中，配置路径为settings中的secrets。
npm package: @mlz/vconsole
Description: A lightweight, extendable front-end developer tool for mobile web page.
Author: Tencent
Latest version: 3.3.5

English | [简体中文](./README_CN.md)

vConsole
==============================
[![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole) 

A lightweight, extendable front-end developer tool for mobile web page.


## Features

- View console logs
- View network requests
- View document elements
- View Cookies, LocalStorage and SessionStorage
- Execute JS command manually
- Custom plugin


## Usage

Download the [latest release](https://github.com/Tencent/vConsole/releases/latest). (DO NOT copy `dist/vconsole.min.js` in the dev branch)

Or, install via npm:

```
npm install vconsole
```

Import `dist/vconsole.min.js` to your project:

```html
<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
```

For TypeScript users:

```javascript
import 'path/to/vconsole.min.d.ts';
```

See [Tutorial](./doc/tutorial.md) for more details.


## Preview

![](./example/snapshot/qrcode.png)

[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)

![](./example/snapshot/log_panel.png)


## Documentation

vConsole:

 - [Tutorial](./doc/tutorial.md)
 - [Public Properties & Methods](./doc/public_properties_methods.md)
 - [Helper Functions](./doc/helper_functions.md)

Plugin:

 - [Plugin: Getting Started](./doc/plugin_getting_started.md)
 - [Plugin: Building a Plugin](./doc/plugin_building_a_plugin.md)
 - [Plugin: Event List](./doc/plugin_event_list.md)


## Plugins

 - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
 - [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)
 

## Changelog

[CHANGELOG.md](./CHANGELOG.md)


## Feedback

QQ Group: 497430533

![](./example/snapshot/qq_group.png)


## License

[The MIT License](./LICENSE)
npm package: @mlz/video
Description: ```tsx     <Player         ref={videoRef}         src={videoUrl}         onPause={handleVideoonPause}         onPlay={handleVideoPlay}         poster={videoImgUrl}         onTouch={handleVideoTouch}         progressStyle={fullscreen ? {} : progressStyle} 
Latest version: 1.2.2

## Player
```tsx
    <Player
        ref={videoRef}
        src={videoUrl}
        onPause={handleVideoonPause}
        onPlay={handleVideoPlay}
        poster={videoImgUrl}
        onTouch={handleVideoTouch}
        progressStyle={fullscreen ? {} : progressStyle}
        fullscreen={fullscreen}
    />
```
```tsx
    // 系统全屏，进入全屏后ui和交互不可控
    // 且退出全屏后，不一定都能监听到退出事件，onSystemFullscreen不一定都护触发
    <Player
        className="back"
        ref={videoRef2}
        src={videoUrl}
        onPause={handleVideoonPause}
        onPlay={handleVideoPlay}
        poster={videoImgUrl}
        onTouch={handleVideoTouch}
        hasSystemFullscreen
        onSystemFullscreen={handleSystemFullscreen}
    />    
```


## npm库模版
使用npm模版来使得开发库更简单，不用自己搭建开发环境的配置库的打包。

### 特性
- 零配置, 在`npm install`之后使用`postinstall`钩子运行`init`脚本设置库的名字用于发布和打包
- 使用`rollup`来打包为`umd`和`commonjs`两种形式
- 集成`jest`来做单元测试
- 使用`@mlz/lint`来规范代码风格
- 使用`standard-version`自动发布生成版本号和生成changelog
- 配置了`github actions`来在代码push到master时候自动发布npm包

### 开发
`npm run start: rollup -c rollup.config.js -w & npm run example`
使用rollup来打包库的源文件到dist文件夹下，运行`npm run example`启动一个`react`项目来调试。

### 测试
1. `test`: jest跑项目中的所有测试文件，并输出测试覆盖率
2. `test:watch`: watch模式
3. `test:prod`: 推到远程仓库前执行test


### 打包和输出
`npm run build`
```
dist
├── lib //commonjs版本，webpack等打包工具使用
│   └── pkgName.js
├── types //类型定义
│   └── index.d.ts
└── umd //umd版本，可直接使用script标签引入
    └── pkgName.js
```
**注：**：使用package.json中的files文件来代替.npmignore

### 发布
1. 本地运行`npm run release`更新版本号和自动生成CHANGELOG.md
2. `git push`推送代码到`master`分支。触发`npmpublish`action，会自动运行`build test:prod`然后执行`npm publish`
所以开发流程应该是在特性分支进行开发，合并到`master`分支的触发`github action`进行自动发版。

**注意** 需要配置自己的仓库的`secrets.npm_token`到`.github/workflows/npmpublish.yml`中，配置路径为settings中的secrets。
npm package: @mlz37/v3-sdk
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 3.11.0

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap V3 SDK

[![Unit Tests](https://github.com/Uniswap/uniswap-v3-sdk/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-v3-sdk/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-v3-sdk/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-v3-sdk/actions?query=workflow%3ALint)
[![npm version](https://img.shields.io/npm/v/@uniswap/v3-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v3-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v3-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v3-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://docs.uniswap.org/).
npm package: @mm-cmv/json-schema
Description: This directory contains NodeJS scripts for converting the Zod schemas from `@mm-cmv/schemas` (located in `packages/schemas/`) to JSON schema.
Author: Mark Keller
Latest version: 3.3.3

This directory contains NodeJS scripts for converting the Zod schemas from `@mm-cmv/schemas` (located in `packages/schemas/`) to JSON schema.

These JSON schemas are not intended to be used at runtime within any mmCMV JS sub-package.
Instead, they are intended to be uploaded to NPM/CDN where they can be accessed from Python or R to perform validation in the absence of JavaScript.


From the root of the monorepo, run:

```sh
pnpm run build-json-schema
```
npm package: @mm-institutional/configuration-client
Description: A Typescript library responsible for maintaining a cache of MMI Portfolio related data in local storage.
Author: Albert Olive
Latest version: 3.0.2

# MetaMask Institutional configurationClient

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library responsible for maintaining a cache of MMI Portfolio related data in local storage. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/configurationClient
yarn add @mm-institutional/configurationClient
```
npm package: @mm-institutional/custody-controller
Description: Custody controller is a background controller responsible for maintaining a cache of custody data in local storage
Author: Albert Olive
Latest version: 0.3.27

# MetaMask Institutional CustodyController

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Custody controller is a background controller responsible for maintaining a cache of custody data in local storage. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/custody-controller
yarn add @mm-institutional/custody-controller
```
npm package: @mm-institutional/custody-keyring
Description: The Custody Keyring Class is the initial point of contact with a custodian, it gets access to the sdk and all methods of interaction with a custodian, like custodian accounts, sign a tx, account details, tx details.
Author: Albert Olive
Latest version: 3.0.27

# MetaMask Institutional custodykeyring

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The Custody Keyring Class is the initial point of contact with a custodian, it gets access to the sdk and all methods of interaction with a custodian, like custodian accounts, sign a tx, account details, tx details. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/custody-keyring
yarn add @mm-institutional/custody-keyring
```
npm package: @mm-institutional/extension
Description: This package will export extension blocks used across the old @codefi/mmi-sdk library
Author: Antonio Regadas
Latest version: 0.4.29

# MetaMask Institutional extension building blocks

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library to use Extension Actions, Selectors and some utility methods, that allow us to separate our logic from the extension and have a smaller footprint. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/extension
yarn add @mm-institutional/extension
```
npm package: @mm-institutional/institutional-features
Description: This package will export connectRequest state used across the old @codefi/mmi-sdk library
Author: Albert Olive
Latest version: 1.3.29

# MetaMask Institutional institutional-features

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Background controller responsible for maintaining a cache of institutional features data in local storage. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/institutional-features
yarn add @mm-institutional/institutional-features
```
npm package: @mm-institutional/portfolio-dashboard
Description: This package will contain relevant logic for the MMI Portfolio Dashboard
Author: Antonio Regadas
Latest version: 1.4.2

# MetaMask Institutional portfolio-dashboard package

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library to use types and interfaces in order to interact with. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/portfolio-dashboard
yarn add @mm-institutional/portfolio-dashboard
```
npm package: @mm-institutional/rpc-allowlist
Description: Allowlist for custom JSON-RPC commands
Author: Antonio Regadas
Latest version: 1.0.4

# MetaMask Institutional RPC-Allowlist

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Allowlist for custom JSON-RPC commands.
[MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/rpc-allowlist
yarn add @mm-institutional/rpc-allowlist
```
npm package: @mm-institutional/simplecache
Description: This package will export simpleCache used across the old @codefi/mmi-sdk library
Author: Albert Olive
Latest version: 1.1.1

# MetaMask Institutional simpleCache

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library to use types and interfaces in order to interact with. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/simplecache
yarn add @mm-institutional/simplecache
```
npm package: @mm-institutional/transaction-update
Description: This package will export transactionUpdate, responsible for handling transaction updates
Author: Antonio Regadas
Latest version: 0.2.29

# MetaMask Institutional TransactionUpdate

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library that exports the TransactionUpdate controller, responsible for handling all the custodian Tx updates and send them to the extension to be updated. It communicates with the WS Client.

## Usage

### Setting up

```typescript
npm i @mm-institutional/transaction-update
yarn add @mm-institutional/transaction-update
```
npm package: @mm-institutional/types
Description: This package will export shared types used across the old @codefi/mmi-sdk library
Author: Albert Olive
Latest version: 1.2.11

# MetaMask Institutional Types

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library to use types and interfaces in order to interact with. [MetaMask Institutional](https://metamask.io/institutions); the most trusted DeFi wallet and Web3 gateway for organizations.

## Usage

### Setting up

```typescript
npm i @mm-institutional/types
yarn add @mm-institutional/types
```

### Example

```typescript
import { ICustodianUpdate } from "@mm-institutional/types";

public  custodianTxData(txData: ICustodianUpdate): void {
 // Do something
}
```
npm package: @mm-institutional/websocket-client
Description: This package will export WebsocketClient, responsible for establishing a connection to the WebSocket API and handle all the messages for transaction updates.
Author: Antonio Regadas
Latest version: 0.2.29

# MetaMask Institutional WebsocketClient

> **DISCLAIMER.** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

A Typescript library that exports a WebSocket client, it allows us to get Tx updates from the WS API and send them to the TransactionUpdate controller.

## Usage

### Setting up

```typescript
npm i @mm-institutional/websocket-client
yarn add @mm-institutional/websocket-client
```