refactor(cli): improve defineConfig types and refactor htmlInject api

Aybrea · May 9, 2024 · 45e16b8 · 45e16b8
1 parent 31babaf
commit 45e16b8
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 80 deletions.
diff --git a/packages/varlet-cli/README.md b/packages/varlet-cli/README.md
@@ -59,8 +59,8 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `md3DarkTheme` | md3 dark mode document theme | _Record<string, any>_ | `-` |
 | `highlight` | Document code snippet style related | _{ style: string }_ | `-` |
 | `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
-| `pc` | PC side document structure configuration | _Record<string, any>_ | `-` |
-| `mobile` | Mobile document structure configuration | _Record<string, any>_ | `-` |
+| `pc` | PC side document structure configuration | _[VarletConfigPc](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `mobile` | Mobile document structure configuration | _[VarletConfigMobile](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 | `bundle` | Bundle output options | _{ external: string[], globals: Record<string, string> }_ | `-` |
 | `directives` | Component library directive folder name | _string[]_ | `[]` |
 | `copy` | Copy file configuration | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `- ` |

diff --git a/packages/varlet-cli/README.zh-CN.md b/packages/varlet-cli/README.zh-CN.md
@@ -59,8 +59,8 @@ varlet-cli gen
 | `md3DarkTheme` | md3 暗黑模式文档主题 | _Record<string, any>_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
 | `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
