open-index/open-npm huggingface dataset:
npm package: @glzr/components
Description: A component library for SolidJS.
Latest version: 1.2.0

### Type-safe transforms

```tsx
const myForm = createForm({ age: '0' });

<Field
  of={myForm}
  path="age"
  transform={{ in: val => Number(val), out: val => val.toString() }}
>
  {(_, props) => <NumberInput {...props} />} // 'props.value' is typed as
  number
</Field>;
```

### Versus `@modular-forms/solid`

- Field values can be objects or arrays.

  - This makes it possible to bind complex types like `{ minDate: Date; maxDate: Date }`. [The recommended way to do this in `@modular-forms/solid` is very verbose.](https://github.com/fabian-hiller/modular-forms/issues/51#issuecomment-1596244780)

- Form values are non-nullable. This means never having to non-null assert.

- More flexible interface for interoping with custom form components.

  - Custom form components simply need to take in `value`, `onBlur`, and `onChange`.
  - Easily bind components that don't have an underlying `input`, `textarea`, or `select` element.

- Simpler handling of arrays.

  - There is no need to use `FieldArray`. This reduces JSX nesting.

```tsx
export function MyForm() {
  const [fruitForm, { Form, Field, FieldArray }] = createForm({
    initialValues: {
      fruits: [
        {
          name: 'banana',
          isTasty: true,
        },
        {
          name: 'kiwi',
          isTasty: false,
        },
      ],
    },
  });

  return (
    <Form>
      <FieldArray name="fruits">
        {fieldArray => (
          <>
            <For each={fieldArray.items}>
              {(_, index) => (
                <Field name={`fruits.${index()}.isTasty`} type="boolean">
                  {(field, props) => (
                    <Checkbox {...props} value={field.value} />
                  )}
                </Field>
              )}
            </For>
          </>
        )}
      </FieldArray>
    </Form>
  );
}
```

**vs. smorf:**

Note that there's no need to pass the `type` prop, or separately pass the
`value` prop.

```tsx
export function MyForm() {
  const fruitForm = createForm({
    fruits: [
      {
        name: 'banana',
        isTasty: true,
      },
      {
        name: 'kiwi',
        isTasty: false,
      },
    ],
  });

  return (
    <form>
      <For each={fruitForm.value.fruits}>
        {(_, index) => (
          <Field of={fruitForm} path={`fruits.${index()}.isTasty`}>
            {(field, props) => <Checkbox {...props} />}
          </Field>
        )}
      </For>
    </form>
  );
}
```
npm package: @glzr/style-guide
Description: Shared configs for linting and styling tools.
Latest version: 1.1.0

# Style Guide &middot; [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/glzr-io/actions/pulls) [![License](https://img.shields.io/github/license/glzr-io/actions)](https://github.com/glzr-io/actions/blob/main/LICENSE.md) [![Discord invite](https://img.shields.io/discord/1041662798196908052.svg?logo=discord&colorB=7289DA)](https://discord.gg/ud6z3qjRvM)

## Prettier

To use one of the Prettier config, add the following to `package.json`:

```json
{
  "prettier": "@glzr/style-guide/prettier"
}
```

## TSConfig

To use one of the TSConfig files available, add the following to `tsconfig.json`:

```json
{
  "extends": "@glzr/style-guide/tsconfig/solidjs-lib"
}
```

**Available configs:**

- Vanilla Node.js (`@glzr/style-guide/tsconfig/vanilla-nodejs`)
- Vanilla bundler (`@glzr/style-guide/tsconfig/vanilla-bundler`)
- Astro app (`@glzr/style-guide/tsconfig/astro-app`)
- NestJS app (`@glzr/style-guide/tsconfig/nestjs-app`)
- SolidJS app (`@glzr/style-guide/tsconfig/solidjs-app`)
- SolidJS library (`@glzr/style-guide/tsconfig/solidjs-lib`)

[TotalTypescript](https://www.totaltypescript.com/tsconfig-cheat-sheet) is a great reference for TSConfig guidelines.
npm package: @gm-dev/biome
Description: A set of config to biome.js for node.js
Author: Gustavo Murdiga
Latest version: 1.0.4

# @gm-dev/biome

# Install

```js
  npm i @gm-dev/biome -D
```
# Usage example

```json
//biome.json
 {
   "extends": ["@gm-dev/biome/node"] 
 }
```
npm package: @gm-dev/eslint-config
Description: an project with my config of the eslint in projects nextJs, vite and more
Author: Gustavo Murdiga
Latest version: 2.0.8

# @gm-dev/eslint-config

<p>
This package was built for help when you need config eslint on your project. This packege has config several, you can applicate this in projects as nextJS, vite and projects back-end with nodeJs. 
</p>

# Install

```js
  npm i @gm-dev/eslint-config -D
```
# Usage example

```js
// eslint.config.mjs

import gm from "@gm-dev/eslint-config/node";

/** @type {import('eslint').Linter.Config[]} */
export default [
      {
		files: ["./src/**/*.ts"],
		ignores: ["node_modules"], 
	  },
      ...gm
];

```

<!-- # Indicate
<p>
I indicate a config  for more patterns in the config eslint.

for more information's find in
<a href="https://github.com/Tibfib/eslint-plugin-import-helpers">
eslint-plugin-import-helpers
</a>
<p>

<br/>

```json
"import-helpers/order-imports": [
      "warn",
      {
        "newlinesBetween": "always",
        "groups": [
          "/^(react)$/",
          "/^(@/components)/",
          "/^(assets|styles)/",
          "/^(./)/"
        ],
        "alphabetize": {
          "order": "asc",
          "ignoreCase": true
        }
      }
    ],

```

```json
   "plugins": ["eslint-plugin-import-helpers"]

``` -->
npm package: @gm-health/jsdoc-mermaid
Description: A tool to automagically create flowcharts and diagrams in your jsdocs.
Latest version: 1.0.4

# jsdoc-mermaid

A plugin that parses your JSDocs for [Mermaid](https://mermaidjs.github.io/) syntax and renders the diagrams and flowcharts described.

## Getting Started

```bash
# install as a local dependency
yarn add -D jsdoc-mermaid # OR npm install -D jsdoc-mermaid
```

And then add `jsdoc-mermaid` to your jsdoc configuration file. That's it!

```javascript
{
    "plugins": ["jsdoc-mermaid"]
}
```

## Usage

Document a method with an `@mermaid` tag using JSDoc Syntax, like so:

```javascript
/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 *
 * @mermaid
 *   graph TD;
 *     A-->B;
 *     A-->C;
 *     B-->D;
 *     C-->D;
 */
function Book(title, author) {
  /* ... */
}
```

Generate your JSDocs using the [configuration](http://usejsdoc.org/about-configuring-jsdoc.html) you've specified - for instance:
```bash
jsdoc book.js -c conf.json 
```

When you open that page in JSDoc, you should have a shiny new graph!

![jsdoc-mermaid example](https://user-images.githubusercontent.com/2096353/31104126-b9159786-a7a0-11e7-95ed-689a7f158803.png)


## Built With

* [Mermaid](https://github.com/knsv/mermaid) - Generation of diagram and flowchart from text in a similar manner as markdown
* [Doctrine](https://github.com/eslint/doctrine) - JSDoc parser

## Versioning

We use [SemVer](http://semver.org/) for versioning.
npm package: @gm-matic/meta
Description: Matic network contracts' addresses and ABIs
Author: shohu
Latest version: 0.0.11

# Static server
The private static server for Matic.

### How it works?
All files, in this repository, will be served over AWS S3 at `https://static.matic.network/<file-path>`.

### Production
Master branch will be automatically deployed. No other action required.

## Package Usage

### Installation
```bash
$ npm i --save @maticnetwork/meta
```
### Usage
```javascript
const Network = require("@maticnetwork/meta/network")

// define network
const network = new Network("testnet", "mumbai")

const Matic = network.Matic  // all info related to Matic
const Main = network.Main // all info related to Main
const Heimdall = network.Heimdall // all info related to Heimdall

const RootChainABI = network.abi("RootChain")

// use matic js
let matic = new Matic ({
    maticProvider: Matic.RPC,
    mainProvider: Main.RPC,
    registry: Main.Contracts.Registry,
    ...
    ...
})
```


### Before Publishing
```
npm run minify
```
npm package: @gm-network/gmaa
Description: ```ts // yarn add @gm-network/particle
Latest version: 0.1.66

# @gm-network/gmaa

```ts
// yarn add @gm-network/particle

import { ParticleContextProvider } from '@gm-network/particle';

const App = () => {
    // replace 'xxxx' with particle project config.
    return (
        <ParticleContextProvider
             {...{
                projectId: 'xxxx',
                clientKey: 'xxxx',
                appId: 'xxxx',
                supportedChainIds:[1, ...],
            }}
        >
            <YourApp />
        </AuthCoreContextProvider>
    );
};
```
npm package: @gm5/cli
Description: Five.js框架控制台工具
Author: yutent
Latest version: 1.0.0

```
                 ____             _ _ 
  __ _ _ __ ___ | ___|        ___| (_)
 / _` | '_ ` _ \|___ \ _____ / __| | |
| (_| | | | | | |___) |_____| (__| | |
 \__, |_| |_| |_|____/       \___|_|_|
 |___/                        一键安装、管理Five.js框架的脚本工具                      
```


## 安装
```bash
npm i -g @gm5/cli
```

## 用法
> 用法: `five-cli [command] args...`

+ Commands:
  * init             -    初始化框架
  * start [prod|dev] -    运行当前的应用(可指定运行环境)
  * stop             -    停止当前应用
  * st|status        -    查看当前应用状态
  * r|restart        -    重启当前应用
  * del|delete       -    删除当前应用
  * -h               -    查看帮助文档
  * -v               -    查看工具的版本


## 更新日志

### v1.0.0
* 脚本重构,支持windows
* 支持最新框架


### v0.4.1
* 优化项目构建
* 支持指令简写
* 优化启动逻辑


### v0.2.0
* 从 v0.2版开始, 将只支持 linux/macos, 且框架自动为最新的3.x。
* [优化] 优化five-cli start [dev|prod] 指令


### v0.1.2
* 下载地址改用github
* 兼容windows
* 优化操作提示
npm package: @gm5/controller
Description: 控制器基类。
Author: yutent
Latest version: 2.0.4

![downloads](https://img.shields.io/npm/dt/@gm5/controller.svg)
![version](https://img.shields.io/npm/v/@gm5/controller.svg)

# @gm5/controller

> 控制器基类。

## 安装
> 一般不需要单独安装, 该模块包含在`@gm5/core`的依赖里。

```bash
npm i @gm5/controller
```
npm package: @gm5/core
Description: Five.js, 一个轻量级的nodejs mvc框架 旨在简单易用, 5分钟即可上手
Author: yutent
Latest version: 2.0.4

```
  ____ _                               __ _           
 / ___(_)_   _____   _ __ ___   ___   / _(_)_   _____ 
| |  _| \ \ / / _ \ | '_ ` _ \ / _ \ | |_| \ \ / / _ \
| |_| | |\ V /  __/ | | | | | |  __/ |  _| |\ V /  __/
 \____|_| \_/ \___| |_| |_| |_|\___| |_| |_| \_/ \___|
                                                      
```

一个轻量级的，易学的，拓展性灵活的 nodejs MVC 框架, 5 分钟即可上手。取自"Give me five"之意, 一切就是这么简单

框架要求 nodejs 版本在 12.0 或以上, 并且只支持使用`import/export`

## 文档

[文档](/gm5/core/wiki)

## 启用方法(步骤)

**注**
`本框架和用法 都是在 Linux 或者 Mac 下面测试通过。至于使用 Windows 并坚持玩新技术的同学，我坚信他们一定有着过人的、`
`甚至是不可告人的兼容性 bug 处理能力，所以这部分同学麻烦在安装过程无法继续时，自行兼容一下`

1.  下载安装 Five.js 框架。

  * 为了方便下载安装及管理, 推荐使用 five-cli(这是一款专门为框架开发的脚本工具) 进行操作。

```bash

# 进入项目目录
cd /project/
# 初始化完成之后, 执行以下命令即可启动了,如果需要修改配置,可以先修改好再启动
npm create five

```


2.  配置框架

建立启动文件, 如 app.js

```javascript

import { createApp } from '@gm5/core'

const app = new createApp()


app.preload('./apps/') // [必须], 预加载应用目录

app.listen(3001) // 默认是3000
```

其他的配置和功能, 请参考 [文档](/gm5/core/wiki)。


3.  启动应用。在项目根目录打开终端, 输入以下命令 `npm create five`, 然后根据提示操作, 即可

```bash
pm2 start app.dev.yaml
# 正式环境执行
pm2 start app.yaml
```


4.  添加 nginx 配置(使用其他 web 服务,如 apache 的童鞋,请自行根据所使用的 web 服务器语法改写**强烈推荐 nginx**), 路径啥的自行根据自己的机器修改

```nginx
upstream five_upstream {
  server 127.0.0.1:3001;
  #server 127.0.0.1:3002;
  keepalive 64;
}

server {

  listen 80;
  server_name abc.com;
  index index.html index.htm;
  root  /www/abc.com/public;

  location ~ ^/(images/|js/|css/|upload/|favicon.ico|robots.txt) {
    expires      1d;
    access_log off;
  }

  location / {
      try_files $uri
        @proxy;
  }

  location @proxy {
    proxy_set_header          X-Real-IP               $remote_addr;
    proxy_set_header          X-Forwarded-For         $proxy_add_x_forwarded_for;
    proxy_set_header          Host                    $http_host;
    proxy_set_header          X-Forwarded-Proto       $scheme;
    proxy_set_header          X-NginX-Proxy           true;
    proxy_set_header          Upgrade                 $http_upgrade;
    proxy_set_header          Connection              "upgrade";
    proxy_http_version        1.1;
    proxy_max_temp_file_size  0;
    proxy_pass                http://five_upstream;
    proxy_redirect            off;
    proxy_read_timeout        60s;
  }
}
```




5.  请开始你的表演。

## 版权说明

> 本框架使用 MIT 开源协议, 一切的使用,请遵循 MIT 协议。
npm package: @gm5/jwt
Description: json web token
Author: yutent
Latest version: 3.0.1


![downloads](https://img.shields.io/npm/dt/@gm5/jwt.svg)
![version](https://img.shields.io/npm/v/@gm5/jwt.svg)

# @gm5/jwt

> json web token。

## 安装

```bash
npm install @gm5/jwt
```

## 使用

```js

import { createApp } from '@gm5/code'
import { createJwt, JwtModule } from '@gm5/jwt'

var app = createApp()

app.install(JwtModule)
  .use(createJwt())
  .run()

```
npm package: @gm5/mail
Description: 邮件收发管理
Author: yutent
Latest version: 2.0.0


![downloads](https://img.shields.io/npm/dt/@gm5/mail.svg)
![version](https://img.shields.io/npm/v/@gm5/mail.svg)

# @gm5/mail

> 一个简单的邮件发送模块, 可用于发送系统邮件, 如注册验证等。

## 安装

```bash
npm i @gm5/mail
```

## 使用

```js

import { createApp } from '@gm5/code'
import { MailModule } from '@gm5/mail'

var app = createApp()

app.install(MailModule, {
    auth: {
      user: 'example@example.com',
      username: 'example',
      pass: '123456'
    } 
  })
  .run()



// in controller 

this.context.$$mail
  .to('tom@xx.com', 'tom')
  .send({
    subject: 'hello',
    text: 'how are you?',
    html: '<p>how are you?</p>'
  })

```
npm package: @gm5/request
Description: 对Http的Request进一步封装, 提供常用的API
Author: yutent
Latest version: 2.0.8


![downloads](https://img.shields.io/npm/dt/@gm5/request.svg)
![version](https://img.shields.io/npm/v/@gm5/request.svg)

# @gm5/equest
> 对Http的request进一步封装, 提供常用的API.

## Install

```bash
    npm i @gm5/request
```

## Usage

```javascript
import Request  from '@gm5/request'
import http from 'http'

http
  .createServer((req, res) => {
    let request = new Request(req, res)

    // print the fixed url
    console.log(request.url)

    request.ip // get client ip address

    // http://test.com/?foo=bar
    request.query['foo'] // bar
  })
  .listen(3000)
```
npm package: @gm5/response
Description: 对Http的response进一步封装, 提供常用的API
Author: yutent
Latest version: 2.1.3

![downloads](https://img.shields.io/npm/dt/@gm5/response.svg)
![version](https://img.shields.io/npm/v/@gm5/response.svg)

# @gm5/response

> `@gm5/response` 对Http的response进一步封装, 提供常用的API.

## 安装

```bash
npm install @gm5/response
```

## 使用

```javascript
import Response from '@gm5/response'
import http from 'http'

http
  .createServer((req, res) => {
    let response = new Response(req, res)

    response.type = 'html'
    response.body = '<h1>hello world</h1>'
  })
  .listen(3000)
```
npm package: @gm5/session
Description: 会话中间件。
Author: yutent
Latest version: 3.0.0


![downloads](https://img.shields.io/npm/dt/@gm5/session.svg)
![version](https://img.shields.io/npm/v/@gm5/session.svg)

# @gm5/session

> 会话拓展包。

## 安装

```bash
npm i @gm5/session
```

## 使用

```js
import { createApp } from '@gm5/core
import { createSession, SessionModule } from '@gm5/session'

const app = createApp()

app.install(SessionModule, {domain: 'your_domain'})
  .use(createSession)
  .run()


```
npm package: @gm5/views
Description: @gm5框架的模板引擎拓展包
Author: yutent
Latest version: 3.0.0


![downloads](https://img.shields.io/npm/dt/@gm5/views.svg)
![version](https://img.shields.io/npm/v/@gm5/views.svg)

# @gm5/views

> @gm5框架的模板引擎拓展包.

## 安装
> 一般不需要单独安装, 该模块包含在`@gm5/core`的依赖里。

```bash
npm i @gm5/views
```


## 使用

```js
import { ViewsModule } from '@gm5/views'

app.install(ViewsModule)

```
npm package: @gm50x/chronus
Description: Chronus is a lightweight Date and Time manipulation library for JavaScript.
Author: Getúlio Magela Silva
Latest version: 0.5.1

# Chronus
Chronus is a date and time manipulation library based on C#'s DateTime and TimeSpan. It's got 0 dependencies and the instances are always immutable. The central idea is to try and simplify the manipulation of dates by providing a level of abstraction, preventing us from repeating the same functions every new project to work around javascript dates.

The library exports 2 classes DateTime and TimeSpan which are used to manipulate dates and time durations. Under the hood DateTime encapuslates Date and TimeSpan encapuslates a number that represents milliseconds or ticks.

There are plenty of examples down below, but you can also check the source code or tests on [Github](https://github.com/gm50x/chronus). If you have any questions feel free to open an issue there!

### Supports
- JavaScript
- TypeScript

## Installation
```bash
npm install @gm50x/chronus
```

```javascript
const {
  DateTime,
  TimeSpan
} = require('@gm50x/chronus')

const now = DateTime.now
const today = DateTime.today
const tomorrow = today.addDays(1)
const nextMonth = today.addMonths(1)
const nextYear = today.addYears(1)
const tomorrowMinusToday = tomorrow.subtract(today)
const nowPlus30Mins = now.add(TimeSpan.fromMinutes(30))
const nowPlus2Hours = now.addHours(2)
const oneHundredDaysAhead = today.addDays(100)
const oneDayFiveMinutesTime = TimeSpan.fromDays(1).addMinutes(5)

console.log(now)
console.log(now.toDate())
console.log(today)
console.log(tomorrow)
console.log(nextMonth)
console.log(nextYear)
console.log(tomorrowMinusToday)
console.log(nowPlus30Mins)
console.log(nowPlus2Hours)
console.log(oneHundredDaysAhead)
console.log(oneHundredDaysAhead.dayOfYear)
console.log(now.equals(today))
console.log(today.equals(today))
console.log(now.timeOfDay.totalHours)
console.log(TimeSpan.fromHours(2))
console.log(oneDayFiveMinutesTime)
```

## Keep in touch
---
- Author: Getúlio Magela Silva
- [LinkedIn](https://linkedin.com/in/getuliomagela)