refactor(core): refine resolveThemeInfo

Author: meteorlxy

packages/@vuepress/core/__tests__/app/resolveThemeApi.spec.ts renamed to packages/@vuepress/core/__tests__/app/resolveThemeInfo.spec.ts

@@ -1,66 +1,66 @@
-import { createBaseApp, resolveThemeApi } from '@vuepress/core'
+import { createBaseApp, resolveThemeInfo } from '@vuepress/core'
 import { path } from '@vuepress/utils'
 
 const fixtures = (...args: string[]) =>
   path.resolve(__dirname, '../__fixtures__/', ...args)
 
-describe('core > app > resolveThemeApi', () => {
+describe('core > app > resolveThemeInfo', () => {
   describe('layouts', () => {
-    it('should resolve theme api without layouts correctly', () => {
+    it('should resolve theme info without layouts correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/empty.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme).layouts).toEqual({})
+      expect(resolveThemeInfo(app, app.options.theme).layouts).toEqual({})
     })
 
-    it('should resolve theme api with layouts correctly', () => {
+    it('should resolve theme info with layouts correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/has-layouts.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme).layouts).toEqual({
+      expect(resolveThemeInfo(app, app.options.theme).layouts).toEqual({
         Layout: fixtures('layouts/Layout.vue'),
         404: fixtures('layouts/404.vue'),
       })
     })
   })
 
   describe('plugins', () => {
-    it('should resolve theme api without plugins correctly', () => {
+    it('should resolve theme info without plugins correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/empty.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme).plugins).toEqual([
+      expect(resolveThemeInfo(app, app.options.theme).plugins).toEqual([
         require(fixtures('themes/empty.js')),
       ])
     })
 
-    it('should resolve theme api with plugins correctly', () => {
+    it('should resolve theme info with plugins correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/has-plugins.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme).plugins).toEqual([
+      expect(resolveThemeInfo(app, app.options.theme).plugins).toEqual([
         require(fixtures('themes/has-plugins.js')),
         require(fixtures('plugins/obj.js')),
       ])
     })
   })
 
   describe('extends', () => {
-    it('should resolve theme api with parent theme correctly', () => {
+    it('should resolve theme info with parent theme correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/extends-parent.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme)).toEqual({
+      expect(resolveThemeInfo(app, app.options.theme)).toEqual({
         plugins: [
           require(fixtures('themes/has-layouts-and-plugins.js')),
           require(fixtures('plugins/obj.js')),
@@ -75,13 +75,13 @@ describe('core > app > resolveThemeApi', () => {
       })
     })
 
-    it('should resolve theme api with grandparent theme correctly', () => {
+    it('should resolve theme info with grandparent theme correctly', () => {
       const app = createBaseApp({
         source: path.resolve(__dirname, 'fake-source'),
         theme: fixtures('themes/extends-grandparent.js'),
       })
 
-      expect(resolveThemeApi(app, app.options.theme)).toEqual({
+      expect(resolveThemeInfo(app, app.options.theme)).toEqual({
         plugins: [
           require(fixtures('themes/has-layouts-and-plugins.js')),
           require(fixtures('plugins/obj.js')),

packages/@vuepress/core/src/app/createBaseApp.ts

@@ -11,7 +11,7 @@ import { createAppSiteData } from './createAppSiteData'
 import { createAppVersion } from './createAppVersion'
 import { createAppWriteTemp } from './createAppWriteTemp'
 import { resolvePluginsFromConfig } from './resolvePluginsFromConfig'
-import { resolveThemeApi } from './resolveThemeApi'
+import { resolveThemeInfo } from './resolveThemeInfo'
 
 /**
  * Create vuepress app
@@ -40,10 +40,10 @@ export const createBaseApp = (config: AppConfig, isBuild = false): App => {
     prepare: () => appPrepare(app),
   } as App
 
-  // resolve theme plugins and layouts
-  const themeApi = resolveThemeApi(app, options.theme)
-  themeApi.plugins.forEach((plugin) => app.use(plugin))
-  app.layouts = themeApi.layouts
+  // resolve theme info and use theme plugins
+  const themeInfo = resolveThemeInfo(app, options.theme)
+  themeInfo.plugins.forEach((plugin) => app.use(plugin))
+  app.layouts = themeInfo.layouts
 
   // resolve plugins
   const plugins = resolvePluginsFromConfig(app, options.plugins)

packages/@vuepress/core/src/app/index.ts

@@ -18,5 +18,5 @@ export * from './resolvePlugin'
 export * from './resolvePluginModule'
 export * from './resolvePluginsFromConfig'
 export * from './resolveTheme'
-export * from './resolveThemeApi'
+export * from './resolveThemeInfo'
 export * from './resolveThemeLayouts'

packages/@vuepress/core/src/app/resolveThemeApi.ts

@@ -0,0 +1,28 @@
+import type { App, ThemeInfo } from '../types'
+import { resolvePluginsFromConfig } from './resolvePluginsFromConfig'
+import { resolveTheme } from './resolveTheme'
+import { resolveThemeLayouts } from './resolveThemeLayouts'
+
+/**
+ * Resolve theme info and its parent theme info
+ */
+export const resolveThemeInfo = (app: App, themeName: string): ThemeInfo => {
+  // resolve current theme info
+  const theme = resolveTheme(app, themeName)
+  const themeInfo = {
+    layouts: resolveThemeLayouts(theme.layouts),
+    plugins: [theme, ...resolvePluginsFromConfig(app, theme.plugins)],
+  }
+
+  // return if current theme does not have a parent theme
+  if (!theme.extends) {
+    return themeInfo
+  }
+
+  // resolve parent theme info recursively
+  const parentThemeInfo = resolveThemeInfo(app, theme.extends)
+  return {
+    layouts: { ...parentThemeInfo.layouts, ...themeInfo.layouts },
+    plugins: [...parentThemeInfo.plugins, ...themeInfo.plugins],
+  }
+}

packages/@vuepress/core/src/app/resolveThemeInfo.ts

@@ -51,3 +51,18 @@ export interface ThemeObject extends PluginObject {
  * @remark suffix `Config` means this is for user config
  */
 export type ThemeConfig = Record<string, any>
+
+/**
+ * Resolved theme info
+ */
+export interface ThemeInfo {
+  /**
+   * Layout components
+   */
+  layouts: Record<string, string>
+
+  /**
+   * Plugins, including theme itself and plugins used by theme
+   */
+  plugins: PluginObject[]
+}