@varlet/cli 3.2.7 → 3.2.9-alpha.1715269079229

package/README.md

@@ -59,8 +59,9 @@ 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)_ | `- ` |
 | `icons` | Font icon packaging related configurations | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts) _ | `-` |

package/README.zh-CN.md

@@ -59,8 +59,9 @@ 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)_ | `-` |
 | `icons` | 字体图标打包相关配置 | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |

package/lib/client/index.d.ts

@@ -18,4 +18,5 @@ export declare function onThemeChange(cb?: (theme: Theme) => void): void;
 export declare function getSiteStyleVars(theme: Theme): StyleVars;
 export declare function setColorScheme(theme: Theme): void;
 export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;
+export declare function getMobileIndex(): "./mobile" | "./mobile.html";
 export { AppType, StyleProvider };

package/lib/client/index.js

@@ -102,4 +102,8 @@ export function watchTheme(cb, shouldUnmount = true) {
     }
     cb(getBrowserTheme(), 'default');
 }
+export function getMobileIndex() {
+    const isCf = window.location.origin.includes('pages.dev');
+    return isCf ? './mobile' : './mobile.html';
+}
 export { AppType, StyleProvider };

package/lib/node/config/varlet.config.d.ts

@@ -10,6 +10,94 @@ export interface VarletConfigIcons extends VIConfig {
 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`
@@ -53,11 +141,15 @@ export interface VarletConfig {
     analysis?: {
         baidu: string;
     };
-    pc?: Record<string, any>;
-    mobile?: Record<string, any>;
+    pc?: VarletConfigPc;
+    mobile?: VarletConfigMobile;
     copy?: CopyOptions['paths'];
     icons?: VarletConfigIcons;
     esbuild?: VarletConfigEsbuild;
+    bundle?: {
+        external?: string[];
+        globals?: Record<string, string>;
+    };
     /**
      * @default `[]`
      * Directive folder name for component library.

package/lib/node/config/varlet.default.config.js

@@ -17,7 +17,7 @@ export default defineConfig({
     host: 'localhost',
     port: 8080,
     title: 'VARLET',
-    logo: 'https://varletjs.github.io/varlet/varlet_icon.png',
+    logo: 'varlet_icon.png',
     defaultLanguage: 'zh-CN',
     highlight: {
         /**
@@ -421,15 +421,15 @@ export default defineConfig({
             currentVersion: 'v3.x',
             versions: [
                 {
-                    name: 'varlet.gitee.io',
+                    name: 'varlet.pages.dev',
                     items: [
                         {
                             label: 'v3.x',
-                            link: 'https://varletjs.github.io/varlet',
+                            link: 'https://varlet.pages.dev',
                         },
                         {
                             label: 'v2.x',
-                            link: 'https://varletjs.github.io/varlet/v2',
+                            link: 'https://varlet.pages.dev/v2',
                         },
                     ],
                 },
@@ -465,6 +465,10 @@ export default defineConfig({
             defaultFold: false,
             foldHeight: 50,
         },
+        htmlInject: {
+            head: [],
+            body: [],
+        },
     },
     mobile: {
         title,
@@ -484,6 +488,10 @@ export default defineConfig({
                 { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
             ],
         },
+        htmlInject: {
+            head: [],
+            body: [],
+        },
     },
     themeKey: 'VARLET_V3_THEME',
     defaultLightTheme: 'md3LightTheme',

package/lib/node/config/vite.config.d.ts

@@ -1,5 +1,17 @@
 import { InlineConfig } from 'vite';
-import { VarletConfig } from './varlet.config.js';
+import { VarletConfig, type VarletConfigHtmlInject } from './varlet.config.js';
+export declare function getHtmlInject(inject: VarletConfigHtmlInject): {
+    head: {
+        start: (string | undefined)[];
+        end: (string | undefined)[];
+        scriptStart: (string | undefined)[];
+    };
+    body: {
+        start: (string | undefined)[];
+        end: (string | undefined)[];
+        scriptStart: (string | undefined)[];
+    };
+};
 export declare function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig;
 export declare function getBuildConfig(varletConfig: Required<VarletConfig>): InlineConfig;
 export interface BundleBuildOptions {

package/lib/node/config/vite.config.js

@@ -4,6 +4,21 @@ import { get } from 'lodash-es';
 import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import jsx from '@vitejs/plugin-vue-jsx';
+export function getHtmlInject(inject) {
+    const getContent = (injectKey, 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) {
     const defaultLanguage = get(varletConfig, 'defaultLanguage');
     const alias = get(varletConfig, 'alias', {});
@@ -43,9 +58,11 @@ export function getDevConfig(varletConfig) {
                     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}']`),
+                    mobileHtmlInject: getHtmlInject(get(varletConfig, 'mobile.htmlInject')),
                 },
             }),
         ],
