feat: improve components types with generics and definitions

* feat: improve components types (with generics)
* build: extract types definitions from svelte components

Author: SomaticIT

package.json

@@ -18,10 +18,11 @@
     "svelte"
   ],
   "scripts": {
-    "build": "rimraf ./dist && rollup -c && yarn build:types && yarn build:lib && yarn build:svelte",
+    "build": "rimraf ./dist && rollup -c && yarn build:types && yarn build:lib && yarn build:svelte && yarn build:svelte-types",
     "build:types": "tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./dist -r --silent && replace 'export type' 'export' ./dist -r --silent",
     "build:lib": "rimraf ./lib && tsc --project tsconfig.lib.json --module 'CommonJS' --outDir ./lib",
     "build:svelte": "rimraf ./svelte && tsc --project tsconfig.lib.json --module 'es2015' --outDir ./svelte && node scripts/svelte-copy.js",
+    "build:svelte-types": "node scripts/svelte-dts.js",
     "prepublishOnly": "yarn run build",
     "test:watch": "yarn test -- --watch",
     "test": "yarn build && yarn build:types && yarn test:eslint",
@@ -78,6 +79,7 @@
     "svelte": "^3.29.0",
     "svelte-check": "^1.0.55",
     "svelte-jester": "^1.0.5",
+    "svelte2tsx": "^0.4.8",
     "ts-jest": "^26.5.4",
     "type-fest": "^0.21.1",
     "typescript": "^4.0.3"

scripts/svelte-dts.js

@@ -0,0 +1,12 @@
+const path = require("path")
+const { emitDts } = require("svelte2tsx")
+
+main()
+
+async function main() {
+    await emitDts({
+        libRoot: path.join(__dirname, "..", "src"),
+        declarationDir: path.join(__dirname, "..", "dist"),
+        svelteShimsPath: require.resolve("svelte2tsx/svelte-shims.d.ts")
+    })
+}

src/hydration/Hydrate.svelte

@@ -3,7 +3,7 @@
   import useHydrate from './useHydrate'
 
   export let state: DehydratedState
-  export let options: HydrateOptions
+  export let options: HydrateOptions | undefined = undefined
 
   useHydrate(state, options)
 </script>

src/infiniteQuery/InfiniteQuery.svelte

@@ -7,9 +7,23 @@
   } from '../types'
   import useInfiniteQuery from './useInfiniteQuery'
 
-  export let options: UseInfiniteQueryOptions
+  type TQueryFnData = $$Generic<any>
+  type TError = $$Generic<any>
+  type TData = $$Generic<TQueryFnData>
+  type TQueryData = $$Generic<TQueryFnData>
+  type TQueryKey = $$Generic<QueryKey>
+
+  export let options: UseInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >
   // useful for binding
-  export let queryResult: UseInfiniteQueryResult
+  export let queryResult:
+    | UseInfiniteQueryResult<TData, TError>
+    | undefined = undefined
 
   let firstRender = true
 

src/isFetching/IsFetching.svelte

@@ -3,8 +3,8 @@
 
   import useIsFetching from './useIsFetching'
 
-  export let filters: QueryFilters
-  export let isFetching
+  export let filters: QueryFilters | undefined = undefined
+  export let isFetching: number | undefined = undefined
 
   $: isFetchingResult = useIsFetching(filters)
   $: isFetching = $isFetchingResult

src/isMutating/IsMutating.svelte

@@ -3,8 +3,8 @@
 
   import useIsMutating from './useIsMutating'
 
-  export let filters: MutationFilters
-  export let isMutating
+  export let filters: MutationFilters | undefined = undefined
+  export let isMutating: number | undefined = undefined
 
   $: isMutatingResult = useIsMutating(filters)
   $: isMutating = $isMutatingResult

src/mutation/Mutation.svelte

@@ -5,11 +5,20 @@
   import type { UseMutationOptions, UseMutationResult } from '../types'
   import useMutation from './useMutation'
 
-  export let mutationFn: MutationFunction
-  export let options: UseMutationOptions<any, any, any, any>
+  type TData = $$Generic<any>
+  type TError = $$Generic<any>
+  type TVariables = $$Generic<any>
+  type TContext = $$Generic<any>
+
+  export let mutationFn: MutationFunction<TData, TVariables>
+  export let options:
+    | UseMutationOptions<TData, TError, TVariables, TContext>
+    | undefined = undefined
 
   // useful for binding
-  export let mutationResult: UseMutationResult
+  export let mutationResult:
+    | UseMutationResult<TData, TError, TVariables, TContext>
+    | undefined = undefined
 
   let firstRender = true
 

src/queries/Queries.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import { onMount } from 'svelte'
 
-  import type { UseQueryOptions, UseQueryResult } from '../types'
+  import type { UseQueryOptions, UseQueriesResult } from '../types'
   import useQueries from './useQueries'
 
-  export let queries: readonly UseQueryOptions[]
+  type TQueryFnData = $$Generic<any>
+  type TError = $$Generic<any>
+  type TData = $$Generic<TQueryFnData>
+  type TQueryKey = $$Generic<QueryKey>
+
+  type T =
+    | readonly UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
+    | readonly [...UseQueryOptions[]]
+
+  export let queries: T
   // useful for binding
-  export let currentResult: readonly UseQueryResult[] = []
+  export let currentResult: UseQueriesResult<T> = []
 
   let firstRender = true
 

src/query/Query.svelte

@@ -2,11 +2,17 @@
   import { onMount } from 'svelte'
 
   import type { UseQueryOptions, UseQueryResult } from '../types'
+  import type { QueryKey } from '../queryCore/core'
   import useQuery from './useQuery'
 
-  export let options: UseQueryOptions
+  type TQueryFnData = $$Generic<any>
+  type TError = $$Generic<any>
+  type TData = $$Generic<TQueryFnData>
+  type TQueryKey = $$Generic<QueryKey>
+
+  export let options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   // useful for binding
-  export let queryResult: UseQueryResult
+  export let queryResult: UseQueryResult<TData, TError> | undefined = undefined
 
   let firstRender = true