@varlet/cli 2.7.1 → 2.7.3-alpha.1675176726761

package/README.md

@@ -1,65 +1,70 @@
-# @varlet/cli
+# Components Library Tools
 
-开箱即用的 `Vue3组件库` 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题
+### Intro
 
-### 特性
-- 📦  开箱即用的组件库开发环境
-- 📦  开箱即用的组件库编译工具，支持导出 `esm`, `cjs`, `umd` 三种模块代码
-- 🛠️  基于配置文件的组件库文档站点，支持百度统计和主题定制
-- 🛠️  支持 `sfc` 和 `tsx` 两种风格的组件库编写风格
-- 📦  开箱即用的代码检查工具
-- 📦  开箱即用的单元测试工具
-- 📦  开箱即用的代码发布工具,同时发布到 `npm` 和 `github`, 并自动生成更新日志
-- 💪  支持 `Typescript`
-- 💪  支持 `暗黑模式`
-- 🌍  支持 `国际化`
-- 🚀  基于 `pnpm`
+The out-of-the-box `Vue3 component library` rapid prototyping tool provides a series of commands and tools to solve the problem of component library development.
 
-### 快速开始
+### Features
 
-`@varlet/cli` 内置了 `sfc` 和 `tsx` 两种风格的组件库项目模板，可以通过 `gen` 命令直接生成。
-方便您直接进入组件库开发。
+- 📦  Out-of-the-box component library development environment
+- 📦  An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes
+- 🛠️  Configuration file-based component library documentation site, support Baidu statistics and theme customization
+- 🛠️  Supports both `sfc` and `tsx` styles for writing component libraries
+- 📦  Out-of-the-box code inspection tool
+- 📦  Out-of-the-box unit testing tools
+- 📦  Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs
+- 💪  Support for `VSCode` extension development
+- 💪  Support `build svg to web fonts`
+- 💪  Support for `Typescript`
+- 💪  Support `Dark Mode`
+- 🌍  Support `Internationalization`
+- 🚀  Based on `pnpm`
+
+### Quickstart
+
+`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.
+It is convenient for you to directly enter the component library development.
 
 ```shell
-# 安装命令行工具
+# playground-ignore
 pnpm add @varlet/cli -g
 varlet-cli gen
 ```
 
-然后通过简单修改一些组件库模板的基础信息，就可以开始组件库的开发了
-
-## 高级定制
-
-### 配置文件
-
-项目根目录下的 `varlet.config.mjs` 用来管理整个组件库项目的具体细节。
-默认配置可查阅 [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts)。
-也可以参考 `@varlet/ui` 的 [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs)
-
-| 参数 | 说明 | 类型 | 默认值 |
-| ----- | -------------- | -------- | ---------- |
-| `name` | 组件库全名，会作为包名 | _string_ | `Varlet` |
-| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
-| `host` | 开发服务器主机 | _string_ | `localhost` |
-| `port` | 开发服务器端口 | _number_ | `8080` |
-| `title` | 文档中组件库的标题 | _string_ | `VARLET` |
-| `logo` | 文档中组件库的logo | _string_ | `-` |
-| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
-| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
-| `lightTheme` | 亮色模式文档主题 | _Record<string, any>_ | `-` |
-| `darkTheme` | 暗黑模式文档主题 | _Record<string, any>_ | `-` |
-| `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
-| `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
-| `pc` | pc端文档结构配置 | _Record<string, any>_ | `-` |
-| `mobile` | mobile端文档结构配置 | _Record<string, any>_ | `-` |
-| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |
-
-### 自定义页面
-
-如果想在组件库中插入其他页面，可以在项目根目录下的创建 `pages` 文件夹编写 vue 组件， 用来生成其他的页面。
-目录结构如下：
+## Advanced customization
+
+### Configuration file
+
+The `varlet.config.mjs` in the project root directory is used to manage the specific details of the entire component library project.
+The default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts).
+Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).
+
+| Parameter | Description | Type | Default |
+| -- | -------------- | -------- | ---------- |
+| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
+| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
+| `host` | Development server host | _number_ | `localhost` |
+| `port` | Development server port | _number_ | `8080` |
+| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
+| `logo` | The logo of the component library in the documentation | _string_ | `-` |
+| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
+| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
+| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
+| `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
+| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
+| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
+| `copy` | Copy file options | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
+| `icons` | Font icon packaging related configuration | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+
+### Custom pages
+
+If you want to insert other pages into the component library, you can create a `pages` folder in the project root directory to write a vue component to generate other pages.
+The directory structure is as follows:
 
 ```text
+// playground-ignore
 |-- varlet-ui
   |-- src
   |-- docs
@@ -75,122 +80,157 @@ varlet-cli gen
         |-- zh-CN.ts
         |-- en-US.ts
       |-- index.vue
+      
 ```
 
