From cb9453918acf5b9afac19a5ff11c75986ed5415a Mon Sep 17 00:00:00 2001
From: Victor Garcia <victor.garcia@malt.com>
Date: Thu, 9 Nov 2023 11:57:48 +0100
Subject: [PATCH] feat: added typed `useLink` #120

---
 playground/src/pages/index.vue                |   8 +-
 src/core/output/fileSave/definitions.save.ts  |   5 +
 .../blocks/routes/routes-paths.block.ts       |   4 +-
 .../generators/files/__navigateTo.file.ts     |   3 +-
 .../output/generators/files/__paths.file.ts   |   6 +-
 .../generators/files/__typed-router.d.file.ts |   2 +
 .../generators/files/__useTypedLink.file.ts   |  63 +++++
 .../output/generators/files/index.file.ts     |   1 +
 src/core/output/generators/files/index.ts     |   1 +
 .../simple/tests/router/navigateTo.spec-d.ts  |   3 +-
 .../simple/tests/routes/useLink.spec-d.ts     | 245 ++++++++++++++++++
 11 files changed, 330 insertions(+), 11 deletions(-)
 create mode 100644 src/core/output/generators/files/__useTypedLink.file.ts
 create mode 100644 test/fixtures/simple/tests/routes/useLink.spec-d.ts

diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index cb76409..e4148d0 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -7,15 +7,14 @@
 
     <nuxt-link to="/admin/:id?foo">Navigate Link</nuxt-link>
 
-    <nuxt-link :to="{ name: '' }">Navigate Link</nuxt-link>
-    <nuxt-link :to="localePath({ name: '' })">Navigate Link</nuxt-link>
+    <nuxt-link :to="{ name: 'admin-id', params: { id: 1 } }">Navigate Link</nuxt-link>
+    <nuxt-link :to="localePath({ name: 'user' })">Navigate Link</nuxt-link>
     <nuxt-layout></nuxt-layout>
   </div>
 </template>
 
 <script setup lang="ts">
-import { TypedRouteLocationRawFromName, helpers, TypedRouteLocation } from '@typed-router';
-import { Body } from '#components';
+import type { TypedRouteLocationRawFromName, helpers, TypedRouteLocation } from '@typed-router';
 // definePageMeta({
 //   redirect: (route) => helpers.route({ name: 'admin-id', params: { id: 1 } }),
 // });
