feat(docs): rewrite router in TS (#408)

Rewrites the router defined in the `src/router` folder in TypeScript. In `index.(js → ts)`: - Augments the `RouteMeta` interface provided by `vue-router` with the `Route` interface defined in `src/data/routes.ts` so that the application can access the current `Route` information through the Vue router's meta data without any type error. Common benign changes: - Removes unused method parameters
ntohq · Jan 17, 2025 · fb9c6ad · fb9c6ad
1 parent ec29113
commit fb9c6ad
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/docs/src/router/guards.js → packages/docs/src/router/guards.ts b/packages/docs/src/router/guards.js → packages/docs/src/router/guards.ts
@@ -1,4 +1,7 @@
-export const afterEachGlobal = (vueApp, to, from) => {
+import type { App } from 'vue'
+import type { NavigationHookAfter } from 'vue-router'
+
+export const afterEachGlobal = (vueApp: App, to: Parameters<NavigationHookAfter>[0]) => {
     const title = to.meta.path === '/' ? to.meta.title : `${to.meta.title} | Buefy`
     const url = `https://buefy.org${to.meta.path}`
     const description = to.meta.subtitle.replace(/<(.|\n)*?>/g, '')
@@ -17,7 +20,7 @@ export const afterEachGlobal = (vueApp, to, from) => {
 
     updates.forEach((item) => {
         if (!item.value) return
-        document.querySelector(item.tag)
+        document.querySelector(item.tag)!
             .setAttribute(item.attr || 'content', item.value)
     })
 

diff --git a/packages/docs/src/router/index.js → packages/docs/src/router/index.ts b/packages/docs/src/router/index.js → packages/docs/src/router/index.ts
@@ -1,13 +1,20 @@
+import type { App } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import { afterEachGlobal } from './guards.js'
+import type { RouteComponent, RouteMeta } from 'vue-router'
+import { afterEachGlobal } from './guards'
 import routes from '@/data/routes'
+import type { Route } from '@/data/routes'
 
-export function createDocsRouter(vueApp) {
-    function route(path, component) {
+declare module 'vue-router' {
+    interface RouteMeta extends Route {}
+}
+
+export function createDocsRouter(vueApp: App) {
+    function route(path: string, component: () => Promise<RouteComponent>) {
         return {
             path,
             name: path,
-            meta: routes[path],
+            meta: routes[path] as RouteMeta,
             // `component` is now a function to import the component; e.g.,
             // () => import('@/pages/Home.vue')
             //
@@ -95,11 +102,11 @@ export function createDocsRouter(vueApp) {
             {
                 path: '/:pathMatch(.*)*',
                 name: 'notfound',
-                meta: routes.notfound,
+                meta: routes.notfound as RouteMeta,
                 component: NotFound
             }
         ],
-        scrollBehavior(to, from, savedPosition) {
+        scrollBehavior(to) {
             if (to.hash) {
                 return {
                     el: to.hash