refactor: optimize code

vuepress-reco · Apr 23, 2024 · f74bc92 · f74bc92
1 parent bd3fa8a
commit f74bc92
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 119 deletions.
diff --git a/packages/vuepress-theme-reco/src/node/recoTheme.ts b/packages/vuepress-theme-reco/src/node/recoTheme.ts
@@ -1,105 +1,25 @@
-import type { Theme, Page } from 'vuepress/core'
 import { path, fs, getDirname } from 'vuepress/utils'
 
-// The bundlers for vuepress
-import { viteBundler } from '@vuepress/bundler-vite'
-import { webpackBundler } from '@vuepress/bundler-webpack'
-
-// The official plugins for vuepress
-import {
-  docsearchPlugin,
-  DocsearchPluginOptions,
-} from '@vuepress/plugin-docsearch'
-import { gitPlugin } from '@vuepress/plugin-git'
-import { searchPlugin } from '@vuepress/plugin-search'
-import { prismjsPlugin } from '@vuepress/plugin-prismjs'
-import { palettePlugin } from '@vuepress/plugin-palette'
-import { nprogressPlugin } from '@vuepress/plugin-nprogress'
-import { containerPlugin } from '@vuepress/plugin-container'
-import { themeDataPlugin } from '@vuepress/plugin-theme-data'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
-import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
-import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'
-import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
-
-// The official plugins for vuepress-reco
-import { pagePlugin } from '@vuepress-reco/vuepress-plugin-page'
-import { commentsPlugin } from '@vuepress-reco/vuepress-plugin-comments'
-import { codeCopyPlugin } from '@vuepress-reco/vuepress-plugin-code-copy'
-import { vuePreviewPlugin } from '@vuepress-reco/vuepress-plugin-vue-preview'
-import { markdownTaskPlugin } from '@vuepress-reco/vuepress-plugin-markdown-task'
-import { bulletinPopoverPlugin } from '@vuepress-reco/vuepress-plugin-bulletin-popover'
-
-// About tailwindcss
-import tailwindcss from 'tailwindcss'
-import postcssEach from 'postcss-each'
-import autoprefixer from 'autoprefixer'
-import postcssImport from 'postcss-import'
-import tailwindcssNesting from 'tailwindcss/nesting/index.js'
-import { tailwindcssConfig } from '@vuepress-reco/tailwindcss-config'
+import { getPlugins } from './resolvePlugins.js'
+import { injectiBuilderOptionsOfRecoTheme } from './resolveBundlerConfig.js'
 
-import {
-  getViteBundlerOptions,
-  getWebpackBundlerOptions,
-} from './resolveBundlerConfig.js'
-import { pages } from './pages.js'
+import type { Theme, Page } from 'vuepress/core'
 import type { RecoThemePageData } from '../types/page'
