chore: update vuepress dependencies

更新 vuepress 相关依赖至 2.0.0.beta.41,暂时下线hope相关插件

BREAKING CHANGE: 跟随vuepress@2.0.0.beta.41的重大变更

docs/.vuepress/config.ts

@@ -1,14 +1,14 @@
 import * as path from 'path'
-import type { PlumeThemeOptions } from '@vuepress-plume/vuepress-theme-plume'
+import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
 import { defineUserConfig } from '@vuepress/cli'
 
-export default defineUserConfig<PlumeThemeOptions>({
+export default defineUserConfig({
+  base: '/',
   lang: 'zh',
   title: 'Plume Theme',
   description: '',
   public: path.resolve(__dirname, 'public'),
-  theme: '@vuepress-plume/vuepress-theme-plume',
+  theme: themePlume({
-  themeConfig: {
     logo: 'https://pengzhanbo.cn/g.gif',
     hostname: 'https://pengzhanbo.cn',
     avatar: {
@@ -101,5 +101,5 @@ export default defineUserConfig<PlumeThemeOptions>({
         },
       },
     },
-  },
+  }),
 })

package.json

@@ -19,7 +19,7 @@
     "docs:webpack-build": "vuepress-webpack build docs",
     "docs:webpack-serve": "vuepress-webpack dev docs",
     "lerna": "lerna clean && lerna bootstrap",
-    "lerna:publish": "node scripts/release/index.mjs --input-type module",
+    "lerna:publish": "node  scripts/release/index.mjs",
     "lint": "eslint --ext .js,.ts,.vue .",
     "package:clean": "lerna run clean",
     "package:update": "node scripts/dependencies.js",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@vuepress/cli": "^2.0.0-beta.38",
+    "@vuepress/cli": "^2.0.0-beta.41",
     "commitizen": "^4.2.4",
     "concurrently": "^7.0.0",
     "cpx2": "^4.2.0",
@@ -67,8 +67,8 @@
     "prettier-config-vuepress": "^1.4.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.6.3",
-    "vuepress-vite": "^2.0.0-beta.39",
+    "vuepress-vite": "^2.0.0-beta.41",
-    "vuepress-webpack": "^2.0.0-beta.38",
+    "vuepress-webpack": "^2.0.0-beta.41",
     "webpack-env": "^0.8.0"
   }
 }

packages/plugin-caniuse/package.json

@@ -2,36 +2,34 @@
   "name": "@vuepress-plume/vuepress-plugin-caniuse",
   "version": "1.0.0-beta.8",
   "description": "The Plugin for VuePres 2, Support Can-I-Use feature",
-  "author": "pengzhanbo <volodymyr@foxmail.com>",
   "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
-  "license": "MIT",
+  "bugs": {
-  "main": "lib/node/index.js",
+    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
-  "files": [
+  },
-    "lib"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git"
   },
-  "bugs": {
+  "license": "MIT",
-    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
+  "author": "pengzhanbo <volodymyr@foxmail.com>",
-  },
+  "main": "lib/node/index.js",
+  "files": [
+    "lib"
+  ],
   "scripts": {
-    "ts": "tsc -b tsconfig.build.json",
+    "build": "yarn clean && yarn ts",
-    "ts:watch": "tsc -b tsconfig.build.json --watch",
     "clean": "rimraf lib *.tsbuildinfo",
     "dev": "yarn ts:watch",
-    "build": "yarn clean && yarn ts"
+    "ts": "tsc -b tsconfig.build.json",
+    "ts:watch": "tsc -b tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@vuepress/client": "^2.0.0-beta.38",
+    "@vuepress/cli": "^2.0.0-beta.41",
-    "@vuepress/core": "^2.0.0-beta.38",
+    "@vuepress/client": "^2.0.0-beta.41",
-    "@vuepress/utils": "^2.0.0-beta.38",
+    "@vuepress/core": "^2.0.0-beta.41",
+    "@vuepress/utils": "^2.0.0-beta.41",
     "markdown-it-container": "^3.0.0"
   },
-  "peerDependencies": {
-    "vuepress": "^2.0.0-beta.38"
-  },
   "publishConfig": {
     "access": "public"
   },

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

@@ -1,6 +1,6 @@
-import { plugin } from './plugin'
+import { caniusePlugin } from './plugin'
 
 export * from './plugin'
 export * from '../shared'
 
