chore: update vuepress dependencies

更新 vuepress 相关依赖至 2.0.0.beta.41,暂时下线hope相关插件 BREAKING CHANGE: 跟随vuepress@2.0.0.beta.41的重大变更
2022-04-26 21:25:36 +08:00 · 2022-04-26 21:25:36 +08:00 · e04e2a1973
commit e04e2a1973
parent 781670a066
33 changed files with 2445 additions and 2538 deletions
--- a/docs/.vuepress/config.ts
+++ b/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',
-  themeConfig: {
+  theme: themePlume({
    logo: 'https://pengzhanbo.cn/g.gif',
    hostname: 'https://pengzhanbo.cn',
    avatar: {
@ -101,5 +101,5 @@ export default defineUserConfig<PlumeThemeOptions>({
        },
      },
    },
-  },
+  }),
 })
--- a/package.json
+++ b/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-webpack": "^2.0.0-beta.38",
+    "vuepress-vite": "^2.0.0-beta.41",
+    "vuepress-webpack": "^2.0.0-beta.41",
    "webpack-env": "^0.8.0"
  }
 }
--- a/packages/plugin-caniuse/package.json
+++ b/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",
-  "main": "lib/node/index.js",
-  "files": [
-    "lib"
-  ],
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
+  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git"
  },
-  "bugs": {
-    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
-  },
+  "license": "MIT",
+  "author": "pengzhanbo <volodymyr@foxmail.com>",
+  "main": "lib/node/index.js",
+  "files": [
+    "lib"
+  ],
  "scripts": {
-    "ts": "tsc -b tsconfig.build.json",
-    "ts:watch": "tsc -b tsconfig.build.json --watch",
+    "build": "yarn clean && yarn ts",
    "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/core": "^2.0.0-beta.38",
-    "@vuepress/utils": "^2.0.0-beta.38",
+    "@vuepress/cli": "^2.0.0-beta.41",
+    "@vuepress/client": "^2.0.0-beta.41",
+    "@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"
  },