@@ -73,6 +90,8 @@ export function getBuildConfig(varletConfig) {
 export function getBundleConfig(varletConfig, buildOptions) {
     const plugins = [];
     const name = get(varletConfig, 'name');
+    const external = get(varletConfig, 'bundle.external', []);
+    const globals = get(varletConfig, 'bundle.globals', {});
     const { fileName, output, format, emptyOutDir, removeEnv } = buildOptions;
     if (format === 'umd') {
         plugins.push(inlineCss({
@@ -99,12 +118,13 @@ export function getBundleConfig(varletConfig, buildOptions) {
                 entry: resolve(ES_DIR, 'index.bundle.mjs'),
             },
             rollupOptions: {
-                external: ['vue'],
+                external: ['vue', ...external],
                 output: {
                     dir: output,
                     exports: 'named',
                     globals: {
                         vue: 'Vue',
+                        ...globals,
                     },
                 },
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.2.7",
+  "version": "3.2.9-alpha.1715269079229",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -65,8 +65,8 @@
     "sharp": "0.31.1",
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
-    "@varlet/shared": "3.2.7",
-    "@varlet/vite-plugins": "3.2.7"
+    "@varlet/shared": "3.2.9-alpha.1715269079229",
+    "@varlet/vite-plugins": "3.2.9-alpha.1715269079229"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -81,9 +81,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.2.7",
-    "@varlet/icons": "3.2.7",
-    "@varlet/touch-emulator": "3.2.7"
+    "@varlet/ui": "3.2.9-alpha.1715269079229",
+    "@varlet/icons": "3.2.9-alpha.1715269079229",
+    "@varlet/touch-emulator": "3.2.9-alpha.1715269079229"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -96,9 +96,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.2.7",
-    "@varlet/icons": "3.2.7",
-    "@varlet/touch-emulator": "3.2.7"
+    "@varlet/ui": "3.2.9-alpha.1715269079229",
+    "@varlet/touch-emulator": "3.2.9-alpha.1715269079229",
+    "@varlet/icons": "3.2.9-alpha.1715269079229"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/index.html

@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <% 
+    pcHtmlInject.head.start.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <meta charset="UTF-8" />
   <title><%= pcTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
@@ -32,6 +37,11 @@
       color: var(--site-config-color-text);
     }
   </style>
+  <% 
+    pcHtmlInject.head.scriptStart.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <script>
     if ('<%= baidu %>') {
       var _hmt = _hmt || [];
@@ -57,10 +67,29 @@
       }
     })
   </script>
+  <% 
+    pcHtmlInject.head.end.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
 </head>
 <body>
+<% 
+  pcHtmlInject.body.start.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 <div id="app"></div>
-
+<% 
+  pcHtmlInject.body.scriptStart.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 <script type="module" src="/pc/main.ts"></script>
+<% 
+  pcHtmlInject.body.end.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 </body>
 </html>

package/site/mobile/App.vue

@@ -89,6 +89,7 @@ import {
   watchLang,
   watchTheme,
   setTheme,
+  getMobileIndex,
   type Theme,
 } from '@varlet/cli/client'
 import { removeEmpty, inIframe, isPhone } from '../utils'
@@ -114,7 +115,7 @@ export default defineComponent({
     const changeLanguage = (lang: string) => {
       language.value = lang
       showMenu.value = false
-      window.location.href = `./mobile.html#${route.path}?language=${language.value}&replace=${route.query.replace}`
+      window.location.href = `${getMobileIndex()}#${route.path}?language=${language.value}&replace=${route.query.replace}`
 
       if (!isPhone() && inIframe()) {
         ;(window.top as any).scrollToMenu(redirect.slice(1))
@@ -122,7 +123,7 @@ export default defineComponent({
     }
 
     const back = () => {
-      window.location.href = `./mobile.html#${redirect}?language=${language.value}&replace=${redirect.slice(1)}`
+      window.location.href = `${getMobileIndex()}#${redirect}?language=${language.value}&replace=${redirect.slice(1)}`
 
       if (!isPhone() && inIframe()) {
         ;(window.top as any).scrollToMenu(redirect.slice(1))

package/site/mobile.html

@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <% 
+    mobileHtmlInject.head.start.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <meta charset="UTF-8" />
   <title><%= mobileTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
@@ -27,6 +32,11 @@
       font-display: swap;
     }
   </style>
+  <% 
+    mobileHtmlInject.head.scriptStart.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
   <script>
     if ('<%= baidu %>') {
       var _hmt = _hmt || [];
@@ -38,10 +48,29 @@
       })()
     }
   </script>
+  <% 
+    mobileHtmlInject.head.end.forEach(function(tag) { %>
+      <%- tag %>
+    <% });
+  %>
 </head>
 <body>
+<% 
+  mobileHtmlInject.body.start.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 <div id="app"></div>
-
+<% 
+  mobileHtmlInject.body.scriptStart.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 <script type="module" src="/mobile/main.ts"></script>
+<% 
+  mobileHtmlInject.body.end.forEach(function(tag) { %>
+    <%- tag %>
+  <% });
+%>
 </body>
 </html>

package/site/pc/App.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import config from '@config'
 import { defineComponent, onMounted, ref } from 'vue'
-import { getPCLocationInfo } from '@varlet/cli/client'
+import { getPCLocationInfo, getMobileIndex } from '@varlet/cli/client'
 import { isPhone } from '../utils'
 import { get } from 'lodash-es'
 
@@ -14,7 +14,7 @@ export default defineComponent({
       const { language, menuName } = getPCLocationInfo()
 
       if (isPhone() && useMobile.value) {
-        window.location.href = `./mobile.html#/${menuName}?language=${language || defaultLanguage}&platform=mobile`
+        window.location.href = `${getMobileIndex()}#/${menuName}?language=${language || defaultLanguage}&platform=mobile`
         return
       }
     }

package/site/pc/components/AppMobile.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="varlet-site-mobile varlet-site-mobile--375">
     <div class="varlet-site-mobile-content">
-      <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}${hash ? `#${hash}` : ''}`"></iframe>
+      <iframe id="mobile" :src="`${getMobileIndex()}#/${componentName}?language=${language}&platform=pc&replace=${replace}${hash ? `#${hash}` : ''}`"></iframe>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { getMobileIndex } from '@varlet/cli/client'
+
 export default {
   name: 'AppMobile',
   props: {
@@ -22,6 +24,11 @@ export default {
     hash: {
       type: String
     }
+  },
+  setup() {
+    return {
+      getMobileIndex
+    }
   }
 }
 </script>