refactor: update vuepress dependencies

docs/package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@vuepress-plume/vuepress-theme-plume": "workspace:*",
-    "@vuepress/bundler-vite": "2.0.0-beta.43",
+    "@vuepress/bundler-vite": "2.0.0-beta.45",
-    "@vuepress/bundler-webpack": "2.0.0-beta.43",
+    "@vuepress/bundler-webpack": "2.0.0-beta.45",
-    "@vuepress/cli": "2.0.0-beta.43",
+    "@vuepress/cli": "2.0.0-beta.45",
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "anywhere": "^1.5.0",
     "leancloud-storage": "^4.12.2",
     "sass": "^1.49.9",

packages/plugin-baidu-tongji/package.json

@@ -26,10 +26,10 @@
     "ts:watch": "tsc -b tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/shared": "2.0.0-beta.43",
+    "@vuepress/shared": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43"
+    "@vuepress/utils": "2.0.0-beta.45"
   },
   "publishConfig": {
     "access": "public"

packages/plugin-caniuse/package.json

@@ -31,10 +31,10 @@
     "ts:watch": "tsc -b tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@vuepress/cli": "2.0.0-beta.43",
+    "@vuepress/cli": "2.0.0-beta.45",
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "markdown-it-container": "^3.0.0"
   },
   "devDependencies": {

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

@@ -1,19 +0,0 @@
-import { defineClientAppEnhance } from '@vuepress/client'
-import type { CanIUseMode } from '../shared'
-import { resolveCanIUse } from './resolveCanIUse'
-
-declare const __CAN_I_USE_INJECT_MODE__: CanIUseMode
-declare const __VUEPRESS_SSR__: boolean
-
-const mode = __CAN_I_USE_INJECT_MODE__
-
-export default defineClientAppEnhance(({ router }) => {
-  if (__VUEPRESS_SSR__) return
-
-  router.afterEach((to, from) => {
-    if (to.path === from.path) return
-    if (mode === 'embed') {
-      setTimeout(() => resolveCanIUse(), 1500)
-    }
-  })
-})

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

@@ -0,0 +1,21 @@
+import { defineClientConfig } from '@vuepress/client'
+import type { CanIUseMode } from '../shared'
+import { resolveCanIUse } from './resolveCanIUse'
+
+declare const __CAN_I_USE_INJECT_MODE__: CanIUseMode
+declare const __VUEPRESS_SSR__: boolean
+
+const mode = __CAN_I_USE_INJECT_MODE__
+
+export default defineClientConfig({
+  enhance: ({ router }) => {
+    if (__VUEPRESS_SSR__) return
+
+    router.afterEach((to, from) => {
+      if (to.path === from.path) return
+      if (mode === 'embed') {
+        setTimeout(() => resolveCanIUse(), 1500)
+      }
+    })
+  },
+})

packages/plugin-caniuse/src/node/plugin.ts

@@ -16,10 +16,7 @@ export const caniusePlugin = ({
   const validateReg = new RegExp(`^${type}\\s+(.*)$`)
   const pluginObj: PluginObject = {
     name: '@vuepress-plume/vuepress-plugin-caniuse',
-    clientAppEnhanceFiles: path.resolve(
+    clientConfigFile: path.resolve(__dirname, '../client/clientConfig.js'),
-      __dirname,
-      '../client/clientAppEnhance.js'
-    ),
     define: {
       __CAN_I_USE_INJECT_MODE__: mode,
     },

packages/plugin-copy-code/package.json

@@ -26,10 +26,10 @@
     "ts:watch": "tsc -b tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/shared": "2.0.0-beta.43",
+    "@vuepress/shared": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },

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

@@ -1,79 +0,0 @@
-import { defineClientAppSetup, 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 './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 defineClientAppSetup(() => {
-  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-copy-code/src/client/clientConfig.ts

@@ -0,0 +1,81 @@
+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 './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()
+        }
+      }
+    )
+  },
+})

packages/plugin-copy-code/src/node/plugin.ts

@@ -35,6 +35,6 @@ export const copyCodePlugin = (options: CopyCodeOptions): Plugin => {
       __COPY_CODE_LOCALES_OPTIONS__: localesOption,
     }),
 
-    clientAppSetupFiles: path.resolve(__dirname, '../client/clientAppSetup.js'),
+    clientConfigFile: path.resolve(__dirname, '../client/clientConfig.js'),
   }
 }

packages/plugin-netlify-functions/package.json

