feat(theme-default): add page load progressbar

[wxsms]

close #1138

[brc-dd]

This ideally should be opt-in. Another thing, I don't think mutation of router on each call of useRouter is a good idea. onBeforeRouteChange and onAfterRouteChanged can probably be supported through the theme object itself.

Diff (with main)

diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 84bd1c2..86f68dd 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -101,26 +101,31 @@ function newRouter(): Router {
   let isInitialPageLoad = inBrowser
   let initialPath: string
 
-  return createRouter((path) => {
-    let pageFilePath = pathToFile(path)
-
-    if (isInitialPageLoad) {
-      initialPath = pageFilePath
-    }
-
-    // use lean build if this is the initial page load or navigating back
-    // to the initial loaded path (the static vnodes already adopted the
-    // static content on that load so no need to re-fetch the page)
-    if (isInitialPageLoad || initialPath === pageFilePath) {
-      pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js')
-    }
-
-    if (inBrowser) {
-      isInitialPageLoad = false
-    }
-
-    return import(/*@vite-ignore*/ pageFilePath)
-  }, NotFound)
+  return createRouter(
+    (path) => {
+      let pageFilePath = pathToFile(path)
+
+      if (isInitialPageLoad) {
+        initialPath = pageFilePath
+      }
+
+      // use lean build if this is the initial page load or navigating back
+      // to the initial loaded path (the static vnodes already adopted the
+      // static content on that load so no need to re-fetch the page)
+      if (isInitialPageLoad || initialPath === pageFilePath) {
+        pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js')
+      }
+
+      if (inBrowser) {
+        isInitialPageLoad = false
+      }
+
+      return import(/*@vite-ignore*/ pageFilePath)
+    },
+    NotFound,
+    Theme.onBeforeRouteChange,
+    Theme.onAfterRouteChanged
+  )
 }
 
 if (inBrowser) {
diff --git a/src/client/app/router.ts b/src/client/app/router.ts
index 23d0027..553382f 100644
--- a/src/client/app/router.ts
+++ b/src/client/app/router.ts
@@ -35,11 +35,14 @@ interface PageModule {
 
 export function createRouter(
   loadPageModule: (path: string) => Promise<PageModule>,
-  fallbackComponent?: Component
+  fallbackComponent?: Component,
+  onBeforeRouteChange?: (to: string) => void | Promise<void>,
+  onAfterRouteChanged?: (to: string) => void | Promise<void>
 ): Router {
   const route = reactive(getDefaultRoute())
 
-  function go(href: string = inBrowser ? location.href : '/') {
+  async function go(href: string = inBrowser ? location.href : '/') {
+    await onBeforeRouteChange?.(href)
     const url = new URL(href, fakeHost)
     if (siteDataRef.value.cleanUrls === 'disabled') {
       // ensure correct deep link so page refresh lands on correct files.
@@ -54,7 +57,8 @@ export function createRouter(
       history.replaceState({ scrollPosition: window.scrollY }, document.title)
       history.pushState(null, '', href)
     }
-    return loadPage(href)
+    await loadPage(href)
+    await onAfterRouteChanged?.(href)
   }
 
   let latestPendingPath: string | null = null
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 6c13fda..edc1cc2 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -13,4 +13,6 @@ export interface Theme {
   NotFound?: Component
   enhanceApp?: (ctx: EnhanceAppContext) => void
   setup?: () => void
+  onBeforeRouteChange?: (to: string) => void | Promise<void>
+  onAfterRouteChanged?: (to: string) => void | Promise<void>
 }

Also, I'm not sure if we should have this in the default theme. People can easily do this:

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

export default {
  ...DefaultTheme,
  onBeforeRouteChange: () => {
    nprogress.start();
  },
  onAfterRouteChanged: () => {
    nprogress.done(true);
  }
}

Thoughts @kiaking?

[wxsms]

I don't think mutation of router on each call of useRouter is a good idea

how about enhanceApp? We can attach these events to the router object inside enhanceApp. Therefore no new options on Theme object is needed.

Also, I'm not sure if we should have this in the default theme

As I pointed out in the issue, I think that it's an important feature for users using slow network.

[wxsms]

I just updated the PR base on enhanceApp and the review comments. Please take a look. Thanks.

[brc-dd]

Also update theme.d.ts:

diff --git a/theme.d.ts b/theme.d.ts
index cbb9cdf..3d0fac1 100644
--- a/theme.d.ts
+++ b/theme.d.ts
@@ -1,5 +1,6 @@
 // so that users can do `import DefaultTheme from 'vitepress/theme'`
 import type { ComponentOptions } from 'vue'
+import { EnhanceAppContext } from './dist/client/index.js'
 
 export const VPHomeHero: ComponentOptions
 export const VPHomeFeatures: ComponentOptions
@@ -13,6 +14,7 @@ export const VPTeamMembers: ComponentOptions
 declare const theme: {
   Layout: ComponentOptions
   NotFound: ComponentOptions
+  enhanceApp: EnhanceAppContext
 }
 
 export default theme

Rest of the stuff looks fine!