open-index/open-npm huggingface dataset:
npm package: @m7kra/color-theme
Description: React hooks that make color theme management easy
Author: M7kra
Latest version: 1.0.2

# @m7kra/color-theme

React hooks that make color theme management easy

## What?

When styling a react app, it's handy to detect the system's color theme and adapt the UI accordingly. On the other, hand, you'll want to give the user the option to override the system's theme and choose their own. This package provides hooks that make it easy to do both.

You can set choose you theme from `light`, `dark` or `system`. The package will resolve that to `light` or `dark` and use that. Changes to the system theme will be refleted in you app without the need to reload.

## Installation

```bash
npm install @m7kra/color-theme
```

## Usage

The simplest way to use this package is to use a standalone hook. This will give you the current theme and a function to set it. Here's an example:

```js
import { useColorTheme } from '@m7kra/color-theme';

function App() {
    const [theme, setTheme] = useColorTheme('dark');

    return (
        <div className={theme}>
            <button onClick={() => setTheme('light')}>Light</button>
            <button onClick={() => setTheme('dark')}>Dark</button>
            <button onClick={() => setTheme('system')}>System</button>
        </div>
    );
};
```

However, you probably want to use the theme in multiple places in your app. In that case, you can use the `ColorThemeProvider` component. This will make the theme available to all child components via the `useContextColorTheme` hook.

```js
import { ColorThemeProvider, useContextColorTheme } from '@m7kra/color-theme';

function App() {
    return (
        <ColorThemeProvider>
            <ChildComponent1 />
            <ChildComponent2 />
        </ColorThemeProvider>
    );
};

function ChildComponent1() {
    const [theme, setTheme] = useContextColorTheme();

    return (
        <div className={theme}>
            <button onClick={() => setTheme('light')}>Light</button>
            <button onClick={() => setTheme('dark')}>Dark</button>
            <button onClick={() => setTheme('system')}>System</button>
        </div>
    );
};

function ChildComponent2() {
    const [theme] = useContextColorTheme();

    return (
        <div className={theme}>
            <p>Current theme: {theme}</p>
        </div>
    );
};
```

## API

### `function useColorTheme(defaultTheme: ColorTheme = 'system')`

Returns the current theme and a function to set it. The `defaultTheme` argument is optional and defaults to `system`.

### `function ColorThemeProvider(props: ColorThemeProviderProps)`

A component that makes the theme available to all child components via the `useContextColorTheme` hook. The `ColorThemeProviderProps` can include a `defaultTheme` property that defaults to `system`.

### `function useContextColorTheme()`

Returns the current theme and a function to set it.
npm package: @m7medvision/lazycommit
Description: let ai write commit messages for you
Author: Mohammed Al Jahwari
Latest version: 1.3.21

# lazycommit

<p align="center">
  <img src="https://github.com/chhoumann/bunnai/assets/29108628/1ec69e68-7d5e-4a4d-b4d6-56e202e1c54c">
</p>

