Merge pull request #169 from InhiblabCore/dev

perf: onScopeDispose instead onUnmounted

Author: inhiblab

package.json

@@ -58,7 +58,7 @@
     "tsx": "^3.11.0",
 		"typeit": "^8.7.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.2.3",
+		"vite": "3.0.2",
 		"vite-plugin-build": "0.7.1",
 		"vite-plugin-dts": "^2.1.0",
 		"vitepress": "1.0.0-alpha.60",

packages/hooks/src/useRequest/Fetch.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue'
-import { isFunction, isBoolean } from '../utils'
+import { isFunction, isBoolean } from './utils'
 import {
   UseRequestFetchState,
   UseRequestOptions,
@@ -116,7 +116,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
     )
     // Do you want to stop the request
     if (stopNow) {
-      return new Promise(() => {})
+      return new Promise(() => { })
     }
 
     this.setState({
@@ -140,7 +140,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       const requestReturnResponse = (res: any) => {
         // The request has been cancelled, and the count will be inconsistent with the currentCount
         if (currentCount !== this.count) {
-          return new Promise(() => {})
+          return new Promise(() => { })
         }
         // Format data
         const formattedResult = this.options.formatResult ? this.options.formatResult(res) : res
@@ -174,7 +174,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       return requestReturnResponse(servicePromiseResult)
     } catch (error) {
       if (currentCount !== this.count) {
-        return new Promise(() => {})
+        return new Promise(() => { })
       }
 
       this.setState({

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

@@ -1,4 +1,4 @@
-import { ref, watchEffect, onUnmounted } from 'vue'
+import { ref, watchEffect, onScopeDispose } from 'vue'
 import { UseRequestPlugin } from '../types'
 import * as cache from '../utils/cache'
 import { CachedData } from '../utils/cache'
@@ -56,7 +56,7 @@ const useCachePlugin: UseRequestPlugin<unknown, unknown[]> = (
     })
   })
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unSubscribeRef.value?.()
   })
 

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

@@ -1,4 +1,4 @@
-import { computed, onMounted, unref, watchEffect } from 'vue'
+import { computed, unref, watchEffect } from 'vue'
 
 import { UseRequestPlugin } from '../types'
 import { getArrowFunctionName, getFunctionName } from '../devtools/utils'
@@ -25,10 +25,6 @@ const useDevtoolsPlugin: UseRequestPlugin<
     }
   }
 
-  onMounted(() => {
-    createDevTarget()
-  })
-
   const processObj = computed(() =>
     Object.fromEntries(
       Object.entries({ ready, ...rest }).map(([key, value]) => [key, unref(value)]),

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

@@ -1,4 +1,4 @@
-import { ref, watchEffect, onUnmounted, unref } from "vue";
+import { ref, watchEffect, onScopeDispose, unref } from "vue";
 import type { UseRequestPlugin } from "../types";
 import limit from "../utils/limit";
 import subscribeFocus from "../utils/subscribeFocus";
@@ -28,7 +28,7 @@ const useRefreshOnWindowFocusPlugin: UseRequestPlugin<unknown, unknown[]> = (
     });
   });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     stopSubscribe();
   });
 

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,5 +1,4 @@
-import { ref, reactive, toRefs, onUnmounted, inject, UnwrapRef, watchEffect, computed, isRef, unref } from 'vue'
-
+import { ref, reactive, toRefs, onScopeDispose, inject, UnwrapRef, watchEffect, computed, isRef, unref } from 'vue'
 import Fetch from './Fetch'
 import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
 import {
@@ -99,7 +98,7 @@ function useRequestImplement<TData, TParams extends any[]>(
   }
 
   // onUnmounted cancel request
-  onUnmounted(() => {
+  onScopeDispose(() => {
     fetchInstance.cancel()
   })
 

packages/hooks/src/useRequest/utils/index.ts

@@ -0,0 +1,8 @@
+export const isObject = (value: unknown): value is Record<any, any> =>
+  value !== null && typeof value === 'object'
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (value: unknown): value is Function => typeof value === 'function'
+export const isString = (value: unknown): value is string => typeof value === 'string'
+export const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean'
+export const isNumber = (value: unknown): value is number => typeof value === 'number'
+export const isUndef = (value: unknown): value is undefined => typeof value === 'undefined'

packages/hooks/src/useRequest/utils/subscribeFocus.ts

@@ -1,8 +1,9 @@
 // from swr
-import isBrowser from '../../utils/isBrowser'
+import isBrowser from './utils'
 import isDocumentVisible from './isDocumentVisible'
 import isOnline from './isOnline'
 
+
 type Listener = () => void
 
 const listeners: Listener[] = []

packages/hooks/src/useRequest/utils/utils.ts

@@ -6,3 +6,10 @@ export function canUseDom() {
   );
 }
 
+const isBrowser = !!(
+  typeof window !== "undefined" &&
+  window.document &&
+  window.document.createElement
+);
+
+export default isBrowser;

packages/use-request/package.json

@@ -12,11 +12,13 @@
 	"module": "./dist/useRequest.es.js",
   "types":"./dist/types/index.d.ts" ,
   "scripts": {
+    "sync":"rimraf src & tsx scripts/sync.ts",
     "build": "npm run clean && vite build",
     "clean": "rimraf dist"
   },
   "keywords": [],
   "dependencies": {
+    "@vue/devtools-api": "^6.5.0",
     "lodash": "^4.17.21"
   },
   "repository": "https://github.com/InhiblabCore/vue-hooks-plus",