@@ -36,9 +36,9 @@
   "dependencies": {
     "@iarna/toml": "^2.2.5",
     "@netlify/functions": "^1.0.0",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/shared": "2.0.0-beta.43",
+    "@vuepress/shared": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "chokidar": "^3.5.3",
     "cpx2": "^4.2.0",
     "dotenv": "^16.0.0",

packages/plugin-page-collection/package.json

@@ -29,10 +29,10 @@
   "dependencies": {
     "@netlify/functions": "^1.0.0",
     "@vuepress-plume/vuepress-plugin-netlify-functions": "workspace:*",
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/shared": "2.0.0-beta.43",
+    "@vuepress/shared": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "leancloud-storage": "^4.12.2",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"

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

@@ -1,7 +0,0 @@
-import { defineClientAppEnhance } from '@vuepress/client'
-import Collection from './components/PageCollection'
-
-export default defineClientAppEnhance(({ app }) => {
-  // 注入全局插件
-  app.component('PageCollection', Collection)
-})

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

@@ -0,0 +1,6 @@
+import { defineClientConfig } from '@vuepress/client'
+import PageCollection from './components/PageCollection'
+
+export default defineClientConfig({
+  rootComponents: [PageCollection],
+})

packages/plugin-page-collection/src/node/plugin.ts

@@ -38,10 +38,7 @@ export const pageCollectionPlugin = (
         // 以便获取使用
         __COLLECTION_PROXY_PREFIX__: proxyPrefix,
       }),
-      clientAppEnhanceFiles: path.resolve(
+      clientConfigFile: path.resolve(__dirname, '../client/clientConfig.js'),
-        __dirname,
-        '../client/clientAppEnhance.js'
-      ),
       // 不要忘了，需要在这里 定义好 钩子
       onPrepared: () => preparePluginFunctions(),
       onGenerated: () => generatePluginFunctions(),

packages/theme/package.json

@@ -39,22 +39,22 @@
     "@vuepress-plume/vuepress-plugin-baidu-tongji": "workspace:*",
     "@vuepress-plume/vuepress-plugin-caniuse": "workspace:*",
     "@vuepress-plume/vuepress-plugin-copy-code": "workspace:*",
-    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/client": "2.0.0-beta.45",
-    "@vuepress/core": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.45",
-    "@vuepress/plugin-active-header-links": "2.0.0-beta.43",
+    "@vuepress/plugin-active-header-links": "2.0.0-beta.45",
-    "@vuepress/plugin-container": "2.0.0-beta.43",
+    "@vuepress/plugin-container": "2.0.0-beta.45",
-    "@vuepress/plugin-docsearch": "2.0.0-beta.43",
+    "@vuepress/plugin-docsearch": "2.0.0-beta.45",
-    "@vuepress/plugin-external-link-icon": "2.0.0-beta.43",
+    "@vuepress/plugin-external-link-icon": "2.0.0-beta.45",
-    "@vuepress/plugin-git": "2.0.0-beta.43",
+    "@vuepress/plugin-git": "2.0.0-beta.45",
-    "@vuepress/plugin-medium-zoom": "2.0.0-beta.43",
+    "@vuepress/plugin-medium-zoom": "2.0.0-beta.45",
-    "@vuepress/plugin-nprogress": "2.0.0-beta.43",
+    "@vuepress/plugin-nprogress": "2.0.0-beta.45",
-    "@vuepress/plugin-palette": "2.0.0-beta.43",
+    "@vuepress/plugin-palette": "2.0.0-beta.45",
-    "@vuepress/plugin-prismjs": "2.0.0-beta.43",
+    "@vuepress/plugin-prismjs": "2.0.0-beta.45",
-    "@vuepress/plugin-search": "2.0.0-beta.43",
+    "@vuepress/plugin-search": "2.0.0-beta.45",
-    "@vuepress/plugin-theme-data": "2.0.0-beta.43",
+    "@vuepress/plugin-theme-data": "2.0.0-beta.45",
-    "@vuepress/plugin-toc": "2.0.0-beta.43",
+    "@vuepress/plugin-toc": "2.0.0-beta.45",
-    "@vuepress/shared": "2.0.0-beta.43",
+    "@vuepress/shared": "2.0.0-beta.45",
-    "@vuepress/utils": "2.0.0-beta.43",
+    "@vuepress/utils": "2.0.0-beta.45",
     "@vueuse/core": "^8.2.3",
     "chokidar": "^3.5.3",
     "date-fns": "^2.28.0",
@@ -67,10 +67,10 @@
     "ts-debounce": "^4.0.0",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14",
-    "vuepress-plugin-comment2": "2.0.0-beta.49",
+    "vuepress-plugin-comment2": "2.0.0-beta.61",
-    "vuepress-plugin-md-enhance": "2.0.0-beta.49",
+    "vuepress-plugin-md-enhance": "2.0.0-beta.61",
-    "vuepress-plugin-seo2": "2.0.0-beta.49",
+    "vuepress-plugin-seo2": "2.0.0-beta.61",
-    "vuepress-plugin-sitemap2": "2.0.0-beta.49"
+    "vuepress-plugin-sitemap2": "2.0.0-beta.61"
   },
   "peerDependencies": {
     "sass-loader": "^12.6.0"

packages/theme/src/client/clientAppEnhance.ts

@@ -1,33 +0,0 @@
-import { defineClientAppEnhance } from '@vuepress/client'
-import { h } from 'vue'
-import Badge from './components/global/Badge.vue'
-import { useScrollPromise } from './composables'
-
-import './styles/index.scss'
-
-export default defineClientAppEnhance(({ app, router }) => {
-  app.component('Badge', Badge)
-
-  app.component('NavbarSearch', () => {
-    const SearchComponent =
-      app.component('Docsearch') || app.component('SearchBox')
-    if (SearchComponent) {
-      return h(SearchComponent)
-    }
-    return null
-  })
-
-  app.component('Comment', (props) => {
-    const CommentService = app.component('CommentService')
-    if (CommentService) {
-      return h(CommentService, props)
-    }
-    return null
-  })
-
-  const scrollBehavior = router.options.scrollBehavior!
-  router.options.scrollBehavior = async (...args) => {
-    await useScrollPromise().wait()
-    return scrollBehavior(...args)
-  }
-})

packages/theme/src/client/clientAppSetup.ts

@@ -1,6 +0,0 @@
-import { defineClientAppSetup } from '@vuepress/client'
-import { setupDarkMode } from './composables'
-
-export default defineClientAppSetup(() => {
-  setupDarkMode()
-})

packages/theme/src/client/config.ts

@@ -0,0 +1,40 @@
+import { defineClientConfig } from '@vuepress/client'
+import { h } from 'vue'
+import Badge from './components/global/Badge.vue'
+import { setupDarkMode, useScrollPromise } from './composables'
+
+import './styles/index.scss'
+
+export default defineClientConfig({
+  enhance({ app, router }) {
+    // eslint-disable-next-line vue/match-component-file-name
+    app.component('Badge', Badge)
+
+    // eslint-disable-next-line vue/match-component-file-name
+    app.component('NavbarSearch', () => {
+      const SearchComponent =
+        app.component('Docsearch') || app.component('SearchBox')
+      if (SearchComponent) {
+        return h(SearchComponent)
+      }
+      return null
+    })
+    // eslint-disable-next-line vue/match-component-file-name
+    app.component('Comment', (props) => {
+      const CommentService = app.component('CommentService')
+      if (CommentService) {
+        return h(CommentService, props)
+      }
+      return null
+    })
+
+    const scrollBehavior = router.options.scrollBehavior!
+    router.options.scrollBehavior = async (...args) => {
+      await useScrollPromise().wait()
+      return scrollBehavior(...args)
+    }
+  },
+  setup() {
+    setupDarkMode()
+  },
+})

packages/theme/src/node/theme.ts

@@ -21,8 +21,7 @@ export const themePlume = ({
     layouts: resolveClient('layouts'),
     templateBuild: resolveTemplate('index.build.html'),
     alias: getAlias(),
-    clientAppEnhanceFiles: resolveClient('clientAppEnhance.js'),
+    clientConfigFile: resolveClient('config.js'),
-    clientAppSetupFiles: resolveClient('clientAppSetup.js'),
     onInitialized: async (app) => {
       const { formatFrontmatter, watchNewMarkDown } = generateFrontmatter(
         app.options.source,

scripts/autoInstall.ts

@@ -5,7 +5,9 @@ import ora from 'ora'
 import chalk from 'chalk'
 
 const packages: string[] = [
-  ...fs.readdirSync(path.join(__dirname, '../packages')).map(dir => path.join('../packages', dir)),
+  ...fs.readdirSync(path.join(__dirname, '../packages'))
+    .filter((file) => file !== '.DS_Store')
+    .map(dir => path.join('../packages', dir)),
   '../docs'
 ]