@varlet/cli 3.1.4 → 3.2.0-alpha.1711119852830

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

@@ -1,9 +1,8 @@
 import { VarletConfig } from '../config/varlet.config.js';
-export interface IconsIo {
+export declare function build(varletConfig: Required<VarletConfig>, io: {
     entry: string;
     output: string;
-}
-export declare function buildIcons(varletConfig: Required<VarletConfig>, io: IconsIo): Promise<void>;
+}): Promise<void>;
 export interface IconsCommandOptions {
     watch?: boolean;
 }

package/lib/node/commands/icons.js

@@ -1,22 +1,24 @@
 import fse from 'fs-extra';
 import sharp from 'sharp';
-import slash from 'slash';
 import chokidar from 'chokidar';
-import webfont from 'webfont';
 import logger from '../shared/logger.js';
 import { parse, resolve } from 'path';
-import { ICONS_CSS_DIR_NAME, ICONS_FONTS_DIR_NAME, ICONS_PNG_DIR_NAME, CWD } 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(output, fontsDir, cssDir, pngDir) {
-    removeSync(output);
-    await Promise.all([ensureDir(fontsDir), ensureDir(cssDir), ensureDir(pngDir)]);
-}
-async function buildPNG(entry, pngDir, svgFiles) {
+import { buildIcons, getIo } from '@varlet/icon-builder';
+import { ICONS_PNG_DIR_NAME } from '../shared/constant.js';
+const { removeSync, ensureDirSync, readdirSync } = fse;
+async function clearPngOutputs(pngDir) {
+    removeSync(pngDir);
+    ensureDirSync(pngDir);
+}
+async function buildPNG(io) {
+    const svgFiles = readdirSync(io.entry).filter((svgFile) => svgFile.endsWith('.svg'));
+    const pngDir = resolve(io.output, ICONS_PNG_DIR_NAME);
+    clearPngOutputs(pngDir);
     await Promise.all(svgFiles.map((svg) => new Promise((done) => {
         const { name } = parse(svg);
-        sharp(resolve(entry, svg))
+        sharp(resolve(io.entry, svg))
             .resize({ height: 100 })
             .toBuffer()
             .then((buffer) => {
@@ -41,77 +43,17 @@ async function buildPNG(entry, pngDir, svgFiles) {
             });
         });
     })));
+    logger.success('build png success!');
 }
