feat: support 'dynamicClientCode' option

1. Move global components registration to a single plugin 'vuepress-plugin-register-global-components'
2. Support register global theme components (`${themePath}/components`) (#345)

Author: ulivz

lib/app/app.js

@@ -9,6 +9,7 @@ import store from './store'
 import { routes } from '@temp/routes'
 import { siteData } from '@temp/siteData'
 import appEnhancers from '@temp/appEnhancers.js'
+import '@temp/dynamicClientCode.js'
 
 // suggest dev server restart on base change
 if (module.hot) {

lib/plugin-api/constans.js

@@ -10,6 +10,7 @@ const ENHANCE_APP_FILES = 'enhanceAppFiles'
 const OUT_FILES = 'outFiles'
 const EXTEND_PAGE_DATA = 'extendPageData'
 const EXTEND_MARKDOWN = 'extendMarkdown'
+const DYNAMIC_CLIENT_CODE = 'dynamicClientCode'
 
 const HOOK = {
   READY,
@@ -25,7 +26,8 @@ const OPTION = {
   ENHANCE_APP_FILES,
   OUT_FILES,
   EXTEND_PAGE_DATA,
-  EXTEND_MARKDOWN
+  EXTEND_MARKDOWN,
+  DYNAMIC_CLIENT_CODE
 }
 
 exports.HOOK = HOOK

lib/plugin-api/index.js

@@ -88,7 +88,8 @@ module.exports = class Plugin {
     ready,
     compiled,
     updated,
-    generated
+    generated,
+    dynamicClientCode
   }) {
     logger.tip(`\nApply plugin ${chalk.cyan(name)}...`)
 
@@ -106,5 +107,6 @@ module.exports = class Plugin {
       .registerOption(OPTION.EXTEND_PAGE_DATA, extendPageData, name, [Function])
       .registerOption(OPTION.ENHANCE_APP_FILES, enhanceAppFiles, name, [Array, Function])
       .registerOption(OPTION.OUT_FILES, outFiles, name, [Object])
+      .registerOption(OPTION.DYNAMIC_CLIENT_CODE, dynamicClientCode, name, [Function])
   }
 }

lib/plugin-api/option/DynamicClientCodeOption.js

@@ -0,0 +1,19 @@
+const Tapable = require('../core/Tapable')
+const { writeTemp } = require('../../prepare/util')
+
+module.exports = class DynamicClientCodeOption extends Tapable {
+  async run () {
+    let code = ''
+    for (const item of this.items) {
+      const { value: fn, name: pluginName } = item
+      const res = await fn()
+      code += `
+/**
+ * Generated by [vuepress-plugin-${pluginName}]"
+ */
+${res}\n\n
+        `.trim()
+    }
+    await writeTemp('dynamicClientCode.js', code)
+  }
+}

lib/plugin-api/option/instantiateOption.js

@@ -1,5 +1,6 @@
 const EnhanceAppFilesOption = require('./EnhanceAppFilesOption')
 const ExtendPageDataOption = require('./ExtendPageDataOption')
+const DynamicClientCodeOption = require('./DynamicClientCodeOption')
 const Tapable = require('../core/Tapable')
 
 module.exports = function instantiateOption (name) {
@@ -8,6 +9,8 @@ module.exports = function instantiateOption (name) {
     return new EnhanceAppFilesOption(name)
   case 'extendPageData':
     return new ExtendPageDataOption(name)
+  case 'dynamicClientCode':
+    return new DynamicClientCodeOption(name)
 
   default: return new Tapable(name)
   }

lib/prepare/codegen.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const { fileToComponentName, resolveComponents } = require('./util')
 
 exports.genRoutesFile = async function ({
   siteData: { pages },
@@ -49,6 +48,7 @@ exports.genRoutesFile = async function ({
   }`
 
   return (
+    `import Vue from 'vue'\n` +
     `import ThemeLayout from '@themeLayout'\n` +
     `import ThemeNotFound from '@themeNotFound'\n` +
     `import { injectMixins } from '@app/util'\n` +
@@ -58,17 +58,3 @@ exports.genRoutesFile = async function ({
     `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
   )
 }
-
-exports.genComponentRegistrationFile = async function ({ sourceDir }) {
-  function genImport (file) {
-    const name = fileToComponentName(file)
-    const baseDir = path.resolve(sourceDir, '.vuepress/components')
-    const absolutePath = path.resolve(baseDir, file)
-    const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
-    return code
-  }
-
-  const components = (await resolveComponents(sourceDir)) || []
-  return `import Vue from 'vue'\n` + components.map(genImport).join('\n')
-}
-

lib/prepare/index.js

@@ -3,37 +3,33 @@ const fs = require('fs-extra')
 const resolveOptions = require('./resolveOptions')
 const resolveSiteData = require('./resolveSiteData')
 const resolvePlugin = require('./resolvePlugin')
-const { genRoutesFile, genComponentRegistrationFile } = require('./codegen')
+const { genRoutesFile } = require('./codegen')
 const { writeTemp } = require('./util')
 
 module.exports = async function prepare (sourceDir) {
   // 1. load options
   const options = await resolveOptions(sourceDir)
-  const { siteConfig, markdown } = options
+  const { markdown } = options
 
   // 2. resolve plugin
-  const plugin = resolvePlugin(siteConfig.plugins, options)
+  const plugin = resolvePlugin(options)
   options.plugin = plugin
 
-  // 3. Apply plugin options to extend makrdown.
+  // 3. Apply plugin options to extend markdown.
   plugin.options.extendMarkdown.run(markdown)
+  plugin.options.dynamicClientCode.run()
 
   // 4. resolve siteData
   // SiteData must be resolved after the plugin initialization
   // because plugins can be able to extend the sitedata.
   options.siteData = await resolveSiteData(options)
   Object.freeze(options)
 
-  await plugin.hooks.ready.run(options)
+  await plugin.hooks.ready.run()
 
-  // 5. generate routes & user components registration code
+  // 5. generate routes code
   const routesCode = await genRoutesFile(options)
-  const componentCode = await genComponentRegistrationFile(options)
-
-  await writeTemp('routes.js', [
-    componentCode,
-    routesCode
-  ].join('\n'))
+  await writeTemp('routes.js', routesCode)
 
   // 6. generate siteData
   const dataCode = `export const siteData = ${JSON.stringify(options.siteData, null, 2)}`

lib/prepare/resolvePlugin.js

@@ -1,18 +1,27 @@
+const path = require('path')
 const Plugin = require('../plugin-api')
 const PluginContext = require('../plugin-api/context')
 
 // built-in plugins
 const lastUpdatedPlugin = require('../../packages/vuepress-plugin-last-updated')
 const enhanceApp = require('../../packages/vuepree-plugin-enhance-app')
+const registerGlobalComponents = require('../../packages/vuepress-plugin-register-global-components')
 
-module.exports = function (pluginConfigs, context) {
-  const pluginContext = new PluginContext(context)
+module.exports = function (options) {
+  const { siteConfig, sourceDir, themePath } = options
+  const pluginContext = new PluginContext(options)
   const plugin = new Plugin(pluginContext)
 
   plugin
     .use(lastUpdatedPlugin)
     .use(enhanceApp)
-    .useByConfigs(pluginConfigs)
+    .use(registerGlobalComponents, {
+      baseDirs: [
+        path.resolve(sourceDir, '.vuepress/components'),
+        path.resolve(themePath, 'components')
+      ]
+    })
+    .useByConfigs(siteConfig.plugins)
 
   return plugin
 }

lib/prepare/util.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const fs = require('fs-extra')
-const globby = require('globby')
 
 const tempPath = path.resolve(__dirname, '../app/.temp')
 fs.ensureDirSync(tempPath)
@@ -41,29 +40,10 @@ exports.fileToPath = function (file) {
   }
 }
 
-exports.fileToComponentName = function (file) {
-  let normalizedName = file
-    .replace(/\/|\\/g, '-')
-    .replace(extRE, '')
-  if (exports.isIndexFile(file)) {
-    normalizedName = normalizedName.replace(/readme$/i, 'index')
-  }
-  const pagePrefix = /\.md$/.test(file) ? `page-` : ``
-  return `${pagePrefix}${normalizedName}`
-}
-
 exports.isIndexFile = function (file) {
   return indexRE.test(file)
 }
 
-exports.resolveComponents = async function (sourceDir) {
-  const componentDir = path.resolve(sourceDir, '.vuepress/components')
-  if (!fs.existsSync(componentDir)) {
-    return
-  }
-  return exports.sort(await globby(['**/*.vue'], { cwd: componentDir }))
-}
-
 exports.sort = function (arr) {
   return arr.sort((a, b) => {
     if (a < b) return -1

packages/vuepress-plugin-register-global-components/index.js

@@ -0,0 +1,41 @@
+const fs = require('fs-extra')
+const path = require('path')
+const globby = require('globby')
+
+function fileToComponentName (file) {
+  return file
+    .replace(/\/|\\/g, '-')
+    .replace(/\.vue$/, '')
+}
+
+async function resolveComponents (componentDir) {
+  if (!fs.existsSync(componentDir)) {
+    return
+  }
+  return (await globby(['**/*.vue'], { cwd: componentDir }))
+}
+
+module.exports = (options, context) => ({
+  name: 'register-global-components',
+
+  async dynamicClientCode () {
+    const { baseDirs } = options
+    // const { sourceDir } = context
+
+    function genImport (baseDir, file) {
+      const name = fileToComponentName(file)
+      const absolutePath = path.resolve(baseDir, file)
+      // const baseDir = path.resolve(sourceDir, '.vuepress/components')
+      const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
+      return code
+    }
+
+    let code = ''
+    for (const baseDir of baseDirs) {
+      const files = await resolveComponents(baseDir) || []
+      code += files.map(file => genImport(baseDir, file)).join('\n') + '\n\n'
+    }
+
+    return `import Vue from 'vue'\n` + code
+  }
+})