have ai write commit messages for you in [lazygit](https://github.com/jesseduffield/lazygit).

uses Openai or google AI to generate commit message suggestions based on the diff between the current branch and master.
then you can select a commit message from the list and use it to commit your changes.

## installation and configuration

```sh
bunx @m7medvision/lazycommit@latest config
```

set up with your openai api key & preferred model:

## usage

You can specify custom templates. use `bunx @m7medvision/lazycommit@latest config` to edit the templates.

### as a menu

this creates a menu of commit messages based on the diff between the current branch and master.

insert the following custom command into your [lazygit](https://github.com/jesseduffield/lazygit) config file:

```yaml
customCommands:
  - key: "<c-a>" # ctrl + a
    description: "pick AI commit"
    command: 'git commit -m "{{.Form.Msg}}"'
    context: "files"
    prompts:
      - type: "menuFromCommand"
        title: "ai Commits"
        key: "Msg"
        command: "bunx @m7medvision/lazycommit@latest"
        filter: '^(?P<number>\d+)\.\s(?P<message>.+)$'
        valueFormat: "{{ .message }}"
        labelFormat: "{{ .number }}: {{ .message | green }}"
```

### with neovim

this allows you to edit the commit message in vim after you've selected it from the menu.

abort committing by deleting the commit message in vim.

```yaml
customCommands:
  - key: "<c-a>" # ctrl + a
    description: "Pick AI commit"
    command: 'echo "{{.Form.Msg}}" > .git/COMMIT_EDITMSG && nvim .git/COMMIT_EDITMSG && [ -s .git/COMMIT_EDITMSG ] && git commit -F .git/COMMIT_EDITMSG || echo "Commit message is empty, commit aborted."'
    context: "files"
    subprocess: true
    prompts:
      - type: "menuFromCommand"
        title: "AI Commits"
        key: "Msg"
        command: "bunx @m7medvision/lazycommit@latest"
        filter: '^(?P<number>\d+)\.\s(?P<message>.+)$'
        valueFormat: "{{ .message }}"
        labelFormat: "{{ .number }}: {{ .message | green }}"
```

## acknowledgements

- check out original project [bunnai](https://github.com/chhoumann/bunnai).
  check out these other projects that inspired this one:

- https://github.com/BuilderIO/ai-shell

## Custom Endpoint

You can now specify a custom endpoint for using OpenAI-like APIs. To set a custom endpoint, use the `bunx @m7medvision/lazycommit@latest config` command and select the "Custom Endpoint" option. This allows you to use different API endpoints that are compatible with OpenAI.
npm package: @m860/cerberus
Description: react-native小程序
Author: m860
Latest version: 1.4.3

# cerberus

react-native微应用/微组件纯JS解决方案

## Usage

- 安装`cerberus-cli`
    
    ```bash
    $ npm i -g @m860/cerberus-cli
    ```
    
- 添加`cerberus-cli`配置文件 [配置参数](#cli配置参数说明)

    ```bash
    $ touch cbs.json
    ```
    
- 启动本地服务
    
    ```bash
    $ npx cbs start cbs.json
    ```
    
- 安装`cerberus`

    ```bash
    $ npm i @m860/cerberus
    ```
    
- 使用`useCerberus`加载

    ```jsx harmony
    import * as React from "react"
    import {useCerberus} from "@m860/cerberus"
  
    export default function(){
        const [status,defined]=useCerberus({
            entry:"http://localhost:9000/main.js"
        });
        if(defined){
            const {default:App}=defined;
            return <App/>
        }
        return null;
    }
    ```
> NOTE: 目前只支持hooks

[Full Example](https://github.com/m860/cerberus-test)
  
## cli配置参数说明

```flow js
type ConfigOption={
    // 同webpack.mode
    mode:string,
    // 同webpack.entry
    entry:any,
    // 同webpack.output
    output:any,
    /**
    * 需要替换的module
    * 
    * @example
    * {
    *     cerberusTransformOption:{
    *         modules:["dateformat"]
    *     }
    * }
    * 
    */
    cerberusTransformOption:{
        modules:Array<string>,
        /**
         * 需要处理的资源文件的正则表达式，默认：/\.(gif|png|jpeg|jpg|svg)$/i 
         */
        resourceTest?:?RegExp
    }
}
```

## 最佳实践

- 一级页面不要使用`cerberus`来管理组件
- 预加载组件，在APP启动的时候进行一次预加载。

## 自定义cloud访问的client

```jsx harmony
// 在App中使用CerberusContextProvider来自定义client
import * as React from "react"
import {CerberusContextProvider} from "@m860/cerberus"

export default function (){
    return (
        <CerberusContextProvider value={{
            client:{
                uri:"http://xxx"
            }
        }}>
        </CerberusContextProvider>
    );
}
```

## Troubleshoot

- 图片没有显示出来
    
    cli在编译的时候将本地引用的图片编译为uri的方式，所以必须设置width和height才能够正常显示
    ```jsx harmony
    <Image source={require("image.png")} style={{width:100,height:100}}/>
    ```
- `debug`模式下缓存不生效
- `queryEntry`参数的urls的顺序和配置文件中的顺序可能不一致，不要使用如下方式：`(urls)=>urls[2]`
npm package: @m860/cerberus-babel-plugin-transform
Description: cerberus转换工具
Author: m860
Latest version: 1.1.4

# cerberus-babel-plugin-transform

cerberus转换工具

## Install

`npm i -D @m860/cerberus-babel-plugin-transform`

## Usage

> NOTE:默认情况下`react`,`react-native`会被替换

```json
{
  "plugins": ["@cerberus/transform"]
}
```

如果需要替换自己的模块可以设置`modules`参数

```json
{
  "plugins": [["@cerberus/transform",{"modules": ["dateformat"]}]]
}
```

> NOTE: `modules`中设置的module名字和npm保持一致，在`Cerberus`库中导出的名字也必须一致。


## Option

```flow js
type Option={
    /**
     * 不需要被打包的公共模块
     */
    modules?:Array<string>,
    /**
     * 需要处理的资源文件的正则表达式，默认：/\.(gif|png|jpeg|jpg|svg)$/i 
     */
    resourceTest?:?RegExp
};
```

## Examples

```
// input
import * as React from "react"
import React2 from "react"
import {memo,useState} from "react"
import {useRef as ur} from "react"
import {Text} from "react-native"
import df from "dateformat"
import {get as getPath} from "object-path"

// output
const React = $REACT$;
const React2 = $REACT$;
const memo = $REACT$.memo;
const useState = $REACT$.useState;
const ur = $REACT$.useRef;
const Text = $REACTNATIVE$.Text;
const df = $MODULES$["dateformat"];
const getPath = $MODULES$["object-path"].get;
```

<!--

[ASTExplorer](https://astexplorer.net/)在线调试工具

[Babel插件开发手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)

[babel-types API](https://babeljs.io/docs/en/babel-types)

## TODO

- [ ] 处理`require("*.png")`,如果是资源文件需要进行重定向到`http`
    ```js 
    // input
    <Image source={require("logo.png")}/>
    // output
    <Image source={{uri:`${$MODULES$.BASE_URL}/${require("logo.png")}`}}/>
    ```
- [ ] `modules`支持别名设置
    ```
    // 例如
    {
        modules:[
            {
                name:"dateformat",
                exportName:"df"
            }
        ]
    }
    ```
-->
npm package: @m860/cerberus-cli
Description: cerberus cli
Author: m860
Latest version: 1.8.1

# cerberus-cli

cerberus命令行工具

## Usage

```bash
$ # 安装cli工具
$ npm i -D @m860/cerberus-cli
$ # 添加配置文件
$ touch cbs.json # 根据需求进行配置
$ # 开起调试模式
$ npx cbs start cbs.json

```

## commands

- `start <config>` 启动本地小程序server
    - `--host` **string** server地址
    - `--port` **number** server端口
- `login` - 登录
- `whoami` - 显示当前登录人
- `logout` - 退出登录
- `publish <config> <key> <versionName>` - 发布
- `widget add <key>` - 添加widget
- `widget [list/ls]` - 查询widgets
- `widget rm <key>` - 删除widget
- `bundles <key>` - 查询bundles
- `register` - 注册
- `config [list/ls]` - 显示用户自定义配置
- `config set <key> <value>` - 设置用户自定义配置
    > 比如要修改CloudCerberus的服务地址，`cbs config set baseURL "http://127.0.0.1"`
- `config reset` - 重置用户自定义配置

## 配置

目前只支持`.json`文件配置

```flow js
type ConfigOption={
    // 同webpack.mode
    mode:string,
    // 同webpack.entry
    entry:any,
    // 同webpack.output
    output:any,
    /**
    * 需要替换的module
    * 
    * @example
    * {
    *     cerberusTransformOption:{
    *         modules:["dateformat"]
    *     }
    * }
    * 
    */
    cerberusTransformOption:{
        modules:Array<string>,
        /**
         * 需要处理的资源文件的正则表达式，默认：/\.(gif|png|jpeg|jpg|svg)$/i 
         */
        resourceTest?:?RegExp
    }
}
```
npm package: @m860/react-async-component
Description: 加载异步组件
Latest version: 0.1.0

# react-async-component

加载异步组件

<!-- badge -->
[![npm version](https://img.shields.io/npm/v/@m860/react-async-component.svg)](https://www.npmjs.com/package/@m860/react-async-component)
[![npm license](https://img.shields.io/npm/l/@m860/react-async-component.svg)](https://www.npmjs.com/package/@m860/react-async-component)
[![npm download](https://img.shields.io/npm/dm/@m860/react-async-component.svg)](https://www.npmjs.com/package/@m860/react-async-component)
[![npm download](https://img.shields.io/npm/dt/@m860/react-async-component.svg)](https://www.npmjs.com/package/@m860/react-async-component)
<!-- endbadge -->

异步加载module

[Examples & API Documentation](./API.md)

## Install

```bash
$ npm i react-async-component --save
```
npm package: @m860/react-docgen-markdown
Description: react组件markdown文档生成
Author: m860
Latest version: 1.0.1

# react-docgen-markdown

生成react组件的markdown文档

<!-- badge -->
[![npm version](https://img.shields.io/npm/v/@m860/react-docgen-markdown.svg)](https://www.npmjs.com/package/@m860/react-docgen-markdown)
[![npm license](https://img.shields.io/npm/l/@m860/react-docgen-markdown.svg)](https://www.npmjs.com/package/@m860/react-docgen-markdown)
[![npm download](https://img.shields.io/npm/dm/@m860/react-docgen-markdown.svg)](https://www.npmjs.com/package/@m860/react-docgen-markdown)
[![npm download](https://img.shields.io/npm/dt/@m860/react-docgen-markdown.svg)](https://www.npmjs.com/package/@m860/react-docgen-markdown)
<!-- endbadge -->
[![Build Status](https://travis-ci.org/m860/react-docgen-markdown.svg?branch=master)](https://travis-ci.org/m860/react-docgen-markdown)
[![Coverage Status](https://coveralls.io/repos/github/m860/react-docgen-markdown/badge.svg?branch=master)](https://coveralls.io/github/m860/react-docgen-markdown?branch=master)

## Install

```bash
$ npm i @m860/react-docgen-markdown -D
```

## Simple Usage

```
$ react-docgen-markdown build test/components --output test/doc
$ react-docgen-markdown readme ...
```

[example doc](./test/doc/TestComponent.md)

## 将文档添加到README.md中

- 先在README.md文件中表示文档的插入位置,如:

```
<!--begin react doc markdown-->
<!--end react doc markdown-->
```

- 然后运行命令

```
$ react-docgen-markdown readme test/README.md --src test/doc --table-content
```

[example readme](./test/README.md)
npm package: @m860/react-skeleton
Description: <!-- badge --> [![npm version](https://img.shields.io/npm/v/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-skeleton) [![npm license](https://img.shields.io/npm/l/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-sk
Latest version: 0.0.1

# react-skeleton

<!-- badge -->
[![npm version](https://img.shields.io/npm/v/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-skeleton)
[![npm license](https://img.shields.io/npm/l/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-skeleton)
[![npm download](https://img.shields.io/npm/dm/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-skeleton)
[![npm download](https://img.shields.io/npm/dt/@m860/react-skeleton.svg)](https://www.npmjs.com/package/@m860/react-skeleton)
[![Build Status](https://travis-ci.org/m860/react-skeleton.svg?branch=master)](https://travis-ci.org/m860/react-skeleton)
[![Coverage Status](https://coveralls.io/repos/github/m860/react-skeleton/badge.svg)](https://coveralls.io/github/m860/react-skeleton)
<!-- endbadge -->

[Documentation & Examples](./API.md)

## Install

```shell
$ npm i @m860/react-skeleton --save
```
npm package: @m87wheeler/sc-reset
Description: ### Usage
Author: Martin Wheeler
Latest version: 0.1.0

# Styled Components Reset

### Usage

```js
import { GlobalReset } from "@m87-wheeler/sc-reset";

<GlobalReset />
```

### Adding Global Variables

```js
import { css } from "styled-components";

const globalVars = css`
  :root {
    --my-var: red;
  }
`;

<GlobalReset vars={globalVars}>
```
npm package: @m87wheeler/use-media-query
Description: This hook aims to make updating values based on media queries directly in a React component as simple but flexible as possible.
Author: Martin Wheeler
Latest version: 0.1.0

# useMediaQuery Hook

This hook aims to make updating values based on media queries directly in a React component as simple but flexible as possible.

<hr />

## How to Use

1. Import the hook as a default import:

```js
import useMediaQuery from '@m87wheeler/use-media-query';
```

There are also 2 additional imports available as named imports:

```js
import useMediaQuery, {
  IBreakpoints,
  initialBreakpoints,
} from '@m87wheeler/use-media-query';
```

2. Inside your React component, use the hook:

```js
const value = useMediaQuery([]);
```

3. The first argument in the hook is a required array. This should be an array of up to 6 values (any type is accepted):

```js
const value = useMediaQuery([1, 2, '3', 'four', { num: 5 }, 6]);
```

4. The second argument in the hook is an optional object. The structure of this object is of type `IBreakpoints` (a TS interface) and, when not provided explicitly, is set to `initialBreakpoints` as default:

```js
const value = useMediaQuery([1, 2, '3', 'four', { num: 5 }, 6], {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400,
});
```

The six values in the array (first provided argument) represent, in order, the value returned at the corresponding breakpoint in the given object:

```js
xs = 1;
sm = 2;
md = '3';
lg = 'four';
xl = { num: 5 };
xxl = 6;
```

5. This value can then be used in your React component, and is updated as the window is resized.

#### Optional Breakpoints Object

The optional breakpoints object can be provided as a complete object, or a `Partial` of the `IBreakpoints` interface.

For example, the following is valid and will only override the given values in the default object:

```js
const value = useMediaQuery([1, 2, 3, 4, 5, 6], { xm: 400, xxl: 1880 });
```

#### Progressive Array Values

The provided array will be automatically cut off at 6 items, for example:

```js
const value = useMediaQuery([1, 2, 3, 4, 5, 6, 7, 8, 9]); // ignored = [7, 8, 9]
```

You can also pass an array of less than 6 items. The remaining values will inherit the last value given. For example:

```js
const value = useMediaQuery([1, 2, 3, 4]); // array = [1, 2, 3, 4, 4, 4]
```

<hr />

## Future additions

#### Values as an object

```js
const value = useMediaQuery({ sm: 1, lg: 4, xxl: 8 });
```
npm package: @m8a/nestjs-query-core
Description: Base query package
Author: doug-martin
Latest version: 9.2.2

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@m8a/nestjs-query-core.svg)](https://www.npmjs.org/package/@m8a/nestjs-query-core)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/core/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/core/package.json)

# `@m8a/nestjs-query-core`

Core package that contains interfaces for types used by [`@m8a/nestjs-query-graphql`](../query-graphql)
and [`@m8a/nestjs-query-typeorm`](../query-typeorm)

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Docs

* [Nestjs-query Docs](https://tripss.github.io/nestjs-query/docs/introduction/getting-started)
npm package: @m8a/nestjs-query-graphql
Description: Nestjs graphql query adapter
Author: doug-martin
Latest version: 9.2.2

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@m8a/nestjs-query-graphql.svg)](https://www.npmjs.org/package/@m8a/nestjs-query-graphql)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-graphql/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-graphql/package.json)

# `@m8a/nestjs-query-graphql`

This package provides a code first implementation of graphql CRUD endpoints. It is built on top of
of [nestjs](https://nestjs.com/).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@m8a/nestjs-query-graphql` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/graphql/getting-started) docs.
npm package: @m8a/nestjs-query-typegoose
Description: Typegoose adapter for @m8a/nestjs-query-core
Author: john mcinall
Latest version: 9.2.2

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@m8a/nestjs-query-typeorm.svg)](https://www.npmjs.org/package/@m8a/nestjs-query-typeorm)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-typegoose/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-typegoose/package.json)

# `@m8a/nestjs-query-typeorm`

The `query-typegoose` package that provides an implementation of `@m8a/nestjs-query-core` `QueryService`, built on
top of of [nestjs](https://nestjs.com/) and [typegoose](https://github.com/typegoose/typegoose).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@nestjs-query/query-typegoose` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/persistence/typegoose/getting-started) docs.
npm package: @m8x/webp-loader
Description: WebP image loader & converter for Webpack
Author: Max Riveiro
Latest version: 1.0.0

# @m8x/webp-loader

> forked from [webp-loader](https://www.npmjs.com/package/webp-loader) v0.6.0.

[![Build Status](https://github.com/m8x/webp-loader/actions/workflows/test.yaml/badge.svg?branch=main)](https://github.com/m8x/webp-loader/actions/workflows/test.yaml)

[WebP](https://developers.google.com/speed/webp/) image loader & converter loader for Webpack.

## Install

```sh
npm install --save-dev @m8x/webp-loader
```

## Usage

Here is the example of using `@m8x/webp-loader`:

```javascript
// webpack@5
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    type: 'asset/resource',
    generator: {
      filename: '[name].[hash][ext].webp'
    },
    loader: '@m8x/webp-loader'
  }
]

// webpack@4
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext].webp',
        },
      },
      {
        loader: '@m8x/webp-loader'
      }
    ]
  }
]
```

Unfortunately, if you wish to pass an options for internal [imagemin-webp](https://github.com/imagemin/imagemin-webp) you should pass a options in JSON form:

```javascript
// webpack@5
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    type: 'asset/resource',
    generator: {
      filename: '[name].[hash][ext].webp'
    },
    loader: '@m8x/webp-loader',
    options: {
      quality: 10
    }
  }
]

// webpack@4
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext].webp',
        },
      },
      {
        loader: '@m8x/webp-loader',
        options: {
          quality: 10
        }
      }
    ]
  }
]
```

## Options

For all possible options please visit "API" section of the official [imagemin-webp README](https://github.com/imagemin/imagemin-webp#imageminwebpoptions).

## Inspiration

`webp-loader` is heavily inspired by [tcoopman/image-webpack-loader](https://github.com/tcoopman/image-webpack-loader).

## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @m92/api-sec
Description: API Key Validation, JWT Authentication and Payload Encryption-Decryption Middlewares for Express-Utils
Latest version: 3.0.1

# @m92/api-sec

[![npm version](https://img.shields.io/npm/v/@m92/api-sec?style=for-the-badge)](https://www.npmjs.com/package/@m92/api-sec)&nbsp;
[![Security: Snyk](https://img.shields.io/badge/Security-Snyk-blueviolet?logo=snyk&style=for-the-badge)](https://snyk.io/test/npm/@m92/api-sec)&nbsp;
[![License: MIT](https://img.shields.io/npm/l/@m92/api-sec?color=yellow&style=for-the-badge)](https://opensource.org/licenses/MIT)&nbsp;
[![Downloads](https://img.shields.io/npm/dy/@m92/api-sec?style=for-the-badge)](https://npm-stat.com/charts.html?package=%40m92%2Fexpress-utils)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@m92/api-sec?style=for-the-badge)](https://bundlephobia.com/package/@m92/api-sec)

<br />

## Table of Content
- [Installation](#installation)
- [Contributors](#contributors)
- [Resources](#resources)
- [License](#license)

<br />

## Installation
```bash
npm install --save @m92/api-sec
```
<br />

## Contributors
<table>
  <tbody>
    <tr>
      <td align="center">
        <a href='https://github.com/ankitgandhi452'>
          <img src="https://avatars.githubusercontent.com/u/8692027?s=400&v=4" width="100px;" alt="Ankit Gandhi"/>
          <br />
          <sub><b>Ankit Gandhi</b></sub>
        </a>
      </td>
      <td align="center">
        <a href='https://github.com/agarwalmehul'>
          <img src="https://avatars.githubusercontent.com/u/8692023?s=400&v=4" width="100px;" alt="Mehul Agarwal"/>
          <br />
          <sub><b>Mehul Agarwal</b></sub>
        </a>
      </td>
    </tr>
  </tbody>
</table>

<br />

## Resources

<br />

## License
* [MIT](https://opensource.org/licenses/MIT)


<br />
<br />
npm package: @m92/aws-otp
Description: Custom OTP Module using AWS Pinpoint and Redis
Latest version: 1.0.2

**Edit a file, create a new file, and clone from Bitbucket in under 2 minutes**

When you're done, you can delete the content in this README and update the file with details for others getting started with your repository.

*We recommend that you open this README in another tab as you perform the tasks below. You can [watch our video](https://youtu.be/0ocf7u76WSo) for a full demo of all the steps in this tutorial. Open the video in a new tab to avoid leaving Bitbucket.*

---

## Edit a file

You’ll start by editing this README file to learn how to edit a file in Bitbucket.

1. Click **Source** on the left side.
2. Click the README.md link from the list of files.
3. Click the **Edit** button.
4. Delete the following text: *Delete this line to make a change to the README from Bitbucket.*
5. After making your change, click **Commit** and then **Commit** again in the dialog. The commit page will open and you’ll see the change you just made.
6. Go back to the **Source** page.

---

## Create a file

Next, you’ll add a new file to this repository.

1. Click the **New file** button at the top of the **Source** page.
2. Give the file a filename of **contributors.txt**.
3. Enter your name in the empty file space.
4. Click **Commit** and then **Commit** again in the dialog.
5. Go back to the **Source** page.

Before you move on, go ahead and explore the repository. You've already seen the **Source** page, but check out the **Commits**, **Branches**, and **Settings** pages.

---

## Clone a repository

Use these steps to clone from SourceTree, our client for using the repository command-line free. Cloning allows you to work on your files locally. If you don't yet have SourceTree, [download and install first](https://www.sourcetreeapp.com/). If you prefer to clone from the command line, see [Clone a repository](https://confluence.atlassian.com/x/4whODQ).

1. You’ll see the clone button under the **Source** heading. Click that button.
2. Now click **Check out in SourceTree**. You may need to create a SourceTree account or log in.
3. When you see the **Clone New** dialog in SourceTree, update the destination path and name if you’d like to and then click **Clone**.
4. Open the directory you just created to see your repository’s files.

Now that you're more familiar with your Bitbucket repository, go ahead and add a new file locally. You can [push your change back to Bitbucket with SourceTree](https://confluence.atlassian.com/x/iqyBMg), or you can [add, commit,](https://confluence.atlassian.com/x/8QhODQ) and [push from the command line](https://confluence.atlassian.com/x/NQ0zDQ).
npm package: @m92/aws-pinpoint
Description: AWS Pinpoint SDK
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

**Edit a file, create a new file, and clone from Bitbucket in under 2 minutes**

When you're done, you can delete the content in this README and update the file with details for others getting started with your repository.

*We recommend that you open this README in another tab as you perform the tasks below. You can [watch our video](https://youtu.be/0ocf7u76WSo) for a full demo of all the steps in this tutorial. Open the video in a new tab to avoid leaving Bitbucket.*

---

## Edit a file

You’ll start by editing this README file to learn how to edit a file in Bitbucket.

1. Click **Source** on the left side.
2. Click the README.md link from the list of files.
3. Click the **Edit** button.
4. Delete the following text: *Delete this line to make a change to the README from Bitbucket.*
5. After making your change, click **Commit** and then **Commit** again in the dialog. The commit page will open and you’ll see the change you just made.
6. Go back to the **Source** page.

---

## Create a file

Next, you’ll add a new file to this repository.

1. Click the **New file** button at the top of the **Source** page.
2. Give the file a filename of **contributors.txt**.
3. Enter your name in the empty file space.
4. Click **Commit** and then **Commit** again in the dialog.
5. Go back to the **Source** page.

Before you move on, go ahead and explore the repository. You've already seen the **Source** page, but check out the **Commits**, **Branches**, and **Settings** pages.

---

## Clone a repository

Use these steps to clone from SourceTree, our client for using the repository command-line free. Cloning allows you to work on your files locally. If you don't yet have SourceTree, [download and install first](https://www.sourcetreeapp.com/). If you prefer to clone from the command line, see [Clone a repository](https://confluence.atlassian.com/x/4whODQ).

1. You’ll see the clone button under the **Source** heading. Click that button.
2. Now click **Check out in SourceTree**. You may need to create a SourceTree account or log in.
3. When you see the **Clone New** dialog in SourceTree, update the destination path and name if you’d like to and then click **Clone**.
4. Open the directory you just created to see your repository’s files.

Now that you're more familiar with your Bitbucket repository, go ahead and add a new file locally. You can [push your change back to Bitbucket with SourceTree](https://confluence.atlassian.com/x/iqyBMg), or you can [add, commit,](https://confluence.atlassian.com/x/8QhODQ) and [push from the command line](https://confluence.atlassian.com/x/NQ0zDQ).
npm package: @m92/crypto
Description: Cryptographic Module
Author: Mehul Agarwal
Latest version: 0.0.16

# README #

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact
npm package: @m92/es-odm
Description: Elasticsearch ODM (Object Document Mapper)
Author: Mehul Agarwal
Latest version: 0.0.5

# README #

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact
npm package: @m92/express-utils
Description: Utility Module for Express Framework
Author: Mehul Agarwal
Latest version: 0.0.106

# README #

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact
npm package: @m92/http-client-fe-v2
Description: Web http Client using axios with JWT Authentication & JOSE Encrytion.
Latest version: 1.0.0

# http-client-fe-v2

http-client-fe-v2 is a custom http-request package for browser with in-built support for [JOSE (JWE) encryption](https://jose.readthedocs.io/en/latest/#jwe). The ready package for backed could be found at

1. [Express JS(NodeJS)](https://www.npmjs.com/package/@m92/api-crypto)

## Installation and Setup

### [ReactAppBoilerplate](https://github.com/ankitgandhi452/ReactAppBoilerplate)

If you're using [ReactAppBoilerplate](https://github.com/ankitgandhi452/ReactAppBoilerplate) as recommended, requires 4 step configuration:

1. Create Config File

```js
// src/configurations/network/HTTP_CLIENT_CONFIG.js
import API_ROUTES from './API_ROUTES'

const { REACT_APP_ENABLE_CRPTOGRAPHY = '', REACT_APP_API_KEY } = process.env

const ENABLE_CRPTOGRAPHY = REACT_APP_ENABLE_CRPTOGRAPHY.trim().toLowerCase() === 'true'

const HTTP_CLIENT_CONFIG = {
  ENABLE_CRPTOGRAPHY,
  API_KEY: REACT_APP_API_KEY,
  API_ROUTES
}

export default HTTP_CLIENT_CONFIG
```

2. Create Constants File

```js
// src/configurations/network/HTTP_CLIENT_CONSTANTS.js
const { API_TIMEOUT } = process.env

const TIMEOUT = API_TIMEOUT || 3000

const HTTP_CLIENT_CONSTANTS = {
  TIMEOUT
}

export default HTTP_CLIENT_CONSTANTS
```

3. Create HttpClient File

```js
import HttpClientClass from '@m92/http-client-fe-v2'
import HTTP_CLIENT_CONFIG from 'configurations/network/HTTP_CLIENT_CONFIG'
import HTTP_CLIENT_CONSTANTS from 'configurations/network/HTTP_CLIENT_CONSTANTS'

const HttpClient = new HttpClientClass(HTTP_CLIENT_CONFIG, HTTP_CLIENT_CONSTANTS)

export default HttpClient
```

4. Inject HttpClient in Redux Thunk

```js
// src/configurations/redux/store.js
.....
import HttpClient from '//path/to/HttpClient/File'
.....

const middlewares = [
  thunk.withExtraArgument({ HttpClient }) // Argument can be a request object used inside all calls
]
.....
```
## License

MIT
npm package: @m92/jwt
Description: JWT (JSON Web Token) Implementation
Author: Mehul Agarwal
Latest version: 0.0.7

# README #

This README would normally document whatever steps are necessary to get your application up and running.

### What is this repository for? ###

* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)

### How do I get set up? ###

* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions

### Contribution guidelines ###

* Writing tests
* Code review
* Other guidelines

### Who do I talk to? ###

* Repo owner or admin
* Other community or team contact