open-index/open-npm huggingface dataset:
npm package: @mocat/interceptor
Description: Interceptor for Mocat
Latest version: 0.3.0

# Mocat Interceptor

## Intro

The part of Mocat which is used to interceptor http request.

## Usage

Install dependencies:

```sh
yarn add --dev @mocat/interceptor
```

Then

```ts
import { eventEmitter, setupFetch, setupXHR } from '@mocat/interceptor'

// proxy http request
const resetFetch = setupFetch()
const resetXHR = setupXHR()

eventEmitter.onAny((event, value) => console.log(event, value))

// reset
resetFetch()
resetXHR()
```

## Credits

The implementation of this module is power by the following prior art in the JavaScript ecosystem:

- [xhr-mock](https://github.com/jameslnewell/xhr-mock)
- [fetch-mock](https://github.com/wheresrhys/fetch-mock)

## Caveats

- `@mocat/interceptor` will replaces `window.fetch` and `window.XMLHttpRequest` with a proxy that Mocat can spy on and stub.
npm package: @mocat/ui
Description: User Interface for Mocat
Latest version: 0.3.0

# Mocat UI

the core UI of Mocat. It's a React based UI which you can initialize with a function. You can configure it by providing a provider API.

## Usage

First you need to install `@mocat/ui` into your app.

```
yarn add @mocat/ui --dev
```

Then you can initialize the UI like this:

```ts
import { EventEmitter2 } from 'eventemitter2'
import { create as createUI } from '@mocat/ui'
import type { UIOptions, MockEventEmitter } from '@mocat/ui'

const roolEl = document.querySelector('#root')
const eventEmitter = new EventEmitter2() as MockEventEmitter

const uiOptions: UIOptions = {
  eventEmitter,
  el: roolEl, // optional
  // ...
}

const ui = createUI(uiOptions)

ui.unmount()
```
npm package: @mocchapine/red-sock
Description: A package for creating connection between redux store and socket.io-client listener
Author: RayhanHamada
Latest version: 1.0.0

# red-sock ![Node.js Package](https://github.com/RayhanHamada/red-sock/workflows/Node.js%20Package/badge.svg)

A package for making connection between redux and socket.io-client

## Install

```sh
yarn add @mocchapine/red-sock
// or
npm i @mocchapine/red-sock
```

## Usage

Assumed that you have create a redux store, you could do

```ts
// import
const { connect } = require('socket.io-client');
const { connectRedSock } = require('@mocchapine/red-sock');

// or if u using es6 module
import { connect } from 'socket.io-client';
import { connectRedSock } from '@mocchapine/red-sock';

// create socket
const socket = connect('http://localhost:3000');

// call connectRedSock
const newSocket = connectRedSock(store, socket)
  /**
   * you can just pass a function that return object of socket event to the "on" method.
   * You also have access to the store's dispatch and getState method, and the actual socket's emit method
   */
  .on(({ dispatch, emit, getState }) => ({
    // and here is where you can register your socket event.
    // you can pass the socket event name here as the name of the function
    increment: () => {
      // dispatching inc event to store's reducer
      dispatch({
        type: 'INCREMENT',
      });
    },
    decrement: () => {
      dispatch({
        type: 'DECREMENT',
      });
    },

    /**
     * Usually, a socket event name can contain a non-alphanumeric character,
     * like 'join-room' or 'leave-room'. if your event name like so,
     * you could wrap the event name in a quote like below !
     */
    'increment-by': by => {
      console.log(`dispatching incBy action !`);
      dispatch({
        type: 'INCREMENT_BY',
        payload: by,
      });
    },

    /**
     * notice that you have access to emitted event's data by specifying
     * it as a parameter.
     *
     * normally, you probably would do
     *
     * socket.on('decrement-by', by => {
     *    dispatch({
     *      type: 'DECREMENT_BY',
     *      payload: by
     *    })
     * })
     *
     */
    'decrement-by': by => {
      dispatch({
        type: 'DECREMENT_BY',
        payload: by,
      });
    },
    // the function can be asynchronous too !
    'async-increment': async () => {
      // delay the dispatch for 1 second
      await new Promise(resolve => setTimeout(resolve, 1000));

      dispatch({
        type: 'INCREMENT',
      });
    },
  })); // the on function returns the same socket you've created before
```

The .on method returns the same socket object that you can use later.
Usually, i separate the store and the socket, in a javascript file called red-sock, and then export the socket object

### <b>With Typescript</b>

This package is built entirely in Typescript, so assumed that you're using Typescript and your reducer and store is strongly-typed, then red-sock is able to infer the type of your redux action (when dispatching action) and what is the shape of your redux's global state.

## License

MIT
npm package: @moccona/apicodegen
Description: `@moccona/apicodegen` is a command-line tool for generating TypeScript code from OpenAPI documentation. It provides a simple and efficient way to automate the process of creating API clients.
Author: freemode
Latest version: 0.0.3

# @moccona/apicodegen

`@moccona/apicodegen` is a command-line tool for generating TypeScript code from OpenAPI documentation. It provides a simple and efficient way to automate the process of creating API clients.

## Installation

To install `@moccona/apicodegen`, you can use npm or yarn:

```sh
npm install -g @moccona/apicodegen

# or

yarn global add @moccona/apicodegen
```

## Usage

### Basic Command

The basic command to generate TypeScript code from an OpenAPI documentation URL is as follows:

```sh
apicodegen <docURL> --output ./output.ts
```

- `<docURL>`: The URL of the OpenAPI documentation file.
- `--output`: The path where the generated TypeScript code will be saved. Default is `./output.ts`.
- `--adaptor`: The adaptor for API calls. Default is `fetch`.
- `--baseURL`: The base path of the API endpoint.
- `--verbose`: Enable verbose logging.
- `--importClientSource`: The source from which the request tool will be imported.

## Example

To generate TypeScript code from an OpenAPI documentation file located at `https://api.example.com/openapi.json` and save it to `./src/api.ts`, you can run:

```sh
apicodegen https://api.example.com/openapi.json --output ./src/api.ts
```

## Contributing

Contributions are welcome! Please read the [contributing guidelines](./CONTRIBUTING.md) before submitting a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
npm package: @moccona/eslint-config
Description: A simple eslint configuration
Author: wp.l
Latest version: 1.0.6

# @moccona/eslint-config

The @moccona/eslint-config package provides a convenient way to configure ESLint rules. It allows you to extend the default configuration with custom rules tailored to your project's needs.

## Installation

1. Basic Installation:

```sh
npm install @moccona/eslint-config -D
```

## Available Extras

The package provides additional configuration options through "extras" modules, which can be imported and customized. Currently supported extras include:

- TypeScript: Extends the base configuration with TypeScript-specific rules.
- React: Provides React-specific configurations for ESLint checks.
- TailwindCSSv3: Offers Tailwind CSS utilities integration into ESLint reports.
- Jest: Enhances ESLint with Jest-generated test files and fixtures.
- Vitest: Adds Vitest test discovery options to your ESLint configuration.

## Example Usage

Here's an example of how you might use the package in your project:

```js
// eslint.config.js
import baseConfig from "@moccona/eslint-config/flat";
// if you use typescript.
import tsConfig from "@moccona/eslint-config/extra/typescript";
// if you use prettier
import prettierConfig from "@moccona/eslint-config/extra/prettier";

export default [
  ...baseConfig,
  ...tsConfig,
  ...prettierConfig,
  {
    // Add your custom here.
  },
];
```

## Notes

The legacy configuration is marked as deprecated. Users are encouraged to use the new format instead.
npm package: @moccona/logger
Description: logger function folk from https://github.com/coleam00/bolt.new-any-llm/blob/cb1fd38df6517fe33cc89f727b2c87d6bb63cb1c/app/utils/logger.ts
Latest version: 0.0.2

# @moccona/logger

logger function folk from https://github.com/coleam00/bolt.new-any-llm/blob/cb1fd38df6517fe33cc89f727b2c87d6bb63cb1c/app/utils/logger.ts
npm package: @moccona/preset-config
Description: A set of preset configs for standardizing and streamlining configuration across projects. Includes pre-configured settings for common tools like TypeScript, Prettier, and Browserslist to ensure consistent development workflows with minimal setup.
Author: wp.l
Latest version: 0.0.5

# @vitg/config

通用配置文件

## Prettier

```json5
{
  prettier: "@vitg/config/prettierrc",
}
```

## Browserslist

在使用前，确保设置了 `BROWSERSLIST_DANGEROUS_EXTEND=1` 环境变量。
通常如果你使用 `vite` 的脚手架，在更目录创建 `.env` 文件，将环境变量写在 `.env` 文件中即可。

```json5
{
  browserslist: ["extends @vitg/config/browserslist"],
}
```

## Vite devServer

根据环境变量切换代理服务器地址，默认根据 `process.env.SERVER` 来决定使用的代理配置。

```ts
// vite.config.ts

import proxy from "@vitg/config/proxy";

// 或者可以使用 cross-env 直接在命令行里面设置环境变量
process.ev.SERVER = "dev";

const proxyServer = proxy({
  dev: {
    "/api": {
      target: "https://0.0.0.0:8002",
    },
    "/genai": {
      target: `http://0.0.0.0:8848`,
    },
  },
  prod: {
    "/api": {
      target: "https://ngs.ncspoc.online",
    },
    "/genai": {
      target: `https://ngs.ncspoc.online`,
    },
  },
});

export default defineConfig({
  // ...
  server: {
    port: 5174,
    // Use Here
    proxy: proxyServer,
  },
  // ....
});
```
npm package: @moccona/vite-plugin-react-conventional-router
Description: Vite plugin for react conventional router
Author: wp.l
Latest version: 0.2.8

# @moccona/vite-plugin-react-conventional-router

> 这个库只基于 _react-router_ 实现，与 _react-router_ 的功能高度集成。其他的路由库暂时不支持，比如 _@tanstack/react-router_

## 安装与配置

- 先安装 _react-router_ 和 _react-router-dom_

```sh
npm i react-router react-router-dom
```

- 安装插件

```sh
npm i @moccona/vite-plugin-react-conventional-router -D
```

- 配置插件

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import conventionalRouter from "@moccona/vite-plugin-react-conventional-router"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    conventionalRouter({
      // 需要解析为路由的文件
      include: ["src/pages/**"],
      // 需要被排除解析的文件
      exclude: ["src/**/components/**","src/**/hooks/**"]
    }),
  ],
})

//
```

- 添加虚拟路由模块类型定义文件到 _tsconfig.json_ ， 避免导入路有配置的时候报 _MODULE NOT FOUND_ 的错误。

```ts
{
  //...
  "include": [
    "src",
    "./node_modules/@moccona/vite-plugin-react-conventional-router/client.d.ts"
  ]
}
```

