From 1aec7e727a2b2dee2a3f58708307c91198609f78 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Mon, 18 Oct 2021 01:51:18 +0200
Subject: [PATCH] feat: added slot typing

---
 packages/villus/src/Mutation.ts     | 15 +++++++++++++--
 packages/villus/src/Query.ts        | 20 ++++++++++++++++----
 packages/villus/src/Subscription.ts | 27 +++++++++++++++++++++++----
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/packages/villus/src/Mutation.ts b/packages/villus/src/Mutation.ts
index 84d5107..f4f16de 100644
--- a/packages/villus/src/Mutation.ts
+++ b/packages/villus/src/Mutation.ts
@@ -1,8 +1,11 @@
-import { defineComponent } from 'vue';
+import { defineComponent, UnwrapRef, VNode } from 'vue';
 import { useMutation } from './useMutation';
+import type { BaseQueryApi } from './useQuery';
 import { normalizeChildren } from './utils';
 
-export const Mutation = defineComponent({
+type QuerySlotProps = UnwrapRef<Pick<BaseQueryApi, 'data' | 'error' | 'execute' | 'isDone' | 'isFetching'>>;
+
+const MutationImpl = defineComponent({
   name: 'Mutation',
   props: {
     query: {
@@ -24,3 +27,11 @@ export const Mutation = defineComponent({
     };
   },
 });
+
+export const Mutation = MutationImpl as typeof MutationImpl & {
+  new (): {
+    $slots: {
+      default: (arg: QuerySlotProps) => VNode[];
+    };
+  };
+};
diff --git a/packages/villus/src/Query.ts b/packages/villus/src/Query.ts
index ea7e512..40b823d 100644
--- a/packages/villus/src/Query.ts
+++ b/packages/villus/src/Query.ts
@@ -1,9 +1,11 @@
-import { defineComponent, Ref, toRef, watch } from 'vue';
+import { defineComponent, Ref, toRef, UnwrapRef, VNode, watch } from 'vue';
 import { CachePolicy } from './types';
 import { useQuery, BaseQueryApi } from './useQuery';
 import { normalizeChildren } from './utils';
 
-export const Query = defineComponent({
+type QuerySlotProps = UnwrapRef<Pick<BaseQueryApi, 'data' | 'error' | 'execute' | 'isDone' | 'isFetching'>>;
+
+const QueryImpl = defineComponent({
   name: 'Query',
   props: {
     query: {
@@ -55,13 +57,15 @@ export const Query = defineComponent({
       );
 
       return () => {
-        return normalizeChildren(ctx, {
+        const slotProps: QuerySlotProps = {
           data: data.value,
           error: error.value,
           isFetching: isFetching.value,
           isDone: isDone.value,
           execute,
-        });
+        };
+
+        return normalizeChildren(ctx, slotProps);
       };
     }
 
@@ -79,3 +83,11 @@ export const Query = defineComponent({
     return createRenderFn(useQuery(opts));
   },
 });
+
+export const Query = QueryImpl as typeof QueryImpl & {
+  new (): {
+    $slots: {
+      default: (arg: QuerySlotProps) => VNode[];
+    };
+  };
+};
diff --git a/packages/villus/src/Subscription.ts b/packages/villus/src/Subscription.ts
index 897323e..77d9ab7 100644
--- a/packages/villus/src/Subscription.ts
+++ b/packages/villus/src/Subscription.ts
@@ -1,8 +1,17 @@
-import { defineComponent, toRef, watch } from 'vue';
+import { defineComponent, toRef, VNode, watch } from 'vue';
 import { normalizeChildren } from './utils';
 import { useSubscription, defaultReducer, Reducer } from './useSubscription';
+import { CombinedError } from '../dist/villus';
 
-export const Subscription = defineComponent({
+interface SubscriptionSlotProps {
+  data: unknown;
+  error: CombinedError | null;
+  isPaused: boolean;
+  pause(): void;
+  resume(): void;
+}
+
+const SubscriptionImpl = defineComponent({
   name: 'Subscription',
   props: {
     query: {
@@ -45,13 +54,23 @@ export const Subscription = defineComponent({
     });
 
     return () => {
-      return normalizeChildren(ctx, {
+      const slotProps: SubscriptionSlotProps = {
         data: data.value,
         error: error.value,
         pause,
         isPaused: isPaused.value,
         resume,
-      });
+      };
+
+      return normalizeChildren(ctx, slotProps);
     };
   },
 });
+
+export const Subscription = SubscriptionImpl as typeof SubscriptionImpl & {
+  new (): {
+    $slots: {
+      default: (arg: SubscriptionSlotProps) => VNode[];
+    };
+  };
+};