From 56504d7597c76a417d47a03899cc34eebdba8536 Mon Sep 17 00:00:00 2001
From: Victor Garcia <victor.garcia@malt.com>
Date: Wed, 6 Dec 2023 11:15:03 +0100
Subject: [PATCH] fix: `useLink` type overloads

---
 docs/content/2.usage/1.NuxtLink.md            |  8 ++++-
 docs/content/2.usage/2.useRoute.md            | 16 ++++++++++
 docs/content/2.usage/5.i18n.md                | 17 +++++++++++
 package.json                                  |  1 +
 playground/src/pages/index.vue                |  6 ++--
 pnpm-lock.yaml                                |  3 ++
 .../generators/files/__useTypedLink.file.ts   | 29 ++++++++++++-------
 7 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/docs/content/2.usage/1.NuxtLink.md b/docs/content/2.usage/1.NuxtLink.md
index 019943d..b132f57 100644
--- a/docs/content/2.usage/1.NuxtLink.md
+++ b/docs/content/2.usage/1.NuxtLink.md
@@ -9,7 +9,7 @@ You can use it like you used it before.
 
 ```vue
 <template>
-  <NuxtLink :to="`parent/child/two/profile/${id}`">Go to profile</NuxtLink>
+  <NuxtLink :to="`/parent/child/two/profile/${id}`">Go to profile</NuxtLink>
   <NuxtLink :to="{ 
     name: 'parent-child-two-profile-id', 
     params: { id: 1 } 
@@ -26,6 +26,12 @@ You can do CLI type checking for `<NuxtLink/>` with the [`vue-tsc` package](http
 `external` prop is supported since `v3.1.0`
 ::
 
+```vue
+<template> 
+  <!-- Valid -->
+  <NuxtLink to="http://google.com" external>Go to profile</NuxtLink>
+</template>
+```
 
 --- 
 
diff --git a/docs/content/2.usage/2.useRoute.md b/docs/content/2.usage/2.useRoute.md
index cd70c58..6e50016 100644
--- a/docs/content/2.usage/2.useRoute.md
+++ b/docs/content/2.usage/2.useRoute.md
@@ -51,3 +51,19 @@ console.log(route.params.id) // types-check
 </script>
 
 ```
+
+
+
+## `useLink`
+
+Typings for `useLink` follow the usage of other composables.
+
+
+
+```vue
+<script setup lang='ts'>
+
+const link = useLink({to: '/profile/999'});
+</script>
+
+```
\ No newline at end of file
diff --git a/docs/content/2.usage/5.i18n.md b/docs/content/2.usage/5.i18n.md
index 9e520b3..8ec3634 100644
--- a/docs/content/2.usage/5.i18n.md
+++ b/docs/content/2.usage/5.i18n.md
@@ -62,3 +62,20 @@ if (route) {
 }
 
 ```
+
+
+## `NuxtLinkLocale`
+
+The component provived by `@nuxtjs/i18n` is also supported
+
+```vue
+<template>
+  <NuxtLinkLocale :to="`/parent/child/two/profile/${id}`" locale='fr'>Go to profile</NuxtLinkLocale>
+  <NuxtLinkLocale :to="{ 
+    name: 'parent-child-two-profile-id', 
+    params: { id: 1 } 
+  }">
+      Go to profile 
+  </NuxtLinkLocale>
+</template>
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index a275fea..72b10ab 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "tsd": "0.29.0",
     "typescript": "5.3.2",
     "vitest": "0.34.6",
+    "vue": "3.3.10",
     "vue-eslint-parser": "9.3.2",
     "vue-router": "4.2.5",
     "vue-tsc": "1.8.22",
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 7559b0f..1ec2f11 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -25,7 +25,7 @@ import TestLink from '~/components/TestLink.vue';
 
 definePageMeta({
   name: 'foo-bar',
-  redirect: { name: 'admin-id', params: { id: 1 } },
+  redirect: { name: 'admin-444', params: { '444': 1 } },
 });
 
 const router = useRouter();
@@ -50,11 +50,13 @@ function navigate() {
 
   router.push(localePath('/admin/888'));
 
+  const link = useLink({ to: '/admin/37673' });
+
   const u = 'krzfzlkj' as string;
   const t = '///';
 
   const route2 = localePath(`/user/${t}/:slug/articles`); // Should error
-  navigateTo('/admin/foo'); // Should error
+  navigateTo('/foo'); // Should error
   router.push('/admin'); // Should error
 
   const route = localePath(`/user/${u}/:slug/articles`);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a5fe94..21204f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ importers:
       vitest:
         specifier: 0.34.6
         version: 0.34.6(playwright@1.40.1)
+      vue:
+        specifier: 3.3.10
+        version: 3.3.10(typescript@5.3.2)
       vue-eslint-parser:
         specifier: 9.3.2
         version: 9.3.2(eslint@8.54.0)
diff --git a/src/core/output/generators/files/__useTypedLink.file.ts b/src/core/output/generators/files/__useTypedLink.file.ts
index dc361d7..10c6a0c 100644
--- a/src/core/output/generators/files/__useTypedLink.file.ts
+++ b/src/core/output/generators/files/__useTypedLink.file.ts
@@ -8,7 +8,7 @@ export function createUseTypedLinkFile(): string {
   return /* typescript */ `
   
   import { useLink as defaultLink } from '#imports';
-  import type {MaybeRef} from 'vue';
+  import type {MaybeRef, Ref} from 'vue';
   import type { NavigateToOptions } from 'nuxt/dist/app/composables/router';
   import type { NavigationFailure } from 'vue-router';
   import type { TypedRouteLocationRawFromName, TypedRouteFromName, TypedRoute } from './__router';
@@ -31,20 +31,29 @@ export function createUseTypedLinkFile(): string {
 
 
   interface UseLinkFunction {
-    <T extends RoutesNamesList, P extends string>(
-     props: { 
-      to: MaybeRef<TypedRouteLocationRawFromName<T, P>>,
-      replace?: MaybeRef<boolean>
-    }
-    ) : LinkedRoute<T>
+    <T extends RoutesNamesList, P extends string>(props: {
+      to: TypedRouteLocationRawFromName<T, P>;
+      replace?: MaybeRef<boolean>;
+    }): LinkedRoute<T>;
+    <T extends RoutesNamesList, P extends string>(props: {
+      to: Ref<TypedRouteLocationRawFromName<T, P>>;
+      replace?: MaybeRef<boolean>;
+    }): LinkedRoute<T>;
+    
     ${returnIfTrue(
       pathCheck && !strictOptions.router.strictToArgument,
-      `<T extends string>(
+      `<P extends string>(
        props: {
-        to: MaybeRef<TypedPathParameter<T>>,
+        to: TypedPathParameter<P>,
         replace?: MaybeRef<boolean>
        }
-      ) : LinkedRoute<RouteNameFromPath<T>>`
+      ) : LinkedRoute<RouteNameFromPath<P>>
+      <P extends string>(props: {
+        to: Ref<TypedPathParameter<P>>;
+        replace?: MaybeRef<boolean>;
+      }): LinkedRoute<RouteNameFromPath<P>>;
+      
+      `
     )}
   }