Merge pull request #88 from bcc-code/typed-routes

Typed routes
bcc-code · Apr 28, 2023 · 4eefb2f · 4eefb2f
2 parents c43aae9 + cde2a24
commit 4eefb2f
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 103 deletions.
diff --git a/components/ContentSection.vue b/components/ContentSection.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { NuxtLinkProps } from "#app";
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
 
 withDefaults(
   defineProps<{
     title: string;
-    link?: Partial<NuxtLinkProps>;
+    link?: RoutesNamedLocations;
     linkLabel?: string;
   }>(),
   {
@@ -20,7 +19,7 @@ withDefaults(
       <PageHeading :level="3">{{ title }}</PageHeading>
       <NuxtLink
         v-if="link"
-        v-bind="link"
+        :to="link"
         class="bg-slate-100 rounded-full leading-none inline-block px-3 py-2 hover:bg-slate-200 text-sm"
       >
         {{ linkLabel }}

diff --git a/components/DropdownMenu.vue b/components/DropdownMenu.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
 export interface DropdownMenuItem {
   text: string;
   icon?: string;
-  link?: string;
+  link?: RoutesNamedLocations;
   clickFunction?: Function;
 }
 
@@ -38,7 +40,7 @@ function menuItemClick(event: Event, item: DropdownMenuItem) {
       >
         <NuxtLink
           v-if="item.link"
-          :to="`${item.link}`"
+          :to="item.link"
           class="flex justify-start items-center gap-1 py-2 px-3"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />
@@ -47,14 +49,14 @@ function menuItemClick(event: Event, item: DropdownMenuItem) {
         <p
           v-else-if="item.clickFunction"
           class="flex justify-start items-center gap-1 py-2 px-3"
-          @click="(event) => menuItemClick(event, item)"
+          @click="(event: MouseEvent) => menuItemClick(event, item)"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />
           <span>{{ item.text }}</span>
         </p>
         <p
           v-else
-          @click="(event) => event.stopPropagation()"
+          @click="(event: MouseEvent) => event.stopPropagation()"
           class="flex justify-start items-center gap-1 py-2 px-3"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />

diff --git a/components/playlist/PlaylistCarousel.vue b/components/playlist/PlaylistCarousel.vue
@@ -11,7 +11,7 @@ defineProps<{
     <NuxtLink
       v-for="playlist in playlists"
       :key="playlist.id || 0"
-      :to="`/playlist/curated/${playlist.id}`"
+      :to="{ name: 'playlist-curated-id', params: { id: playlist.id || 0 } }"
       class="h-full aspect-square"
     >
       <ProtectedImage

diff --git a/components/playlist/PlaylistOverview.vue b/components/playlist/PlaylistOverview.vue
@@ -12,7 +12,7 @@ defineProps<{
     <NuxtLink
       v-for="playlist in playlists"
       :key="playlist.id || 0"
-      :to="`/playlist/curated/${playlist.id}`"
+      :to="{ name: 'playlist-curated-id', params: { id: playlist.id || 0 } }"
     >
       <PlaylistCard :playlist="playlist" />
     </NuxtLink>

diff --git a/components/sidebar/SidebarElement.vue b/components/sidebar/SidebarElement.vue
@@ -1,8 +1,13 @@
 <script lang="ts" setup>
-const links: Record<"title" | "url", string>[] = [
-  { title: "Home", url: "/" },
-  { title: "Browse", url: "/browse" },
-  { title: "Search", url: "/search" },
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
+const links: {
+  title: string;
+  link: RoutesNamedLocations;
+}[] = [
+  { title: "Home", link: { name: "index" } },
+  { title: "Browse", link: { name: "browse" } },
+  { title: "Search", link: { name: "search" } },
 ];
 
 const { data: collections } = useTrackCollections();
@@ -20,7 +25,7 @@ const { data: collections } = useTrackCollections();
       <SidebarGroup>
         <SidebarItem
           v-for="(link, i) in links"
-          :key="`${link.url}_${i}`"
+          :key="`${link.link}_${i}`"
           v-bind="link"
         />
       </SidebarGroup>
@@ -30,7 +35,10 @@ const { data: collections } = useTrackCollections();
           v-for="collection in collections"
           :key="collection.id || 0"
           :title="collection.name || ''"
-          :url="`/playlist/private/${collection.id}`"
+          :link="{
+            name: 'playlist-private-id',
+            params: { id: collection.id || 0 },
+          }"
         />
       </SidebarGroup>
     </div>

diff --git a/components/sidebar/SidebarItem.vue b/components/sidebar/SidebarItem.vue
@@ -1,20 +1,23 @@
 <script lang="ts" setup>
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
 withDefaults(
   defineProps<{
     type?: "page" | "playlist" | "private-playlist";
     title: string;
-    url: string;
+    link: RoutesNamedLocations;
     image?: string;
   }>(),
   {
     type: "page",
+    image: "",
   }
 );
 </script>
 
 <template>
   <NuxtLink
-    :to="url"
+    :to="link"
     active-class="bg-lime-400"
     class="py-2 px-4 rounded-xl group flex gap-2"
   >

diff --git a/components/track/TrackList.vue b/components/track/TrackList.vue
@@ -24,8 +24,8 @@ const toggleDropdownForTrack = (trackReference: string) => {
   }
 };
 
-const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
-  const items = [];
+const dropdownMenuItemsForTrack = (track: TrackModel) => {
+  const items: DropdownMenuItem[] = [];
 
   items.push({
     icon: "icon.play",
@@ -37,7 +37,7 @@ const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
     items.push({
       icon: "icon.category.album",
       text: "Go to album",
-      link: `/album/${track.meta.parent.id}`,
+      link: { name: "browse" }, // TODO: change link
     });
   }
 
@@ -47,21 +47,25 @@ const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
     clickFunction: () => addTrackToQueue(track),
   });
 
-  // TODO: change links
+  // TODO: add link
   items.push({
     icon: "icon.category.playlist",
     text: "Add to Playlist",
   });
-  items.push({ icon: "icon.share", text: "Share track", link: "/browse" });
+  items.push({
+    icon: "icon.share",
+    text: "Share track",
+    link: { name: "browse" }, // TODO: change link
+  });
   items.push({
     icon: "icon.person",
     text: "Go to contributors",
-    link: "/browse",
+    link: { name: "browse" }, // TODO: change link
   });
   items.push({
     icon: "icon.information",
     text: "More information",
-    link: "/browse",
+    link: { name: "browse" }, // TODO: change link
   });
 
   return items;

diff --git a/i18n.config.ts b/i18n.config.ts
@@ -28,7 +28,6 @@ import zh from "./locales/zh.json";
 
 const i18nConfig = {
   legacy: false,
-  locale: "en",
   messages: {
     af,
     bg,

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,34 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-
-// Due to a bug in @nuxtjs/i18n@8.0.0-beta.11 we have to use beta.10 with inline configuration. See: https://github.com/nuxt-modules/i18n/issues/1990
-// Hopefully when beta.12 is available this can be removed again.
-import af from "./locales/af.json";
-import bg from "./locales/bg.json";
-import cs from "./locales/cs.json";
-import da from "./locales/da.json";
-import de from "./locales/de.json";
-import el from "./locales/el.json";
-import en from "./locales/en.json";
-import es from "./locales/es.json";
-import et from "./locales/et.json";
-import fi from "./locales/fi.json";
-import fr from "./locales/fr.json";
-import he from "./locales/he.json";
-import hr from "./locales/hr.json";
-import hu from "./locales/hu.json";
-import it from "./locales/it.json";
-import nb from "./locales/nb.json";
-import nl from "./locales/nl.json";
-import pl from "./locales/pl.json";
-import pt from "./locales/pt.json";
-import ro from "./locales/ro.json";
-import ru from "./locales/ru.json";
-import sl from "./locales/sl.json";
-import tr from "./locales/tr.json";
-import uk from "./locales/uk.json";
-import zh from "./locales/zh.json";
+import vueI18n from "./i18n.config";
 
 const modules: (string | any)[] = [
+  ["nuxt-typed-router", { strict: true }],
   "@nuxt/devtools",
   "@nuxtjs/tailwindcss",
   "@nuxtjs/i18n",
@@ -47,39 +21,10 @@ export default defineNuxtConfig({
     },
   },
   i18n: {
+    strategy: "no_prefix",
     defaultLocale: "en",
-    vueI18n: {
-      legacy: false,
-      locale: "en",
-      fallbackLocale: "fr",
-      messages: {
-        af,
-        bg,
-        cs,
-        da,
-        de,
-        el,
-        en,
-        es,
-        et,
-        fi,
-        fr,
-        he,
-        hr,
-        hu,
-        it,
-        nb,
-        nl,
-        pl,
-        pt,
-        ro,
-        ru,
-        sl,
-        tr,
-        uk,
-        zh,
-      },
-    },
+    // Due to a bug in @nuxtjs/i18n@8.0.0-beta.11 we have to use beta.10 with inline configuration. See: https://github.com/nuxt-modules/i18n/issues/1990
+    vueI18n,
   },
   imports: {
     dirs: ["stores"],

diff --git a/package.json b/package.json
@@ -43,12 +43,14 @@
     "happy-dom": "^9.9.2",
     "nuxt": "^3.4.1",
     "nuxt-electron": "^0.4.5",
+    "nuxt-typed-router": "^3.2.0",
     "prettier": "^2.8.7",
     "stylelint": "^15.5.0",
     "stylelint-config-recommended-scss": "^10.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "vite-electron-plugin": "^0.8.2",
     "vite-plugin-electron-renderer": "^0.14.1",
-    "vitest": "^0.30.1"
+    "vitest": "^0.30.1",
+    "vue-tsc": "^1.6.0"
   }
 }
diff --git a/pages/not-found.vue → pages/[...error].vue b/pages/not-found.vue → pages/[...error].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { params } = useRoute();
+const { params } = useRoute<"error">();
 </script>
 
 <template>

diff --git a/pages/index.vue b/pages/index.vue
@@ -34,15 +34,15 @@ const newestAudiobooks = computed(() => audiobooks.value?.splice(0, 5) || null);
         :playlists="newestPlaylists"
       />
     </ContentSection>
-    <ContentSection title="Speeches" :link="{ to: '/messages' }">
+    <ContentSection title="Speeches" :link="{ name: 'messages' }">
       <TrackList
         :skeleton-count="5"
         :show-skeleton="speechesPending"
         :tracks="newestSpeeches"
       >
       </TrackList>
     </ContentSection>
-    <ContentSection title="Audiobooks" :link="{ to: '/audiobooks' }">
+    <ContentSection title="Audiobooks" :link="{ name: 'audiobooks' }">
       <TrackList
         :skeleton-count="5"
         :show-skeleton="audiobooksPending"

diff --git a/pages/playlist/curated/[id].vue b/pages/playlist/curated/[id].vue
@@ -2,7 +2,7 @@
 const { t } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.playlist"));
 
-const { id } = useRoute().params;
+const { id } = useRoute<"playlist-curated-id">().params;
 const playlistId = Number(id);
 
 const { data: playlist } = usePlaylist({ id: playlistId });

diff --git a/pages/playlist/private/[id].vue b/pages/playlist/private/[id].vue
@@ -2,7 +2,7 @@
 const { t } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.playlist"));
 
-const { id } = useRoute().params;
+const { id } = useRoute<"playlist-private-id">().params;
 const collectionId = Number(id);
 const { data: collection, pending } = useTrackCollection({ id: collectionId });