feat: support clean and multiple custom layout. / theme default layouts dir

1. Refine ExtendPageDataOption, simplify the implmentation
2. Introduce LayoutDistributor as the unique route layout entry
3. Inject layout components to LayoutDistributor
4. Register layout components located at themedir/layouts
5. Reorganize the default theme's structure

Author: ulivz

packages/@vuepress/core/lib/app/components/LayoutDistributor.vue

@@ -0,0 +1,16 @@
+<template>
+  <component :is="layout"/>
+</template>
+
+<script>
+export default {
+  computed: {
+    layout () {
+      if (this.$page.path) {
+        return this.$page.frontmatter.layout || 'Layout'
+      }
+      return 'NotFound'
+    }
+  }
+}
+</script>

packages/@vuepress/core/lib/app/util.js

@@ -1,11 +1,28 @@
 import Vue from 'vue'
 import { loadComponent } from '@internal/async-component'
 
-export function injectMixins (options, mixins) {
-  if (!options.mixins) {
-    options.mixins = []
+/**
+ * Inject option to Vue SFC
+ * @param {object} options
+ * @param {string} key
+ * @param {any} value
+ */
+export function injectComponentOption (options, key, value) {
+  const arrayInject = () => {
+    if (!options[key]) options[key] = []
+    options[key].push(...value)
+  }
+  const objectInject = () => {
+    if (!options[key]) options[key] = {}
+    Object.assign(options[key], value)
+  }
+  // const primitiveInject = () => options[key] = value
+
+  switch (key) {
+  case 'components': objectInject(); break
+  case 'mixins': arrayInject(); break
+  default: throw new Error('Unknown option name.')
   }
-  options.mixins.push(...mixins)
 }
 
 export function findPageForPath (pages, path) {

packages/@vuepress/core/lib/internal-plugins/layouts.js

@@ -0,0 +1,22 @@
+module.exports = (options, ctx) => {
+  const { layoutComponentMap } = ctx
+  const componentNames = Object.keys(layoutComponentMap)
+
+  return {
+    name: '@vuepress/internal-layout',
+
+    async clientDynamicModules () {
+      const code = `export default {\n${componentNames
+        .map(name => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(layoutComponentMap[name].path)})`)
+        .join(',\n')} \n}`
+      return { name: 'layout-components.js', content: code, dirname: 'internal' }
+    },
+
+    chainWebpack (config, isServer) {
+      const setAlias = (alias, raw) => config.resolve.alias.set(alias, raw)
+      componentNames.forEach(name => {
+        setAlias(`@${name}`, layoutComponentMap[name].path)
+      })
+    }
+  }
+}

packages/@vuepress/core/lib/internal-plugins/routes.js

@@ -1,19 +1,35 @@
-module.exports = (options, context) => ({
+module.exports = (options, ctx) => ({
   name: '@vuepress/internal-routes',
 
   // @internal/routes
   async clientDynamicModules () {
-    const routesCode = await genRoutesFile(context.pages)
-    return { name: 'routes.js', content: routesCode, dirname: 'internal' }
+    const code = importCode() + routesCode(ctx.pages)
+    return { name: 'routes.js', content: code, dirname: 'internal' }
   }
 })
 
 /**
- * Generate routes meta data file.
- * @param pages
- * @returns {Promise<string>}
+ * Import utilities
+ * @returns {string}
  */
-async function genRoutesFile (pages) {
+function importCode () {
+  return `
+import { injectComponentOption, registerComponent } from '@app/util'
+import rootMixins from '@internal/root-mixins'
+import components from '@internal/layout-components'
+import LayoutDistributor from '@app/components/LayoutDistributor.vue'
+
+injectComponentOption(LayoutDistributor, 'mixins', rootMixins)
+injectComponentOption(LayoutDistributor, 'components', components)
+`
+}
+
+/**
+ * Get Vue routes code.
+ * @param {array} pages
+ * @returns {string}
+ */
+function routesCode (pages) {
   function genRoute ({
     path: pagePath,
     key: componentName,
@@ -23,7 +39,7 @@ async function genRoutesFile (pages) {
   {
     name: ${JSON.stringify(componentName)},
     path: ${JSON.stringify(pagePath)},
-    component: ThemeLayout,
+    component: LayoutDistributor,
     beforeEnter: (to, from, next) => {
       registerComponent(${JSON.stringify(componentName)}).then(() => next())
     }
@@ -60,16 +76,10 @@ async function genRoutesFile (pages) {
   const notFoundRoute = `,
   {
     path: '*',
-    component: ThemeNotFound
+    component: LayoutDistributor
   }`
 
   return (
-    `import ThemeLayout from '@themeLayout'\n` +
-    `import ThemeNotFound from '@themeNotFound'\n` +
-    `import { injectMixins, registerComponent } from '@app/util'\n` +
-    `import rootMixins from '@internal/root-mixins'\n\n` +
-    `injectMixins(ThemeLayout, rootMixins)\n` +
-    `injectMixins(ThemeNotFound, rootMixins)\n\n` +
     `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
   )
 }

packages/@vuepress/core/lib/plugin-api/option/ExtendPageDataOption.js

@@ -1,5 +1,4 @@
 const EnhanceAppFilesOption = require('./EnhanceAppFilesOption')
-const ExtendPageDataOption = require('./ExtendPageDataOption')
 const ClientDynamicModulesOption = require('./ClientDynamicModulesOption')
 const AdditionalPagesOption = require('./AdditionalPagesOption')
 const GlobalUIComponentsOption = require('./GlobalUIComponentsOption')
@@ -11,9 +10,6 @@ module.exports = function instantiateOption (name) {
   case PLUGIN_OPTION_MAP.ENHANCE_APP_FILES.name:
     return new EnhanceAppFilesOption(name)
 
-  case PLUGIN_OPTION_MAP.EXTEND_PAGE_DATA.name:
-    return new ExtendPageDataOption(name)
-
   case PLUGIN_OPTION_MAP.CLIENT_DYNAMIC_MODULES.name:
     return new ClientDynamicModulesOption(name)
 

packages/@vuepress/core/lib/plugin-api/option/instantiateOption.js

@@ -52,9 +52,11 @@ module.exports = class AppContext {
     this.resolvePlugins()
 
     await this.resolvePages()
-    await this.pluginAPI.options.additionalPages.values.map(async ({ path, permalink }) => {
-      await this.addPage(path, { permalink })
-    })
+    await Promise.all(
+      this.pluginAPI.options.additionalPages.values.map(async ({ path, permalink }) => {
+        await this.addPage(path, { permalink })
+      })
+    )
 
     await this.pluginAPI.options.ready.apply()
     this.pluginAPI.options.extendMarkdown.syncApply(this.markdown)
@@ -85,6 +87,7 @@ module.exports = class AppContext {
       .use(require('../internal-plugins/enhanceApp'))
       .use(require('../internal-plugins/overrideCSS'))
       .use(require('../internal-plugins/i18nTemp'))
+      .use(require('../internal-plugins/layouts'))
       // user plugin
       .useByPluginsConfig(this._options.plugins)
       .useByPluginsConfig(this.siteConfig.plugins)
@@ -153,13 +156,16 @@ module.exports = class AppContext {
    * @returns { Promise<void> }
    */
   async addPage (filePath, { relative, permalink }) {
-    const page = new Page(filePath, { relative, permalink })
+    const page = new Page(filePath, {
+      relative,
+      permalink,
+      permalinkPattern: this.siteConfig.permalink
+    })
     await page.process(
       this.markdown,
-      this.siteConfig.permalink,
       new this.I18nConstructor((this.getSiteData.bind(this))),
+      this.pluginAPI.options.extendPageData.items
     )
-    await this.pluginAPI.options.extendPageData.apply(page)
     this.pages.push(page)
   }
 
@@ -184,6 +190,7 @@ module.exports = class AppContext {
    * }}
    */
   getSiteData () {
+    console.log('2')
     return {
       title: this.siteConfig.title || '',
       description: this.siteConfig.description || '',

packages/@vuepress/core/lib/prepare/AppContext.js

@@ -1,12 +1,16 @@
 const path = require('path')
 const slugify = require('../markdown/slugify')
-const { fs, fileToPath, parseFrontmatter, getPermalink } = require('@vuepress/shared-utils')
 const { inferTitle, extractHeaders } = require('../util/index')
+const {
+  fs, fileToPath, parseFrontmatter, getPermalink,
+  datatypes: { isPlainObject }
+} = require('@vuepress/shared-utils')
 
 module.exports = class Page {
   constructor (filePath, {
     relative,
-    permalink
+    permalink,
+    permalinkPattern
   }) {
     this._filePath = filePath
     if (relative) {
@@ -15,50 +19,67 @@ module.exports = class Page {
       this._routePath = encodeURI(permalink)
     }
     this.regularPath = this.path = this._routePath
+    this._permalinkPattern = permalinkPattern
   }
 
-  async process (markdown, permalinkPattern, i18n) {
+  async process (markdown, i18n, enhancers) {
     this.key = 'v-' + Math.random().toString(16).slice(2)
     this._content = await fs.readFile(this._filePath, 'utf-8')
-    const frontmatter = parseFrontmatter(this._content)
+    this._frontmatterMeta = parseFrontmatter(this._content)
 
     // infer title
-    const title = inferTitle(frontmatter)
+    const title = inferTitle(this._frontmatterMeta)
     if (title) {
       this.title = title
     }
 
     // headers
     const headers = extractHeaders(
-      frontmatter.content,
+      this._frontmatterMeta.content,
       ['h2', 'h3'],
       markdown
     )
     if (headers.length) {
       this.headers = headers
     }
 
-    this.frontmatter = frontmatter.data
+    for (const { name: pluginName, value: enhancer } of enhancers) {
+      let response
+      try {
+        response = enhancer(this)
+      } catch (error) {
+        throw new Error(`[${pluginName}] excuete extendPageData failed.`)
+      }
+      if (isPlainObject(response)) {
+        Object.keys(response).forEach(key => {
+          if (!this[key]) {
+            this[key] = response[key]
+          }
+        })
+      }
+    }
+
+    this.frontmatter = this._frontmatterMeta.data
 
-    if (frontmatter.excerpt) {
-      const { html } = markdown.render(frontmatter.excerpt)
+    if (this._frontmatterMeta.excerpt) {
+      const { html } = markdown.render(this._frontmatterMeta.excerpt)
       this.excerpt = html
     }
 
     // resolve i18n
     i18n.setSSRContext(this)
     this._i18n = i18n
 
-    this.permalink = getPermalink({
-      pattern: this.frontmatter.permalink || permalinkPattern,
+    this._permalink = getPermalink({
+      pattern: this.frontmatter.permalink || this._permalinkPattern,
       slug: this.slug,
       date: this.frontmatter.date,
       localePath: i18n.$localePath,
       regularPath: this.regularPath
     })
 
-    if (this.permalink) {
-      this.path = this.permalink
+    if (this._permalink) {
+      this.path = this._permalink
     }
   }
 

packages/@vuepress/core/lib/prepare/Page.js

@@ -13,8 +13,6 @@ module.exports = async function loadTheme (theme, sourceDir, vuepressDir) {
     (await fs.exists(localThemePath)) && ((await fs.readdir(localThemePath)).length > 0)
 
   let themePath = null         // Mandatory
-  let themeLayoutPath = null   // Mandatory
-  let themeNotFoundPath = null // Optional
   let themeIndexFile = null    // Optional
   let themePlugins = []        // Optional
   let themeName
@@ -40,33 +38,51 @@ module.exports = async function loadTheme (theme, sourceDir, vuepressDir) {
   try {
     themeIndexFile = require(themePath)
   } catch (error) {
-    console.log(error)
     themeIndexFile = {}
   }
 
   // handle theme api
-  const { layout, notFound, plugins } = themeIndexFile
+  const { plugins, layoutDir = useLocalTheme ? '.' : 'layouts' } = themeIndexFile
   themePlugins = plugins
-  themeLayoutPath = layout
-    ? path.resolve(themePath, layout)
-    : path.resolve(themePath, 'Layout.vue')
 
-  themeNotFoundPath = notFound
-    ? path.resolve(themePath, notFound)
-    : path.resolve(themePath, 'NotFound.vue')
+  const layoutDirPath = path.resolve(themePath, layoutDir)
 
-  if (!fs.existsSync(themeLayoutPath)) {
-    throw new Error(`[vuepress] Cannot resolve Layout.vue file in \n ${themeLayoutPath}`)
+  // normalize component name
+  const getComponentName = filename => {
+    filename = filename.slice(0, -4)
+    if (filename === '404') {
+      filename = 'NotFound'
+    }
+    return filename
+  }
+
+  // built-in named layout or not.
+  const isInternal = componentName => componentName === 'Layout' ||
+    componentName === 'NotFound'
+
+  const layoutComponentMap = fs.readdirSync(layoutDirPath)
+    .filter(filename => filename.endsWith('.vue'))
+    .reduce((map, filename) => {
+      const componentName = getComponentName(filename)
+      const componentPath = path.resolve(layoutDirPath, filename)
+      map[componentName] = { filename, componentName, path: componentPath }
+      if (isInternal(componentName)) {
+        map[componentName].isInternal = true
+      }
+      return map
+    }, {})
+
+  if (!fs.existsSync(layoutComponentMap.Layout.path)) {
+    throw new Error(`[vuepress] Cannot resolve Layout.vue file in \n ${layoutComponentMap.Layout.path}`)
   }
 
-  if (!fs.existsSync(themeNotFoundPath)) {
-    themeNotFoundPath = path.resolve(__dirname, '../app/components/NotFound.vue')
+  if (!fs.existsSync(layoutComponentMap.NotFound.path)) {
+    layoutComponentMap['404'].path = path.resolve(__dirname, '../app/components/NotFound.vue')
   }
 
   return {
     themePath,
-    themeLayoutPath,
-    themeNotFoundPath,
+    layoutComponentMap,
     themeIndexFile,
     themePlugins,
     themeName,