Merge pull request #176 from InhiblabCore/dev

feat: ✨ useRequest add Middleware

Author: inhiblab

package.json

@@ -29,10 +29,11 @@
 		"@types/node": "^17.0.21",
 		"@types/qs": "^6.9.7",
 		"@vitejs/plugin-vue": "^2.3.1",
+    "@vue/compiler-core": "^3.2.37",
     "@vue-hooks-plus/vite-plugin-gen-temp": "^2.6.6",
 		"@vue-hooks-plus/md-demo-plugins": "^1.0.0",
 		"@vue-hooks-plus/vitepress": "^1.2.4",
-		"@vue-hooks-plus/vitepress-demo-block": "^1.3.1",
+		"@vue-hooks-plus/vitepress-demo-block": "workspace:^1.0.0",
     "@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",

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

@@ -154,6 +154,10 @@ const useRequestRouter = [
         text: '滚动加载 & 分页加载',
         link: '/useRequest/scroll/',
       },
+      {
+        text: '中间件·Beta',
+        link: '/useRequest/middleware/',
+      },
       {
         text: '插件设计',
         link: '/useRequest/plugin/',
@@ -263,6 +267,10 @@ const useRequestRouterEN = [
         text: 'Scroll',
         link: '/en/useRequest/scroll/',
       },
+      {
+        text: 'Middleware·Beta',
+        link: '/en/useRequest/middleware/',
+      },
       {
         text: 'Plugins Design',
         link: '/en/useRequest/plugin/',

packages/hooks/docs/.vitepress/theme/home/Home-EN.vue

@@ -4,6 +4,9 @@
   import Icon from './Icon.vue'
   // import Waves from '../Waves/index.vue'
   import Waves from '../Wave.vue'
+
+  // @ts-ignore
+  const mode = import.meta.env.MODE
 </script>
 
 <template>
@@ -18,7 +21,11 @@
       </h1>
       <p class="description"> </p>
       <p class="actions">
-        <a class="get-started" href="/docs/hooks/en/guide/" style="position: relative; z-index: 9;">
+        <a
+          class="get-started"
+          :href="mode === 'development' ? '/en/guide/' : '/docs/hooks/en/guide/'"
+          style="position: relative; z-index: 9;"
+        >
           Get Started
           <svg
             class="icon"

packages/hooks/docs/.vitepress/theme/home/Home.vue

@@ -6,6 +6,9 @@
   // import Waves from '../Waves/index.vue'
   import Waves from '../Wave.vue'
   // import Badge from './Badge.vue'
+
+  // @ts-ignore
+  const mode = import.meta.env.MODE
 </script>
 
 <template>
@@ -20,7 +23,7 @@
         </h1>
         <p class="description"> </p>
         <p class="actions" style="position: relative; z-index: 9;">
-          <a class="get-started" href="/docs/hooks/guide/">
+          <a class="get-started" :href="mode === 'development' ? '/guide/' : '/docs/hooks/guide/'">
             快速开始
             <svg
               class="icon"

packages/hooks/docs/public/plugin.png

@@ -6,7 +6,7 @@ source:
   show: false
 ---
 
-# DevTools `1.7.7-alpha.1`
+# DevTools
 
 Wave your hands in the air and shout hooray because useRequest comes with dedicated DevTools! 😍
 
@@ -16,7 +16,7 @@ The only thing you need to do is to install official [Vue Devtools](https://devt
 
 useRequest will seemingly integrate with official devtools, adding custom inspector and timeline events. Devtools would be treeshaken from production bundles by default.
 
-Currently in the `testing phase`, you can download `1.7.7-aLpha.1` and later versions to use.
+Currently in the `testing phase`, you can download `1.7.7` and later versions to use.
 
 ## Import the Devtools
 
@@ -37,3 +37,5 @@ const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { devK
 Use `devKey` to create a unique identifier and enable it.
 
 You're done! Open the browser Vue plugin to use it 🍺
+
+![Alt](/plugin.png 'plugin devtool image')

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

@@ -6,7 +6,7 @@ source:
   show: false
 ---
 
-# 开发者工具 `1.7.7-alpha.1`
+# 开发者工具
 
 `useRequest` 提供了一个 `devKey` 参数，并且在 `dev` 模式下会开启 `devtools`。
 
@@ -18,7 +18,7 @@ source:
 
 useRequest devtools 会与官方的开发工具整合，添加自定义的检查器和时间轴事件。Devtools would be treeshaken from production bundles by default.
 
-目前处于`测试阶段`, 你可以下载 `1.7.7-alpha.1`及更高版本使用。
+目前处于`测试阶段`, 你可以下载 `1.7.7`及更高版本使用。
 
 ## 导入 Devtools
 
@@ -39,3 +39,5 @@ const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { devK
 ```
 
 大功告成！打开浏览器 Vue 插件进行使用吧 🍺
+
+![Alt](/plugin.png 'plugin devtool image')

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

@@ -0,0 +1,80 @@
+<template>
+  <div>ready: {{ ready }}</div>
+  <div>log: {{ logRef }}</div>
+  <vhp-button style="margin-top: 16px;" @click="() => toggle()">changeReady</vhp-button>
+  <div style="margin-top: 16px;">{{ data }}</div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import {
+    RequestHook,
+    UseRequestOptions,
+    UseRequestPlugin,
+    UseRequestService,
+  } from '../../../types'
+  import { useRequest, useToggle } from 'vue-hooks-plus'
+
+  const logRef = ref('')
+
+  function logger<TData, TParams extends any[]>(useRequestNext: RequestHook<TData, TParams>) {
+    return (
+      service: UseRequestService<TData, TParams>,
+      options: UseRequestOptions<TData, TParams, any>,
+      plugins: UseRequestPlugin<TData, TParams, any>[],
+    ) => {
+      console.log('enter a')
+
+      const extendedService = (...args: TParams) => {
+        console.log('request a')
+        const data = service(...args)
+        data.then(res => {
+          logRef.value += `Response: ${JSON.stringify(res)}\n`
+        })
+        return data
+      }
+      const next = useRequestNext(extendedService, options, plugins)
+
+      console.log('exit a')
+
+      return next
+    }
+  }
+
+  function logger1<TData, TParams extends any[]>(useRequestNext: RequestHook<TData, TParams>) {
+    return (
+      service: UseRequestService<TData, TParams>,
+      options: UseRequestOptions<TData, TParams, any>,
+      plugins: UseRequestPlugin<TData, TParams, any>[],
+    ) => {
+      console.log('enter b')
+
+      const extendedService = (...args: TParams) => {
+        console.log('request b')
+        return service(...args)
+      }
+      const next = useRequestNext(extendedService, options, plugins)
+
+      console.log('exit b')
+
+      return next
+    }
+  }
+
+  function getUsername(): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        console.log('return')
+        resolve(String(Date.now()))
+      }, 1000)
+    })
+  }
+  const [ready, { toggle }] = useToggle(false)
+
+  const { data } = useRequest(() => getUsername(), {
+    ready,
+    use: [logger, logger1],
+  })
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useRequest/docs/middleware/demo/demo.vue

@@ -0,0 +1,45 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/middleware/
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/useRequest.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/middleware/demo/demo.vue
+---
+
+# Middleware Beta
+
+Middleware is a new beta feature, please upgrade to the latest version for use. It allows you to execute code before and after the useRequest hook.
+
+## Usage
+
+The middleware receives a useRequest hook and can execute logic before and after running it. If there are multiple middleware, each middleware is packaged with the next middleware. The last middleware in the list will receive the original hook useRequest
+
+## Principle
+
+```
+enter a
+  enter b
+    enter c
+      useRequest()
+    exit  c
+  exit  b
+exit  a
+
+```
+
+## A simple request log retention middleware
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc=""> </demo>
+
+## API
+
+```typescript
+const { data } = useRequest(() => getUsername(), {
+  ready,
+  use: [middleware],
+})
+```

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

@@ -0,0 +1,45 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/middleware/
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/useRequest.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/middleware/demo/demo.vue
+---
+
+# 中间件 Beta
+
+中间件是新增的一个 beta 功能，请升级最新版使用。它让你能够在 useRequest hook 之前和之后执行代码。
+
+## 用法
+
+中间件接收 useRequest hook，可以在运行它之前和之后执行逻辑。如果有多个中间件，则每个中间件包装下一个中间件。列表中的最后一个中间件将接收原始的 hook useRequest。
+
+## 原理
+
+```
+enter a
+  enter b
+    enter c
+      useRequest()
+    exit  c
+  exit  b
+exit  a
+
+```
+
+## 一个简单的请求日志保留中间件
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc=""> </demo>
+
+## API
+
+```typescript
+const { data } = useRequest(() => getUsername(), {
+  ready,
+  use: [middleware],
+})
+```