-export default plugin
+export default caniusePlugin

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

@@ -1,4 +1,4 @@
-import type { Plugin, PluginObject } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
 import { path } from '@vuepress/utils'
 import * as container from 'markdown-it-container'
 import type * as Token from 'markdown-it/lib/token'
@@ -8,7 +8,9 @@ import { resolveCanIUse } from './resolveCanIUse'
 const modeMap: CanIUseMode[] = ['image', 'embed']
 const isMode = (mode: CanIUseMode): boolean => modeMap.includes(mode)
 
-export const plugin: Plugin = ({ mode = modeMap[0] }: CanIUsePluginOptions) => {
+export const caniusePlugin = ({
+  mode = modeMap[0],
+}: CanIUsePluginOptions): PluginObject => {
   mode = isMode(mode) ? mode : modeMap[0]
   const type = 'caniuse'
   const validateReg = new RegExp(`^${type}\\s+(.*)$`)

packages/theme/package.json

@@ -29,21 +29,21 @@
   "dependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@vuepress-plume/vuepress-plugin-caniuse": "1.0.0-beta.8",
-    "@vuepress/client": "^2.0.0-beta.38",
+    "@vuepress/client": "^2.0.0-beta.41",
-    "@vuepress/core": "^2.0.0-beta.38",
+    "@vuepress/core": "^2.0.0-beta.41",
-    "@vuepress/plugin-active-header-links": "^2.0.0-beta.38",
+    "@vuepress/plugin-active-header-links": "^2.0.0-beta.41",
-    "@vuepress/plugin-container": "^2.0.0-beta.38",
+    "@vuepress/plugin-container": "^2.0.0-beta.41",
-    "@vuepress/plugin-docsearch": "^2.0.0-beta.38",
+    "@vuepress/plugin-docsearch": "^2.0.0-beta.41",
-    "@vuepress/plugin-external-link-icon": "^2.0.0-beta.38",
+    "@vuepress/plugin-external-link-icon": "^2.0.0-beta.41",
-    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.38",
+    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.41",
-    "@vuepress/plugin-nprogress": "^2.0.0-beta.38",
+    "@vuepress/plugin-nprogress": "^2.0.0-beta.41",
-    "@vuepress/plugin-palette": "^2.0.0-beta.38",
+    "@vuepress/plugin-palette": "^2.0.0-beta.41",
-    "@vuepress/plugin-prismjs": "^2.0.0-beta.38",
+    "@vuepress/plugin-prismjs": "^2.0.0-beta.41",
-    "@vuepress/plugin-search": "^2.0.0-beta.38",
+    "@vuepress/plugin-search": "^2.0.0-beta.41",
-    "@vuepress/plugin-theme-data": "^2.0.0-beta.38",
+    "@vuepress/plugin-theme-data": "^2.0.0-beta.41",
-    "@vuepress/plugin-toc": "^2.0.0-beta.38",
+    "@vuepress/plugin-toc": "^2.0.0-beta.41",
-    "@vuepress/shared": "^2.0.0-beta.38",
+    "@vuepress/shared": "^2.0.0-beta.41",
-    "@vuepress/utils": "^2.0.0-beta.38",
+    "@vuepress/utils": "^2.0.0-beta.41",
     "@vueuse/core": "^8.2.3",
     "chokidar": "^3.5.3",
     "date-fns": "^2.28.0",
@@ -62,6 +62,14 @@
     "vuepress-plugin-seo2": "^2.0.0-beta.47",
     "vuepress-plugin-sitemap2": "^2.0.0-beta.47"
   },
+  "peerDependencies": {
+    "sass-loader": "^12.6.0"
+  },
+  "peerDependenciesMeta": {
+    "sass-loader": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

packages/theme/src/client/clientAppEnhance.ts

@@ -1,5 +1,4 @@
 import { defineClientAppEnhance } from '@vuepress/client'
-import type { Component } from 'vue'
 import { h } from 'vue'
 import { useScrollPromise } from './composables'
 
@@ -7,14 +6,22 @@ import './styles/index.scss'
 
 export default defineClientAppEnhance(({ app, router }) => {
   app.component('NavbarSearch', () => {
-    const SearchComponent = (app.component('Docsearch') ||
+    const SearchComponent =
-      app.component('SearchBox')) as Component
+      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()

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

@@ -22,6 +22,7 @@ const bannerStyle = computed(() => {
 })
 
 function handleResize(): void {
+  if (__VUEPRESS_SSR__) return
   const width = document.documentElement.offsetWidth
   if (!hasBanner.value) return
   if (width < MOBILE_WIDTH) {

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

@@ -19,26 +19,6 @@ const isNote = computed(() => {
 const enabledSidebar = computed(() => {
   return isNote.value
 })
-
-let layout: HTMLElement | null
-watchEffect(async () => {
-  await nextTick()
-  if (!enabledSidebar.value) return
-  layout = document.querySelector('.plume-theme')
-  const footer: HTMLElement | null = document.querySelector(
-    '.theme-plume-footer'
-  )
-  if (themeLocale.value.footer) {
-    const h = getCssValue(footer, 'height')
-    layout?.setAttribute('style', `padding-bottom: ${h}px`)
-  } else {
-    layout?.setAttribute('style', `padding-bottom: 0`)
-  }
-})
-
-onUnmounted(() => {
-  layout?.removeAttribute('style')
-})
 </script>
 <template>
   <DropdownTransition>
@@ -52,7 +32,7 @@ onUnmounted(() => {
             <PostMeta :post="page" type="post" :border="true" />
             <Content />
             <div class="comment-container">
-              <CommentService :darkmode="isDarkMode" />
+              <Comment :darkmode="isDarkMode" />
             </div>
           </div>
           <div v-if="page.headers?.length > 0" class="plume-theme-page-toc">

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

@@ -33,6 +33,7 @@ watch(
 const route = useRoute()
 
 onBeforeRouteUpdate((to) => {
+  if (__VUEPRESS_SSR__) return
   setPostListPage((to.query.p as unknown as number) || 1)
   const { home, banner, mobileBanner } = frontmatter.value
   let top = 0

packages/theme/src/node/define.ts

@@ -1,16 +1,4 @@
-import type { UserConfig } from '@vuepress/cli'
+import type { PlumeThemeNotesItem, PlumeThemeNotesOptions } from '../shared'
-import type { BundlerConfig } from '@vuepress/core'
-import type {
-  PlumeThemeNotesItem,
-  PlumeThemeNotesOptions,
-  PlumeThemeOptions,
-} from '../shared'
-
-type DefinePlumeConfig = UserConfig<PlumeThemeOptions, BundlerConfig>
-
-export const definePlumeConfig = (
-  config: DefinePlumeConfig
-): DefinePlumeConfig => config
 
 export const definePlumeNotesConfig = (
   notes: PlumeThemeNotesOptions

packages/theme/src/node/extendsPage.ts

@@ -15,7 +15,7 @@ function normalizePath(filepath: string): string {
 let uuid = 10000
 const cache: Record<string, number> = {}
 export const extendsPage = (
-  page: Page<PlumeThemePageData>,
+  page: Page<Partial<PlumeThemePageData>>,
   localeOption: PlumeThemeLocaleOptions
 ): void => {
   const pagePath = page.filePathRelative || ''

packages/theme/src/node/generateFrontmatter.ts

@@ -1,4 +1,3 @@
-import * as os from 'os'
 import type { App } from '@vuepress/core'
 import { fs, path } from '@vuepress/utils'
 import * as chokidar from 'chokidar'
@@ -112,7 +111,7 @@ export const generateFrontmatter = (
       .stringify(data)
       .replace(/\n\s{2}/g, '\n')
       .replace(/"/g, '')
-    return `${yaml}---${os.EOL}${content}`
+    return `${yaml}---\n${content}`
   }
 
   const formatFrontmatter = (): void => {

packages/theme/src/node/plugins/activeHeaderLink.ts

@@ -1,14 +1,11 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import type { ActiveHeaderLinksPluginOptions } from '@vuepress/plugin-active-header-links'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
 
-export const resolveActiveHeaderLink = (): PluginConfig => {
+export const resolveActiveHeaderLink = (): PluginObject => {
-  return [
+  return activeHeaderLinksPlugin({
-    '@vuepress/active-header-links',
+    headerLinkSelector: 'a.theme-plume-toc-link',
-    {
+    headerAnchorSelector: '.header-anchor',
-      headerLinkSelector: 'a.theme-plume-toc-link',
+    delay: 200,
-      headerAnchorSelector: '.header-anchor',
+    offset: 20,
-      delay: 200,
+  })
-      offset: 20,
-    } as ActiveHeaderLinksPluginOptions,
-  ]
 }

packages/theme/src/node/plugins/caniuse.ts

@@ -1,14 +1,14 @@
-import type { PluginConfig } from '@vuepress/core'
+import { caniusePlugin } from '@vuepress-plume/vuepress-plugin-caniuse'
+import type { PluginObject } from '@vuepress/core'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveCanIUse = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.caniuse === false) return ['', false]
+  if (plugins.caniuse === false) return false
-  return [
+  return caniusePlugin(
-    '@vuepress-plume/caniuse',
     plugins.caniuse || {
       mode: 'embed',
-    },
+    }
-  ]
+  )
 }

packages/theme/src/node/plugins/comment.ts

@@ -1,11 +1,12 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import type { CommentOptions } from 'vuepress-plugin-comment2'
+// import type { CommentOptions } from 'vuepress-plugin-comment2'
-import { comment } from 'vuepress-plugin-comment2'
+// import { commentPlugin } from 'vuepress-plugin-comment2'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveComment = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.comment === false) return ['', false]
+  if (plugins.comment === false) return false
-  return comment(plugins.comment as CommentOptions)
+  // return commentPlugin(plugins.comment as CommentOptions)
+  return false
 }

packages/theme/src/node/plugins/copyCode.ts

@@ -1,21 +1,22 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import { copyCode } from 'vuepress-plugin-copy-code2'
+// import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveCopyCode = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.copyCode === false) return ['', false]
+  if (plugins.copyCode === false) return false
 
-  return copyCode(
+  // return copyCodePlugin(
-    plugins.copyCode || {
+  //   plugins.copyCode || {
-      selector: '.page-content div[class*="language-"] pre',
+  //     selector: '.page-content div[class*="language-"] pre',
-      locales: {
+  //     locales: {
-        '/': {
+  //       '/': {
-          copy: '复制成功',
+  //         copy: '复制成功',
-          hint: '复制代码',
+  //         hint: '复制代码',
-        },
+  //       },
-      },
+  //     },
-    }
+  //   }
-  )
+  // )
+  return false
 }

packages/theme/src/node/plugins/externalLinkIcon.ts

@@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import type { ExternalLinkIconPluginOptions } from '@vuepress/plugin-external-link-icon'
+import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'
 import type {
   PlumeThemeLocaleOptions,
   PlumeThemePluginOptions,
@@ -8,21 +8,18 @@ import type {
 export const resolveExternalLinkIconPlugin = (
   plugins: PlumeThemePluginOptions,
   localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.externalLinkIcon === false) return ['', false]
+  if (plugins.externalLinkIcon === false) return false
-  return [
+  return externalLinkIconPlugin({
-    '@vuepress/plugin-external-link-icon',
+    locales: Object.entries(localeOptions.locales || {}).reduce(
-    {
+      (result, [key, value]) => {
-      locales: Object.entries(localeOptions.locales || {}).reduce(
+        result[key] = {
-        (result, [key, value]) => {
+          openInNewWindow:
-          result[key] = {
+            value.openInNewWindow ?? localeOptions.openInNewWindow,
-            openInNewWindow:
+        }
-              value.openInNewWindow ?? localeOptions.openInNewWindow,
+        return result
-          }
+      },
-          return result
+      {}
-        },
+    ),
-        {}
+  })
-      ),
-    } as ExternalLinkIconPluginOptions,
-  ]
 }

packages/theme/src/node/plugins/index.ts

@@ -1,42 +1,42 @@
-import type { App, PluginConfig, PluginOptions } from '@vuepress/core'
+import type { PluginConfig, PluginObject } from '@vuepress/core'
 import type {
   PlumeThemeLocaleOptions,
   PlumeThemePluginOptions,
 } from '../../shared'
 import { resolveActiveHeaderLink } from './activeHeaderLink'
 import { resolveCanIUse } from './caniuse'
-import { resolveComment } from './comment'
+// import { resolveComment } from './comment'
-import { resolveCopyCode } from './copyCode'
+// import { resolveCopyCode } from './copyCode'
 import { resolveExternalLinkIconPlugin } from './externalLinkIcon'
-import { resolveMarkdownEnhance } from './markdownEnhance'
+// import { resolveMarkdownEnhance } from './markdownEnhance'
 import { resolveMediumZoom } from './mediumZoom'
 import { resolveNprogress } from './nprogress'
 import { resolvePalette } from './palette'
 import { resolvePrismjs } from './prismjs'
-import { resolveSearch } from './search'
+// import { resolveSearch } from './search'
-import { resolveSeo } from './seo'
+// import { resolveSeo } from './seo'
-import { resolveSitemap } from './sitemap'
+// import { resolveSitemap } from './sitemap'
 import { resolveThemeData } from './themeData'
 
 export const getPlugins = (
-  app: App,
   plugins: PlumeThemePluginOptions,
   localeOptions: PlumeThemeLocaleOptions
-): PluginConfig<PluginOptions>[] => {
+): PluginConfig => {
-  return [
+  const resolvePlugins: (PluginObject | false)[] = [
     resolveActiveHeaderLink(),
     resolvePalette(),
     resolveNprogress(plugins),
     resolveMediumZoom(plugins),
     resolveCanIUse(plugins),
     resolveExternalLinkIconPlugin(plugins, localeOptions),
-    resolveSearch(plugins),
+    // resolveSearch(plugins),
     resolvePrismjs(plugins),
-    resolveCopyCode(plugins),
+    // resolveCopyCode(plugins),
-    resolveMarkdownEnhance(plugins),
+    // resolveMarkdownEnhance(plugins),
-    resolveComment(plugins),
+    // resolveComment(plugins),
-    resolveSitemap(plugins, localeOptions),
+    // resolveSitemap(plugins, localeOptions),
-    resolveSeo(plugins, localeOptions),
+    // resolveSeo(plugins, localeOptions),
     resolveThemeData(localeOptions),
-  ].filter((item) => item[1] !== false)
+  ]
+  return resolvePlugins.filter((plugin) => plugin) as PluginObject[]
 }

packages/theme/src/node/plugins/markdownEnhance.ts

@@ -1,22 +1,23 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import { mdEnhance } from 'vuepress-plugin-md-enhance'
+// import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveMarkdownEnhance = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.markdownEnhance === false) return ['', false]
+  if (plugins.markdownEnhance === false) return false
-  return mdEnhance(
+  // return mdEnhancePlugin(
-    Object.assign(
+  //   Object.assign(
-      {
+  //     {
-        container: true, // info note tip warning danger details
+  //       container: true, // info note tip warning danger details
-        codegroup: true,
+  //       codegroup: true,
-        align: true,
+  //       align: true,
-        mark: true,
+  //       mark: true,
-        tasklist: true,
+  //       tasklist: true,
-        demo: true,
+  //       demo: true,
-      },
+  //     },
-      plugins.markdownEnhance || {}
+  //     plugins.markdownEnhance || {}
-    )
+  //   )
-  )
+  // )
+  return false
 }

packages/theme/src/node/plugins/mediumZoom.ts

@@ -1,16 +1,14 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
+import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveMediumZoom = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.mediumZoom === false) return ['', false]
+  if (plugins.mediumZoom === false) return false
-  return [
+  return mediumZoomPlugin({
-    '@vuepress/medium-zoom',
+    selector: '.page-content > img, .page-content :not(a) > img',
-    {
+    zoomOptions: {},
-      selector: '.page-content > img, .page-content :not(a) > img',
+    delay: 300,
-      zoomOption: {},
+  })
-      delay: 300,
-    },
-  ]
 }

packages/theme/src/node/plugins/nprogress.ts

@@ -1,9 +1,10 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
+import { nprogressPlugin } from '@vuepress/plugin-nprogress'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolveNprogress = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.nprogress === false) return ['', false]
+  if (plugins.nprogress === false) return false
-  return ['@vuepress/nprogress', true]
+  return nprogressPlugin()
 }

packages/theme/src/node/plugins/palette.ts

@@ -1,5 +1,6 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
+import { palettePlugin } from '@vuepress/plugin-palette'
 
-export const resolvePalette = (): PluginConfig => {
+export const resolvePalette = (): PluginObject => {
-  return ['@vuepress/plugin-palette', { preset: 'sass' }]
+  return palettePlugin({ preset: 'sass' })
 }

packages/theme/src/node/plugins/prismjs.ts

@@ -1,9 +1,10 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import type { PlumeThemePluginOptions } from '../../shared'
 
 export const resolvePrismjs = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.prismjs === false) return ['', false]
+  if (plugins.prismjs === false) return false
-  return ['@vuepress/prismjs', true]
+  return prismjsPlugin()
 }

packages/theme/src/node/plugins/search.ts

@@ -1,41 +1,16 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import { logger } from '@vuepress/utils'
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import { searchPlugin } from '@vuepress/plugin-search'
 import type { PlumeThemePluginOptions } from '../../shared'
 
-const hasDocsearchInstalled = (): boolean => {
-  try {
-    require.resolve('@vuepress/plugin-docsearch')
-    return true
-  } catch {
-    return false
-  }
-}
-
-const hasSearchInstalled = (): boolean => {
-  try {
-    require.resolve('@vuepress/plugin-search')
-    return true
-  } catch {
-    return false
-  }
-}
-
 export const resolveSearch = (
   plugins: PlumeThemePluginOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.search) {
+  if (plugins.search !== false) {
-    if (!hasSearchInstalled() || plugins.search === false) {
+    return searchPlugin(plugins.search)
-      logger.error('@vuepress/plugin-search is not installed.')
-      return ['', false]
-    }
-    return ['@vuepress/search', plugins.search]
   }
   if (plugins.docsearch) {
-    if (!hasDocsearchInstalled() || plugins.docsearch === false) {
+    return docsearchPlugin(plugins.docsearch)
-      logger.error('@vuepress/plugin-docsearch is not installed.')
-      return ['', false]
-    }
-    return ['@vuepress/docsearch', plugins.docsearch]
   }
-  return ['', false]
+  return false
 }

packages/theme/src/node/plugins/seo.ts

@@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import { seo } from 'vuepress-plugin-seo2'
+// import { seoPlugin } from 'vuepress-plugin-seo2'
 import type {
   PlumeThemeLocaleOptions,
   PlumeThemePluginOptions,
@@ -8,10 +8,11 @@ import type {
 export const resolveSeo = (
   plugins: PlumeThemePluginOptions,
   localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.sitemap === false || !localeOptions.hostname) return ['', false]
+  if (plugins.sitemap === false || !localeOptions.hostname) return false
-  return seo({
+  // return seoPlugin({
-    hostname: localeOptions.hostname,
+  //   hostname: localeOptions.hostname,
-    author: localeOptions.avatar?.name,
+  //   author: localeOptions.avatar?.name,
-  })
+  // })
+  return false
 }

packages/theme/src/node/plugins/sitemap.ts

@@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
-import { sitemap } from 'vuepress-plugin-sitemap2'
+// import { sitemapPlugin } from 'vuepress-plugin-sitemap2'
 import type {
   PlumeThemeLocaleOptions,
   PlumeThemePluginOptions,
@@ -8,9 +8,10 @@ import type {
 export const resolveSitemap = (
   plugins: PlumeThemePluginOptions,
   localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
+): PluginObject | false => {
-  if (plugins.sitemap === false || !localeOptions.hostname) return ['', false]
+  if (plugins.sitemap === false || !localeOptions.hostname) return false
-  return sitemap({
+  // return sitemapPlugin({
-    hostname: localeOptions.hostname,
+  //   hostname: localeOptions.hostname,
-  })
+  // })
+  return false
 }

packages/theme/src/node/plugins/themeData.ts

@@ -1,8 +1,8 @@
-import type { PluginConfig } from '@vuepress/core'
+import type { PluginObject } from '@vuepress/core'
+import { themeDataPlugin } from '@vuepress/plugin-theme-data'
 import type { PlumeThemeLocaleOptions } from '../../shared'
-
 export const resolveThemeData = (
   localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
+): PluginObject => {
-  return ['@vuepress/theme-data', { themeData: localeOptions }]
+  return themeDataPlugin({ themeData: localeOptions })
 }

packages/theme/src/node/theme.ts

@@ -1,4 +1,4 @@
-import type { Page, Theme } from '@vuepress/core'
+import type { App, Page, Theme } from '@vuepress/core'
 import type { PlumeThemeOptions, PlumeThemePageData } from '../shared'
 import { getAlias } from './alias'
 import { createPage } from './createPage'
@@ -10,29 +10,12 @@ import { onPrepared, preparedWatch } from './prepared'
 import { resolveClient, resolveTemplate } from './utils'
 const merge = require('lodash.merge')
 
-export const themePlume: Theme<PlumeThemeOptions> = (
+export const themePlume = ({
-  { themePlugins = {}, ...localeOption },
+  themePlugins = {},
-  app
+  ...localeOption
-) => {
+}: PlumeThemeOptions = {}): Theme => {
-  if (app.options.bundler.endsWith('vite')) {
-    // eslint-disable-next-line import/no-extraneous-dependencies
-    app.options.bundlerConfig.viteOptions = require('vite').mergeConfig(
-      app.options.bundlerConfig.viteOptions,
-      {
-        css: {
-          preprocessorOptions: {
-            scss: { charset: false },
-          },
-        },
-      }
-    )
-  }
   localeOption = merge(defaultLocaleOption, localeOption)
-  const { formatFrontmatter, watchNewMarkDown } = generateFrontmatter(
+  let watchMarkdown: null | ((app: App, watchers: unknown) => void) = null
-    app.options.source,
-    localeOption
-  )
-  formatFrontmatter()
   return {
     name: '@vuepress-plume/vuepress-theme-plume',
     layouts: resolveClient('layouts'),
@@ -41,15 +24,21 @@ export const themePlume: Theme<PlumeThemeOptions> = (
     clientAppEnhanceFiles: resolveClient('clientAppEnhance.js'),
     clientAppSetupFiles: resolveClient('clientAppSetup.js'),
     onInitialized: async (app) => {
+      const { formatFrontmatter, watchNewMarkDown } = generateFrontmatter(
+        app.options.source,
+        localeOption
+      )
+      watchMarkdown = watchNewMarkDown
+      formatFrontmatter()
       await createPage(app, localeOption)
     },
     onPrepared: (app) => onPrepared(app, localeOption),
-    extendsPage: (page: Page<PlumeThemePageData>) =>
+    extendsPage: (page: Page<Partial<PlumeThemePageData>>) =>
       extendsPage(page, localeOption),
     onWatched: (app, watchers) => {
       preparedWatch(app, watchers, localeOption)
-      watchNewMarkDown(app, watchers)
+      watchMarkdown && watchMarkdown(app, watchers)
     },
-    plugins: getPlugins(app, themePlugins, localeOption),
+    plugins: getPlugins(themePlugins, localeOption),
   }
 }

packages/theme/src/shared/options/options.ts

@@ -1,11 +1,8 @@
-import type { ThemeConfig } from '@vuepress/core'
 import type { ThemeData } from '@vuepress/plugin-theme-data'
 import type { PlumeThemeLocaleData } from './locale'
 import type { PlumeThemePluginOptions } from './plugin'
 
-export interface PlumeThemeOptions
+export interface PlumeThemeOptions extends PlumeThemeLocaleOptions {
-  extends ThemeConfig,
-    PlumeThemeLocaleOptions {
   /**
    * 对主题内部使用的插件进行配置
    */

packages/theme/src/shared/options/plugin.ts

@@ -23,7 +23,7 @@ export interface PlumeThemePluginOptions {
   /**
    * plugin-docsearch 配置
    */
-  docsearch?: false | Partial<DocsearchOptions>
+  docsearch?: false | DocsearchOptions
 
   prismjs?: false
 

tsconfig.json

@@ -3,28 +3,18 @@
   "compilerOptions": {
     "baseUrl": "./",
     "module": "ES2020",
-    // "jsx": "preserve",
+    "jsx": "preserve",
     "paths": {
-      "@theme-plume/*": [
+      "@theme-plume/*": ["./packages/theme/src/client/components/*"],
-        "./packages/theme/src/client/components/*"
+      "@internal/*": ["./docs/.vuepress/.temp/internal/*"],
-      ],
+      "@vuepress-plume/vuepress-*": ["./packages/*/src"],
-      "@internal/*": [
+      "@vuepress-plume/vuepress-theme-plume": ["./packages/theme/src"]
-        "./docs/.vuepress/.temp/internal/*"
-      ]
     },
     "types": ["webpack-env", "vite/client", "@vuepress/client/types"]
   },
   "vueCompilerOptions": {
     "experimentalDisableTemplateSupport": true
   },
-  "include": [
+  "include": ["packages/**/*", "docs/.vuepress/**/*"],
-    "packages/**/*",
+  "exclude": ["node_modules", ".temp", "lib", "dist"]
-    "docs/.vuepress/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    ".temp",
-    "lib",
-    "dist"
-  ]
 }