From a63b0cf69a4d1f8b1b7e44f76c6283f28d437b59 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 5 Jun 2020 13:19:57 -0400 Subject: [PATCH] fix: avoid using __DEV__ + throttle active header link --- src/client/app/components/Content.ts | 2 +- src/client/app/composables/head.ts | 2 +- src/client/app/index.ts | 12 +++-- src/client/app/utils.ts | 2 +- src/client/shim.d.ts | 1 - src/client/theme-default/components/NavBar.ts | 10 ++-- .../theme-default/components/SideBar.ts | 54 +++++++++---------- .../composables/activeSidebarLink.ts | 15 ++++-- 8 files changed, 55 insertions(+), 43 deletions(-) diff --git a/src/client/app/components/Content.ts b/src/client/app/components/Content.ts index 59ecd10d1fbf..c2dcb634f43a 100644 --- a/src/client/app/components/Content.ts +++ b/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() } diff --git a/src/client/app/composables/head.ts b/src/client/app/composables/head.ts index 6c41143a14cb..7ccd7e6eb43e 100644 --- a/src/client/app/composables/head.ts +++ b/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 diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 76862dd6ac61..c3909cccf62f 100644 --- a/src/client/app/index.ts +++ b/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: { diff --git a/src/client/app/utils.ts b/src/client/app/utils.ts index 44658966fcdd..0d47923617df 100644 --- a/src/client/app/utils.ts +++ b/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 { diff --git a/src/client/shim.d.ts b/src/client/shim.d.ts index 5e7fcb095aa6..1cee35815e78 100644 --- a/src/client/shim.d.ts +++ b/src/client/shim.d.ts @@ -1,4 +1,3 @@ -declare const __DEV__: boolean declare const __VP_HASH_MAP__: Record declare const process: { env: Record diff --git a/src/client/theme-default/components/NavBar.ts b/src/client/theme-default/components/NavBar.ts index 6064cddbc4f4..b0e961942cfc 100644 --- a/src/client/theme-default/components/NavBar.ts +++ b/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) } } } diff --git a/src/client/theme-default/components/SideBar.ts b/src/client/theme-default/components/SideBar.ts index 99173be0a67a..34af2c2dac69 100644 --- a/src/client/theme-default/components/SideBar.ts +++ b/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() + }) } } } diff --git a/src/client/theme-default/composables/activeSidebarLink.ts b/src/client/theme-default/composables/activeSidebarLink.ts index ff58cd1ee8b2..4a1b88e0d349 100644 --- a/src/client/theme-default/composables/activeSidebarLink.ts +++ b/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) + } } }