feat: ✨ use-request-plugins lib

feat: use-request-plugins lib

Author: inhiblab

.github/workflows/ci.yml

@@ -29,6 +29,14 @@ jobs:
         run: |
           cd packages/use-worker 
           pnpm build
+      - name: Build use-request-image
+        run: |
+          cd packages/use-request
+          pnpm build
+      - name: Build use-request-plugins
+        run: |
+          cd packages/use-request-plugins
+          pnpm build
       - name: Docs-Build
         run: |
           cd packages/hooks

package.json

@@ -38,6 +38,8 @@
     "@vue-hooks-plus/use-immer":"workspace:^1.0.0",
     "@vue-hooks-plus/use-worker":"workspace:^1.0.0",
     "@vue-hooks-plus/use-request":"workspace:^1.0.0",
+    "@vue-hooks-plus/use-request-plugins":"workspace:^1.0.0",
+    "@vue-hooks-plus/types":"workspace:^1.0.0",
 		"@vue/test-utils": "^2.1.0",
     "@vitest/coverage-c8":"^0.25.7",
 		"eslint": "^8.20.0",
@@ -70,6 +72,7 @@
 		"vue": "^3.2.25",
 		"vue-tsc": "1.0.9",
 		"vue-typical": "^2.1.0",
+    "pinia":"^2.0.34",
     "three":"0.147.0",
     "vue-demi": "^0.13.11"
 	},

packages/hooks/docs/.vitepress/router.ts

@@ -162,6 +162,30 @@ const useRequestRouter = [
   },
 ]
 
+const useRequestPlugins = [
+  {
+    text: 'useRequest 外置插件',
+    items: [
+      {
+        text: '全局请求状态管理',
+        link: '/useRequest/plugins/fetchsing/',
+      },
+    ],
+  },
+]
+
+const useRequestPluginsEN = [
+  {
+    text: 'UseRequest External Plugins',
+    items: [
+      {
+        text: 'Global Fetching',
+        link: '/en/useRequest/plugins/fetchsing/',
+      },
+    ],
+  },
+]
+
 const useRequestRouterEN = [
   {
     text: 'useRequest',
@@ -240,6 +264,11 @@ const getUseRequestRouter = (langPrefix = '/') => {
   else return useRequestRouterEN
 }
 
+const getUseRequestPlugins = (langPrefix = '/') => {
+  if (langPrefix === '/') return useRequestPlugins
+  else return useRequestPluginsEN
+}
+
 export function getRouterConfig(langPrefix = '/') {
   return [
     {
@@ -260,6 +289,7 @@ export function getRouterConfig(langPrefix = '/') {
       ],
     },
     ...getUseRequestRouter(langPrefix),
+    ...getUseRequestPlugins(langPrefix),
     ...Router.map(item => ({
       text: item.text,
       items: item.items?.map(i => ({

packages/hooks/docs/.vitepress/theme/index.ts

@@ -5,9 +5,14 @@ import VhpButton from '../components/button'
 import '@vue-hooks-plus/vitepress-demo-block/dist/style.css'
 import './var.less'
 
+import { createPinia } from 'pinia'
+
+const store = createPinia()
+
 export default {
   ...DefaultTheme,
   enhanceApp({ app }: { app: App<Element> }) {
+    app.use(store)
     app.component('demo', DemoBlock)
     app.component('vhp-button', VhpButton)
   },

packages/hooks/src/useRequest/docs/plugins/fetchsing/demo/demo.vue

@@ -0,0 +1,80 @@
+<template>
+  <demo1 />
+  <demo2 />
+  <demo3 />
+</template>
+
+<script lang="ts" setup>
+import { useRequest } from 'vue-hooks-plus'
+import { defineComponent, h } from 'vue'
+import { useFetchingPlugin } from '@vue-hooks-plus/use-request-plugins';
+import Demo3 from './demo3.vue'
+
+const demo1 = defineComponent({
+  setup: () => {
+    function getUsername(params: { desc: string }): Promise<string> {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(`vue-hooks-plus ${params.desc}`)
+        }, 1000)
+      })
+    }
+    const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+      fetchingKey: () => {
+        return 'one'
+      },
+      onFetching: (current: any, record: any) => {
+        console.log(current);
+        console.log(record);
+      },
+      isFetching: (v: any) => {
+        console.log(v);
+      }
+    }, [useFetchingPlugin])
+    return () => {
+      return h('div', {}, [
+        h('h3', 'demo1'),
+        h('div', null, loading.value ? 'loading' : data.value),
+      ])
+    }
+  },
+})
+
+const DemoGlobal = defineComponent({
+  setup: () => {
+    function getUsername(params: { desc: string }): Promise<string> {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(`vue-hooks-plus ${params.desc}`)
+        }, 2000)
+      })
+    }
+    const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+      // manual: true,
+      fetchingKey: () => {
+        return 'two'
+      },
+      onFetching: (current: any, record: any) => {
+        console.log(current);
+        console.log(record);
+      }
+    }, [useFetchingPlugin])
+
+    // run()
+    return () => {
+      return h('div', {}, [
+        h('h3', 'demo2'),
+        h('div', null, loading.value ? 'loading' : data.value),
+      ])
+    }
+  },
+})
+
+const demo2 = defineComponent({
+  setup: () => {
+    return () => {
+      return h(DemoGlobal)
+    }
+  },
+})
+</script>