-生成的路由如下：
+The resulting route is as follows:
 
 ```text
+// playground-ignore
 /zh-CN/sponsor
 /en-US/contributor
 /zh-CN/changelog
 /en-US/changelog
 ```
 
-### 命令相关
+### Command related
 
-#### 启动开发服务器
+#### Start the development server
 
 ```shell
+# playground-ignore
 varlet-cli dev
 ```
 
-#### 构建文档站点
+#### Build a documentation site
 
 ```shell
+# playground-ignore
 varlet-cli build
 ```
 
-#### 预览文档站点
+#### Preview documentation site
 
 ```shell
+# playground-ignore
 varlet-cli preview
 ```
 
-#### 构建组件库代码
+#### Compile component library
 
 ```shell
+# playground-ignore
 varlet-cli compile
 ```
 
-#### 执行所有的单元测试
+#### Run VSCode extension development environment
+
+```shell
+# playground-ignore
+varlet-cli dev:extension
+```
+
+#### Build VSCode extension for production
+
+```shell
+# playground-ignore
+varlet-cli build:extension
+```
+
+#### Build svg to web fonts
+
+```shell
+# playground-ignore
+varlet-cli build:icons
+```
+
+#### Execute all unit tests
 
 ```shell
+# playground-ignore
 varlet-cli test
 ```
 
-#### 以 watch 模式执行单元测试
+#### Execute unit tests in watch mode
 
 ```shell
+# playground-ignore
 varlet-cli test -w
 or
 varlet-cli test -wa
 ```
 
-#### 检查代码
+#### Lint the code
 
 ```shell
+# playground-ignore
 varlet-cli lint
 ```
 
-#### 校验提交信息
+#### Lint git commit message
 
 ```shell
+# playground-ignore
 varlet-cli commit-lint
 ```
 
-#### 生成更新日志
+#### Generate changelog
 
 ```shell
+# playground-ignore
 varlet-cli changelog
 ```
 
-#### 发布组件库
+#### Release component library
 
 ```shell
+# playground-ignore
 varlet-cli release
 ```
 
-#### 生成一个项目模板
+#### Generate a project template
 
 ```shell
+# playground-ignore
 varlet-cli gen
 
 # Options
 -n
 --name
-  项目名
+  project name
 -s
 --sfc
-  生成 sfc 风格的项目模板
+  Generate sfc-style project templates
 -t
 --tsx
-  生成 tsx 格式项目
+  Generate tsx-style project templates
 -l
 --locale
-  需要支持国际化
+  Need to support internationalization
 ```
 
-#### 创建组件模板文件
+#### Create a component template file
 
 ```shell
+# playground-ignore
 varlet-cli create
 
 # Options
 -n
 --name
-  组件名
+  project name
 -s
 --sfc
-  生成 sfc 风格的组件
+  Generate sfc-style component
 -t
 --tsx
-  生成 tsx 风格的文件
+  Generate tsx-style component
 -l
 --locale
-  需要支持国际化
+  Need to support internationalization
 ```
 
-### 发布前注意
+### Note before publish
 
-1. `npm` 的仓库源必须指向 `npm` 官方镜像
-2. 执行 `npm login` 进行登录
+- 1.`npm` repository registry must set to `npm` official mirror
+- 2.Execute `npm login` to log in

