feat: support component

Author: NelsonYong

docs/demo/useMouse/demo.vue

@@ -3,10 +3,13 @@
     <p>Client - x: {{ mouse.clientX }}, y: {{ mouse.clientY }}</p>
     <p>Page - x: {{ mouse.pageX }}, y: {{ mouse.pageY }}</p>
     <p>Screen - x: {{ mouse.screenX }}, y: {{ mouse.screenY }}</p>
+    <UseMouse v-slot="{ clientX, clientY }">
+      <p>component use: {{ clientX }}, y: {{ clientY }}</p>
+    </UseMouse>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useMouse } from 'vue-hooks-plus'
+  import { useMouse, UseMouse } from 'vue-hooks-plus'
   const mouse = useMouse()
 </script>

docs/demo/useMouse/demo1.vue

@@ -21,11 +21,39 @@
       {{ mouse.elementH }}
     </p>
   </div>
+
+  <h3>UseMouse Component</h3>
+  <UseMouse>
+    <template #default="{ elementX, elementY,elementPosX,elementPosY,elementW,elementH }">
+      <p>Mouse In Element - x: {{ elementX }}, y: {{ elementY }}</p>
+      <p> Element Position - x: {{ elementPosX }}, y: {{ elementPosY }} </p>
+      <p>
+        Element Dimensions - width: {{ elementW }}, height:
+        {{ elementH }}
+      </p>
+    </template>
+    <template #target>
+      <div
+        ref="domRef"
+        :style="{
+          width: '200px',
+          height: '200px',
+          backgroundColor: 'gray',
+          opacity: 0.85,
+          color: 'white',
+          lineHeight: '200px',
+          textAlign: 'center',
+        }"
+      >
+        element
+      </div>
+    </template>
+  </UseMouse>
 </template>
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useMouse } from 'vue-hooks-plus'
+  import { useMouse, UseMouse } from 'vue-hooks-plus'
   const domRef = ref(null)
   const mouse = useMouse(domRef)
 </script>

docs/demo/useRequest/demo.vue

@@ -1,10 +1,25 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
+  <h3>UseRequest component</h3>
+  <use-request-query :service="() => getUsername({ desc: desc })" :refresh-deps="[desc]">
+    <template #default="{data}">
+      <div>name：{{ data }}</div>
+    </template>
+    <template #loading>
+      <div>loading</div>
+    </template>
+    <template #error>
+      <div>error</div>
+    </template>
+  </use-request-query>
 </template>
 
 <script lang="ts" setup>
-  import { useRequest } from 'vue-hooks-plus'
+  import { onMounted, ref } from 'vue'
+  import { useRequest, createUseRequestQueryComponent } from 'vue-hooks-plus'
 