-| `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
-| `mobile` | mobile 端文档结构配置 | _Record<string, any>_ | `-` |
+| `pc` | pc 端文档结构配置 | _[VarletConfigPc](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `mobile` | mobile 端文档结构配置 | _[VarletConfigMobile](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 | `bundle` | 组件库编译的捆绑产物配置 | _{ external: string[], globals: Record<string, string> }_ | `-` |
 | `directives` | 组件库指令文件夹名称 | _string[]_ | `[]` |
 | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |

diff --git a/packages/varlet-cli/site/index.html b/packages/varlet-cli/site/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <% if (pcHtmlHeadStart.length > 0) {
-    pcHtmlHeadStart.forEach(function(tag) { %>
+  <% 
+    pcHtmlInject.head.start.forEach(function(tag) { %>
       <%- tag %>
     <% });
-  } %>
+  %>
   <meta charset="UTF-8" />
   <title><%= pcTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
@@ -37,6 +37,11 @@
       color: var(--site-config-color-text);
     }
   </style>
+  <% 
+    pcHtmlInject.head.scriptStart.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <script>
     if ('<%= baidu %>') {
       var _hmt = _hmt || [];
@@ -62,29 +67,29 @@
       }
     })
   </script>
-  <% if (pcHtmlHeadEnd.length > 0) {
-    pcHtmlHeadEnd.forEach(function(tag) { %>
+  <% 
+    pcHtmlInject.head.end.forEach(function(tag) { %>
       <%- tag %>
     <% });
-  } %>
+  %>
 </head>
 <body>
-<% if (pcHtmlBodyStart.length > 0) {
-  pcHtmlBodyStart.forEach(function(tag) { %>
+<% 
+  pcHtmlInject.body.start.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 <div id="app"></div>
-<% if (pcHtmlBodyScriptStart.length > 0) {
-  pcHtmlBodyScriptStart.forEach(function(tag) { %>
+<% 
+  pcHtmlInject.body.scriptStart.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 <script type="module" src="/pc/main.ts"></script>
-<% if (pcHtmlBodyEnd.length > 0) {
-  pcHtmlBodyEnd.forEach(function(tag) { %>
+<% 
+  pcHtmlInject.body.end.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 </body>
 </html>
diff --git a/packages/varlet-cli/site/mobile.html b/packages/varlet-cli/site/mobile.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <% if (mobileHtmlHeadStart.length > 0) {
-    mobileHtmlHeadStart.forEach(function(tag) { %>
+  <% 
+    mobileHtmlInject.head.start.forEach(function(tag) { %>
       <%- tag %>
     <% });
-  } %>
+  %>
   <meta charset="UTF-8" />
   <title><%= mobileTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
@@ -32,6 +32,11 @@
       font-display: swap;
     }
   </style>
+  <% 
+    mobileHtmlInject.head.scriptStart.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <script>
     if ('<%= baidu %>') {
       var _hmt = _hmt || [];
@@ -43,29 +48,29 @@
       })()
     }
   </script>
-  <% if (mobileHtmlHeadEnd.length > 0) {
-    mobileHtmlHeadEnd.forEach(function(tag) { %>
+  <% 
+    mobileHtmlInject.head.end.forEach(function(tag) { %>
       <%- tag %>
     <% });
-  } %>
+  %>
 </head>
 <body>
-<% if (mobileHtmlBodyStart.length > 0) {
-  mobileHtmlBodyStart.forEach(function(tag) { %>
+<% 
+  mobileHtmlInject.body.start.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 <div id="app"></div>
-<% if (mobileHtmlBodyScriptStart.length > 0) {
-  mobileHtmlBodyScriptStart.forEach(function(tag) { %>
+<% 
+  mobileHtmlInject.body.scriptStart.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 <script type="module" src="/mobile/main.ts"></script>
-<% if (mobileHtmlBodyEnd.length > 0) {
-  mobileHtmlBodyEnd.forEach(function(tag) { %>
+<% 
+  mobileHtmlInject.body.end.forEach(function(tag) { %>
     <%- tag %>
   <% });
-} %>
+%>
 </body>
 </html>
diff --git a/packages/varlet-cli/src/node/config/varlet.config.ts b/packages/varlet-cli/src/node/config/varlet.config.ts
@@ -21,6 +21,96 @@ export interface VarletConfigEsbuild {
   target?: string | string[]
 }
 
+export interface VarletConfigHtmlInjectPoint {
+  position?: 'start' | 'end' | 'script-start'
+  content?: string
+}
+
+export interface VarletConfigHtmlInject {
+  head?: VarletConfigHtmlInjectPoint[]
+  body?: VarletConfigHtmlInjectPoint[]
+}
+
+export interface VarletConfigPcMenu {
+  text: Record<string, string>
+  type: number
+  doc?: string
+}
+
+export interface VarletConfigPcHeader {
+  i18n?: Record<string, string>
+  currentVersion?: string
+  github?: string
+  changelog?: string
+  playground?: string
+  themes?: Record<string, string>[]
+  versions?: {
+    name: string
+    items?: { label?: string; link?: string }[]
+  }[]
+}
+
+export interface VarletConfigMobileHeader {
+  i18n?: Record<string, string>
+  github?: string
+  themes?: Record<string, string>[]
+}
+
+export interface VarletConfigPcIndexPage {
+  description?: Record<string, string>
+  started?: Record<string, string>
+  viewOnGithub?: Record<string, string>
+  features?: { name: Record<string, string>; description: Record<string, string> }[]
+  teamMembers?: {
+    label: Record<string, string>
+    members: {
+      name?: Record<string, string>
+      title?: Record<string, string>
+      description?: Record<string, string>
+      avatar?: string
+      github?: string
+      twitter?: string
+    }[]
+  }
+  contributors?: {
+    label?: Record<string, string>
+    link?: string
+    image?: string
+  }
+  sponsors?: {
+    label?: Record<string, string>
+    link?: string
+    image?: string
+  }
+  license?: Record<string, string>
+  copyright?: Record<string, string>
+}
+
+export interface VarletConfigPc {
+  title?: Record<string, string>
+  description?: Record<string, string>
+  keywords?: Record<string, string>
+  redirect?: string
+  clipboard?: Record<string, string>
+  indexPage?: VarletConfigPcIndexPage
+  header?: VarletConfigPcHeader
+  menu?: VarletConfigPcMenu[]
+  htmlInject?: VarletConfigHtmlInject
+  fold?: {
+    defaultFold?: boolean
+    foldHeight?: number
+  }
+}
+
+export interface VarletConfigMobile {
+  title?: Record<string, string>
+  description?: Record<string, string>
+  keywords?: Record<string, string>
+  redirect?: string
+  header?: VarletConfigMobileHeader
+  htmlInject?: VarletConfigHtmlInject
+}
+
 export interface VarletConfig {
   /**
    * @default `Varlet`
@@ -60,8 +150,8 @@ export interface VarletConfig {
   defaultDarkTheme?: 'darkTheme' | 'md3DarkTheme'
   highlight?: { style: string }
   analysis?: { baidu: string }
-  pc?: Record<string, any>
-  mobile?: Record<string, any>
+  pc?: VarletConfigPc
+  mobile?: VarletConfigMobile
   copy?: CopyOptions['paths']
   icons?: VarletConfigIcons
   esbuild?: VarletConfigEsbuild

diff --git a/packages/varlet-cli/src/node/config/varlet.default.config.ts b/packages/varlet-cli/src/node/config/varlet.default.config.ts
@@ -473,6 +473,10 @@ export default defineConfig({
       defaultFold: false,
       foldHeight: 50,
     },
+    htmlInject: {
+      head: [],
+      body: [],
+    },
   },
   mobile: {
     title,
@@ -492,6 +496,10 @@ export default defineConfig({
         { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
       ],
     },
+    htmlInject: {
+      head: [],
+      body: [],
+    },
   },
   themeKey: 'VARLET_V3_THEME',
   defaultLightTheme: 'md3LightTheme',

diff --git a/packages/varlet-cli/src/node/config/vite.config.ts b/packages/varlet-cli/src/node/config/vite.config.ts
@@ -14,10 +14,28 @@ import { markdown, html, inlineCss, copy } from '@varlet/vite-plugins'
 import { InlineConfig } from 'vite'
 import { get } from 'lodash-es'
 import { resolve } from 'path'
-import { VarletConfig } from './varlet.config.js'
+import { VarletConfig, type VarletConfigHtmlInject, type VarletConfigHtmlInjectPoint } from './varlet.config.js'
 import vue from '@vitejs/plugin-vue'
 import jsx from '@vitejs/plugin-vue-jsx'
 
+export function getHtmlInject(inject: VarletConfigHtmlInject) {
+  const getContent = (injectKey: keyof VarletConfigHtmlInject, position: VarletConfigHtmlInjectPoint['position']) =>
+    inject[injectKey]?.filter((point) => point.position === position).map((point) => point.content) ?? []
+
+  return {
+    head: {
+      start: getContent('head', 'start'),
+      end: getContent('head', 'end'),
+      scriptStart: getContent('head', 'script-start'),
+    },
+    body: {
+      start: getContent('body', 'start'),
+      end: getContent('body', 'end'),
+      scriptStart: getContent('body', 'script-start'),
+    },
+  }
+}
+
 export function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig {
   const defaultLanguage = get(varletConfig, 'defaultLanguage')
   const alias = get(varletConfig, 'alias', {})
@@ -29,43 +47,6 @@ export function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig
     return resolveAlias
   }, {} as Record<string, string>)
 
-  const resolveCustomHtml = () => {
-    const transformKey = (baseKey: string, suffix: 'Start' | 'End' | 'ScriptStart') =>
-      `${baseKey.replace(/\.([a-z])/g, (_, group) => group.toUpperCase())}${suffix}`
-
-    const resolveContent = (type: string) => {
-      const contentData: Array<{ position: string; content: string }> = get(varletConfig, type, {})
-
-      const resolveContentByPosition = (position: 'start' | 'end' | 'script-start') =>
-        Object.values(contentData)
-          .filter((item) => item.position === position)
-          .map((item) => item.content)
-
-      return {
-        [transformKey(type, 'Start')]: resolveContentByPosition('start'),
-        [transformKey(type, 'End')]: resolveContentByPosition('end'),
-        ...(type.endsWith('.body')
-          ? {
-              [transformKey(type, 'ScriptStart')]: resolveContentByPosition('script-start'),
-            }
-          : {}),
-      }
-    }
-
-    const resolvePositions = (keyName: string) => {
-      const headResults = resolveContent(`${keyName}.head`)
-      const bodyResults = resolveContent(`${keyName}.body`)
-
-      return { ...headResults, ...bodyResults }
-    }
-
-    const sections = ['pc.html', 'mobile.html']
-    return sections.reduce((acc, section) => {
-      const results = resolvePositions(section)
-      return { ...acc, ...results }
-    }, {})
-  }
-
   return {
     root: SITE_DIR,
 
@@ -105,10 +86,11 @@ export function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig
           pcTitle: get(varletConfig, `pc.title['${defaultLanguage}']`),
           pcDescription: get(varletConfig, `pc.description['${defaultLanguage}']`),
           pcKeywords: get(varletConfig, `pc.keywords['${defaultLanguage}']`),
+          pcHtmlInject: getHtmlInject(get(varletConfig, 'pc.htmlInject')),
           mobileTitle: get(varletConfig, `mobile.title['${defaultLanguage}']`),
           mobileDescription: get(varletConfig, `mobile.description['${defaultLanguage}']`),
           mobileKeywords: get(varletConfig, `mobile.keywords['${defaultLanguage}']`),
-          ...resolveCustomHtml(),
+          mobileHtmlInject: getHtmlInject(get(varletConfig, 'mobile.htmlInject')),
         },
       }),
     ],

diff --git a/packages/varlet-ui/docs/cli.en-US.md b/packages/varlet-ui/docs/cli.en-US.md
@@ -59,8 +59,8 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `md3DarkTheme` | md3 dark mode document theme | _Record<string, any>_ | `-` |
 | `highlight` | Document code snippet style related | _{ style: string }_ | `-` |
 | `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
