fix($core): register async page/layout components and pascalize their names (close: #1173, #1321, #1391) [WIP]

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

@@ -4,6 +4,11 @@ import pageComponents from '@internal/page-components'
 
 const asyncComponents = Object.assign({}, layoutComponents, pageComponents)
 
+// TODO: reuse this function in shared-utils
+function pascalize (source = '') {
+  return source.replace(/(^|-)[a-z]/g, s => s.slice(-1).toUpperCase())
+}
+
 export function isPageExists (pageKey) {
   return Boolean(pageComponents[pageKey])
 }
@@ -17,19 +22,20 @@ export function getPageAsyncComponent (pageKey) {
 }
 
 export function isLayoutExists (layout) {
-  return Boolean(layoutComponents[layout])
+  return Boolean(getLayoutAsyncComponent(layout))
 }
 
 export function isLayoutLoaded (layout) {
   return Boolean(Vue.component(layout))
 }
 
 export function getLayoutAsyncComponent (pageKey) {
-  return layoutComponents[pageKey]
+  return layoutComponents[pascalize(pageKey)]
 }
 
 export function ensureAsyncComponentsLoaded (...names) {
   return Promise.all(names.filter(v => v).map(async (name) => {
+    name = pascalize(name)
     if (!Vue.component(name) && asyncComponents[name]) {
       const comp = await asyncComponents[name]()
       Vue.component(name, comp.default)
@@ -96,7 +102,7 @@ export function findPageByKey (pages, key) {
  *
  *
  * Usage:
- *
+ * ```js
  * import { normalizeConfig } from '@app/util'
  * export default {
  *   data () {
@@ -108,7 +114,7 @@ export function findPageByKey (pages, key) {
  *     }
  *   }
  * }
- *
+ * ```
  *
  * e.g.
  *

packages/@vuepress/core/lib/node/internal-plugins/layoutComponents.js

@@ -1,11 +1,13 @@
+const { pascalize } = require('@vuepress/shared-utils')
+
 module.exports = (options, ctx) => {
   return {
     name: '@vuepress/internal-layout-components',
 
     async clientDynamicModules () {
       const componentNames = Object.keys(ctx.themeAPI.layoutComponentMap)
       const code = `export default {\n${componentNames
-        .map(name => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(ctx.themeAPI.layoutComponentMap[name].path)})`)
+        .map(name => `  ${JSON.stringify(pascalize(name))}: () => import(${JSON.stringify(ctx.themeAPI.layoutComponentMap[name].path)})`)
         .join(',\n')} \n}`
       return { name: 'layout-components.js', content: code, dirname: 'internal' }
     }

packages/@vuepress/shared-utils/src/index.ts

@@ -18,6 +18,7 @@ import * as parseEmojis from './parseEmojis'
 import parseFrontmatter from './parseFrontmatter'
 import parseHeaders from './parseHeaders'
 import * as parseVueFrontmatter from './parseVueFrontmatter'
+import pascalize from './pascalize'
 import performance from './performance'
 import slugify from './slugify'
 import sort from './sort'
@@ -54,6 +55,7 @@ export {
   parseFrontmatter,
   parseHeaders,
   parseVueFrontmatter,
+  pascalize,
   performance,
   slugify,
   sort,

packages/@vuepress/shared-utils/src/pascalize.ts

@@ -0,0 +1,3 @@
+export default function pascalize (source: string) {
+  return source.replace(/(^|-)[a-z]/g, s => s.slice(-1).toUpperCase())
+}