open-index/open-npm huggingface dataset:
npm package: @shylog/server
Description: dynamic express router, hotreload
Author: shynome
Latest version: 0.0.16

## 说明
启动一个支持路由热更新的`express`服务器, 之后从当前目录的主文件
如 `index.ts` 中导入 `exports.router` 到服务器路由中

## 特性
- 支持路由热更新
- 引用了 `dotenv` , 可以在项目目录放置一个 `.env` 文件来配置环境 

## 安装
- 生产环境依赖
  ```sh
  npm i @shylog/server typescript ts-node 
  ```
- 开发环境依赖
  ```sh
  npm i -D @shylog/server-dev
  ```

## 使用
```bash
node ./node_modules/@shylog/server/ts.js
```
路由会使用启动目录下的主文件中的 `router`
比如 `index.ts`
```typescript
import { Router } from 'express'
export const router = Router()
//define you router
router.use('/',(req,res)=>res.send('hello world'))
```

## 配置
- 监听端口: PORT = process.env.PORT || 3000
- 监听地址: HOST = process.env.HOST || '0.0.0.0'
npm package: @shylog/server-dev
Description: ```json {   "@types/express": "^4.0.39",   "@types/node": "^8.0.53",   "require-dynamic-exec": "^1.2.20" } ```
Latest version: 0.0.2

# `@shylog/server` 的开发时依赖都放在这里了

```json
{
  "@types/express": "^4.0.39",
  "@types/node": "^8.0.53",
  "require-dynamic-exec": "^1.2.20"
}
```
npm package: @shylog/start
Description: - 直接使用 `typescript` 进行项目编写, 通过 `ts-node` 实现. - `@shylog`下的项目可以直接通过`typescript`发布使用,    使用 `ts-node` 的 `ignore` 选项进行忽略
Latest version: 0.0.14


## 目的
- 直接使用 `typescript` 进行项目编写, 通过 `ts-node` 实现.
- `@shylog`下的项目可以直接通过`typescript`发布使用, 
  使用 `ts-node` 的 `ignore` 选项进行忽略

## 安装
```bash
npm i @shylog/start typescript ts-node
```

## 使用
```bash
node . -r @shylog/start
```

## 要求
`require-dynamic-exec` 版本要求 `^1.2.17`
npm package: @shymean/vue-contextmenu
Description: vue右键菜单指令，声明式配置右键菜单
Author: shymean
Latest version: 0.1.4

# vue-contextmenu

## Feature

* 右键菜单

![](http://img.shymean.com/oPic/1610849333538_715.png)

* 多级子菜单

![](http://img.shymean.com/oPic/1610849154371_720.png)

* 自定义`item render`

![](http://img.shymean.com/oPic/1610849243240_542.png)

* 自定义替换右键菜单组件

## 开发文档

[Vue右键菜单指令](https://www.shymean.com/article/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAVue%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E6%8C%87%E4%BB%A4)

## 使用方式

### 引入依赖

```
npm i @shymean/vue-contextmenu -S
```

```js
// 引入默认菜单样式，如果使用自定义菜单组件则无需引入
import '@shymean/vue-contextmenu/dist/index.css'

import contextmenu from '@shymean/vue-contextmenu'

const options = {} // 注册参数
// 注册全局 v-contextmenu 指令
Vue.use(contextmenu, options)
```
支持注册参数
* `name` 指令名称, 默认`contextmenu`
* `menuComponent`菜单组件，默认使用内置的`Menu`组件，可传入自定义菜单组件展示

自定义组件接收下面props，然后通过插件配置项传入即可
```js
props: {
    // 菜单是否展示
    visible: {
      type: Boolean,
      default: false
    },
    // 菜单列表
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
},
```

### 使用指令
```vue
<template>
  <div id="app">
    <button v-contextmenu="{menuList, onShow}">右键菜单</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  computed: {
    menuList() {
      return [
        {
          text: '菜单1',
          onClick: () => {
            console.log(1)
          }
        },
        {
          text: '菜单2', onClick: () => {
            console.log(2)
          }
        }
      ]
    },
  },
  methods:{
    onShow(){
      // init
    }
  }
}
</script>
```
支持binding传值
* `menuList`，菜单列表，格式如下
    * `text` 菜单名称，支持下面两种类型
        * `String` 默认字符串，展示菜单名称
        * `Function` 自定义内容render方法，返回一个VNode
    * `onClick` 点击事件
    * `children` 子菜单，格式与一级菜单相同，可嵌套实现多级菜单
* `onShow`，钩子函数，在菜单展示时触发
npm package: @shymean/vuex-loading
Description: Solve the problem of asynchronous operation loading status judgment in vue project
Author: shymean
Latest version: 1.0.0

vuex-loading
===

## 背景
为了判断异步操作是否在运行中，往往通过额外的标志量来区分；
```js
function fetchList(){
  if(this.isFetchList) return // 避免重复请求
  this.isFetchList = true
  fetchListApi().then((res)=>{
    // do res
  }).finally(()=>{
    this.isFetchList = false // 重置状态
  })
}
```
当需要判断的操作过多时，需要花费大量的精力来维护这些状态。

`vuex-loading`插件主要用于解决该问题，灵感来源[`dva-loading`](https://github.com/dvajs/dva/tree/master/packages/dva-loading)。

## 使用说明

### 开发环境
```bash
# 项目依赖
npm i
# demo开发环境
cd demo
npm i && npm run dev
# 项目打包 
npm run build
```

### 安装
```bash
npm i https://github.com/tangxiangmin/vuex-loading
```

### 基本使用
```js
// list.js
export default {
    namespaced: true,
    state: {
        list: [1,2,3]
    },
    mutations: {
        updateList(state, list){
            state.list = list
        }
    },
    actions: {
        fetchList({commit, state}, payload){
            // 返回一个promise
            return new Promise((resolve)=>{
                setTimeout(()=>{
                    commit('updateList', [...state.list, Math.random()])
                    resolve(true)
                },500)
            })

        }
    }
}

// store.js
import createVuexLoading from "vuex-loading";
const vuexLoadingConfig = {}
const vuexLoading = createVuexLoading(vuexLoadingConfig)

const store = new Vuex.Store({
    modules: {
        list
    },
    plugins: [vuexLoading]
})
```

在视图文件中
```vue
<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
        </ul>
        <button @click="fetchList" :disabled="isLoadingList">{{ isLoadingList ? 'fetchList loding': 'fetchList'}}
        </button>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    export default {
        name: 'app',
        computed: {
            ...mapState({
                // 插件会注入一个loading的module，通过state.loading[actionKey]的形式判断对应action是否在执行中
                isLoadingList: (state) => state.loading['list/fetchList'],
                list: (state) => state.list.list
            })
        },
        methods: {
            fetchList() {
                this.$store.dispatch('list/fetchList')
            }
        }
    }
</script>
```

### vuexLoadingConfig

其中`vuexLoadingConfig`为插件构造配置项，目前支持
```js
const defaultConfig = {
    // loading模块的名称，使用方式：this.$store.state[loadingModuleName]
    loadingModuleName: 'loading',
    // 当前触发的action名字，context与payload同原始的dispatch参数
    // 在当前action执行前调用
    before(key, context, payload) {},
    // 在当前action执行后调用
    after() {}
}
```

## TODO

* [ ] 增加常用的逻辑处理API，如接口节流等
* [ ] 增加测试用例