--- a/packages/plugin-caniuse/src/node/index.ts
+++ b/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
--- a/packages/plugin-caniuse/src/node/plugin.ts
+++ b/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+(.*)$`)
--- a/packages/theme/package.json
+++ b/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/core": "^2.0.0-beta.38",
-    "@vuepress/plugin-active-header-links": "^2.0.0-beta.38",
-    "@vuepress/plugin-container": "^2.0.0-beta.38",
-    "@vuepress/plugin-docsearch": "^2.0.0-beta.38",
-    "@vuepress/plugin-external-link-icon": "^2.0.0-beta.38",
-    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.38",
-    "@vuepress/plugin-nprogress": "^2.0.0-beta.38",
-    "@vuepress/plugin-palette": "^2.0.0-beta.38",
-    "@vuepress/plugin-prismjs": "^2.0.0-beta.38",
-    "@vuepress/plugin-search": "^2.0.0-beta.38",
-    "@vuepress/plugin-theme-data": "^2.0.0-beta.38",
-    "@vuepress/plugin-toc": "^2.0.0-beta.38",
-    "@vuepress/shared": "^2.0.0-beta.38",
-    "@vuepress/utils": "^2.0.0-beta.38",
+    "@vuepress/client": "^2.0.0-beta.41",
+    "@vuepress/core": "^2.0.0-beta.41",
+    "@vuepress/plugin-active-header-links": "^2.0.0-beta.41",
+    "@vuepress/plugin-container": "^2.0.0-beta.41",
+    "@vuepress/plugin-docsearch": "^2.0.0-beta.41",
+    "@vuepress/plugin-external-link-icon": "^2.0.0-beta.41",
+    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.41",
+    "@vuepress/plugin-nprogress": "^2.0.0-beta.41",
+    "@vuepress/plugin-palette": "^2.0.0-beta.41",
+    "@vuepress/plugin-prismjs": "^2.0.0-beta.41",
+    "@vuepress/plugin-search": "^2.0.0-beta.41",
+    "@vuepress/plugin-theme-data": "^2.0.0-beta.41",
+    "@vuepress/plugin-toc": "^2.0.0-beta.41",
+    "@vuepress/shared": "^2.0.0-beta.41",
+    "@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"
  },
--- a/packages/theme/src/client/clientAppEnhance.ts
+++ b/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') ||
-      app.component('SearchBox')) as Component
+    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()
--- a/packages/theme/src/client/components/HomeBigBanner.vue
+++ b/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) {
--- a/packages/theme/src/client/components/Page.vue
+++ b/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">
--- a/packages/theme/src/client/components/PostList.vue
+++ b/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
--- a/packages/theme/src/node/define.ts
+++ b/packages/theme/src/node/define.ts
@ -1,16 +1,4 @@
-import type { UserConfig } from '@vuepress/cli'
-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
+import type { PlumeThemeNotesItem, PlumeThemeNotesOptions } from '../shared'

 export const definePlumeNotesConfig = (
  notes: PlumeThemeNotesOptions
--- a/packages/theme/src/node/extendsPage.ts
+++ b/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 || ''
--- a/packages/theme/src/node/generateFrontmatter.ts
+++ b/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 => {
--- a/packages/theme/src/node/plugins/activeHeaderLink.ts
+++ b/packages/theme/src/node/plugins/activeHeaderLink.ts
@ -1,14 +1,11 @@
-import type { PluginConfig } from '@vuepress/core'
-import type { ActiveHeaderLinksPluginOptions } from '@vuepress/plugin-active-header-links'
+import type { PluginObject } from '@vuepress/core'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'

-export const resolveActiveHeaderLink = (): PluginConfig => {
-  return [
-    '@vuepress/active-header-links',
-    {
-      headerLinkSelector: 'a.theme-plume-toc-link',
-      headerAnchorSelector: '.header-anchor',
-      delay: 200,
-      offset: 20,
-    } as ActiveHeaderLinksPluginOptions,
-  ]
+export const resolveActiveHeaderLink = (): PluginObject => {
+  return activeHeaderLinksPlugin({
+    headerLinkSelector: 'a.theme-plume-toc-link',
+    headerAnchorSelector: '.header-anchor',
+    delay: 200,
+    offset: 20,
+  })
 }
--- a/packages/theme/src/node/plugins/caniuse.ts
+++ b/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 => {
-  if (plugins.caniuse === false) return ['', false]
-  return [
-    '@vuepress-plume/caniuse',
+): PluginObject | false => {
+  if (plugins.caniuse === false) return false
+  return caniusePlugin(
    plugins.caniuse || {
      mode: 'embed',
-    },
-  ]
+    }
+  )
 }
--- a/packages/theme/src/node/plugins/comment.ts
+++ b/packages/theme/src/node/plugins/comment.ts
@ -1,11 +1,12 @@
-import type { PluginConfig } from '@vuepress/core'
-import type { CommentOptions } from 'vuepress-plugin-comment2'
-import { comment } from 'vuepress-plugin-comment2'
+import type { PluginObject } from '@vuepress/core'
+// import type { CommentOptions } from 'vuepress-plugin-comment2'
+// import { commentPlugin } from 'vuepress-plugin-comment2'
 import type { PlumeThemePluginOptions } from '../../shared'

 export const resolveComment = (
  plugins: PlumeThemePluginOptions
-): PluginConfig => {
-  if (plugins.comment === false) return ['', false]
-  return comment(plugins.comment as CommentOptions)
+): PluginObject | false => {
+  if (plugins.comment === false) return false
+  // return commentPlugin(plugins.comment as CommentOptions)
+  return false
 }
--- a/packages/theme/src/node/plugins/copyCode.ts
+++ b/packages/theme/src/node/plugins/copyCode.ts
@ -1,21 +1,22 @@
-import type { PluginConfig } from '@vuepress/core'
-import { copyCode } from 'vuepress-plugin-copy-code2'
+import type { PluginObject } from '@vuepress/core'
+// import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
 import type { PlumeThemePluginOptions } from '../../shared'

 export const resolveCopyCode = (
  plugins: PlumeThemePluginOptions
-): PluginConfig => {
-  if (plugins.copyCode === false) return ['', false]
+): PluginObject | false => {
+  if (plugins.copyCode === false) return false

-  return copyCode(
-    plugins.copyCode || {
-      selector: '.page-content div[class*="language-"] pre',
-      locales: {
-        '/': {
-          copy: '复制成功',
-          hint: '复制代码',
-        },
-      },
-    }
-  )
+  // return copyCodePlugin(
+  //   plugins.copyCode || {
+  //     selector: '.page-content div[class*="language-"] pre',
+  //     locales: {
+  //       '/': {
+  //         copy: '复制成功',
+  //         hint: '复制代码',
+  //       },
+  //     },
+  //   }
+  // )
+  return false
 }
--- a/packages/theme/src/node/plugins/externalLinkIcon.ts
+++ b/packages/theme/src/node/plugins/externalLinkIcon.ts
@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
-import type { ExternalLinkIconPluginOptions } from '@vuepress/plugin-external-link-icon'
+import type { PluginObject } from '@vuepress/core'
+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 => {
-  if (plugins.externalLinkIcon === false) return ['', false]
-  return [
-    '@vuepress/plugin-external-link-icon',
-    {
-      locales: Object.entries(localeOptions.locales || {}).reduce(
-        (result, [key, value]) => {
-          result[key] = {
-            openInNewWindow:
-              value.openInNewWindow ?? localeOptions.openInNewWindow,
-          }
-          return result
-        },
-        {}
-      ),
-    } as ExternalLinkIconPluginOptions,
-  ]
+): PluginObject | false => {
+  if (plugins.externalLinkIcon === false) return false
+  return externalLinkIconPlugin({
+    locales: Object.entries(localeOptions.locales || {}).reduce(
+      (result, [key, value]) => {
+        result[key] = {
+          openInNewWindow:
+            value.openInNewWindow ?? localeOptions.openInNewWindow,
+        }
+        return result
+      },
+      {}
+    ),
+  })
 }
--- a/packages/theme/src/node/plugins/index.ts
+++ b/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 { resolveCopyCode } from './copyCode'
+// import { resolveComment } from './comment'
+// 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 { resolveSeo } from './seo'
-import { resolveSitemap } from './sitemap'
+// import { resolveSearch } from './search'
+// import { resolveSeo } from './seo'
+// import { resolveSitemap } from './sitemap'
 import { resolveThemeData } from './themeData'

 export const getPlugins = (
-  app: App,
  plugins: PlumeThemePluginOptions,
  localeOptions: PlumeThemeLocaleOptions
-): PluginConfig<PluginOptions>[] => {
-  return [
+): PluginConfig => {
+  const resolvePlugins: (PluginObject | false)[] = [
    resolveActiveHeaderLink(),
    resolvePalette(),
    resolveNprogress(plugins),
    resolveMediumZoom(plugins),
    resolveCanIUse(plugins),
    resolveExternalLinkIconPlugin(plugins, localeOptions),
-    resolveSearch(plugins),
+    // resolveSearch(plugins),
    resolvePrismjs(plugins),
-    resolveCopyCode(plugins),
-    resolveMarkdownEnhance(plugins),
-    resolveComment(plugins),
-    resolveSitemap(plugins, localeOptions),
-    resolveSeo(plugins, localeOptions),
+    // resolveCopyCode(plugins),
+    // resolveMarkdownEnhance(plugins),
+    // resolveComment(plugins),
+    // resolveSitemap(plugins, localeOptions),
+    // resolveSeo(plugins, localeOptions),
    resolveThemeData(localeOptions),
-  ].filter((item) => item[1] !== false)
+  ]
+  return resolvePlugins.filter((plugin) => plugin) as PluginObject[]
 }
--- a/packages/theme/src/node/plugins/markdownEnhance.ts
+++ b/packages/theme/src/node/plugins/markdownEnhance.ts
@ -1,22 +1,23 @@
-import type { PluginConfig } from '@vuepress/core'
-import { mdEnhance } from 'vuepress-plugin-md-enhance'
+import type { PluginObject } from '@vuepress/core'
+// import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance'
 import type { PlumeThemePluginOptions } from '../../shared'

 export const resolveMarkdownEnhance = (
  plugins: PlumeThemePluginOptions
-): PluginConfig => {
-  if (plugins.markdownEnhance === false) return ['', false]
-  return mdEnhance(
-    Object.assign(
-      {
-        container: true, // info note tip warning danger details
-        codegroup: true,
-        align: true,
-        mark: true,
-        tasklist: true,
-        demo: true,
-      },
-      plugins.markdownEnhance || {}
-    )
-  )
+): PluginObject | false => {
+  if (plugins.markdownEnhance === false) return false
+  // return mdEnhancePlugin(
+  //   Object.assign(
+  //     {
+  //       container: true, // info note tip warning danger details
+  //       codegroup: true,
+  //       align: true,
+  //       mark: true,
+  //       tasklist: true,
+  //       demo: true,
+  //     },
+  //     plugins.markdownEnhance || {}
+  //   )
+  // )
+  return false
 }
--- a/packages/theme/src/node/plugins/mediumZoom.ts
+++ b/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 => {
-  if (plugins.mediumZoom === false) return ['', false]
-  return [
-    '@vuepress/medium-zoom',
-    {
-      selector: '.page-content > img, .page-content :not(a) > img',
-      zoomOption: {},
-      delay: 300,
-    },
-  ]
+): PluginObject | false => {
+  if (plugins.mediumZoom === false) return false
+  return mediumZoomPlugin({
+    selector: '.page-content > img, .page-content :not(a) > img',
+    zoomOptions: {},
+    delay: 300,
+  })
 }
--- a/packages/theme/src/node/plugins/nprogress.ts
+++ b/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 => {
-  if (plugins.nprogress === false) return ['', false]
-  return ['@vuepress/nprogress', true]
+): PluginObject | false => {
+  if (plugins.nprogress === false) return false
+  return nprogressPlugin()
 }
--- a/packages/theme/src/node/plugins/palette.ts
+++ b/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 => {
-  return ['@vuepress/plugin-palette', { preset: 'sass' }]
+export const resolvePalette = (): PluginObject => {
+  return palettePlugin({ preset: 'sass' })
 }
--- a/packages/theme/src/node/plugins/prismjs.ts
+++ b/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 => {
-  if (plugins.prismjs === false) return ['', false]
-  return ['@vuepress/prismjs', true]
+): PluginObject | false => {
+  if (plugins.prismjs === false) return false
+  return prismjsPlugin()
 }
--- a/packages/theme/src/node/plugins/search.ts
+++ b/packages/theme/src/node/plugins/search.ts
@ -1,41 +1,16 @@
-import type { PluginConfig } from '@vuepress/core'
-import { logger } from '@vuepress/utils'
+import type { PluginObject } from '@vuepress/core'
+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 => {
-  if (plugins.search) {
-    if (!hasSearchInstalled() || plugins.search === false) {
-      logger.error('@vuepress/plugin-search is not installed.')
-      return ['', false]
-    }
-    return ['@vuepress/search', plugins.search]
+): PluginObject | false => {
+  if (plugins.search !== false) {
+    return searchPlugin(plugins.search)
  }
  if (plugins.docsearch) {
-    if (!hasDocsearchInstalled() || plugins.docsearch === false) {
-      logger.error('@vuepress/plugin-docsearch is not installed.')
-      return ['', false]
-    }
-    return ['@vuepress/docsearch', plugins.docsearch]
+    return docsearchPlugin(plugins.docsearch)
  }
-  return ['', false]
+  return false
 }
--- a/packages/theme/src/node/plugins/seo.ts
+++ b/packages/theme/src/node/plugins/seo.ts
@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
-import { seo } from 'vuepress-plugin-seo2'
+import type { PluginObject } from '@vuepress/core'
+// import { seoPlugin } from 'vuepress-plugin-seo2'
 import type {
  PlumeThemeLocaleOptions,
  PlumeThemePluginOptions,
@ -8,10 +8,11 @@ import type {
 export const resolveSeo = (
  plugins: PlumeThemePluginOptions,
  localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
-  if (plugins.sitemap === false || !localeOptions.hostname) return ['', false]
-  return seo({
-    hostname: localeOptions.hostname,
-    author: localeOptions.avatar?.name,
-  })
+): PluginObject | false => {
+  if (plugins.sitemap === false || !localeOptions.hostname) return false
+  // return seoPlugin({
+  //   hostname: localeOptions.hostname,
+  //   author: localeOptions.avatar?.name,
+  // })
+  return false
 }
--- a/packages/theme/src/node/plugins/sitemap.ts
+++ b/packages/theme/src/node/plugins/sitemap.ts
@ -1,5 +1,5 @@
-import type { PluginConfig } from '@vuepress/core'
-import { sitemap } from 'vuepress-plugin-sitemap2'
+import type { PluginObject } from '@vuepress/core'
+// import { sitemapPlugin } from 'vuepress-plugin-sitemap2'
 import type {
  PlumeThemeLocaleOptions,
  PlumeThemePluginOptions,
@ -8,9 +8,10 @@ import type {
 export const resolveSitemap = (
  plugins: PlumeThemePluginOptions,
  localeOptions: PlumeThemeLocaleOptions
-): PluginConfig => {
-  if (plugins.sitemap === false || !localeOptions.hostname) return ['', false]
-  return sitemap({
-    hostname: localeOptions.hostname,
-  })
+): PluginObject | false => {
+  if (plugins.sitemap === false || !localeOptions.hostname) return false
+  // return sitemapPlugin({
+  //   hostname: localeOptions.hostname,
+  // })
+  return false
 }
--- a/packages/theme/src/node/plugins/themeData.ts
+++ b/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 => {
-  return ['@vuepress/theme-data', { themeData: localeOptions }]
+): PluginObject => {
+  return themeDataPlugin({ themeData: localeOptions })
 }
--- a/packages/theme/src/node/theme.ts
+++ b/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> = (
-  { themePlugins = {}, ...localeOption },
-  app
-) => {
-  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 },
-          },
-        },
-      }
-    )
-  }
+export const themePlume = ({
+  themePlugins = {},
+  ...localeOption
+}: PlumeThemeOptions = {}): Theme => {
  localeOption = merge(defaultLocaleOption, localeOption)
-  const { formatFrontmatter, watchNewMarkDown } = generateFrontmatter(
-    app.options.source,
-    localeOption
-  )
-  formatFrontmatter()
+  let watchMarkdown: null | ((app: App, watchers: unknown) => void) = null
  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),
  }
 }
--- a/packages/theme/src/shared/options/options.ts
+++ b/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
-  extends ThemeConfig,
-    PlumeThemeLocaleOptions {
+export interface PlumeThemeOptions extends PlumeThemeLocaleOptions {
  /**
   * 对主题内部使用的插件进行配置
   */
--- a/packages/theme/src/shared/options/plugin.ts
+++ b/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

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