-| `pc` | PC side document structure configuration | _Record<string, any>_ | `-` |
-| `mobile` | Mobile document structure configuration | _Record<string, any>_ | `-` |
+| `pc` | PC side document structure configuration | _[VarletConfigPc](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `mobile` | Mobile document structure configuration | _[VarletConfigMobile](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 | `bundle` | Bundle output options | _{ external: string[], globals: Record<string, string> }_ | `-` |
 | `directives` | Component library directive folder name | _string[]_ | `[]` |
 | `copy` | Copy file configuration | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `- ` |

diff --git a/packages/varlet-ui/docs/cli.zh-CN.md b/packages/varlet-ui/docs/cli.zh-CN.md
@@ -59,8 +59,8 @@ varlet-cli gen
 | `md3DarkTheme` | md3 暗黑模式文档主题 | _Record<string, any>_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
 | `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
-| `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
-| `mobile` | mobile 端文档结构配置 | _Record<string, any>_ | `-` |
+| `pc` | pc 端文档结构配置 | _[VarletConfigPc](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `mobile` | mobile 端文档结构配置 | _[VarletConfigMobile](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 | `bundle` | 组件库编译的捆绑产物配置 | _{ external: string[], globals: Record<string, string> }_ | `-` |
 | `directives` | 组件库指令文件夹名称 | _string[]_ | `[]` |
 | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |