open-index/open-npm huggingface dataset:
npm package: @mt-kit/cli-run
Description: 一个用于在 monorepo 中智能运行脚本的 CLI 工具
Author: Li Yong
Latest version: 1.0.0

# @mt-kit/cli-run

一个用于在 monorepo 中智能运行脚本的 CLI 工具。

## 功能特性

- 🚀 **智能包发现**：自动发现 monorepo 中包含指定脚本的包，默认值为 `start,dev,storybook`
- 🎯 **精确范围控制**：支持指定目录范围，只在特定目录下查找包
- 📋 **交互式选择**：当有多个包时，提供友好的选择界面
- 🔧 **多命令支持**：支持单个命令或命令数组
- 📦 **包信息显示**：显示包名、描述和版本信息

## 安装

```bash
# 使用 npm
npm install -D @mt-kit/cli-run

# 使用 yarn
yarn add -D @mt-kit/cli-run

# 使用 pnpm
pnpm add -D @mt-kit/cli-run
```

## 使用方法

### 基本用法

```bash
# 运行单个命令
mt-run start

# 运行多个命令（逗号分隔）（推荐）
mt-run start,storybook

# 运行多个命令（JSON 数组格式）
mt-run '["start", "storybook"]'

# 打包
mt-run build
```

### 指定目录范围

```bash
# 只在 packages-vue 目录下查找包
mt-run start --root ./packages-vue

# 只在 packages-react 目录下查找包
mt-run storybook --root ./packages-react

# 使用绝对路径
mt-run start --root /path/to/your/monorepo/packages-vue
```

### 在 package.json 中使用

```json
{
  "scripts": {
    "start": "mt-run start",
    "start:vue": "mt-run start --root ./packages-vue",
    "start:react": "mt-run start --root ./packages-react",
    "dev": "mt-run start,storybook",
    "dev:vue": "mt-run start,storybook --root ./packages-vue"
  }
}
```

## 交互式选择

当有多个包包含相同的脚本时，工具会显示交互式选择界面：

```text
? 请选择需要执行的包 start, storybook: ›
❯ @mt-kit/vue-components (Vue 组件库) [start] v1.0.0
  @mt-kit/react-components (React 组件库) [start] v1.0.0
  @mt-kit/utils (工具函数库) [start] v1.0.0
```

选择界面会显示：

- 包名和描述
- 匹配的脚本类型
- 版本号

## 配置说明

### 支持的包管理器

- ✅ pnpm（推荐）
- ✅ npm
- ✅ yarn

### 包过滤规则

- 自动跳过 `private: true` 的包
- 自动排除 `node_modules` 目录
- 只查找包含指定脚本的包

## 故障排除

### 常见问题

1. **找不到包**
   + 检查 `--root` 路径是否正确
   + 确认包中包含指定的脚本

2. **权限问题**
   + 确保有执行脚本的权限
   + 检查包的 `package.json` 配置

3. **脚本不存在**
   + 确认包中确实包含指定的脚本
   + 检查脚本名称是否正确
npm package: @mt-plugin/mt-plugin-container
Description: 生成对应结构的Html容器，样式需要设置样式，可以参考[custom-block.scss](https://github.com/zengsl/mt-plugin/blob/main/packages/mt-plugin-demo-component/src/styles/content/custom-block.scss)
Author: zzz
Latest version: 0.0.2

# 容器插件 

生成对应结构的Html容器，样式需要设置样式，可以参考[custom-block.scss](https://github.com/zengsl/mt-plugin/blob/main/packages/mt-plugin-demo-component/src/styles/content/custom-block.scss)

## 准备

> 通过`unplugin-vue-markdown`配置，需要提前安装

[unplugin-vue-markdown](https://github.com/unplugin/unplugin-vue-markdown)

```shell
npm i unplugin-vue-markdown
```

- Vite

```shell
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
    }),
    Markdown({ /* options */ }),
  ],
})
```


- Markdown中使用Vue组件

直接导入组件或者使用`vite-plugin-components`并配置md类型


- Frontmatter

- Document head and meta

## 使用方式

- 安装

```shell
pnpm add @mt-plugin/mt-plugin-container
```

- 配置

使用预设容器

```js {5}
Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用预设的容器：warning、tip、danger
        md.use(presetContainer)
    )
    },
})
```

自定义容器

```js {5}
Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用自定义容器，更多配置参考ContainerPluginOptions
        md.use(containerPlugin, { type: 'info' })
    )
    },
})
```
npm package: @mt-plugin/mt-plugin-demo
Description: 参考Element-Plus的组件展示方案实现。
Author: zzz
Latest version: 0.0.5

# Demo容器插件 

参考Element-Plus的组件展示方案实现。

## 准备

与[mt-plugin-container](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-container)一样，当前插件依赖于mt-plugin-container，需要配合使用。

在vite中增加配置别名`@d`，方便使用

```js
 alias: {
    '@d': path.resolve(__dirname, './src/docs'),
},
```

## 使用方式

### 安装

```shell
pnpm add @mt-plugin/@mt-plugin/mt-plugin-demo
```

### 配置


- 配置Demo容器

```js 
import path from 'node:path'
import Markdown from 'unplugin-vue-markdown/vite'

// import { demoContainer, presetContainer } from '../../src/docs/core/plugins/markdown-container'
import { presetContainer } from '@mt-plugin/mt-plugin-container'
import { demoContainer } from '@mt-plugin/mt-plugin-demo'
import type { MarkdownItDemoOptions } from '@mt-plugin/mt-plugin-demo'
//  计算根目录（根据当前插件配置文件所在位置实际情况调整）
const projectRoot = path.resolve(__dirname, '..', '..')

export default function createVueMarkdown() {
    return Markdown({
        headEnabled: true, // <--
        async markdownItSetup(md) {
            md.use(presetContainer)
            // 注册Demo容器插件
            md.use(demoContainer, { projectRoot } as MarkdownItDemoOptions)
        },
    })
}
```

- 配置组件

> 也可以自行封装一个Demo组件，参考[mt-plugin-demo-component](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo-component)

mt-plugin-demo-component使用方式

```ts
// main.ts
// 文档插件
import docs from '@mt-plugin/mt-plugin-demo-component'

app.use(docs)
```


```js 
// 安装vite插件，markdown转换器
import { MarkdownDemoTransform } from '@mt-plugin/mt-plugin-demo-component'

vitePlugins.push(MarkdownDemoTransform())
```


### 使用

> 使用mt-plugin-demo-component的方式

1. 在src下创建一个docs目录，内部包含zh-CN、examples文件夹，zh-CN文件夹下包含文档说明文件，examples文件夹存放文档中需要使用的示例代码。

2. 两个目录之间的关系：zh-CN下创建一个query.md用于描述查询组件文档，examples下创建一个query文件夹，query文件夹下包含xxx.vue示例组件。

3. query.md中通过demo容器组件使用examples的示例代码，如：

```js

::: demo docsButton使用案例

query/docsButton

:::

```
docsButton使用案例为描述内容

`query/docsButton`为示例组件的相对路径，切上下方各有一个行空行

4.创建一个用于展示的vue组件，并导入默认样式

```vue
<script setup lang="ts">
import '@mt-plugin/mt-plugin-demo-component/dist/index.css'
import componentDocs from '@d/zh-CN/component/query.md'
</script>

<template>
  <div class="doc-content-wrapper">
    <div class="doc-content-container">
      <componentDocs />
    </div>
  </div>
</template>

<style lang="scss" scoped>
//   外层如果有设置overflow属性，可能会影响代码内容打开后，收缩按钮在下方粘滞的效果。需要自行调整。
/*.doc-content-wrapper {
  height: calc(100vh - 84px);
  overflow: auto;
}
:deep{
  .mt-example-float-control {
    bottom: -42px
  }
}*/
</style>
```

更多内容参考[mt-plugin-demo-component](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo-component)


## 代办

- [ ] highlight.ts中prism.languages配置更多扩展语言？
- [ ] demo组件代码区域缺少语言标记vue
npm package: @mt-plugin/mt-plugin-demo-component
Description: 参考Element-Plus的组件展示方案实现,配合[mt-plugin-demo](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo)使用，提供默认组件、样式。
Author: zzz
Latest version: 0.0.6

# Demo容器插件

参考Element-Plus的组件展示方案实现,配合[mt-plugin-demo](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo)使用，提供默认组件、样式。

## 准备

与[mt-plugin-container](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-container)一样，当前插件依赖于mt-plugin-container，需要配合使用。

在vite中增加配置别名`@d`，方便使用

```js
 alias: {
    '@d': path.resolve(__dirname, './src/docs'),
},
```

## 使用方式

### 安装

```shell
pnpm add @mt-plugin/@mt-plugin/mt-plugin-demo-component
```

### 配置

- 配置组件

> 也可以自行封装一个Demo组件，参考[mt-plugin-demo-component](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo-component)

mt-plugin-demo-component使用方式

```ts
// main.ts
// 文档插件
import docs from '@mt-plugin/mt-plugin-demo-component'

app.use(docs)
```


```js 
// 安装vite插件，markdown转换器
import { MarkdownDemoTransform } from '@mt-plugin/mt-plugin-demo-component'

vitePlugins.push(MarkdownDemoTransform())
```


### 使用


#### 创建文档

1. 在src下创建一个docs目录，内部包含zh-CN、examples文件夹，zh-CN文件夹下包含文档说明文件，examples文件夹存放文档中需要使用的示例代码。

2. 两个目录之间的关系：zh-CN下创建一个query.md用于描述查询组件文档，examples下创建一个query文件夹，query文件夹下包含xxx.vue示例组件。

3. query.md中通过demo容器组件使用examples的示例代码，如：

```js

::: demo docsButton使用案例

query/docsButton

:::

```
docsButton使用案例为描述内容

query/docsButton为示例组件的相对路径，切上下方各有一个行空行




#### 创建展示容器组件

创建一个用于展示的vue组件，并导入默认样式

```vue
<script setup lang="ts">
import '@mt-plugin/mt-plugin-demo-component/dist/index.css'
import componentDocs from '@d/zh-CN/component/query.md'
</script>

<template>
  <div class="doc-content-wrapper">
    <div class="doc-content-container">
      <componentDocs />
    </div>
  </div>
</template>

<style lang="scss" scoped>
//   外层如果有设置overflow属性，可能会影响代码内容打开后，收缩按钮在下方粘滞的效果。需要自行调整。
/*.doc-content-wrapper {
  height: calc(100vh - 84px);
  overflow: auto;
}
:deep{
  .mt-example-float-control {
    bottom: -42px
  }
}*/
</style>
```
npm package: @mt-testutils/expect-shallow-snapshot
Description: Testing utility function to assert that a shallow-rendered React component matches a Jest snapshot
Author: Patrick Hund
Latest version: 1.0.0

# expect-shallow-snapshot

This is a convencience function for shallow-rendering a React component and asserting that it matches a Jest snapshot.

Shallow rendering means that nested components are not actually rendered, but show up in the snapshots as 
React components.

## Installation

    npm install --save-dev @mt-testutils/expect-shallow-snapshot

## Usage

    import MyReactComponent from './MyReactComponent';
    import expectShallowSnapshot from '@mt-testutils/expect-shallow-snapshot';
   
    describe('My react component', () => 
        it('renders correctly', () => expectShallowSnapshot(<MyComponent />)
    );
   
## Change Log

* See [CHANGELOG.md](CHANGELOG.md)

## Contribution Guidelines

* See [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

[MIT licensed](LICENSE)

Copyright © 2018 mobile.de GmbH
npm package: @mt-testutils/expect-snapshot
Description: Testing utility function to assert that a rendered React component matches a Jest snapshot
Author: Patrick Hund
Latest version: 1.0.5

# expect-snapshot

This is a convencience function for rendering a React component and asserting that it matches a Jest snapshot.

## Installation

    npm install --save-dev @mt-testutils/expect-snapshot

## Usage

    import MyReactComponent from './MyReactComponent';
    import expectSnapshot from '@mt-testutils/expect-snapshot';
   
    describe('My react component', () => 
        it('renders correctly', () => expectSnapshot(<MyComponent />)
    );
   
## Change Log

* See [CHANGELOG.md](CHANGELOG.md)

## Contribution Guidelines

* See [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

[MIT licensed](LICENSE)

Copyright © 2018 mobile.de GmbH
npm package: @mt-testutils/mock-store
Description: A mock Redux store for Jest unit tests
Author: Patrick Hund
Latest version: 1.0.5

# mock-store

Simple utility function to create a mock Redux store, to be used for unit tests.

## Installation

    npm install --save-dev @mt-testutils/mock-store
    
## Usage

    import createMockStore from '@mt-testutils/mock-store';
    
    // Initial Redux state for the mock store, defaults to {} if omitted  
    const state = {
        foo: 'bar'
    };
    
    const mockStore = createMockStore(state);
    
## Change Log

* See [CHANGELOG.md](CHANGELOG.md)

## Contribution Guidelines

* See [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

[MIT licensed](LICENSE)

Copyright © 2018 mobile.de GmbH
npm package: @mt-testutils/mount-hoc
Description: A helper function for Jest unit tests that creates higher-order components
Author: Patrick Hund
Latest version: 1.0.8

# mount-hoc

Helper function that:

* creates a mockStore with given state
* connects the component to the Redux store
* mounts a component with [Enzyme](http://airbnb.io/enzyme/)
* allows to pass `contextTypes`, which will automatically added as props to the mounted component

## Installation

    npm install --save-dev @mt-testutils/mount-hoc
    
## Usage

    import mountHoc from '@mt-testutils/mount-hoc';
    import myHoc from './myHoc';
    
    // Props passed to the higher order component, defaults to {} if omitted
    const props = {
        someProp: 'some prop'
    };
    
    // Redux state, defaults to {} if omitted
    const state = {
        foo: 'bar'
    };
    
    // Component that is wrapped by the HOC, defaults to <div>wrapped</div>
    const WrappedComponent = <h1>Hello!!1!</h1>;
    
    mountHoc(myHoc, { props, state, WrappedComponent });
    
## Change Log

* See [CHANGELOG.md](CHANGELOG.md)

## Contribution Guidelines

* See [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

[MIT licensed](LICENSE)

Copyright © 2018 mobile.de GmbH
npm package: @mt-testutils/test-saga
Description: Allows easy testing of Redux sagas without having to mock anything
Author: Patrick Hund
Latest version: 1.0.5

# test-saga

Allows easy testing of redux-sagas without having to mock anything.

## Installation

    npm install --save-dev @mt-testutils/test-saga
    
## Usage

Let's assume we have a generator function like this:

    function* mySaga() {
        try {
            const value1 = put(someAction);
            yield value1;
        } catch (e) {
            yield 'ERROR';
        }
    }

With this helper function, we can easily test the generator, by writing one `it` test per yield expression:

    import mySaga from './mySaga';
    import testSaga from '@mt-testutils/test-saga';

    testSaga(mySaga(), () => {
        it('should yield a put', nextYield => {
            nextYield.should.equal(put(someAction));
            return 'hello world'
        });
        it ('should yield the return value from last yield', nextYield => {
            nextYield.should.equal('hello world');
            return new Error('ERROR');
        });
        it ('should yield the error thrown by last yield', nextYield => {
            nextYield.should.equal('ERROR');
        });
    });

## Change Log

* See [CHANGELOG.md](CHANGELOG.md)

## Contribution Guidelines

* See [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

[MIT licensed](LICENSE)

Copyright © 2018 mobile.de GmbH