fix: avoid using __DEV__ + throttle active header link

src/client/app/components/Content.ts

@@ -5,7 +5,7 @@ import { usePrefetch } from '../composables/preFetch'
 export const Content = {
   setup() {
     const route = useRoute()
-    if (!__DEV__) {
+    if (process.env.NODE_ENV === 'production') {
       // in prod mode, enable intersectionObserver based pre-fetch.
       usePrefetch()
     }

src/client/app/composables/head.ts

@@ -8,7 +8,7 @@ export function useUpdateHead(pageDataRef: PageDataRef) {
 
   let isFirstUpdate = true
   const updateHeadTags = (newTags: HeadConfig[]) => {
-    if (!__DEV__ && isFirstUpdate) {
+    if (process.env.NODE_ENV === 'production' && isFirstUpdate) {
       // in production, the initial meta tags are already pre-rendered so we
       // skip the first update.
       isFirstUpdate = false

src/client/app/index.ts

@@ -66,15 +66,19 @@ export function createApp() {
     }
   }, NotFound)
 
-  const app = __DEV__
-    ? createClientApp(Theme.Layout)
-    : createSSRApp(Theme.Layout)
+  const app =
+    process.env.NODE_ENV === 'production'
+      ? createSSRApp(Theme.Layout)
+      : createClientApp(Theme.Layout)
 
   app.provide(RouterSymbol, router)
   app.provide(pageDataSymbol, pageDataRef)
 
   app.component('Content', Content)
-  app.component('Debug', __DEV__ ? Debug : () => null)
+  app.component(
+    'Debug',
+    process.env.NODE_ENV === 'production' ? () => null : Debug
+  )
 
   Object.defineProperties(app.config.globalProperties, {
     $site: {

src/client/app/utils.ts

@@ -9,7 +9,7 @@ export function pathToFile(path: string): string {
     pagePath += 'index'
   }
 
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     // awlays force re-fetch content in dev
     pagePath += `.md?t=${Date.now()}`
   } else {

src/client/shim.d.ts

@@ -1,4 +1,3 @@
-declare const __DEV__: boolean
 declare const __VP_HASH_MAP__: Record<string, string>
 declare const process: {
   env: Record<string, string>

src/client/theme-default/components/NavBar.ts

@@ -24,10 +24,12 @@ export default {
     return {
       withBase,
       isActiveLink,
-      // use computed in dev for hot reload
-      navData: __DEV__
-        ? computed(() => useSiteData().value.themeConfig.nav)
-        : useSiteData().value.themeConfig.nav
+      navData:
+        process.env.NODE_ENV === 'production'
+          ? // navbar items do not change in production
+            useSiteData().value.themeConfig.nav
+          : // use computed in dev for hot reload
+            computed(() => useSiteData().value.themeConfig.nav)
     }
   }
 }

src/client/theme-default/components/SideBar.ts

@@ -33,38 +33,36 @@ export default {
 
     useActiveSidebarLinks()
 
-    const resolveSidebar = () => {
-      const {
-        headers,
-        frontmatter: { sidebar, sidebarDepth = 2 }
-      } = pageData.value
+    return {
+      items: computed(() => {
+        const {
+          headers,
+          frontmatter: { sidebar, sidebarDepth = 2 }
+        } = pageData.value
 
-      if (sidebar === 'auto') {
-        // auto, render headers of current page
-        return resolveAutoSidebar(headers, sidebarDepth)
-      } else if (Array.isArray(sidebar)) {
-        // in-page array config
-        return resolveArraySidebar(sidebar, sidebarDepth)
-      } else if (sidebar === false) {
-        return []
-      } else {
-        // no explicit page sidebar config
-        // check global theme config
-        const { sidebar: themeSidebar } = siteData.value.themeConfig
-        if (themeSidebar === 'auto') {
+        if (sidebar === 'auto') {
+          // auto, render headers of current page
           return resolveAutoSidebar(headers, sidebarDepth)
-        } else if (Array.isArray(themeSidebar)) {
-          return resolveArraySidebar(themeSidebar, sidebarDepth)
-        } else if (themeSidebar === false) {
+        } else if (Array.isArray(sidebar)) {
+          // in-page array config
+          return resolveArraySidebar(sidebar, sidebarDepth)
+        } else if (sidebar === false) {
           return []
-        } else if (typeof themeSidebar === 'object') {
-          return resolveMultiSidebar(themeSidebar, route.path, sidebarDepth)
+        } else {
+          // no explicit page sidebar config
+          // check global theme config
+          const { sidebar: themeSidebar } = siteData.value.themeConfig
+          if (themeSidebar === 'auto') {
+            return resolveAutoSidebar(headers, sidebarDepth)
+          } else if (Array.isArray(themeSidebar)) {
+            return resolveArraySidebar(themeSidebar, sidebarDepth)
+          } else if (themeSidebar === false) {
+            return []
+          } else if (typeof themeSidebar === 'object') {
+            return resolveMultiSidebar(themeSidebar, route.path, sidebarDepth)
+          }
         }
-      }
-    }
-
-    return {
-      items: __DEV__ ? computed(resolveSidebar) : resolveSidebar()
+      })
     }
   }
 }

src/client/theme-default/composables/activeSidebarLink.ts

@@ -59,7 +59,7 @@ export function useActiveSidebarLinks() {
     }
   }
 
-  const onScroll = debounce(setActiveLink, 100)
+  const onScroll = throttleAndDebounce(setActiveLink, 300)
   onMounted(() => {
     setActiveLink()
     window.addEventListener('scroll', onScroll)
@@ -75,10 +75,19 @@ export function useActiveSidebarLinks() {
   })
 }
 
-function debounce(fn: () => void, delay: number): () => void {
+function throttleAndDebounce(fn: () => void, delay: number): () => void {
   let timeout: number
+  let called = false
   return () => {
     if (timeout) clearTimeout(timeout)
-    timeout = setTimeout(fn, delay)
+    if (!called) {
+      fn()
+      called = true
+      setTimeout(() => {
+        called = false
+      }, delay)
+    } else {
+      timeout = setTimeout(fn, delay)
+    }
   }
 }