@@ -57,6 +56,7 @@ function navigate() {
   const route = localePath(`/user/${u}/:slug/articles`);
   router.push('/');
   navigateTo('ednzelfjle', { external: true });
+  const route4 = navigateTo('/test/:foo');
   router.push({ path: '/' });
 
   router.push('/user/:id/:slug/articles#baz');
diff --git a/src/core/output/fileSave/definitions.save.ts b/src/core/output/fileSave/definitions.save.ts
index ba1140e..2533196 100644
--- a/src/core/output/fileSave/definitions.save.ts
+++ b/src/core/output/fileSave/definitions.save.ts
@@ -12,6 +12,7 @@ import {
   createTypeUtilsRuntimeFile,
   createTypedRouterDefinitionFile,
   createTypedRouterFile,
+  createUseTypedLinkFile,
   createUseTypedRouteFile,
   createUseTypedRouterFile,
   createi18nRouterFile,
@@ -37,6 +38,10 @@ export async function saveGeneratedFiles({ outputData }: SaveGeneratedFiles): Pr
       fileName: '__useTypedRoute.ts',
       content: createUseTypedRouteFile(),
     },
+    {
+      fileName: '__useTypedLink.ts',
+      content: createUseTypedLinkFile(),
+    },
     {
       fileName: '__paths.d.ts',
       content: createPathsFiles(outputData),
diff --git a/src/core/output/generators/blocks/routes/routes-paths.block.ts b/src/core/output/generators/blocks/routes/routes-paths.block.ts
index 2e059f2..21b36ef 100644
--- a/src/core/output/generators/blocks/routes/routes-paths.block.ts
+++ b/src/core/output/generators/blocks/routes/routes-paths.block.ts
@@ -27,6 +27,7 @@ export function createLocaleRoutePathSchema(routePaths: RoutePathsDecl[]) {
 
 export function createValidatePathTypes(
   pathElements: DestructuredPath[][][],
+  routesList: string[],
   withLocale = false
 ): string {
   let pathConditions = pathElements.map(createTypeValidatePathCondition).filter((f) => {
@@ -61,7 +62,7 @@ export function createValidatePathTypes(
       }
       : never;
   
-  
+    // RouteNameFromPath, RouteNameFromLocalePath
     export type RouteNameFrom${returnIfTrue(
       withLocale,
       'Locale'
@@ -71,6 +72,7 @@ export function createValidatePathTypes(
          ${
            pathConditions.length
              ? `: ${pathConditions
+                 .filter((f) => routesList.includes(f.routeName))
                  .map((t) => `${t.typeName}<T> extends true ? "${t.routeName}"`)
                  .join(': ')} : never`
              : ': never'
diff --git a/src/core/output/generators/files/__navigateTo.file.ts b/src/core/output/generators/files/__navigateTo.file.ts
index 6151808..7eb0541 100644
--- a/src/core/output/generators/files/__navigateTo.file.ts
+++ b/src/core/output/generators/files/__navigateTo.file.ts
@@ -43,7 +43,8 @@ export function createNavigateToFile() {
       ) : Promise<void | NavigationFailure | TypedRouteFromName<RouteNameFromPath<T>>>`
     )}
   }
-    export const navigateTo: NavigateToFunction = defaultNavigateTo as any;
+  
+  export const navigateTo: NavigateToFunction = defaultNavigateTo as any;
 
   `;
 }
diff --git a/src/core/output/generators/files/__paths.file.ts b/src/core/output/generators/files/__paths.file.ts
index a65c1e8..227320e 100644
--- a/src/core/output/generators/files/__paths.file.ts
+++ b/src/core/output/generators/files/__paths.file.ts
@@ -8,7 +8,7 @@ import {
   createValidatePathTypes,
 } from '../blocks';
 
-export function createPathsFiles({ routesPaths }: GeneratorOutput) {
+export function createPathsFiles({ routesPaths, routesList }: GeneratorOutput) {
   const { i18n, i18nOptions } = moduleOptionStore;
   const hasPrefixStrategy = i18n && i18nOptions?.strategy !== 'no_prefix';
 
@@ -79,8 +79,8 @@ export function createPathsFiles({ routesPaths }: GeneratorOutput) {
     })
     .filter((f) => f.length);
 
-  const validatePathTypes = createValidatePathTypes(pathElements);
-  const validateLocalePathTypes = createValidatePathTypes(pathElements, true);
+  const validatePathTypes = createValidatePathTypes(pathElements, routesList);
+  const validateLocalePathTypes = createValidatePathTypes(pathElements, routesList, true);
 
   return /* typescript */ `
     
diff --git a/src/core/output/generators/files/__typed-router.d.file.ts b/src/core/output/generators/files/__typed-router.d.file.ts
index bb17d93..b62e552 100644
--- a/src/core/output/generators/files/__typed-router.d.file.ts
+++ b/src/core/output/generators/files/__typed-router.d.file.ts
@@ -14,6 +14,7 @@ export function createTypedRouterDefinitionFile(): string {
     import type {TypedRouter, TypedRoute, TypedRouteLocationRawFromName, TypedLocationAsRelativeRaw} from './__router';
     import { useRoute as _useRoute } from './__useTypedRoute';
     import { useRouter as _useRouter } from './__useTypedRouter';
+    import { useLink as _useLink } from './__useTypedLink';
     import { navigateTo as _navigateTo } from './__navigateTo';
     ${returnIfTrue(
       i18n,
@@ -32,6 +33,7 @@ export function createTypedRouterDefinitionFile(): string {
         /* typescript */ `
             const useRoute: typeof _useRoute;
             const useRouter: typeof _useRouter;
+            const useLink: typeof _useLink;
             const navigateTo: typeof _navigateTo;
             const definePageMeta: typeof _definePageMeta;
             
diff --git a/src/core/output/generators/files/__useTypedLink.file.ts b/src/core/output/generators/files/__useTypedLink.file.ts
new file mode 100644
index 0000000..dc361d7
--- /dev/null
+++ b/src/core/output/generators/files/__useTypedLink.file.ts
@@ -0,0 +1,63 @@
+import { returnIfTrue } from '../../../../utils';
+import { moduleOptionStore } from '../../../config';
+
+export function createUseTypedLinkFile(): string {
+  const strictOptions = moduleOptionStore.getResolvedStrictOptions();
+  const { pathCheck } = moduleOptionStore;
+
+  return /* typescript */ `
+  
+  import { useLink as defaultLink } from '#imports';
+  import type {MaybeRef} from 'vue';
+  import type { NavigateToOptions } from 'nuxt/dist/app/composables/router';
+  import type { NavigationFailure } from 'vue-router';
+  import type { TypedRouteLocationRawFromName, TypedRouteFromName, TypedRoute } from './__router';
+  import type { RoutesNamesList } from './__routes';
+  ${returnIfTrue(
+    pathCheck,
+    `import type {TypedPathParameter, RouteNameFromPath} from './__paths';`
+  )}
+
+
+  type LinkedRoute<T extends RoutesNamesList> = {
+    route: ComputedRef<TypedRouteFromName<T> & {
+        href: string;
+    }>;
+    href: ComputedRef<string>;
+    isActive: ComputedRef<boolean>;
+    isExactActive: ComputedRef<boolean>;
+    navigate: (e?: MouseEvent) => Promise<void | NavigationFailure>;
+};
+
+
+  interface UseLinkFunction {
+    <T extends RoutesNamesList, P extends string>(
+     props: { 
+      to: MaybeRef<TypedRouteLocationRawFromName<T, P>>,
+      replace?: MaybeRef<boolean>
+    }
+    ) : LinkedRoute<T>
+    ${returnIfTrue(
+      pathCheck && !strictOptions.router.strictToArgument,
+      `<T extends string>(
+       props: {
+        to: MaybeRef<TypedPathParameter<T>>,
+        replace?: MaybeRef<boolean>
+       }
+      ) : LinkedRoute<RouteNameFromPath<T>>`
+    )}
+  }
+
+  /** 
+   * Typed clone of \`useLink\`
+   * 
+   * @exemple
+   * 
+   * \`\`\`ts
+   * const router = useLink(props);
+   * \`\`\`
+   */
+  export const useLink: UseLinkFunction = defaultLink as any;
+
+  `;
+}
diff --git a/src/core/output/generators/files/index.file.ts b/src/core/output/generators/files/index.file.ts
index 6ca0208..9efb384 100644
--- a/src/core/output/generators/files/index.file.ts
+++ b/src/core/output/generators/files/index.file.ts
@@ -28,6 +28,7 @@ export function createIndexFile(): string {
     } from './__routes';
     export { useRoute } from './__useTypedRoute';
     export { useRouter } from './__useTypedRouter';
+    export { useLink } from './__useTypedLink';
     export { navigateTo } from './__navigateTo';
     export { definePageMeta } from './__definePageMeta';
     export { helpers } from './__helpers';
diff --git a/src/core/output/generators/files/index.ts b/src/core/output/generators/files/index.ts
index e98f9cb..ab292a4 100644
--- a/src/core/output/generators/files/index.ts
+++ b/src/core/output/generators/files/index.ts
@@ -5,6 +5,7 @@ export * from './index.file';
 export * from './plugin.file';
 export * from './__useTypedRoute.file';
 export * from './__useTypedRouter.file';
+export * from './__useTypedLink.file';
 export * from './__navigateTo.file';
 export * from './__types-utils.d.file';
 export * from './__i18n-router.file';
diff --git a/test/fixtures/simple/tests/router/navigateTo.spec-d.ts b/test/fixtures/simple/tests/router/navigateTo.spec-d.ts
index f346a37..37aea62 100644
--- a/test/fixtures/simple/tests/router/navigateTo.spec-d.ts
+++ b/test/fixtures/simple/tests/router/navigateTo.spec-d.ts
@@ -1,6 +1,5 @@
-import { assertType } from 'vitest';
+import { assertType, test } from 'vitest';
 import type { LocationQuery } from 'vue-router';
-import test from 'node:test';
 
 // ! ------ Should Error ❌
 
diff --git a/test/fixtures/simple/tests/routes/useLink.spec-d.ts b/test/fixtures/simple/tests/routes/useLink.spec-d.ts
new file mode 100644
index 0000000..04eb3c4
--- /dev/null
+++ b/test/fixtures/simple/tests/routes/useLink.spec-d.ts
@@ -0,0 +1,245 @@
+import { assertType, test } from 'vitest';
+import type { LocationQuery } from 'vue-router';
+
+// ! ------ Should Error ❌
+
+// *  index.vue
+// @ts-expect-error
+useLink({ to: { name: 'index', params: { id: 1 } } });
+// @ts-expect-error
+useLink({ to: { name: 'index', params: { id: 1 } } });
+// @ts-expect-error
+useLink({ to: { name: 'blabla-baguette' } });
+
+// * --- [id].vue
+// @ts-expect-error
+useLink({ to: { name: 'user-id' } });
+// @ts-expect-error
+useLink({ to: { name: 'user-id', params: { foo: 'bar' } } });
+
+// * --- [foo]-[[bar]].vue
+// @ts-expect-error
+useLink({ to: { name: 'user-foo-bar' } });
+// @ts-expect-error
+useLink({ to: { name: 'user-foo-bar', params: { bar: 1 } } });
+
+// * --- [...slug].vue
+// @ts-expect-error
+useLink({ to: { name: 'user-catch-slug' } });
+// @ts-expect-error
+useLink({ to: { name: 'user-catch-slug', params: { slug: 1 } } });
+
+// * --- [one]-foo-[two].vue
+// @ts-expect-error
+useLink({ to: { name: 'user-one-foo-two' } });
+// @ts-expect-error
+useLink({ to: { name: 'user-one-foo-two', params: { one: 1 } } });
+
+// * --- [id]/[slug].vue
+// @ts-expect-error
+useLink({ to: { name: 'user-id-slug' } });
+// @ts-expect-error
+useLink({ to: { name: 'user-id-slug', params: { id: 1 } } });
+
+// * --- Routes added by modules
+// @ts-expect-error
+useLink({ to: { name: 'test-module' } });
+
+// $ ----- Should be valid ✅
+
+useLink({ to: { name: 'index' } });
+useLink({ to: { name: 'user-id', params: { id: 1 }, hash: 'baz' } });
+useLink({ to: { name: 'user-foo-bar', params: { foo: 'bar' }, force: true } });
+useLink({ to: { name: 'user-foo-bar', params: { foo: 'bar', bar: 'baz' } } });
+useLink({ to: { name: 'user-catch-slug', params: { slug: ['foo'] } } });
+useLink({ to: { name: 'user-catch-slug', params: { slug: [1, 2, 3] } } });
+useLink({ to: { name: 'user-one-foo-two', params: { one: 1, two: '2' } } });
+useLink({ to: { name: 'user-id-slug', params: { slug: '2' }, query: { foo: 'bar' } } });
+
+// --- Path navigation
+
+// ! ------ Should Error ❌
+
+// @ts-expect-error
+assertType(useLink({ to: '' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin ' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/ /' }));
+// @ts-expect-error
+assertType(useLink({ to: `/ / // / / eefzr` }));
+// @ts-expect-error
+assertType(useLink({ to: '/elzhlzehflzhef' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/foo/bar' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/foo/bar/baz' }));
+// @ts-expect-error
+assertType(useLink({ to: `/admin/${id}/action-bar/taz?query` }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/panel/3O9393/bar' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/foo/ profile/ezfje' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/3U93U/settings/baz' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/panel/?fjzk' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/panel/938783/ ' }));
+// @ts-expect-error
+assertType(useLink({ to: '/user/3887/foo/bar/' }));
+// @ts-expect-error
+assertType(useLink({ to: '/admin/:id//' }));
+
+// $ ----- Should be valid ✅
+
+const id = '38789803';
+assertType(useLink({ to: '/' }));
+assertType(useLink({ to: '/baguette' }));
+assertType(useLink({ to: '/admin/foo' }));
+assertType(useLink({ to: '/admin/foo/' }));
+assertType(useLink({ to: `/admin/${id}/action-bar#hash` }));
+assertType(useLink({ to: `/admin/${id}/action-bar?query=bar` }));
+assertType(useLink({ to: '/admin/foo/profile/' }));
+assertType(useLink({ to: `/admin/${id}/settings` }));
+assertType(useLink({ to: '/admin/panel/' }));
+assertType(useLink({ to: '/admin/panel/938783/' }));
+assertType(useLink({ to: '/user/38873-' }));
+assertType(useLink({ to: '/user/38673/bar/#hash' }));
+assertType(useLink({ to: '/user/ç9737/foo/articles?baz=foo' }));
+assertType(useLink({ to: '/user/catch/1/2' }));
+assertType(useLink({ to: '/user/test-' }));
+assertType(useLink({ to: '/user' }));
+
+// - Resolved routes
+
+// *  index.vue
+test('', async () => {
+  const resolvedNavigateToRoute = useLink({
+    to: {
+      name: 'index',
+    },
+  });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'index'>(resolvedNavigateToRoute.route.value.name);
+    // @ts-expect-error
+    assertType(resolvedNavigateToRoute.params);
+  }
+});
+
+// * --- [id].vue
+test('', async () => {
+  const resolvedNavigateToRoute = await useLink({
+    to: {
+      name: 'user-id',
+      params: {
+        id: 1,
+      },
+    },
+  });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'user-id'>(resolvedNavigateToRoute.route.value.name);
+    assertType<{
+      id: string;
+    }>(resolvedNavigateToRoute.route.value.params);
+  }
+});
+
+// * --- [foo]-[[bar]].vue
+test('', async () => {
+  const resolvedNavigateToRoute = await useLink({
+    to: {
+      name: 'user-foo-bar',
+      params: {
+        foo: 1,
+        bar: 1,
+      },
+    },
+  });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'user-foo-bar'>(resolvedNavigateToRoute.route.value.name);
+    assertType<{
+      foo: string;
+      bar?: string | undefined;
+    }>(resolvedNavigateToRoute.route.value.params);
+  }
+});
+
+// * --- [...slug].vue
+test('', async () => {
+  const resolvedNavigateToRoute = await useLink({
+    to: {
+      name: 'user-catch-slug',
+      params: {
+        slug: [1, 2, 3],
+      },
+    },
+  });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'user-catch-slug'>(resolvedNavigateToRoute.route.value.name);
+    assertType<{
+      slug: string[];
+    }>(resolvedNavigateToRoute.route.value.params);
+  }
+});
+
+// * --- [one]-foo-[two].vue
+
+const resolvedNavigateToRoute = await useLink({
+  to: {
+    name: 'user-one-foo-two',
+    params: { one: 1, two: 2 },
+  },
+});
+
+if (resolvedNavigateToRoute) {
+  assertType<'user-one-foo-two'>(resolvedNavigateToRoute.route.value.name);
+  assertType<{
+    one: string | number;
+    two: string | number;
+  }>(resolvedNavigateToRoute.route.value.params);
+  assertType<LocationQuery>(resolvedNavigateToRoute.route.value.query);
+}
+
+// * --- [id]/[slug].vue
+test('', async () => {
+  const resolvedNavigateToRoute = await useLink({
+    to: {
+      name: 'user-id-slug',
+      params: {
+        slug: 1,
+        id: 1,
+      },
+    },
+  });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'user-id-slug'>(resolvedNavigateToRoute.route.value.name);
+    assertType<{
+      id: string;
+      slug: string;
+    }>(resolvedNavigateToRoute.route.value.params);
+  }
+});
+
+// - With paths
+
+// * --- [foo]-[[bar]].vue
+test('', async () => {
+  const resolvedNavigateToRoute = await useLink({ to: '/admin/3883/action-376773' });
+
+  if (resolvedNavigateToRoute) {
+    assertType<'admin-id-action-slug'>(resolvedNavigateToRoute.route.value.name);
+    assertType<{
+      id: string;
+      slug: string;
+    }>(resolvedNavigateToRoute.route.value.params);
+
+    // @ts-expect-error
+    assertType<'admin-id'>(resolvedNavigateToRoute.route.value.name);
+  }
+});