package/README.zh-CN.md

@@ -0,0 +1,235 @@
+# 组件库快速成型工具
+
+### 介绍
+
+开箱即用的 `Vue3组件库` 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题。
+
+### 特性
+
+- 📦  开箱即用的组件库开发环境
+- 📦  开箱即用的组件库编译工具，支持导出 `esm`, `cjs`, `umd` 三种模块代码
+- 🛠️  基于配置文件的组件库文档站点，支持百度统计和主题定制
+- 🛠️  支持 `sfc` 和 `tsx` 两种风格的组件库编写风格
+- 📦  开箱即用的代码检查工具
+- 📦  开箱即用的单元测试工具
+- 📦  开箱即用的代码发布工具,同时发布到 `npm` 和 `github`, 并自动生成更新日志
+- 💪  支持 `VSCode` 插件开发
+- 💪  支持 `字体图标打包`
+- 💪  支持 `Typescript`
+- 💪  支持 `暗黑模式`
+- 🌍  支持 `国际化`
+- 🚀  基于 `pnpm`
+
+### 快速开始
+
+`@varlet/cli` 内置了 `sfc` 和 `tsx` 两种风格的组件库项目模板，可以通过 `gen` 命令直接生成。
+方便您直接进入组件库开发。
+
+```shell
+# playground-ignore
+pnpm add @varlet/cli -g
+varlet-cli gen
+```
+
+## 高级定制
+
+### 配置文件
+
+项目根目录下的 `varlet.config.mjs` 用来管理整个组件库项目的具体细节。
+默认配置可查阅 [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts)。
+也可以参考 `@varlet/ui` 的 [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs)。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -- | -------------- | -------- | ---------- |
+| `name` | 组件库全名，会作为包名 | _string_ | `Varlet` |
+| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
+| `host` | 开发服务器主机 | _number_ | `localhost` |
+| `port` | 开发服务器端口 | _number_ | `8080` |
+| `title` | 文档中组件库的标题 | _string_ | `VARLET` |
+| `logo` | 文档中组件库的logo | _string_ | `-` |
+| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
+| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
+| `lightTheme` | 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `darkTheme` | 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
+| `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
+| `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
+| `mobile` | mobile 端文档结构配置 | _Record<string, any>_ | `-` |
+| `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)_ | `-` |
+
+### 自定义页面
+
+如果想在组件库中插入其他页面，可以在项目根目录下的创建 `pages` 文件夹编写 vue 组件， 用来生成其他的页面。
+目录结构如下：
+
+```text
+// playground-ignore
+|-- varlet-ui
+  |-- src
+  |-- docs
+  |-- pages
+    |-- sponsor
+      |-- index.vue
+    |-- contributor
+      |-- locale
+        |-- en-US.ts
+      |-- index.vue
+    |-- changelog
+      |-- locale
+        |-- zh-CN.ts
+        |-- en-US.ts
+      |-- index.vue
+```
+
+生成的路由如下：
+
+```text
+// playground-ignore
+/zh-CN/sponsor
+/en-US/contributor
+/zh-CN/changelog
+/en-US/changelog
+```
+
+### 命令相关
+
+#### 启动开发服务器
+
+```shell
+# playground-ignore
+varlet-cli dev
+```
+
+#### 构建文档站点
+
+```shell
+# playground-ignore
+varlet-cli build
+```
+
+#### 预览文档站点
+
+```shell
+# playground-ignore
+varlet-cli preview
+```
+
+#### 构建组件库
+
+```shell
+# playground-ignore
+varlet-cli compile
+```
+
+#### 启动 VSCode 插件开发环境
+
+```shell
+# playground-ignore
+varlet-cli dev:extension
+```
+
+#### 构建 VSCode 插件
+
+```shell
+# playground-ignore
+varlet-cli build:extension
+```
+
+#### 打包字体图标
+
+```shell
+# playground-ignore
+varlet-cli build:icons
+```
+
+#### 执行所有的单元测试
+
+```shell
+# playground-ignore
+varlet-cli test
+```
+
+#### 以 watch 模式执行单元测试
+
+```shell
+# playground-ignore
+varlet-cli test -w
+or
+varlet-cli test -wa
+```
+
+#### 检查代码
+
+```shell
+# playground-ignore
+varlet-cli lint
+```
+
+#### 校验提交信息
+
+```shell
+# playground-ignore
+varlet-cli commit-lint
+```
+
+#### 生成更新日志
+
+```shell
+# playground-ignore
+varlet-cli changelog
+```
+
+#### 发布组件库
+
+```shell
+# playground-ignore
+varlet-cli release
+```
+
+#### 生成一个项目模板
+
+```shell
+# playground-ignore
+varlet-cli gen
+
+# Options
+-n
+--name
+  项目名
+-s
+--sfc
+  生成 sfc 风格的项目模板
+-t
+--tsx
+  生成 tsx 格式项目
+-l
+--locale
+  需要支持国际化
+```
+
+#### 创建组件模板文件
+
+```shell
+# playground-ignore
+varlet-cli create
+
+# Options
+-n
+--name
+  组件名
+-s
+--sfc
+  生成 sfc 风格的组件
+-t
+--tsx
+  生成 tsx 风格的文件
+-l
+--locale
+  需要支持国际化
+```
+
+### 发布前注意
+
+- 1.`npm` 的仓库源必须指向 `npm` 官方镜像
+- 2.执行 `npm login` 进行登录

package/lib/node/bin.js

@@ -18,6 +18,13 @@ program
     const { build } = await import('./commands/build.js');
     return build();
 });
+program
+    .command('dev:vite')
+    .description('Use vite start server for development')
+    .action(async () => {
+    const { vite } = await import('./commands/vite.js');
+    return vite('dev');
+});
 program
     .command('build:vite')
     .description('Use vite build app for production')
@@ -26,11 +33,25 @@ program
     return vite('build');
 });
 program
-    .command('dev:vite')
-    .description('Use vite start server for development')
+    .command('dev:extension')
+    .description('Run VSCode extension development environment')
     .action(async () => {
-    const { vite } = await import('./commands/vite.js');
-    return vite('dev');
+    const { extension } = await import('./commands/extension.js');
+    return extension('dev');
+});
+program
+    .command('build:extension')
+    .description('Build VSCode extension for production')
+    .action(async () => {
+    const { extension } = await import('./commands/extension.js');
+    return extension('build');
+});
+program
+    .command('build:icons')
+    .description('Build icons')
+    .action(async () => {
+    const { icons } = await import('./commands/icons.js');
+    return icons();
 });
 program
     .command('preview')

package/lib/node/commands/changelog.d.ts

@@ -1,6 +1,5 @@
-interface ChangelogCommandOptions {
+export interface ChangelogCommandOptions {
     file?: string;
     releaseCount?: number;
 }
 export declare function changelog({ releaseCount, file }?: ChangelogCommandOptions): Promise<void>;
-export {};

package/lib/node/commands/create.d.ts

@@ -1,8 +1,7 @@
-interface CreateCommandOptions {
+export interface CreateCommandOptions {
     name?: string;
     locale?: boolean;
     sfc?: boolean;
     tsx?: boolean;
 }
 export declare function create(options: CreateCommandOptions): Promise<void>;
-export {};

package/lib/node/commands/extension.d.ts

@@ -0,0 +1,3 @@
+import { type ExtensionMode } from '../config/vite.config.js';
+export declare type ExtensionCommandMode = ExtensionMode;
+export declare function extension(mode: ExtensionCommandMode): Promise<void>;

package/lib/node/commands/extension.js

@@ -0,0 +1,5 @@
+import { build } from 'vite';
+import { getExtensionConfig } from '../config/vite.config.js';
+export async function extension(mode) {
+    await build(getExtensionConfig(mode));
+}

package/lib/node/commands/gen.d.ts

@@ -1,8 +1,7 @@
-interface GenCommandOptions {
+export interface GenCommandOptions {
     name?: string;
     i18n?: boolean;
     sfc?: boolean;
     tsx?: boolean;
 }
 export declare function gen(options: GenCommandOptions): Promise<void>;
-export {};

package/lib/node/commands/icons.d.ts

@@ -0,0 +1 @@
+export declare function icons(): Promise<void>;

package/lib/node/commands/icons.js

@@ -0,0 +1,105 @@
+import fse from 'fs-extra';
+import sharp from 'sharp';
+import webfont from 'webfont';
+import logger from '../shared/logger.js';
+import { parse, resolve } from 'path';
+import { ICONS_DIST_DIR, ICONS_CSS_DIR, ICONS_PNG_DIR, ICONS_FONTS_DIR, ICONS_SVG_DIR } from '../shared/constant.js';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { get } from 'lodash-es';
+const { removeSync, ensureDir, writeFile, readdirSync } = fse;
+async function removeDir() {
+    removeSync(ICONS_DIST_DIR);
+    await Promise.all([ensureDir(ICONS_FONTS_DIR), ensureDir(ICONS_CSS_DIR), ensureDir(ICONS_PNG_DIR)]);
+}
+async function buildPNG(svgFiles) {
+    await Promise.all(svgFiles.map((svg) => {
+        return new Promise((done) => {
+            const { name } = parse(svg);
+            sharp(resolve(ICONS_SVG_DIR, svg))
+                .resize({ height: 100 })
+                .toBuffer()
+                .then((buffer) => {
+                sharp({
+                    create: {
+                        width: 100,
+                        height: 100,
+                        channels: 4,
+                        background: '#4a7afe',
+                    },
+                })
+                    .composite([
+                    {
+                        input: buffer,
+                        blend: 'dest-in',
+                    },
+                ])
+                    .png()
+                    .toFile(resolve(ICONS_PNG_DIR, `${name}.png`))
+                    .then(() => {
+                    done();
+                });
+            });
+        });
+    }));
+}
+function buildWebFont(name) {
+    return webfont.default({
+        files: `${ICONS_SVG_DIR}/*.svg`,
+        fontName: name,
+        formats: ['ttf'],
+        fontHeight: 512,
+        descent: 64,
+    });
+}
+export async function icons() {
+    const varletConfig = await getVarletConfig();
+    const { name, namespace, base64, publicPath, fontFamilyClassName, fontWeight, fontStyle } = get(varletConfig, 'icons');
+    await removeDir();
+    const svgFiles = readdirSync(ICONS_SVG_DIR);
+    const [{ ttf }] = await Promise.all([buildWebFont(name), buildPNG(svgFiles)]);
+    const icons = svgFiles.map((svgName) => {
+        const i = svgName.indexOf('-');
+        const extIndex = svgName.lastIndexOf('.');
+        return {
+            name: svgName.slice(i + 1, extIndex),
+            pointCode: svgName.slice(1, i),
+        };
+    });
+    const iconNames = icons.map((iconName) => `  '${iconName.name}'`);
+    const indexTemplate = `\
+export const pointCodes = {
+  ${icons.map(({ pointCode, name }) => `'${name}': '${pointCode}'`).join(',\n  ')}
+}
+
+export default [
+${iconNames.join(',\n')}
+]
+`;
+    const cssTemplate = `\
+@font-face {
+  font-family: "${name}";
+  src: url("${base64 ? `data:font/truetype;charset=utf-8;base64,${ttf.toString('base64')}` : `${publicPath}${name}-webfont.ttf`}") format("truetype");
+  font-weight: ${fontWeight};
+  font-style: ${fontStyle};
+}
+
+.${fontFamilyClassName} {
+  font-family: "${name}";
+}
+
+${icons
+        .map((icon) => {
+        return `.${namespace}-${icon.name}::before {
+  content: "\\${icon.pointCode}";
+}`;
+    })
+        .join('\n\n')}
+`;
+    await Promise.all([
+        writeFile(resolve(ICONS_FONTS_DIR, `${name}-webfont.ttf`), ttf),
+        writeFile(resolve(ICONS_CSS_DIR, `${name}.css`), cssTemplate),
+        writeFile(resolve(ICONS_CSS_DIR, `${name}.less`), cssTemplate),
+        writeFile(resolve(ICONS_DIST_DIR, 'index.js'), indexTemplate),
+    ]);
+    logger.success('build success!');
+}

package/lib/node/commands/jest.d.ts

@@ -1,8 +1,7 @@
-interface JestCommandOptions {
+export interface JestCommandOptions {
     watch?: boolean;
     watchAll?: boolean;
     component?: string;
     clearCache?: boolean;
 }
 export declare function jest(cmd: JestCommandOptions): Promise<void>;
-export {};

package/lib/node/commands/release.d.ts

@@ -1,6 +1,5 @@
-interface ReleaseCommandOptions {
+export interface ReleaseCommandOptions {
     remote?: string;
     task?(): Promise<void>;
 }
 export declare function release(options: ReleaseCommandOptions): Promise<void>;
-export {};

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

@@ -1,3 +1,2 @@
-declare type ViteCommandMode = 'dev' | 'build';
+export declare type ViteCommandMode = 'dev' | 'build';
 export declare function vite(mode: ViteCommandMode): Promise<void>;
-export {};

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

@@ -1,3 +1,25 @@
+import { type CopyOptions } from '@varlet/vite-plugins';
+export interface VarletConfigIcons {
+    /**
+     * @default `varlet-icons`
+     * Font name.
+     */
+    name?: string;
+    /**
+     * @default `var-icon`
+     * Font name prefix.
+     */
+    namespace?: string;
+    /**
+     * @default `true`
+     * Output base64
+     */
+    base64?: boolean;
+    publicPath?: string;
+    fontFamilyClassName?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+}
 export interface VarletConfig {
     /**
      * @default `Varlet`
@@ -38,7 +60,8 @@ export interface VarletConfig {
     };
     pc?: Record<string, any>;
     mobile?: Record<string, any>;
-    moduleCompatible?: Record<string, string>;
+    copy?: CopyOptions['paths'];
+    icons?: VarletConfigIcons;
 }
 export declare function defineConfig(config: VarletConfig): VarletConfig;
 export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;

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

@@ -259,4 +259,12 @@ export default defineConfig({
         'color-hl-group-h': '#14a6e9',
         'color-hl-group-i': '#ed4648',
     },
+    icons: {
+        name: 'varlet-icons',
+        namespace: 'var-icon',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontFamilyClassName: 'var-icon--set',
+        base64: true,
+    },
 });

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

@@ -9,3 +9,5 @@ export interface BundleBuildOptions {
     emptyOutDir: boolean;
 }
 export declare function getBundleConfig(varletConfig: Required<VarletConfig>, buildOptions: BundleBuildOptions): InlineConfig;
+export declare type ExtensionMode = 'dev' | 'build';
+export declare function getExtensionConfig(mode: ExtensionMode): InlineConfig;

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

@@ -1,7 +1,7 @@
 import vue from '@vitejs/plugin-vue';
 import jsx from '@vitejs/plugin-vue-jsx';
-import { markdown, html, inlineCss } from '@varlet/vite-plugins';
-import { ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, } from '../shared/constant.js';
+import { markdown, html, inlineCss, copy } from '@varlet/vite-plugins';
+import { ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, EXTENSION_ENTRY, } from '../shared/constant.js';
 import { get } from 'lodash-es';
 import { resolve } from 'path';
 export function getDevConfig(varletConfig) {
@@ -28,6 +28,7 @@ export function getDevConfig(varletConfig) {
             }),
             jsx(),
             markdown({ style: get(varletConfig, 'highlight.style') }),
+            copy({ paths: get(varletConfig, 'copy', []) }),
             html({
                 data: {
                     logo: get(varletConfig, `logo`),
@@ -89,3 +90,19 @@ export function getBundleConfig(varletConfig, buildOptions) {
         },
     };
 }
+export function getExtensionConfig(mode) {
+    return {
+        build: {
+            sourcemap: mode === 'dev' ? 'inline' : false,
+            watch: mode === 'dev' ? {} : null,
+            lib: {
+                entry: EXTENSION_ENTRY,
+                fileName: 'extension',
+                formats: ['cjs'],
+            },
+            rollupOptions: {
+                external: ['vscode'],
+            },
+        },
+    };
+}

package/lib/node/index.d.ts

@@ -11,3 +11,4 @@ export * from './commands/lint.js';
 export * from './commands/changelog.js';
 export * from './commands/preview.js';
 export * from './commands/vite.js';
+export * from './commands/extension.js';

package/lib/node/index.js

@@ -11,3 +11,4 @@ export * from './commands/lint.js';
 export * from './commands/changelog.js';
 export * from './commands/preview.js';
 export * from './commands/vite.js';
+export * from './commands/extension.js';

package/lib/node/shared/constant.d.ts

@@ -39,4 +39,10 @@ export declare const HL_DIR: string;
 export declare const HL_TAGS_JSON: string;
 export declare const HL_ATTRIBUTES_JSON: string;
 export declare const HL_WEB_TYPES_JSON: string;
+export declare const ICONS_DIST_DIR: string;
+export declare const ICONS_CSS_DIR: string;
+export declare const ICONS_PNG_DIR: string;
+export declare const ICONS_FONTS_DIR: string;
+export declare const ICONS_SVG_DIR: string;
+export declare const EXTENSION_ENTRY: string;
 export declare const JEST_CONFIG: string;

package/lib/node/shared/constant.js

@@ -43,5 +43,13 @@ export const HL_DIR = resolve(CWD, 'highlight');
 export const HL_TAGS_JSON = resolve(HL_DIR, 'tags.json');
 export const HL_ATTRIBUTES_JSON = resolve(HL_DIR, 'attributes.json');
 export const HL_WEB_TYPES_JSON = resolve(HL_DIR, 'web-types.json');
+// icons
+export const ICONS_DIST_DIR = resolve(CWD, 'dist');
+export const ICONS_CSS_DIR = resolve(ICONS_DIST_DIR, 'css');
+export const ICONS_PNG_DIR = resolve(ICONS_DIST_DIR, 'png');
+export const ICONS_FONTS_DIR = resolve(ICONS_DIST_DIR, 'fonts');
+export const ICONS_SVG_DIR = resolve(CWD, 'svg');
+// extension
+export const EXTENSION_ENTRY = resolve(CWD, 'src/extension.ts');
 // jest
 export const JEST_CONFIG = resolve(dirname, '../../../cjs/jest.config.cjs');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.7.1",
+  "version": "2.7.3-alpha.1675176726761",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -44,6 +44,8 @@
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.25",
     "@vue/runtime-core": "3.2.25",
+    "webfont": "^9.0.0",
+    "sharp": "0.31.3",
     "babel-jest": "26.6.3",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.2",
@@ -66,8 +68,8 @@
     "vite": "4.0.4",
     "vue": "3.2.25",
     "vue-jest": "^5.0.0-alpha.8",
-    "@varlet/shared": "2.7.1",
-    "@varlet/vite-plugins": "2.7.1"
+    "@varlet/vite-plugins": "2.7.3-alpha.1675176726761",
+    "@varlet/shared": "2.7.3-alpha.1675176726761"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -79,8 +81,9 @@
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
     "@types/inquirer": "^9.0.2",
-    "@varlet/icons": "2.7.1",
-    "@varlet/touch-emulator": "2.7.1"
+    "@types/sharp": "0.31.1",
+    "@varlet/icons": "2.7.3-alpha.1675176726761",
+    "@varlet/touch-emulator": "2.7.3-alpha.1675176726761"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.2.16",
@@ -90,8 +93,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/icons": "2.7.1",
-    "@varlet/touch-emulator": "2.7.1"
+    "@varlet/icons": "2.7.3-alpha.1675176726761",
+    "@varlet/touch-emulator": "2.7.3-alpha.1675176726761"
   },
   "scripts": {
     "dev": "tsc --watch",

package/README.en-US.md

@@ -1,198 +0,0 @@
-# @varlet/cli
-
-The out-of-the-box `Vue3 component library` rapid prototyping tool provides a series of commands and tools to solve the problem of component library development
-
-### Feature
-
-- 📦  Out-of-the-box component library development environment
-- 📦  An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes
-- 🛠️  Configuration file-based component library documentation site, support Baidu statistics and theme customization
-- 🛠️  Supports both `sfc` and `tsx` styles for writing component libraries
-- 📦  Out-of-the-box code inspection tool
-- 📦  Out-of-the-box unit testing tools
-- 📦  Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs
-- 💪  Support for `Typescript`
-- 💪  Support `Dark Mode`
-- 🌍  Support `Internationalization`
-- 🚀  Based on `pnpm`
-
-### Quickstart
-
-`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.
-It is convenient for you to directly enter the component library development.
-
-```shell
-# Install command line tools
-pnpm add @varlet/cli -g
-varlet-cli gen
-```
-
-Then by simply modifying some basic information of the component library template,
-you can start the development of the component library
-
-## Advanced customization
-
-### Configuration file
-
-The `varlet.config.mjs` in the project root directory is used to manage the specific details of the entire component library project.
-The default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts)。
-Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs)
-
-| Parameter | Description | Type | Default |
-| -- | -------------- | -------- | ---------- |
-| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
-| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
-| `host` | Development server host | _string_ | `localhost` |
-| `port` | Development server port | _number_ | `8080` |
-| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
-| `logo` | The logo of the component library in the documentation | _string_ | `-` |
-| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
-| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
-| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
-| `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
-| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
-| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
-| `moduleCompatible` | Module Compatible Configurations | _Record<string, string>_ | `-` |
-
-### Custom pages
-
-If you want to insert other pages into the component library, you can create a `pages` folder in the project root directory to write a vue component to generate other pages.
-The directory structure is as follows:
-
-```text
-|-- varlet-ui
-  |-- src
-  |-- docs
-  |-- pages
-    |-- sponsor
-      |-- index.vue
-    |-- contributor
-      |-- locale
-        |-- en-US.ts
-      |-- index.vue
-    |-- changelog
-      |-- locale
-        |-- zh-CN.ts
-        |-- en-US.ts
-      |-- index.vue
-```
-
-The resulting route is as follows:
-
-```text
-/zh-CN/sponsor
-/en-US/contributor
-/zh-CN/changelog
-/en-US/changelog
-```
-
-### Commands related
-
-#### Start the development server
-
-```shell
-varlet-cli dev
-```
-
-#### Build documentation site
-
-```shell
-varlet-cli build
-```
-
-#### Preview documentation site
-
-```shell
-varlet-cli preview
-```
-
-#### Build component library code
-
-```shell
-varlet-cli compile
-```
-
-#### Perform all unit tests
-
-```shell
-varlet-cli test
-```
-
-#### Execute unit tests in watch mode
-
-```shell
-varlet-cli test -w
-or
-varlet-cli test -wa
-```
-
-#### Lint code
-
-```shell
-varlet-cli lint
-```
-
-#### Lint commit message
-
-```shell
-varlet-cli commit-lint
-```
-
-#### Generate changelog
-
-```shell
-varlet-cli changelog
-```
-
-#### Release component library
-
-```shell
-varlet-cli release
-```
-
-#### Generate a project template
-
-```shell
-varlet-cli gen
-
-# Options
--n
---name
-  project name
--s
---sfc
-  Generate sfc-style project templates
--t
---tsx
-  Generate tsx-style project templates
--l
---locale
-  Need to support internationalization
-```
-
-#### Create a component template file
-
-```shell
-varlet-cli create
-
-# Options
--n
---name
-  project name
--s
---sfc
-  Generate sfc-style component
--t
---tsx
-  Generate tsx-style component
--l
---locale
-  Need to support internationalization
-```
-
-### Note before release
-
-- 1.`npm` repository registry must set to `npm` official mirror
-- 2.Execute `npm login` to log in