refactor: 升级 vue-router, vue, vuepress 版本, 跟进 vuepress.beta.45的变更

package.json

@@ -83,6 +83,7 @@
     "peerDependencyRules": {
       "ignoreMissing": [
         "@algolia/client-search",
+        "@types/react",
         "eslint-plugin-import",
         "eslint-plugin-n",
         "eslint-plugin-promise",

packages/plugin-caniuse/src/client/clientConfig.ts

@@ -8,7 +8,7 @@ declare const __VUEPRESS_SSR__: boolean
 const mode = __CAN_I_USE_INJECT_MODE__
 
 export default defineClientConfig({
-  enhance: ({ router }) => {
+  enhance({ router }) {
     if (__VUEPRESS_SSR__) return
 
     router.afterEach((to, from) => {

packages/plugin-copy-code/package.json

@@ -31,7 +31,7 @@
     "@vuepress/shared": "2.0.0-beta.45",
     "@vuepress/utils": "2.0.0-beta.45",
     "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.15"
   },
   "publishConfig": {
     "access": "public"

packages/plugin-copy-code/src/client/clientConfig.ts

@@ -1,81 +1,10 @@
-import { defineClientConfig, useRouteLocale } from '@vuepress/client'
-import { computed, onMounted, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import type { CopyCodeLocaleOption, CopyCodeOptions } from '../shared'
-import { copyToClipboard } from './copyToClipboard'
-import { successSVG } from './svg'
+import { defineClientConfig } from '@vuepress/client'
+import { setupCopyCode } from './composables'
 
 import './styles/button.scss'
 
-declare const __COPY_CODE_OPTIONS__: CopyCodeOptions
-declare const __COPY_CODE_LOCALES_OPTIONS__: CopyCodeLocaleOption
-
-const options = __COPY_CODE_OPTIONS__
-const localesOptions = __COPY_CODE_LOCALES_OPTIONS__
-
-const isMobile = (): boolean =>
-  navigator
-    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/iu.test(
-        navigator.userAgent
-      )
-    : false
-
 export default defineClientConfig({
-  setup: () => {
-    const route = useRoute()
-    const lang = useRouteLocale()
-
-    const locale = computed(() => {
-      return localesOptions[lang.value] || localesOptions['/zh/']
-    })
-
-    const insertBtn = (codeBlockEl: HTMLElement): void => {
-      if (codeBlockEl.hasAttribute('has-copy-code')) return
-      const button = document.createElement('button')
-      button.className = 'copy-code-button'
-      button.innerText = locale.value.hint as string
-
-      button.addEventListener('click', () => {
-        copyToClipboard(codeBlockEl.innerText)
-        button.innerHTML = successSVG + (locale.value.copy as string)
-        options.duration &&
-          setTimeout(() => {
-            button.innerText = locale.value.hint as string
-          }, options.duration)
-      })
-
-      if (codeBlockEl.parentElement) {
-        codeBlockEl.parentElement.insertBefore(button, codeBlockEl)
-      }
-      codeBlockEl.setAttribute('has-copy-code', '')
-    }
-
-    const generateButton = (): void => {
-      const { selector, delay } = options
-      setTimeout(() => {
-        if (typeof selector === 'string') {
-          document.querySelectorAll<HTMLElement>(selector).forEach(insertBtn)
-        } else if (Array.isArray(selector)) {
-          selector.forEach((item) => {
-            document.querySelectorAll<HTMLElement>(item).forEach(insertBtn)
-          })
-        }
-      }, delay)
-    }
-
-    onMounted(() => {
-      if (!isMobile() || options.showInMobile) {
-        generateButton()
-      }
-    })
-
-    watch(
-      () => route.path,
-      () => {
-        if (!isMobile() || options.showInMobile) {
-          generateButton()
-        }
-      }
-    )
+  setup() {
+    setupCopyCode()
   },
 })

packages/plugin-copy-code/src/client/composables/index.ts

@@ -0,0 +1 @@
+export * from './setup'

packages/plugin-copy-code/src/client/composables/setup.ts

@@ -0,0 +1,75 @@
+import { useRouteLocale } from '@vuepress/client'
+import { computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { CopyCodeLocaleOption, CopyCodeOptions } from '../../shared'
+import { successSVG } from '../svg'
+import { copyToClipboard } from './copyToClipboard'
+declare const __COPY_CODE_OPTIONS__: CopyCodeOptions
+declare const __COPY_CODE_LOCALES_OPTIONS__: CopyCodeLocaleOption
+
+const options = __COPY_CODE_OPTIONS__
+const localesOptions = __COPY_CODE_LOCALES_OPTIONS__
+
+const isMobile = (): boolean =>
+  navigator
+    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/iu.test(
+        navigator.userAgent
+      )
+    : false
+
+export const setupCopyCode = (): void => {
+  const route = useRoute()
+  const lang = useRouteLocale()
+
+  const locale = computed(() => {
+    return localesOptions[lang.value] || localesOptions['/zh/']
+  })
+
+  const insertBtn = (codeBlockEl: HTMLElement): void => {
+    if (codeBlockEl.hasAttribute('has-copy-code')) return
+    const button = document.createElement('button')
+    button.className = 'copy-code-button'
+    button.innerText = locale.value.hint as string
+
+    button.addEventListener('click', () => {
+      copyToClipboard(codeBlockEl.innerText)
+      button.innerHTML = successSVG + (locale.value.copy as string)
+      options.duration &&
+        setTimeout(() => {
+          button.innerText = locale.value.hint as string
+        }, options.duration)
+    })
+
+    if (codeBlockEl.parentElement) {
+      codeBlockEl.parentElement.insertBefore(button, codeBlockEl)
+    }
+    codeBlockEl.setAttribute('has-copy-code', '')
+  }
+
+  const generateButton = (): void => {
+    const { selector, delay } = options
+    setTimeout(() => {
+      if (typeof selector === 'string') {
+        document.querySelectorAll<HTMLElement>(selector).forEach(insertBtn)
+      } else if (Array.isArray(selector)) {
+        selector.forEach((item) => {
+          document.querySelectorAll<HTMLElement>(item).forEach(insertBtn)
+        })
+      }
+    }, delay)
+  }
+
+  onMounted(() => {
+    if (!isMobile() || options.showInMobile) {
+      generateButton()
+    }
+  })
+  watch(
+    () => route.path,
+    () => {
+      if (!isMobile() || options.showInMobile) {
+        generateButton()
+      }
+    }
+  )
+}

packages/plugin-netlify-functions/package.json

@@ -41,10 +41,10 @@
     "@vuepress/utils": "2.0.0-beta.45",
     "chokidar": "^3.5.3",
     "cpx2": "^4.2.0",
-    "dotenv": "^16.0.0",
-    "esbuild": "^0.14.38",
+    "dotenv": "^16.0.1",
+    "esbuild": "^0.14.39",
     "execa": "5.1.1",
-    "netlify-cli": "^10.3.0",
+    "netlify-cli": "^10.3.1",
     "portfinder": "^1.0.28"
   },
   "publishConfig": {

packages/plugin-page-collection/package.json

@@ -35,7 +35,7 @@
     "@vuepress/utils": "2.0.0-beta.45",
     "leancloud-storage": "^4.12.2",
     "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.15"
   },
   "publishConfig": {
     "access": "public"

packages/plugin-page-collection/src/client/clientConfig.ts

@@ -1,6 +1,9 @@
 import { defineClientConfig } from '@vuepress/client'
-import PageCollection from './components/PageCollection'
+import Collection from './components/PageCollection'
 
 export default defineClientConfig({
-  rootComponents: [PageCollection],
+  enhance({ app }) {
+    // eslint-disable-next-line vue/match-component-file-name
+    app.component('PageCollection', Collection)
+  },
 })

packages/theme/package.json

@@ -66,11 +66,11 @@
     "sass-loader": "^12.6.0",
     "ts-debounce": "^4.0.0",
     "vue": "^3.2.33",
-    "vue-router": "^4.0.14",
-    "vuepress-plugin-comment2": "2.0.0-beta.61",
-    "vuepress-plugin-md-enhance": "2.0.0-beta.61",
-    "vuepress-plugin-seo2": "2.0.0-beta.61",
-    "vuepress-plugin-sitemap2": "2.0.0-beta.61"
+    "vue-router": "^4.0.15",
+    "vuepress-plugin-comment2": "2.0.0-beta.62",
+    "vuepress-plugin-md-enhance": "2.0.0-beta.62",
+    "vuepress-plugin-seo2": "2.0.0-beta.62",
+    "vuepress-plugin-sitemap2": "2.0.0-beta.62"
   },
   "peerDependencies": {
     "sass-loader": "^12.6.0"

packages/theme/src/client/components/AsideNavbar.vue

@@ -34,7 +34,7 @@ const { asideNavbarShow, triggerAsideNavbar } = useAsideNavbar()
     right: 0;
     width: 70%;
     height: 100%;
-    padding: 1.25rem 0 1.25rem 1.25rem;
+    padding: 1.25rem 0 1.25rem 2.25rem;
   }
 }
 @media (min-width: $MQMobile) {

packages/theme/src/client/components/Sidebar.vue

@@ -16,7 +16,6 @@ defineProps({
 const route = useRoute()
 const { sidebarList, initSidebarList } = useSidebarIndex()
 const { triggerAsideNavbar } = useAsideNavbar()
-initSidebarList(route.path)
 watchEffect(() => {
   initSidebarList(route.path)
   triggerAsideNavbar(false)
@@ -24,7 +23,7 @@ watchEffect(() => {
 
 const el = ref<HTMLElement | null>(null)
 onMounted(() => {
-  if (__VUEPRESS_SSR__) return
+  initSidebarList(route.path)
   const activeEl = el.value?.querySelector<HTMLElement>('.router-link-active')
   activeEl && activeEl.scrollIntoView(false)
 })

packages/theme/src/client/layouts/Layout.vue

@@ -10,10 +10,8 @@ import PageFooter from '@theme-plume/PageFooter.vue'
 import Tag from '@theme-plume/Tag.vue'
 import { usePageFrontmatter } from '@vuepress/client'
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 import { useThemeLocaleData } from '../composables'
 
-const route = useRoute()
 const frontmatter = usePageFrontmatter()
 const themeLocale = useThemeLocaleData()