+  const desc = ref('good')
+  const UseRequestQuery = createUseRequestQueryComponent<string>()
   function getUsername(params: { desc: string }): Promise<string> {
     return new Promise(resolve => {
       setTimeout(() => {
@@ -13,8 +28,15 @@
     })
   }
 
-  const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+  const { data, loading } = useRequest(() => getUsername({ desc: desc.value }), {
     debugKey: 'demo',
-    initialData:"000"
+    initialData: '000',
+    refreshDeps: [desc],
+  })
+
+  onMounted(() => {
+    setTimeout(() => {
+      desc.value = 'good1111'
+    }, 3000)
   })
 </script>

packages/hooks/src/index.ts

@@ -53,6 +53,8 @@ import useWebSocket from './useWebSocket'
 import useElementBounding from './useElementBounding'
 import useResizeObserver from './useResizeObserver'
 import useMutationObserver from './useMutationObserver'
+import { UseMouse } from './useMouse/component'
+import createUseRequestQueryComponent from './useRequest/component-use/UseRequest'
 
 export {
   useRequest,
@@ -109,4 +111,6 @@ export {
   useWebSocket,
   useElementBounding,
   useResizeObserver,
+  UseMouse,
+  createUseRequestQueryComponent
 }

packages/hooks/src/useMouse/component.ts

@@ -0,0 +1,26 @@
+import { computed, defineComponent, ref, SlotsType, cloneVNode, isVNode } from "vue";
+import useMouse from ".";
+
+export const UseMouse = defineComponent({
+  name: "UseMouse",
+  slots: Object as SlotsType<{
+    default: (props: ReturnType<typeof useMouse>["value"]) => any,
+    target?: () => any
+  }>,
+  setup(_, { slots }) {
+    const targetRef = ref();
+    // @ts-ignore
+    const data = useMouse(targetRef);
+    return () => {
+      const targetVNode = slots.target?.();
+      let target = null;
+      if (targetVNode && targetVNode.length === 1 && isVNode(targetVNode[0])) {
+        target = cloneVNode(targetVNode[0], { ref: targetRef });
+      }
+      return [
+        target,
+        slots.default && slots.default(computed(() => data.value).value)
+      ];
+    };
+  },
+});

packages/hooks/src/useRequest/component-use/UseRequest.ts

@@ -0,0 +1,102 @@
+import { defineComponent, PropType, computed, SlotsType, unref, watch } from "vue";
+import useRequest from "../useRequest";
+import type {
+  UseRequestService,
+  UseRequestOptions,
+  UseRequestPlugin,
+} from "../types";
+
+// 泛型工厂
+function createUseRequestQueryComponent<TData = any, TParams extends unknown[] = any[]>() {
+  // 先定义组件
+  const Comp = defineComponent({
+    name: "UseRequest",
+    props: {
+      service: {
+        type: Function as PropType<UseRequestService<TData, TParams>>,
+        required: true,
+      },
+
+      initialData: {
+        type: String,
+        default: () => undefined,
+      },
+      ready: {
+        // 支持 initialData
+        type: Object as PropType<
+          UseRequestOptions<TData, TParams>['ready']
+        >,
+        default: () => ({
+          ready: false,
+        }),
+      },
+      refreshDeps: {
+        type: Array as PropType<any[]>,
+        default: () => [],
+      },
+      plugins: {
+        type: Array as PropType<UseRequestPlugin<TData, TParams>[]>,
+        default: () => [],
+      },
+    },
+    slots: Object as SlotsType<{
+      default: (props: Pick<ReturnType<typeof useRequest<TData, TParams>>, "data">) => any,
+      loading: () => any,
+      error: (props: { error: ReturnType<typeof useRequest<TData, TParams>>["error"]['value'] }) => any,
+      target?: () => any
+    }>,
+    setup(props, { slots }) {
+
+      // 支持响应式 props
+      const service = computed(() => unref(props.service));
+      const plugins = computed(() => unref(props.plugins));
+
+
+      // 让 props 转为响应式
+      const ready = computed(() => props.ready);
+      const refreshDeps = computed(() => props.refreshDeps);
+
+
+      // useRequest 的返回类型会自动推断
+      const result = useRequest(service.value, {
+        // @ts-ignore
+        initialData: props.initialData,
+        // @ts-ignore
+        ready,
+        // @ts-ignore
+        refreshDeps,
+      }, plugins.value);
+
+      watch(
+        refreshDeps,
+        () => {
+          result.refresh();
+        },
+        { immediate: true, deep: true }
+      );
+
+      return () => {
+        if (result.loading.value && slots.loading) {
+          return slots.loading();
+        }
+        if (result.error.value && slots.error) {
+          return slots.error({ error: result.error.value });
+        }
+        if (!result.loading.value && !result.error.value && slots.default) {
+
+          return slots.default({
+            // @ts-ignore
+            data: result.data.value
+          });
+        }
+        return null;
+      };
+    },
+  });
+
+  // 用类型断言给组件加上 slots 类型声明
+  return Comp
+}
+
+// 导出泛型组件工厂
+export default createUseRequestQueryComponent;