-function buildWebFont(name, entry) {
-    return webfont.default({
-        files: `${slash(entry)}/*.svg`,
-        fontName: name,
-        formats: ['ttf'],
-        fontHeight: 512,
-        descent: 64,
-    });
-}
-export async function buildIcons(varletConfig, io) {
-    const { name, namespace, base64, publicPath, fontFamilyClassName, fontWeight, fontStyle, genPng = true, } = get(varletConfig, 'icons');
-    const fontsDir = resolve(io.output, ICONS_FONTS_DIR_NAME);
-    const cssDir = resolve(io.output, ICONS_CSS_DIR_NAME);
-    const pngDir = resolve(io.output, ICONS_PNG_DIR_NAME);
-    await removeDir(io.output, fontsDir, cssDir, pngDir);
-    const svgFiles = readdirSync(io.entry).filter((svgFile) => svgFile.endsWith('.svg'));
-    const [{ ttf, glyphsData }] = await Promise.all([
-        buildWebFont(name, io.entry),
-        genPng ? buildPNG(io.entry, pngDir, svgFiles) : Promise.resolve(),
-    ]);
-    const icons = glyphsData.map((i) => ({
-        name: i.metadata.name,
-        pointCode: i.metadata.unicode[0].charCodeAt(0).toString(16),
-    }));
-    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) => `.${namespace}-${icon.name}::before {
-  content: "\\${icon.pointCode}";
-}`)
-        .join('\n\n')}
-`;
-    await Promise.all([
-        writeFile(resolve(fontsDir, `${name}-webfont.ttf`), ttf),
-        writeFile(resolve(cssDir, `${name}.css`), cssTemplate),
-        writeFile(resolve(cssDir, `${name}.less`), cssTemplate),
-        writeFile(resolve(io.output, 'index.js'), indexTemplate),
-    ]);
-    logger.success('build success!');
+export async function build(varletConfig, io) {
+    await Promise.all([buildPNG(io), buildIcons(get(varletConfig, 'icons'))]);
 }
 export async function icons({ watch = false } = {}) {
     const varletConfig = await getVarletConfig();
-    const { entry = './svg', output = './dist' } = varletConfig.icons;
-    const io = {
-        entry: resolve(CWD, entry),
-        output: resolve(CWD, output),
-    };
-    const task = () => buildIcons(varletConfig, io);
+    const io = getIo(get(varletConfig, 'icons'));
+    const task = () => build(varletConfig, io);
     if (watch) {
-        await buildIcons(varletConfig, io);
+        await build(varletConfig, io);
         chokidar.watch(io.entry, { ignoreInitial: true }).on('all', task);
         logger.info(`watching for ${io.entry} changes...`);
         return;

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

@@ -1,39 +1,11 @@
+import { type VIConfig } from '@varlet/icon-builder';
 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;
-    /**
-     * @default `./svg`
-     * SVG icons folder path.
-     */
-    entry?: string;
-    /**
-     * @default `./dist`
-     * SVG icons folder path.
-     */
-    output?: string;
+export interface VarletConfigIcons extends VIConfig {
     /**
      * @default true
      * Whether to generate png
      */
     genPng?: boolean;
-    publicPath?: string;
-    fontFamilyClassName?: string;
-    fontWeight?: string;
-    fontStyle?: string;
 }
 export interface VarletConfigEsbuild {
     target?: string | string[];

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

@@ -44,7 +44,5 @@ export declare const HL_ZH_TITLE_EVENTS_RE: RegExp;
 export declare const HL_ZH_TITLE_SLOTS_RE: RegExp;
 export declare const HL_ZH_MD = "zh-CN.md";
 export declare const HL_ZH_WEB_TYPES_JSON: string;
-export declare const ICONS_CSS_DIR_NAME = "css";
 export declare const ICONS_PNG_DIR_NAME = "png";
-export declare const ICONS_FONTS_DIR_NAME = "fonts";
 export declare const EXTENSION_ENTRY: string;

package/lib/node/shared/constant.js

@@ -49,8 +49,6 @@ export const HL_ZH_TITLE_SLOTS_RE = /###\s*插槽(?:\r\n|\n)+/;
 export const HL_ZH_MD = 'zh-CN.md';
 export const HL_ZH_WEB_TYPES_JSON = resolve(HL_DIR, 'web-types.zh-CN.json');
 // icons
-export const ICONS_CSS_DIR_NAME = 'css';
 export const ICONS_PNG_DIR_NAME = 'png';
-export const ICONS_FONTS_DIR_NAME = 'fonts';
 // extension
 export const EXTENSION_ENTRY = resolve(CWD, 'src/extension.ts');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.1.4",
+  "version": "3.2.0-alpha.1711119852830",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@varlet/release": "^0.2.5",
+    "@varlet/icon-builder": "0.0.3",
     "@babel/core": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@vitejs/plugin-vue": "5.0.4",
@@ -63,9 +64,8 @@
     "sharp": "0.31.1",
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
-    "webfont": "11.2.26",
-    "@varlet/shared": "3.1.4",
-    "@varlet/vite-plugins": "3.1.4"
+    "@varlet/vite-plugins": "3.2.0-alpha.1711119852830",
+    "@varlet/shared": "3.2.0-alpha.1711119852830"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,9 +80,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.1.4",
-    "@varlet/icons": "3.1.4",
-    "@varlet/touch-emulator": "3.1.4"
+    "@varlet/icons": "3.2.0-alpha.1711119852830",
+    "@varlet/ui": "3.2.0-alpha.1711119852830",
+    "@varlet/touch-emulator": "3.2.0-alpha.1711119852830"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -95,9 +95,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.1.4",
-    "@varlet/icons": "3.1.4",
-    "@varlet/touch-emulator": "3.1.4"
+    "@varlet/icons": "3.2.0-alpha.1711119852830",
+    "@varlet/ui": "3.2.0-alpha.1711119852830",
+    "@varlet/touch-emulator": "3.2.0-alpha.1711119852830"
   },
   "scripts": {
     "dev": "tsc --watch",