- 从虚拟路由模块中导入生成的路由数据，然后创建路由

```tsx
import routes from "virtual:routes"
import { createBrowserRouter, RouterProvider } from "react-router-dom";

export default function App() {
  return <div id="main">
    <RouterProvider
      router={createBrowserRouter(routes)}
      fallbackElement={
        <div>
          Loading
        </div>
      }
    />
  </div>
}
```

## 文件名与路由的映射关系

```txt
`src/pages/index.tsx`           -> `/`
`src/pages/home.tsx`            -> `/home`
`src/pages/home.list.tsx`       -> `/home/list`
`src/pages/home.@id.tsx`        -> `/home/:id`
`src/pages/home.list.$id.tsx`   -> `/home/list/:id?`
`src/pages/blog/_.tsx`   -> `/home/blog/*`
```

### Layout

两种布局组件格式。

- \*\*/layout.tsx

  作为同级目录下的布局组件。

- \*\*/pageName.layout.tsx

  作为page路由的布局组件。

### ErrorBoundary

两种错误边界组件格式。

- \*\*/errorBoundary.tsx

  作为同级目录下的错误边界组件。

- \*\*/page.errorBoundary.tsx

  作为page路由的错误边界组件。

## 如何组织路由文件内容

文件内容组织参考 _react-router_ 的 [**lazy**](https://reactrouter.com/en/main/route/lazy#lazy) 部分。唯一不同的是，默认到处会作为 _Component_ 被使用。

## 环境变量

插件支持从环境变量中读取 _browser router_ 的配置。

- BASE_NAME 用程序的basename，用于不能部署到域的根目录，而是一个子目录的情况。

## Todos

- [x] "virtual:routes" module for routes export.
- [x] Support dynamic route.
- [x] Support optional route.
- [x] Split loader/action into individual file.
- [x] Support reading router configuration from .env file.
- [x] Migrate react-router from v6 to v7.
npm package: @moccu/babel-browserslist-loader
Description: The webpack babel-loader with support for browsers defined in .browserslistrc for babel 6.x
Author: Moccu GmbH & Co. KG
Latest version: 1.0.1

# babel-browserslist-loader

[![Build Status](https://travis-ci.org/moccu/babel-browserslist-loader.svg?branch=master)](https://travis-ci.org/moccu/babel-browserslist-loader)
[![Coverage Status on Codecov](https://codecov.io/gh/moccu/babel-browserslist-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/moccu/babel-browserslist-loader)

The webpack babel-loader with support for browsers defined in .browserslistrc
for babel 6.x.

According to the missing support of a shareable browserslist config in
babel-preset-env ([issue 108](https://github.com/babel/babel-preset-env/issues/108))
and the
[comment of skleeschulte](https://github.com/babel/babel-preset-env/issues/108#issuecomment-302881919),
this functions provides a [babel-loader](https://github.com/babel/babel-loader)
configuration including the target browsers configuration from the browserslistrc
file.

## Installation

```
$ npm install --save-dev @moccu/babel-browserslist-loader
```

## Usage

```
const babelloader = require('@moccu/babel-browserslist-loader');


module.exports = {

	// webpack config...

	rules: [
		{
			test: /\.js$/
			use: [
				babelloader()
			]
		}
	]
};
```

## Contribute

* Run tests using `npm test`
* Set new version in [package.json](https://github.com/moccu/babel-browserslist-loader/blob/master/package.json)
* Publish new version on npm using `npm publish --access=public`
* Add github release and tag including release notes

## License

[MIT](./LICENSE)
npm package: @moccu/eslint-config
Description: The eslint config we use at moccu
Author: Moccu GmbH & Co. KG
Latest version: 0.6.0

# eslint-config-moccu

[![Build](https://github.com/moccu/eslint-config-moccu/actions/workflows/build.yml/badge.svg)](https://github.com/moccu/eslint-config-moccu/actions)


The eslint config we use at moccu

## Installation

```
$ npm install --save-dev @moccu/eslint-config
```

## Usage

### Base

This is a customized ruleset based on the [eslint recommended](https://eslint.org/docs/rules/)
rules.

```js
{
	"extends": [
		"@moccu/eslint-config"
	],
	"rules": {
		// Additional rules...
	}
}
```

### React

This is a customized ruleset based on the [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)
rules.
Separately there is a ruleset for proptypes-validation in `@moccu/eslint-config/react-proptypes`.

```js
{
	"extends": [
		"@moccu/eslint-config",
		"@moccu/eslint-config/react",
		"@moccu/eslint-config/react-proptypes"
	],
	"rules": {
		// Additional rules...
	}
}
```

## Contribute

* Add / Edit rules after agreements with developers at Moccu
* Run tests using  `npm test`
* Set new version in [package.json](https://github.com/moccu/eslint-config-moccu/blob/master/package.json)
* Publish new version on npm using `npm publish --access=public`
* Add github release and tag including release notes

## License

[MIT](./LICENSE)