feat: added slot typing

Author: logaretm

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[];
+    };
+  };
+};

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[];
+    };
+  };
+};

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[];
+    };
+  };
+};