packages/hooks/src/useRequest/docs/plugins/fetchsing/demo/demo3.vue

@@ -0,0 +1,35 @@
+<template>
+  <h3>demo3</h3>
+  <div>{{ loading ? "loading..." : data }}</div>
+  <br>
+  <div>{{ isFetching ? "complete!" : "all loading..." }}</div>
+</template>
+
+<script lang="ts" setup>
+import { useRequest } from 'vue-hooks-plus'
+import { useFetchingPlugin } from '@vue-hooks-plus/use-request-plugins';
+import { ref } from 'vue';
+function getUsername(params: { desc: string }): Promise<string> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(`vue-hooks-plus ${params.desc}`)
+    }, 3000)
+  })
+}
+
+const isFetching = ref(false)
+const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+  fetchingKey: () => {
+    return 'three'
+  },
+  onFetching: (current: any, record: any) => {
+    console.log(current);
+    console.log(record);
+  },
+  isFetching: (v: boolean) => {
+    isFetching.value = v
+  }
+}, [useFetchingPlugin])
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useRequest/docs/plugins/fetchsing/index.en-US.md

@@ -0,0 +1,62 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/plugins/fetchsing
+source:
+  show: false
+---
+
+# UseRequest Fetching Plugin
+
+A plugin for global request state management based on `pinia` implementation. The `useRequest Fetching plugin` will internally create a state management instance of pinia to collect request information.
+
+## Feature
+
+- Act as the intermediate state for all requests, where users can operate on the collected request results.
+- Whether all requests have been completed and automatically collected to determine whether all requests have been completed.
+- Non intrusive, all configurations are injected by plugins, and are non-invasive to the current function.
+
+## Install
+
+```bash
+
+# It is necessary to ensure that the application contains pinia and has been used by Vue instances.
+
+1. npm i pinia
+
+2. npm i @vue-hooks-plus/use-request-plugins
+
+```
+
+## Demo
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc="Multiple components, displaying complete when all requests are completed"> </demo>
+
+## API
+
+```typescript
+import { useRequest } from 'vue-hooks-plus'
+import { useFetchingPlugin } from '@vue-hooks-plus/use-request-plugins'
+
+useRequest(
+  service,
+  {
+    fetchingKey: (params: any[]) => string
+    onFetching: (current:any,record:Record<string,any>) => void,
+    isFetching: (_isFetching: boolean) => void,
+  },
+  [useFetchingPlugin],
+)
+```
+
+## Options
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| fetchingKey | The identification key of the status needs to be collected, and if it exists, it will be collected by the status |
+| `(params: any[]) => string` | - |
+| onFetching | Intermediate state function callback, the first parameter `current` is the current state of itself, and the second parameter `record` is all states | `(current:any,record:Record<string,any>) => void` | - |
+| isFetching | Official built-in function to determine whether all request statuses have been completed | `(_isFetching: boolean) => void` | - |

