improve app typing

lib/app/Content.js

@@ -0,0 +1,48 @@
+import { h, shallowRef, watchEffect, inject, nextTick } from 'vue'
+import { RouteSymbol } from './router'
+
+const Default404 = () => '404 Not Found'
+
+export const Content = {
+  setup() {
+    const comp = shallowRef()
+
+    if (typeof window !== 'undefined') {
+      const route = inject(RouteSymbol, {
+        path: '/',
+        scrollPosition: 0
+      })
+
+      watchEffect(() => {
+        const pendingPath = route.path
+        let pagePath = pendingPath.replace(/\.html$/, '')
+        if (pagePath.endsWith('/')) {
+          pagePath += 'index'
+        }
+
+        // awlays force re-fetch content in dev
+        import(`${pagePath}.md?t=${Date.now()}`)
+          .then(async (m) => {
+            if (route.path === pendingPath) {
+              comp.value = m.default
+              await nextTick()
+              window.scrollTo({
+                left: 0,
+                top: route.scrollPosition,
+                behavior: 'auto'
+              })
+            }
+          })
+          .catch((err) => {
+            if (route.path === pendingPath) {
+              comp.value = Default404
+            }
+          })
+      })
+    } else {
+      // TODO SSR
+    }
+
+    return () => (comp.value ? h(comp.value) : null)
+  }
+}

lib/app/index.js

@@ -1,6 +1,7 @@
-import { createApp, h, inject, watchEffect, shallowRef, nextTick } from 'vue'
+import { createApp, h } from 'vue'
 import { Layout } from '/@theme/index.js'
-import { useRouter, RouteSymbol } from './composables/router.js'
+import { Content } from './Content'
+import { useRouter } from './router.js'
 
 const App = {
   setup() {
@@ -13,55 +14,6 @@ const App = {
   }
 }
 
-const Default404 = () => '404 Not Found'
-
-const Content = {
-  setup() {
-    const comp = shallowRef()
-
-    if (typeof window !== 'undefined') {
-      /**
-       * @type {{ path: string, scrollPosition: number }}
-       */
-      const route = inject(RouteSymbol, {
-        path: '/',
-        scrollPosition: 0
-      })
-
-      watchEffect(() => {
-        const pendingPath = route.path
-        let pagePath = pendingPath.replace(/\.html$/, '')
-        if (pagePath.endsWith('/')) {
-          pagePath += 'index'
-        }
-
-        // awlays force re-fetch content in dev
-        import(`${pagePath}.md?t=${Date.now()}`)
-          .then(async (m) => {
-            if (route.path === pendingPath) {
-              comp.value = m.default
-              await nextTick()
-              window.scrollTo({
-                left: 0,
-                top: route.scrollPosition,
-                behavior: 'auto'
-              })
-            }
-          })
-          .catch((err) => {
-            if (route.path === pendingPath) {
-              comp.value = Default404
-            }
-          })
-      })
-    } else {
-      // TODO SSR
-    }
-
-    return () => (comp.value ? h(comp.value) : null)
-  }
-}
-
 const app = createApp(App)
 
 app.component('Content', Content)

lib/app/router.js

@@ -1,5 +1,8 @@
 import { reactive, provide } from 'vue'
 
+/**
+ * @type {import('vue').InjectionKey<{ path: string, scrollPosition: number }>}
+ */
 export const RouteSymbol = Symbol()
 
 export function useRouter() {