@varlet/cli 2.7.2 → 2.7.3-alpha.1675176726761

package/README.md

@@ -1,4 +1,4 @@
-# Components Library Tools(@varlet/cli)
+# Components Library Tools
 
 ### Intro
 
@@ -13,6 +13,8 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 - 📦  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`
@@ -53,7 +55,8 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `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 | _{ from: string, to: string, type: 'folder' | 'file' }[]_ | `-` |
+| `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
 
@@ -120,6 +123,27 @@ varlet-cli preview
 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

package/README.zh-CN.md

@@ -1,4 +1,4 @@
-# 组件库快速成型工具(@varlet/cli)
+# 组件库快速成型工具
 
 ### 介绍
 
@@ -13,6 +13,8 @@
 - 📦  开箱即用的代码检查工具
 - 📦  开箱即用的单元测试工具
 - 📦  开箱即用的代码发布工具,同时发布到 `npm` 和 `github`, 并自动生成更新日志
+- 💪  支持 `VSCode` 插件开发
+- 💪  支持 `字体图标打包`
 - 💪  支持 `Typescript`
 - 💪  支持 `暗黑模式`
 - 🌍  支持 `国际化`
@@ -53,7 +55,8 @@ varlet-cli gen
 | `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
 | `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
 | `mobile` | mobile 端文档结构配置 | _Record<string, any>_ | `-` |
-| `copy` | 复制文件配置 | _{ from: string, to: string, type: 'folder' | 'file' }[]_ | `-` |
+| `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)_ | `-` |
 
 ### 自定义页面
 
@@ -119,6 +122,27 @@ varlet-cli preview
 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

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,4 +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`
@@ -40,6 +61,7 @@ export interface VarletConfig {
     pc?: Record<string, any>;
     mobile?: Record<string, any>;
     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, 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, } from '../shared/constant.js';
+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) {
@@ -90,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.2",
+  "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/vite-plugins": "2.7.2",
-    "@varlet/shared": "2.7.2"
+    "@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/touch-emulator": "2.7.2",
-    "@varlet/icons": "2.7.2"
+    "@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.2",
-    "@varlet/touch-emulator": "2.7.2"
+    "@varlet/icons": "2.7.3-alpha.1675176726761",
+    "@varlet/touch-emulator": "2.7.3-alpha.1675176726761"
   },
   "scripts": {
     "dev": "tsc --watch",

package/lib/varlet-cli/src/node/config/varlet.config.d.ts

@@ -1,44 +0,0 @@
-export interface VarletConfig {
-    /**
-     * @default `Varlet`
-     * UI library name.
-     */
-    name?: string;
-    /**
-     * @default `var`
-     * Component name prefix
-     */
-    namespace?: string;
-    /**
-     * @default `localhost`
-     * Local dev server host
-     */
-    host?: string;
-    /**
-     * @default `8080`
-     * Local dev server port
-     */
-    port?: number;
-    title?: string;
-    logo?: string;
-    themeKey?: string;
-    defaultLanguage?: 'zh-CN' | 'en-US';
-    /**
-     * @default `false`
-     * Show mobile component on the right.
-     */
-    useMobile?: boolean;
-    lightTheme?: Record<string, string>;
-    darkTheme?: Record<string, string>;
-    highlight?: {
-        style: string;
-    };
-    analysis?: {
-        baidu: string;
-    };
-    pc?: Record<string, any>;
-    mobile?: Record<string, any>;
-}
-export declare function defineConfig(config: VarletConfig): VarletConfig;
-export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;
-export declare function getVarletConfig(emit?: boolean): Promise<Required<VarletConfig>>;

package/lib/varlet-cli/src/node/config/varlet.config.js

@@ -1,27 +0,0 @@
-import fse from 'fs-extra';
-import { mergeWith } from 'lodash-es';
-import { VARLET_CONFIG, SITE_CONFIG } from '../shared/constant.js';
-import { outputFileSyncOnChange } from '../shared/fsUtils.js';
-import { isArray } from '@varlet/shared';
-import { pathToFileURL } from 'url';
-const { pathExistsSync, statSync } = fse;
-export function defineConfig(config) {
-    return config;
-}
-export function mergeStrategy(value, srcValue, key) {
-    if (key === 'features' && isArray(srcValue)) {
-        return srcValue;
-    }
-}
-export async function getVarletConfig(emit = false) {
-    const defaultConfig = (await import('./varlet.default.config.js')).default;
-    const config = pathExistsSync(VARLET_CONFIG)
-        ? (await import(`${pathToFileURL(VARLET_CONFIG).href}?_t=${statSync(VARLET_CONFIG).mtimeMs}`)).default
-        : {};
-    const mergedConfig = mergeWith(defaultConfig, config, mergeStrategy);
-    if (emit) {
-        const source = JSON.stringify(mergedConfig, null, 2);
-        outputFileSyncOnChange(SITE_CONFIG, source);
-    }
-    return mergedConfig;
-}

package/lib/varlet-vite-plugins/src/copy.d.ts

@@ -1,9 +0,0 @@
-import type { Plugin } from 'vite';
-export interface CopyPath {
-    from: string;
-    to: string;
-}
-export interface CopyOptions {
-    paths: CopyPath[];
-}
-export declare function copy(options: CopyOptions): Plugin;

package/lib/varlet-vite-plugins/src/copy.js

@@ -1,17 +0,0 @@
-import fse from 'fs-extra';
-const { copyFileSync } = fse;
-export function copy(options) {
-    return {
-        name: 'vite-plugin-varlet-copy',
-        buildStart() {
-            options.paths.forEach((copyPath) => {
-                try {
-                    copyFileSync(copyPath.from, copyPath.to);
-                }
-                catch (e) {
-                    this.warn(e);
-                }
-            });
-        }
-    };
-}