packages/hooks/src/useRequest/docs/plugins/fetchsing/index.zh-CN.md

@@ -0,0 +1,61 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/plugins/fetchsing
+source:
+  show: false
+---
+
+# useRequest Fetching 插件
+
+基于 `pinia` 实现的全局请求状态管理的插件。useRequest Fetching 插件会在内部创建一个 `pinia`的状态管理实例，收集请求的信息。
+
+## 功能
+
+- 充当所有请求的状态中间态，用户可以在中间态中对收集的请求结果进行操作。
+- 是否所有请求都完成，自动收集判断所有请求是否完成。
+- 无侵入性，所有配置均由插件注入，对当前函数无侵入性。
+
+## 安装
+
+```bash
+
+# 需要保证应用含有pinia，并且被Vue实例 use。
+
+1. npm i pinia
+
+2. npm i @vue-hooks-plus/use-request-plugins
+
+```
+
+## 示例
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc="多个组件，当所有请求完成后显示 complete"> </demo>
+
+## API
+
+```typescript
+import { useRequest } from 'vue-hooks-plus'
+import { useFetchingPlugin } from '@vue-hooks-plus/use-request-plugins'
+
+useRequest(
+  service,
+  {
+    fetchingKey: (params: any[]) => string
+    onFetching: (current:any,record:Record<string,any>) => void,
+    isFetching: (_isFetching: boolean) => void,
+  },
+  [useFetchingPlugin],
+)
+```
+
+## Options
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| fetchingKey | 需要收集状态的标识 key，存在即会被状态收集 | `(params: any[]) => string` | - |
+| onFetching | 中间态函数回调，第一个参数`current`是当前自身的状态，第二个参数`record`是所有的状态 | `(current:any,record:Record<string,any>) => void` | - |
+| isFetching | 官方自带的功能，判断所有请求状态是否请求完成 | `(_isFetching: boolean) => void` | - |

packages/types/index.d.ts

@@ -749,7 +749,7 @@ export declare function usePrevious<T>(state: Ref<T> | ComputedRef<T>, shouldUpd
 
 declare type UsePreviousShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean;
 
-export declare function useRequest<TData, TParams extends unknown[] = unknown[], PluginsOptions extends UseRequestPlugin<TData, TParams>[] = UseRequestPlugin<TData, TParams>[]>(service: UseRequestService<TData, TParams>, options?: UseRequestOptions<TData, TParams, PluginsOptions extends (infer P)[] ? P extends UseRequestPlugin<TData, TParams, infer R> ? R : any : any>, plugins?: PluginsOptions): useRequestResult<TData, TParams>;
+export declare function useRequest<TData, TParams extends unknown[] = unknown[], PluginsOptions extends UseRequestPlugin<TData, TParams>[] = UseRequestPlugin<TData, TParams>[]>(service: UseRequestService<TData, TParams>, options?: UseRequestOptions<TData, TParams, PluginsOptions extends (infer P)[] ? P extends UseRequestPlugin<TData, TParams, infer R> ? R : never : never>, plugins?: PluginsOptions): useRequestResult<TData, TParams>;
 
 declare interface UseRequestBasicOptions<TData, TParams extends unknown[]> {
     /**
@@ -913,7 +913,7 @@ declare type UseRequestOptions<TData, TParams extends unknown[], TPlugin> = {
     [K in keyof TPlugin]: TPlugin[K];
 };
 
-declare interface UseRequestPlugin<TData, TParams extends unknown[] = unknown[], TPlugin = any> {
+export declare interface UseRequestPlugin<TData, TParams extends unknown[] = unknown[], TPlugin = any> {
     (fetchInstance: Fetch<TData, TParams>, options: UseRequestOptions<TData, TParams, TPlugin>): UseRequestPluginReturn<TData, TParams>;
     onInit?: (options: UseRequestOptions<TData, TParams, TPlugin>) => Partial<UseRequestFetchState<TData, TParams>>;
 }

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-hooks-plus/types",
-  "version": "1.6.0-alpha.8",
+  "version": "1.6.0",
   "description": "",
   "files": [
     "index.d.ts",