refactor: client app index

src/client/app/index.ts

@@ -1,6 +1,6 @@
-import { createApp as createClientApp, createSSRApp } from 'vue'
+import { App, createApp as createClientApp, createSSRApp } from 'vue'
 import { inBrowser, pathToFile } from './utils'
-import { createRouter, RouterSymbol } from './router'
+import { Router, RouterSymbol, createRouter } from './router'
 import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
 import { siteDataRef } from './composables/siteData'
 import { useSiteDataByRoute } from './composables/siteDataByRoute'
@@ -11,10 +11,47 @@ import Theme from '/@theme/index'
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
 export function createApp() {
+  const router = newRouter()
+
+  handleHMR(router)
+
+  const app = newApp()
+
+  app.provide(RouterSymbol, router)
+
+  const siteDataByRouteRef = useSiteDataByRoute(router.route)
+  const pageDataRef = usePageData(router.route)
+
+  if (inBrowser) {
+    // dynamically update head tags
+    useUpdateHead(router.route, siteDataByRouteRef)
+  }
+
+  mixinGlobalComputed(app, siteDataRef, siteDataByRouteRef, pageDataRef)
+  mixinGlobalComponents(app)
+
+  if (Theme.enhanceApp) {
+    Theme.enhanceApp({
+      app,
+      router,
+      siteData: siteDataRef
+    })
+  }
+
+  return { app, router }
+}
+
+function newApp(): App {
+  return process.env.NODE_ENV === 'production'
+    ? createSSRApp(Theme.Layout)
+    : createClientApp(Theme.Layout)
+}
+
+function newRouter(): Router {
   let isInitialPageLoad = inBrowser
   let initialPath: string
 
-  const router = createRouter((path) => {
+  return createRouter((path) => {
     let pageFilePath = pathToFile(path)
 
     if (isInitialPageLoad) {
@@ -23,62 +60,40 @@ export function createApp() {
 
     // 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).
+    // static content on that load so no need to re-fetch the page)
     if (isInitialPageLoad || initialPath === pageFilePath) {
       pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js')
     }
 
+    // in browser: native dynamic import
     if (inBrowser) {
       isInitialPageLoad = false
-      // in browser: native dynamic import
+
       return import(/*@vite-ignore*/ pageFilePath)
-    } else {
-      // SSR, sync require
-      return require(pageFilePath)
     }
+
+    // SSR: sync require
+    return require(pageFilePath)
   }, NotFound)
+}
 
+function handleHMR(router: Router): void {
   // update route.data on HMR updates of active page
   if (import.meta.hot) {
     // hot reload pageData
     import.meta.hot!.on('vitepress:pageData', (payload) => {
-      if (
+      if (shouldHotReload(payload)) {
-        payload.path.replace(/(\bindex)?\.md$/, '') ===
-        location.pathname.replace(/(\bindex)?\.html$/, '')
-      ) {
         router.route.data = payload.pageData
       }
     })
   }
+}
 
-  const app =
+function shouldHotReload(payload: any): boolean {
-    process.env.NODE_ENV === 'production'
+  const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '')
-      ? createSSRApp(Theme.Layout)
+  const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '')
-      : createClientApp(Theme.Layout)
-
-  app.provide(RouterSymbol, router)
-
-  mixinGlobalComponents(app)
-
-  const siteDataByRouteRef = useSiteDataByRoute(router.route)
-  const pageDataRef = usePageData(router.route)
-
-  if (inBrowser) {
-    // dynamically update head tags
-    useUpdateHead(router.route, siteDataByRouteRef)
-  }
-
-  mixinGlobalComputed(app, siteDataRef, siteDataByRouteRef, pageDataRef)
-
-  if (Theme.enhanceApp) {
-    Theme.enhanceApp({
-      app,
-      router,
-      siteData: siteDataRef
-    })
-  }
 
-  return { app, router }
+  return payloadPath === locationPath
 }
 
 if (inBrowser) {