feat: optimized devtools

packages/hooks/src/useRequest/devtools/devtools.ts

@@ -169,7 +169,7 @@ export function setupDevtools(app: any) {
                 key: item,
                 value: unref(currentSource.instance.options[item]),
               })),
-              Plugins:
+              ["Plugins 🧩"]:
                 currentSource.instance.pluginImpls?.map((_, index) => {
                   const pluginName = currentSource?.instance?.pluginImpls?.[index]?.name
                   if (!pluginName) {

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

@@ -14,7 +14,7 @@
     })
   }
 
-  const { data, loading } = useRequest(() => getUsername({ desc: 'good' }),{
-    devKey:'demo'
+  const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+    debugKey: 'demo',
   })
 </script>

packages/hooks/src/useRequest/docs/basic/demo/demo1.vue

@@ -1,7 +1,7 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
   </div>
 </template>
@@ -21,7 +21,7 @@
   const value = ref('vue-hooks-plus')
   const { data: data, loading, run } = useRequest(getUsername, {
     manual: true,
-    devKey:"demo1",
+    debugKey: 'demo1',
     onSuccess: data => {
       alert(data)
     },

packages/hooks/src/useRequest/docs/basic/demo/demo2.vue

@@ -1,7 +1,7 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
   </div>
 </template>
@@ -21,7 +21,7 @@
   const value = ref('vue-hooks-plus')
   const { data: data, loading, runAsync } = useRequest(getUsername, {
     manual: true,
-    devKey:"demo2",
+    debugKey: 'demo2',
   })
 
   const handleClick = async () => {

packages/hooks/src/useRequest/docs/basic/demo/demo3.vue

@@ -1,7 +1,7 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
   </div>
   <div>
@@ -25,7 +25,7 @@
   const step = ref<string[]>([])
   const { data: data, loading, run } = useRequest(getUsername, {
     manual: true,
-    devKey:"demo3",
+    debugKey: 'demo3',
     onBefore: () => {
       step.value = []
       step.value.push('start request')

packages/hooks/src/useRequest/docs/basic/demo/demo4.vue

@@ -15,7 +15,7 @@
   }
   const { data, run, loading, refresh } = useRequest(() => getUsername(), {
     manual: true,
-    devKey:"demo4",
+    debugKey: 'demo4',
   })
   run()
 </script>

packages/hooks/src/useRequest/docs/basic/demo/demo5.vue

@@ -25,7 +25,7 @@
   const step = ref<string[]>([])
   const { data: data, run, mutate } = useRequest(getUsername, {
     manual: true,
-    devKey: 'demo5',
+    debugKey: 'demo5',
     rollbackOnError: true,
     onError: () => {
       alert('error')

packages/hooks/src/useRequest/docs/basic/demo/demo6.vue

@@ -1,7 +1,7 @@
 <template>
   <div>name：{{ loading ? 'loading..' : data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
     <vhp-button style="margin-left: 8px;" @click="handleCancel">Cancel</vhp-button>
   </div>
@@ -22,7 +22,7 @@
   const value = ref('')
   const { data, loading, run, cancel } = useRequest(getUsername, {
     manual: true,
-    devKey:"demo6",
+    debugKey: 'demo6',
     onError: () => {
       alert('error')
     },

packages/hooks/src/useRequest/docs/basic/demo/demo7.vue

@@ -1,10 +1,10 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
   </div>
-  <br>
+  <br />
   <div> Params: {{ JSON.stringify(params) }} </div>
 </template>
 
@@ -26,6 +26,6 @@
         desc: 'nice',
       },
     ],
-    devKey:"demo7",
+    debugKey: 'demo7',
   })
 </script>

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

@@ -31,10 +31,10 @@ app.use(useRequestDevToolsPlugin)
 ## Using in `.vue`
 
 ```typescript
-const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { devKey: 'demo' })
+const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 ```
 
-Use `devKey` to create a unique identifier and enable it.
+Use `debugKey` to create a unique identifier and enable it.
 
 You're done! Open the browser Vue plugin to use it 🍺
 

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

@@ -8,7 +8,7 @@ source:
 
 # 开发者工具
 
-`useRequest` 提供了一个 `devKey` 参数，并且在 `dev` 模式下会开启 `devtools`。
+`useRequest` 提供了一个 `debugKey` 参数，并且在 `dev` 模式下会开启 `devtools`。
 
 欢呼雀跃，因为 useRequest 带有专用的开发工具！😍
 
@@ -32,10 +32,10 @@ app.use(useRequestDevToolsPlugin)
 
 ## 在 `.vue` 中使用
 
-使用 `devKey` 创建唯一标识开启。
+使用 `debugKey` 创建唯一标识开启。
 
 ```typescript
-const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { devKey: 'demo' })
+const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 ```
 
 大功告成！打开浏览器 Vue 插件进行使用吧 🍺

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

@@ -46,7 +46,7 @@
   const { data, loading } = useRequest(
     () => getUsername(),
     {
-      devKey: 'plugindemo',
+      debugKey: 'plugindemo',
       formatter: (params?: FormatterDataType) => {
         return {
           name: `${params?.name} - plugins update`,

packages/hooks/src/useRequest/plugins/useDevtoolsPlugin.ts

@@ -8,16 +8,16 @@ const useDevtoolsPlugin: UseRequestPlugin<
   unknown,
   unknown[],
   {
-    devKey: string
+    debugKey: string
   }
-> = (fetchInstance, { ready = true, devKey, ...rest }) => {
+> = (fetchInstance, { ready = true, debugKey, ...rest }) => {
   // devtools provider
   const createDevTarget = () => {
-    if (devKey && !devToolsStore.has(devKey)) {
+    if (debugKey && !devToolsStore.has(debugKey)) {
       const functionName = fetchInstance.serviceRef.value.toString().includes('function')
         ? getFunctionName(fetchInstance.serviceRef.value.toString())
         : getArrowFunctionName(fetchInstance.serviceRef.value.toString())
-      devToolsStore.insert(devKey, {
+      devToolsStore.insert(debugKey, {
         instance: fetchInstance,
         requestName: functionName,
         time: Date.now(),
@@ -32,7 +32,7 @@ const useDevtoolsPlugin: UseRequestPlugin<
   )
 
   watchEffect(() => {
-    if (devKey && devToolsStore.has(devKey)) {
+    if (debugKey && devToolsStore.has(debugKey)) {
       devToolsStore.emit({
         ...fetchInstance,
         options: { ...fetchInstance.options, ...processObj.value },
@@ -44,10 +44,10 @@ const useDevtoolsPlugin: UseRequestPlugin<
     name: "devtoolsPlugin",
     onBefore: params => {
       createDevTarget()
-      if (devKey && devToolsStore.has(devKey))
+      if (debugKey && devToolsStore.has(debugKey))
         devToolsStore.emit({
           ...fetchInstance.state,
-          key: devKey,
+          key: debugKey,
           params,
           loading: true,
           time: Date.now(),
@@ -56,10 +56,10 @@ const useDevtoolsPlugin: UseRequestPlugin<
     },
     onSuccess(data, params) {
       createDevTarget()
-      if (devKey && devToolsStore.has(devKey))
+      if (debugKey && devToolsStore.has(debugKey))
         devToolsStore.emit({
           ...fetchInstance.state,
-          key: devKey,
+          key: debugKey,
           data,
           params,
           loading: false,
@@ -69,21 +69,21 @@ const useDevtoolsPlugin: UseRequestPlugin<
     },
     onCancel() {
       createDevTarget()
-      if (devKey && devToolsStore.has(devKey))
+      if (debugKey && devToolsStore.has(debugKey))
         devToolsStore.emit({
           ...fetchInstance.state,
-          key: devKey,
+          key: debugKey,
           loading: false,
           time: Date.now(),
           type: 'cancel',
         })
     },
     onError(e, params) {
       createDevTarget()
-      if (devKey && devToolsStore.has(devKey))
+      if (debugKey && devToolsStore.has(debugKey))
         devToolsStore.emit({
           ...fetchInstance.state,
-          key: devKey,
+          key: debugKey,
           params,
           loading: false,
           error: e,
@@ -93,10 +93,10 @@ const useDevtoolsPlugin: UseRequestPlugin<
     },
     onMutate(data) {
       createDevTarget()
-      if (devKey && devToolsStore.has(devKey))
+      if (debugKey && devToolsStore.has(debugKey))
         devToolsStore.emit({
           ...fetchInstance.state,
-          key: devKey,
+          key: debugKey,
           data,
           loading: false,
           time: Date.now(),

packages/hooks/src/useRequest/types.ts

@@ -119,9 +119,9 @@ export interface UseRequestBasicOptions<TData, TParams extends unknown[]> {
   loadingDelay?: number | Ref<number>
 
   /**
-   * open vue devtools,devKey must existence and uniqueness.
+   * open vue devtools,debugKey must existence and uniqueness.
    */
-  devKey?: string
+  debugKey?: string
 
   /**
    * Format the request results, which recommend to use `useFormatResult`.