feat(theme): improve log output (#526)

theme/src/node/detector/dependency.ts

@@ -3,7 +3,7 @@ import { isEmptyObject, isPlainObject } from '@pengzhanbo/utils'
 import { isPackageExists } from 'local-pkg'
 import { getUserAgent, resolveCommand } from 'package-manager-detector'
 import { colors } from 'vuepress/utils'
-import { logger } from '../utils/index.js'
+import { createTranslate, logger } from '../utils/index.js'
 
 const DEPENDENCIES: Record<string, string[]> = {
   twoslash: ['@vuepress/shiki-twoslash'],
@@ -18,6 +18,17 @@ const DEPENDENCIES: Record<string, string[]> = {
   mathjax: ['mathjax-full'],
 }
 
+const t = createTranslate({
+  en: {
+    notFoundDeps: 'Enabling features such as {{ features }} requires the installation of the following dependencies: {{ dependencies }}',
+    install: 'Run the command to install:  {{ command }}',
+  },
+  zh: {
+    notFoundDeps: '启用 {{ features }} 等功能需要安装以下依赖: {{ dependencies }}',
+    install: '运行安装命令:  {{ command }}',
+  },
+})
+
 /**
  * 部分功能需要手动安装依赖，
  * 检查环境中是否缺少依赖
@@ -56,20 +67,19 @@ export function detectDependencies(options: ThemeOptions, plugins: ThemeBuiltinP
   const features = Object.keys(shouldInstall)
   const dependencies = Object.values(shouldInstall).flat()
 
-  logger.warn(`\nEnabling features such as ${
-    features.map(feat => colors.green(feat)).join(', ')
-  } requires the installation of the following dependencies: ${
-    dependencies.map(dep => colors.yellow(dep)).join(', ')
-  }`)
+  logger.error(t('notFoundDeps', {
+    features: features.map(feat => colors.green(feat)).join(', '),
+    dependencies: dependencies.map(dep => colors.magenta(dep)).join(', '),
+  }))
 
   const agent = getUserAgent()
   if (agent) {
     const { command = '', args = [] } = resolveCommand(agent, 'add', dependencies) || {}
 
-    logger.info(`Run the command to install:\n  ${
-      colors.cyan(`${command} ${
+    logger.info(t('install', {
+      command: colors.cyan(`${command} ${
         args.join(' ').replace(DEPENDENCIES.twoslash[0], `${DEPENDENCIES.twoslash[0]}@next`)
-      }`)
-    }`)
+      }`),
+    }))
   }
 }

theme/src/node/detector/markdown.ts

@@ -1,8 +1,13 @@
 import type { ThemeOptions } from '../../shared/index.js'
 import { colors } from 'vuepress/utils'
-import { logger } from '../utils/index.js'
+import { createTranslate, logger } from '../utils/index.js'
 import { MARKDOWN_SUPPORT_FIELDS } from './fields.js'
 
+const t = createTranslate({
+  en: { message: '{{ markdown }} unsupported fields: {{ unsupported }}, please check your config.' },
+  zh: { message: '{{ markdown }} 不支持以下字段: {{ unsupported }}, 请检查你的配置。' },
+})
+
 export function detectMarkdown(options: ThemeOptions): void {
   const { markdown } = options
 
@@ -12,6 +17,9 @@ export function detectMarkdown(options: ThemeOptions): void {
   const unsupported = Object.keys(markdown).filter(key => !MARKDOWN_SUPPORT_FIELDS.includes(key as keyof ThemeOptions['markdown']))
 
   if (unsupported.length) {
-    logger.warn(`\n${colors.green('markdown')} unsupported fields: ${unsupported.map(field => colors.yellow(`"${field}"`)).join(', ')}, please check your config.`)
+    logger.warn(t('message', {
+      markdown: colors.green('markdown'),
+      unsupported: unsupported.map(field => colors.magenta(`"${field}"`)).join(', '),
+    }))
   }
 }

theme/src/node/detector/plugins.ts

@@ -1,8 +1,13 @@
 import type { ThemeBuiltinPlugins } from '../../shared/index.js'
 import { colors } from 'vuepress/utils'
-import { logger } from '../utils/index.js'
+import { createTranslate, logger } from '../utils/index.js'
 import { PLUGINS_SUPPORTED_FIELDS } from './fields.js'
 
+const t = createTranslate({
+  en: { message: '{{ plugins }} unsupported fields: {{ unsupported }}, please check your config.' },
+  zh: { message: '{{ plugins }} 不支持以下字段: {{ unsupported }}, 请检查你的配置。' },
+})
+
 export function detectPlugins(plugins: ThemeBuiltinPlugins) {
   // 部分用户可能混淆 plugins 选项与 vuepress 的 plugins 选项，误传入插件数组
   if (Array.isArray(plugins)) {
@@ -13,6 +18,9 @@ export function detectPlugins(plugins: ThemeBuiltinPlugins) {
 
   // 传入未知的 插件配置项
   if (unsupportedPluginsFields.length) {
-    logger.warn(`\n${colors.green('plugins')} unsupported fields: ${unsupportedPluginsFields.map(field => colors.yellow(`"${field}"`)).join(', ')}, please check your config.`)
+    logger.warn(t('message', {
+      plugins: colors.green('plugins'),
+      unsupported: unsupportedPluginsFields.map(field => colors.magenta(`"${field}"`)).join(', '),
+    }))
   }
 }

theme/src/node/theme.ts

@@ -18,10 +18,11 @@ import { createPages, extendsPageData } from './pages/index.js'
 import { setupPlugins } from './plugins/index.js'
 import { prepareData, watchPrepare } from './prepare/index.js'
 import { prepareThemeData } from './prepare/prepareThemeData.js'
-import { perf, resolve, templates, THEME_NAME } from './utils/index.js'
+import { perf, resolve, setTranslateLang, templates, THEME_NAME } from './utils/index.js'
 
 export function plumeTheme(options: ThemeOptions = {}): Theme {
   return (app) => {
+    setTranslateLang(app.options.lang)
     perf.init(app.env.isDebug)
 
     const { configFile, plugins, themeOptions } = detectThemeOptions(options)

theme/src/node/utils/index.ts

@@ -6,4 +6,5 @@ export * from './logger.js'
 export * from './package.js'
 export * from './path.js'
 export * from './resolveContent.js'
+export * from './translate.js'
 export * from './writeTemp.js'

theme/src/node/utils/translate.ts

@@ -0,0 +1,34 @@
+/**
+ * 简单的内置 中 / 英 翻译转换工具，
+ * 用于在需要 Log 的场景，根据 app.lang 设置输出语言
+ */
+
+import { isEmptyObject } from '@pengzhanbo/utils'
+
+type TranslateLang = 'zh' | 'en'
+type TranslateLocale = Record<string, string>
+
+let lang = 'en'
+
+export function setTranslateLang(current: string) {
+  if (['zh-CN', 'zh', 'zh-Hans', 'zh-Hant'].includes(current)) {
+    lang = 'zh'
+  }
+  else {
+    lang = 'en'
+  }
+}
+
+export function createTranslate<Locale extends TranslateLocale = TranslateLocale>(
+  locales: Record<TranslateLang, Locale>,
+) {
+  return function t(key: keyof Locale, data?: Record<string, string>) {
+    const resolved = locales[lang][key]
+    if (!resolved)
+      return key
+    if (data && !isEmptyObject(data)) {
+      return resolved.replace(/\{\{\s*(\w+)\s*\}\}/g, (_: string, key: string) => data[key] || _)
+    }
+    return resolved
+  }
+}