-import { resolveContainerOptions } from './resolveContainer.js'
 
 const __dirname = getDirname(import.meta.url)
 
 export const recoTheme = (themeConfig: Record<string, unknown>): Theme => {
-  const plugins = [
-    gitPlugin(),
-    palettePlugin(),
-    prismjsPlugin(),
-    codeCopyPlugin(),
-    commentsPlugin(),
-    nprogressPlugin(),
-    backToTopPlugin(),
-    vuePreviewPlugin(),
-    markdownTaskPlugin(),
-    bulletinPopoverPlugin(),
-    externalLinkIconPlugin(),
-    registerComponentsPlugin({
-      componentsDir: path.join(
-        process.cwd(),
-        themeConfig.sourceDir || '/',
-        './.vuepress/components'
-      ),
-    }),
-    themeDataPlugin({ themeData: themeConfig }),
-    pagePlugin(pages || [], themeConfig),
-    searchPlugin({ hotKeys: [{ key: 's', ctrl: true }] }),
-    mediumZoomPlugin({ zoomOptions: { background: 'inherit' } }),
-    activeHeaderLinksPlugin({ headerLinkSelector: 'a.page-catalog-item' }),
-    containerPlugin(resolveContainerOptions('tip')),
-    containerPlugin(resolveContainerOptions('info')),
-    containerPlugin(resolveContainerOptions('warning')),
-    containerPlugin(resolveContainerOptions('danger')),
-    containerPlugin(resolveContainerOptions('details')),
-    containerPlugin(resolveContainerOptions('code-group')),
-    containerPlugin(resolveContainerOptions('code-group-item')),
-  ]
-
-  if (themeConfig.algolia) {
-    plugins.push(
-      docsearchPlugin(
-        (themeConfig.algolia as unknown) as DocsearchPluginOptions
-      )
-    )
-  }
+  const plugins = getPlugins(themeConfig)
 
   return {
     name: 'vuepress-theme-reco',
 
     onInitialized(app) {
-      _injectiBuilderOptionsOfRecoTheme(app, themeConfig)
+      injectiBuilderOptionsOfRecoTheme(app, themeConfig)
     },
 
     onWatched(app) {
-      _injectiBuilderOptionsOfRecoTheme(app, themeConfig)
+      injectiBuilderOptionsOfRecoTheme(app, themeConfig)
     },
 
     templateBuild: path.resolve(__dirname, '../../templates/index.build.html'),
@@ -127,24 +47,3 @@ export const recoTheme = (themeConfig: Record<string, unknown>): Theme => {
     plugins,
   }
 }
-
-function _injectiBuilderOptionsOfRecoTheme(app, themeConfig) {
-  if (themeConfig.primaryColor) {
-    tailwindcssConfig.theme.extend.colors.reco.primary = themeConfig.primaryColor as string
-  }
-
-  tailwindcssConfig.content.push(
-    path.join(
-      themeConfig.sourceDir || '/',
-      './.vuepress/components/*.(vue|html|js)'
-    )
-  )
-
-  if (app.options.bundler.name === '@vuepress/bundler-vite') {
-    const viteBundlerOptions = getViteBundlerOptions(themeConfig)
-    app.options.bundler = viteBundler(viteBundlerOptions)
-  } else {
-    const viteBundlerOptions = getWebpackBundlerOptions(themeConfig)
-    app.options.bundler = webpackBundler(viteBundlerOptions)
-  }
-}
diff --git a/packages/vuepress-theme-reco/src/node/resolveBundlerConfig.ts b/packages/vuepress-theme-reco/src/node/resolveBundlerConfig.ts
@@ -1,12 +1,30 @@
-import { tailwindcssConfig } from '@vuepress-reco/tailwindcss-config'
-import type { ViteBundlerOptions } from '@vuepress/bundler-vite'
-import type { WebpackBundlerOptions } from '@vuepress/bundler-webpack'
-import postcssImport from 'postcss-import'
-import tailwindcssNesting from 'tailwindcss/nesting/index.js'
 import tailwindcss from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
+import { path } from 'vuepress/utils'
 import postcssEach from 'postcss-each'
+import autoprefixer from 'autoprefixer'
+import postcssImport from 'postcss-import'
+import tailwindcssNesting from 'tailwindcss/nesting/index.js'
+import { tailwindcssConfig } from '@vuepress-reco/tailwindcss-config'
+
+// The bundlers for vuepress
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
+
 import type { Config } from 'tailwindcss'
+import type { ViteBundlerOptions } from '@vuepress/bundler-vite'
+import type { WebpackBundlerOptions } from '@vuepress/bundler-webpack'
+
+export function injectiBuilderOptionsOfRecoTheme(app, themeConfig) {
+  _customizeTailwindcssOptions(themeConfig)
+
+  if (app.options.bundler.name === '@vuepress/bundler-vite') {
+    const viteBundlerOptions = _getViteBundlerOptions(themeConfig)
+    app.options.bundler = viteBundler(viteBundlerOptions)
+  } else {
+    const viteBundlerOptions = _getWebpackBundlerOptions(themeConfig)
+    app.options.bundler = webpackBundler(viteBundlerOptions)
+  }
+}
 
 const postcssPlugins = {
   plugins: [
@@ -18,19 +36,27 @@ const postcssPlugins = {
   ],
 }
 
-export const getViteBundlerOptions = (themeConfig: Record<string, unknown>) => {
+let viteBundlerOptions: ViteBundlerOptions | null = null
+const _getViteBundlerOptions = (themeConfig: Record<string, unknown>) => {
+  if (viteBundlerOptions) return viteBundlerOptions
+
   const userConfig =
     (themeConfig?.viteBundlerOptions as ViteBundlerOptions) || {}
   const defaultConfig = {
     viteOptions: { css: { postcss: { ...postcssPlugins } } },
   }
+  viteBundlerOptions = _mergeConfig<ViteBundlerOptions>(
+    userConfig,
+    defaultConfig
+  )
 
-  return _mergeConfig<ViteBundlerOptions>(userConfig, defaultConfig)
+  return viteBundlerOptions
 }
 
-export const getWebpackBundlerOptions = (
-  themeConfig: Record<string, unknown>
-) => {
+let webpackBundlerOptions: WebpackBundlerOptions | null = null
+const _getWebpackBundlerOptions = (themeConfig: Record<string, unknown>) => {
+  if (webpackBundlerOptions) return webpackBundlerOptions
+
   const userConfig =
     (themeConfig?.webpackBundlerOptions as WebpackBundlerOptions) || {}
   const defaultConfig = {
@@ -41,8 +67,25 @@ export const getWebpackBundlerOptions = (
       postcssOptions: { ...postcssPlugins },
     },
   }
+  webpackBundlerOptions = _mergeConfig<WebpackBundlerOptions>(
+    userConfig,
+    defaultConfig
+  )
+
+  return webpackBundlerOptions
+}
+
+function _customizeTailwindcssOptions(themeConfig) {
+  if (themeConfig.primaryColor) {
+    tailwindcssConfig.theme.extend.colors.reco.primary = themeConfig.primaryColor as string
+  }
 
-  return _mergeConfig<WebpackBundlerOptions>(userConfig, defaultConfig)
+  tailwindcssConfig.content.push(
+    path.join(
+      themeConfig.sourceDir || '/',
+      './.vuepress/components/*.(vue|html|js)'
+    )
+  )
 }
 
 function _mergeConfig<T>(userConfig: T, defaultConfig: T): T {

diff --git a/packages/vuepress-theme-reco/src/node/resolvePlugins.ts b/packages/vuepress-theme-reco/src/node/resolvePlugins.ts
@@ -0,0 +1,75 @@
+import { path } from 'vuepress/utils'
+
+// The official plugins for vuepress
+import {
+  docsearchPlugin,
+  DocsearchPluginOptions,
+} from '@vuepress/plugin-docsearch'
+import { gitPlugin } from '@vuepress/plugin-git'
+import { searchPlugin } from '@vuepress/plugin-search'
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
+import { palettePlugin } from '@vuepress/plugin-palette'
+import { nprogressPlugin } from '@vuepress/plugin-nprogress'
+import { containerPlugin } from '@vuepress/plugin-container'
+import { themeDataPlugin } from '@vuepress/plugin-theme-data'
+import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
+import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
+import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+
+// The official plugins for vuepress-reco
+import { pagePlugin } from '@vuepress-reco/vuepress-plugin-page'
+import { commentsPlugin } from '@vuepress-reco/vuepress-plugin-comments'
+import { codeCopyPlugin } from '@vuepress-reco/vuepress-plugin-code-copy'
+import { vuePreviewPlugin } from '@vuepress-reco/vuepress-plugin-vue-preview'
+import { markdownTaskPlugin } from '@vuepress-reco/vuepress-plugin-markdown-task'
+import { bulletinPopoverPlugin } from '@vuepress-reco/vuepress-plugin-bulletin-popover'
+
+import { pages } from './pages.js'
+import { resolveContainerOptions } from './resolveContainer.js'
+
+export const getPlugins = (themeConfig) => {
+  const plugins = [
+    gitPlugin(),
+    palettePlugin(),
+    prismjsPlugin(),
+    codeCopyPlugin(),
+    commentsPlugin(),
+    nprogressPlugin(),
+    backToTopPlugin(),
+    vuePreviewPlugin(),
+    markdownTaskPlugin(),
+    bulletinPopoverPlugin(),
+    externalLinkIconPlugin(),
+    registerComponentsPlugin({
+      componentsDir: path.join(
+        process.cwd(),
+        themeConfig.sourceDir || '/',
+        './.vuepress/components'
+      ),
+    }),
+    themeDataPlugin({ themeData: themeConfig }),
+    pagePlugin(pages || [], themeConfig),
+    searchPlugin({ hotKeys: [{ key: 's', ctrl: true }] }),
+    mediumZoomPlugin({ zoomOptions: { background: 'inherit' } }),
+    activeHeaderLinksPlugin({ headerLinkSelector: 'a.page-catalog-item' }),
+    containerPlugin(resolveContainerOptions('tip')),
+    containerPlugin(resolveContainerOptions('info')),
+    containerPlugin(resolveContainerOptions('warning')),
+    containerPlugin(resolveContainerOptions('danger')),
+    containerPlugin(resolveContainerOptions('details')),
+    containerPlugin(resolveContainerOptions('code-group')),
+    containerPlugin(resolveContainerOptions('code-group-item')),
+  ]
+
+  if (themeConfig.algolia) {
+    plugins.push(
+      docsearchPlugin(
+        (themeConfig.algolia as unknown) as DocsearchPluginOptions
+      )
+    )
+  }
+
+  return plugins
+}