refactor: load 'active header links' on demand

vuejs · May 24, 2018 · b0c9e11 · b0c9e11
1 parent 4c09627
commit b0c9e11
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 44 deletions.
diff --git a/lib/app/root-mixins/activeHeaderLinks.js b/lib/app/root-mixins/activeHeaderLinks.js
@@ -0,0 +1,47 @@
+import store from '@app/store'
+import throttle from 'lodash.throttle'
+
+export default {
+  mounted () {
+    window.addEventListener('scroll', this.onScroll)
+  },
+  methods: {
+    onScroll: throttle(function () {
+      this.setActiveHash()
+    }, 300),
+    setActiveHash () {
+      const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
+      const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
+      .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
+
+      const scrollTop = Math.max(
+        window.pageYOffset,
+        document.documentElement.scrollTop,
+        document.body.scrollTop
+      )
+
+      for (let i = 0; i < anchors.length; i++) {
+        const anchor = anchors[i]
+        const nextAnchor = anchors[i + 1]
+
+        const isActive = i === 0 && scrollTop === 0 ||
+        (scrollTop >= anchor.parentElement.offsetTop + 10 &&
+        (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
+
+        if (isActive && decodeURIComponent(this.$route.hash) !== decodeURIComponent(anchor.hash)) {
+          store.disableScrollBehavior = true
+          this.$router.replace(decodeURIComponent(anchor.hash), () => {
+            // execute after scrollBehavior handler.
+            this.$nextTick(() => {
+              store.disableScrollBehavior = false
+            })
+          })
+          return
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.onScroll)
+  }
+}
diff --git a/lib/app/root-mixins/index.js b/lib/app/root-mixins/index.js
@@ -1,2 +1,8 @@
 import updateMeta from './updateMeta'
-export default [updateMeta]
+import activeHeaderLinks from '@activeHeaderLinks'
+
+console.log(activeHeaderLinks)
+export default [
+  updateMeta, // required
+  activeHeaderLinks // optional
+]
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
@@ -28,9 +28,7 @@ import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 import { pathToComponentName } from '@app/util'
-import store from '@app/store'
 import { resolveSidebarItems } from './util'
-import throttle from 'lodash.throttle'
 
 export default {
   components: { Home, Page, Sidebar, Navbar },
@@ -88,8 +86,6 @@ export default {
   },
 
   mounted () {
-    window.addEventListener('scroll', this.onScroll)
-
     // configure progress bar
     nprogress.configure({ showSpinner: false })
 
@@ -106,10 +102,6 @@ export default {
     })
   },
 
-  beforeDestroy () {
-    window.removeEventListener('scroll', this.onScroll)
-  },
-
   methods: {
     toggleSidebar (to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
@@ -131,40 +123,6 @@ export default {
           this.toggleSidebar(false)
         }
       }
-    },
-    onScroll: throttle(function () {
-      this.setActiveHash()
-    }, 300),
-    setActiveHash () {
-      if (this.$site.themeConfig.disableActiveHash) {
-        return
-      }
-
-      const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
-      const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
-        .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
-
-      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
-
-      for (let i = 0; i < anchors.length; i++) {
-        const anchor = anchors[i]
-        const nextAnchor = anchors[i + 1]
-
-        const isActive = i === 0 && scrollTop === 0 ||
-          (scrollTop >= anchor.parentElement.offsetTop + 10 &&
-            (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
-
-        if (isActive && decodeURIComponent(this.$route.hash) !== decodeURIComponent(anchor.hash)) {
-          store.disableScrollBehavior = true
-          this.$router.replace(decodeURIComponent(anchor.hash), () => {
-            // execute after scrollBehavior handler.
-            this.$nextTick(() => {
-              store.disableScrollBehavior = false
-            })
-          })
-          return
-        }
-      }
     }
   }
 }

diff --git a/lib/prepare.js b/lib/prepare.js
@@ -43,7 +43,7 @@ module.exports = async function prepare (sourceDir) {
   await writeTemp('routes.js', [
     componentCode,
     routesCode
-  ].join('\n\n'))
+  ].join('\n'))
 
   // 3. generate siteData
   const dataCode = `export const siteData = ${JSON.stringify(options.siteData, null, 2)}`

diff --git a/lib/webpack/createBaseConfig.js b/lib/webpack/createBaseConfig.js
@@ -2,6 +2,7 @@ const path = require('path')
 
 module.exports = function createBaseConfig ({
   siteConfig,
+  siteData,
   sourceDir,
   outDir,
   publicPath,
@@ -56,6 +57,18 @@ module.exports = function createBaseConfig ({
       .add(path.resolve(__dirname, '../../../'))
       .add('node_modules')
 
+  // Load extra root mixins on demand.
+  const { activeHeaderLinks = true } = siteData.themeConfig
+  const rootMixinsLoadingConfig = { activeHeaderLinks }
+  for (const mixinName in rootMixinsLoadingConfig) {
+    const enabled = rootMixinsLoadingConfig[mixinName]
+    config.resolve
+     .alias.set(`@${mixinName}`, enabled
+       ? path.resolve(__dirname, `../app/root-mixins/${mixinName}.js`)
+       : path.resolve(__dirname, './noopModule.js')
+     )
+  }
+
   config.resolveLoader
     .set('symlinks', true)
     .modules