@varlet/cli 1.21.0 → 1.22.0-alpha.5

package/generators/sfc/package.json

@@ -33,7 +33,8 @@
   },
   "devDependencies": {
     "@varlet/cli": "^1.20.0-alpha.0",
-    "vue": "3.1.4"
+    "vue": "3.2.17",
+    "@vue/compiler-sfc": "3.2.17"
   },
   "release-it": {
     "git": {

package/generators/tsx/package.json

@@ -33,7 +33,8 @@
   },
   "devDependencies": {
     "@varlet/cli": "^1.20.0-alpha.0",
-    "vue": "3.1.4"
+    "vue": "3.2.17",
+    "@vue/compiler-sfc": "3.2.17"
   },
   "release-it": {
     "git": {

package/lib/commands/build.js

@@ -35,28 +35,32 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.build = void 0;
-var webpack_1 = __importDefault(require("webpack"));
-var logger_1 = __importDefault(require("../shared/logger"));
 var fs_extra_1 = require("fs-extra");
-var webpack_build_config_1 = require("../config/webpack.build.config");
 var constant_1 = require("../shared/constant");
+var vite_1 = require("vite");
+var vite_config_1 = require("../config/vite.config");
+var varlet_config_1 = require("../config/varlet.config");
+var compileSiteEntry_1 = require("../compiler/compileSiteEntry");
 function build() {
     return __awaiter(this, void 0, void 0, function () {
-        var config;
+        var varletConfig, buildConfig;
         return __generator(this, function (_a) {
-            process.env.NODE_ENV = 'production';
-            fs_extra_1.ensureDirSync(constant_1.SRC_DIR);
-            config = webpack_build_config_1.getBuildConfig();
-            webpack_1.default(config, function (err, stats) {
-                err && logger_1.default.error(err.toString());
-                (stats === null || stats === void 0 ? void 0 : stats.hasErrors()) && logger_1.default.error(stats.toString());
-            });
-            return [2 /*return*/];
+            switch (_a.label) {
+                case 0:
+                    process.env.NODE_ENV = 'production';
+                    fs_extra_1.ensureDirSync(constant_1.SRC_DIR);
+                    return [4 /*yield*/, compileSiteEntry_1.buildSiteEntry()];
+                case 1:
+                    _a.sent();
+                    varletConfig = varlet_config_1.getVarletConfig();
+                    buildConfig = vite_config_1.getBuildConfig(varletConfig);
+                    return [4 /*yield*/, vite_1.build(buildConfig)];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
         });
     });
 }

package/lib/commands/dev.d.ts

@@ -1,2 +1,3 @@
-export declare function runDevServer(port: number, config: any): Promise<void>;
-export declare function dev(): Promise<void>;
+export declare function dev(cmd: {
+    force?: boolean;
+}): Promise<void>;

package/lib/commands/dev.js

@@ -35,58 +35,36 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dev = exports.runDevServer = void 0;
-var webpack_1 = __importDefault(require("webpack"));
-var webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
-var logger_1 = __importDefault(require("../shared/logger"));
-var portfinder_1 = require("portfinder");
+exports.dev = void 0;
+var vite_1 = require("vite");
 var fs_extra_1 = require("fs-extra");
-var webpack_dev_config_1 = require("../config/webpack.dev.config");
 var constant_1 = require("../shared/constant");
+var compileSiteEntry_1 = require("../compiler/compileSiteEntry");
+var vite_config_1 = require("../config/vite.config");
 var varlet_config_1 = require("../config/varlet.config");
 var lodash_1 = require("lodash");
-function runDevServer(port, config) {
+function dev(cmd) {
     return __awaiter(this, void 0, void 0, function () {
-        var devServerConfig, server;
+        var devConfig, server;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    devServerConfig = webpack_dev_config_1.getDevServerConfig();
-                    devServerConfig.port = port;
-                    server = new webpack_dev_server_1.default(devServerConfig, webpack_1.default(config));
-                    return [4 /*yield*/, server.start()];
+                    process.env.NODE_ENV = 'development';
+                    fs_extra_1.ensureDirSync(constant_1.SRC_DIR);
+                    return [4 /*yield*/, compileSiteEntry_1.buildSiteEntry()];
                 case 1:
+                    _a.sent();
+                    devConfig = vite_config_1.getDevConfig(varlet_config_1.getVarletConfig());
+                    return [4 /*yield*/, vite_1.createServer(lodash_1.merge(devConfig, cmd.force ? { server: { force: true } } : {}))];
+                case 2:
+                    server = _a.sent();
+                    return [4 /*yield*/, server.listen()];
+                case 3:
                     _a.sent();
                     return [2 /*return*/];
             }
         });
     });
 }
-exports.runDevServer = runDevServer;
-function dev() {
-    return __awaiter(this, void 0, void 0, function () {
-        var varletConfig, config, port;
-        return __generator(this, function (_a) {
-            process.env.NODE_ENV = 'development';
-            fs_extra_1.ensureDirSync(constant_1.SRC_DIR);
-            varletConfig = varlet_config_1.getVarletConfig();
-            config = webpack_dev_config_1.getDevConfig();
-            port = lodash_1.get(varletConfig, 'port');
-            portfinder_1.getPort({
-                port: port,
-            }, function (err, port) {
-                if (err) {
-                    logger_1.default.error(err.toString());
-                    return;
-                }
-                runDevServer(port, config);
-            });
-            return [2 /*return*/];
-        });
-    });
-}
 exports.dev = dev;

package/lib/commands/jest.d.ts

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

package/lib/compiler/compileModule.js

@@ -35,31 +35,24 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileModule = exports.compileFile = exports.compileDir = exports.compileUMD = void 0;
-var webpack_1 = __importDefault(require("webpack"));
+var vite_1 = require("vite");
 var path_1 = require("path");
 var fs_extra_1 = require("fs-extra");
-var logger_1 = __importDefault(require("../shared/logger"));
 var constant_1 = require("../shared/constant");
 var fsUtils_1 = require("../shared/fsUtils");
 var compileSFC_1 = require("./compileSFC");
 var compileScript_1 = require("./compileScript");
 var compileStyle_1 = require("./compileStyle");
-var webpack_umd_config_1 = require("../config/webpack.umd.config");
+var vite_config_1 = require("../config/vite.config");
+var varlet_config_1 = require("../config/varlet.config");
 function compileUMD() {
     return new Promise(function (resolve, reject) {
-        var config = webpack_umd_config_1.getUmdConfig();
-        webpack_1.default(config, function (err, stats) {
-            if (err || (stats === null || stats === void 0 ? void 0 : stats.hasErrors())) {
-                logger_1.default.error((err === null || err === void 0 ? void 0 : err.toString()) || stats);
-                reject();
-            }
-            resolve();
-        });
+        var config = vite_config_1.getUMDConfig(varlet_config_1.getVarletConfig());
+        vite_1.build(config)
+            .then(function () { return resolve(); })
+            .catch(reject);
     });
 }
 exports.compileUMD = compileUMD;

package/lib/compiler/compileSFC.js

@@ -46,6 +46,7 @@ var compiler_sfc_1 = require("@vue/compiler-sfc");
 var fsUtils_1 = require("../shared/fsUtils");
 var compileScript_1 = require("./compileScript");
 var compileStyle_1 = require("./compileStyle");
+var logger_1 = __importDefault(require("../shared/logger"));
 var NORMAL_EXPORT_START_RE = /export\s+default\s+{/;
 var DEFINE_EXPORT_START_RE = /export\s+default\s+defineComponent\s*\(\s*{/;
 function injectRender(script, render) {
@@ -60,14 +61,18 @@ function injectRender(script, render) {
 exports.injectRender = injectRender;
 function compileSFC(sfc) {
     return __awaiter(this, void 0, void 0, function () {
-        var sources, descriptor, script, template, styles, hasScope, id, scopeId, render, content, code, index, style, file, code, _a;
+        var sources, descriptor, script, scriptSetup, template, styles, hasScope, id, scopeId, render, content, code, index, style, file, code, _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, fs_extra_1.readFile(sfc, 'utf-8')];
                 case 1:
                     sources = _b.sent();
                     descriptor = compiler_sfc_1.parse(sources, { sourceMap: false }).descriptor;
-                    script = descriptor.script, template = descriptor.template, styles = descriptor.styles;
+                    script = descriptor.script, scriptSetup = descriptor.scriptSetup, template = descriptor.template, styles = descriptor.styles;
+                    if (scriptSetup) {
+                        logger_1.default.warning("\n Varlet Cli does not support compiling script setup syntax       \n  The error in " + sfc);
+                        return [2 /*return*/];
+                    }
                     hasScope = styles.some(function (style) { return style.scoped; });
                     id = hash_sum_1.default(sources);
                     scopeId = hasScope ? "data-v-" + id : '';

package/lib/compiler/compileStyle.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -50,27 +35,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileLess = exports.extractStyleDependencies = exports.normalizeStyleDependency = exports.clearEmptyLine = exports.STYLE_IMPORT_RE = exports.IMPORT_LESS_RE = exports.IMPORT_CSS_RE = exports.EMPTY_LINE_RE = exports.EMPTY_SPACE_RE = void 0;
 var fs_extra_1 = require("fs-extra");
@@ -82,26 +46,6 @@ exports.EMPTY_LINE_RE = /[\n\r]*/g;
 exports.IMPORT_CSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.css)['"]\s*;?(?!\s*['"`])/g;
 exports.IMPORT_LESS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.less)['"]\s*;?(?!\s*['"`])/g;
 exports.STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
-var TildeResolver = /** @class */ (function (_super) {
-    __extends(TildeResolver, _super);
-    function TildeResolver() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TildeResolver.prototype.loadFile = function (filename) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        filename = filename.replace('~', '');
-        return _super.prototype.loadFile.apply(this, __spreadArray([filename], __read(args)));
-    };
-    return TildeResolver;
-}(less_1.FileManager));
-var TildeResolverPlugin = {
-    install: function (lessInstance, pluginManager) {
-        pluginManager.addFileManager(new TildeResolver());
-    },
-};
 var clearEmptyLine = function (s) { return s.replace(exports.EMPTY_LINE_RE, '').replace(exports.EMPTY_SPACE_RE, ' '); };
 exports.clearEmptyLine = clearEmptyLine;
 function normalizeStyleDependency(styleImport, reg) {
@@ -138,10 +82,7 @@ function compileLess(file) {
             switch (_a.label) {
                 case 0:
                     source = fs_extra_1.readFileSync(file, 'utf-8');
-                    return [4 /*yield*/, less_1.render(source, {
-                            filename: file,
-                            plugins: [TildeResolverPlugin],
-                        })];
+                    return [4 /*yield*/, less_1.render(source, { filename: file })];
                 case 1:
                     css = (_a.sent()).css;
                     fs_extra_1.writeFileSync(fsUtils_1.replaceExt(file, '.css'), exports.clearEmptyLine(css), 'utf-8');

package/lib/config/babel.config.js

@@ -19,15 +19,6 @@ module.exports = function (api, options) {
             require('./babel.sfc.transform'),
         ],
         plugins: [
-            [
-                require.resolve('babel-plugin-import'),
-                {
-                    libraryName: '@varlet/ui',
-                    libraryDirectory: 'es',
-                    style: true,
-                },
-                '@varlet/ui',
-            ],
             [
                 require.resolve('@vue/babel-plugin-jsx'),
                 {

package/lib/config/jest.config.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var constant_1 = require("../shared/constant");
 module.exports = {
     moduleNameMapper: {
+        '@varlet/ui': constant_1.JEST_LIB_MOCK,
         '\\.(css|less)$': constant_1.JEST_STYLE_MOCK,
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': constant_1.JEST_MEDIA_MOCK,
     },
@@ -18,5 +19,5 @@ module.exports = {
         "!**/" + constant_1.TESTS_DIR_NAME + "/**",
     ],
     moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
-    transformIgnorePatterns: ['/node_modules/(?!(@varlet/cli))'],
+    transformIgnorePatterns: ['/node_modules/(?!(@varlet/cli))/'],
 };

package/lib/config/jest.lib.mock.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

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

@@ -1 +1 @@
-export declare function getVarletConfig(): any;
+export declare function getVarletConfig(): Record<string, any>;

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

@@ -0,0 +1,4 @@
+import { InlineConfig } from 'vite';
+export declare function getDevConfig(varletConfig: Record<string, any>): InlineConfig;
+export declare function getBuildConfig(varletConfig: Record<string, any>): InlineConfig;
+export declare function getUMDConfig(varletConfig: Record<string, any>): InlineConfig;

package/lib/config/vite.config.js

@@ -0,0 +1,128 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUMDConfig = exports.getBuildConfig = exports.getDevConfig = void 0;
+var plugin_vue_1 = __importDefault(require("@vitejs/plugin-vue"));
+var markdown_vite_plugin_1 = __importDefault(require("@varlet/markdown-vite-plugin"));
+var plugin_vue_jsx_1 = __importDefault(require("@vitejs/plugin-vue-jsx"));
+var vite_plugin_html_1 = require("vite-plugin-html");
+var constant_1 = require("../shared/constant");
+var lodash_1 = require("lodash");
+var path_1 = require("path");
+var fs_extra_1 = require("fs-extra");
+function getDevConfig(varletConfig) {
+    var defaultLanguage = lodash_1.get(varletConfig, 'defaultLanguage');
+    var host = lodash_1.get(varletConfig, 'host');
+    return {
+        root: constant_1.SITE,
+        resolve: {
+            extensions: constant_1.VITE_RESOLVE_EXTENSIONS,
+            alias: {
+                '@config': constant_1.SITE_CONFIG,
+                '@pc-routes': constant_1.SITE_PC_ROUTES,
+                '@mobile-routes': constant_1.SITE_MOBILE_ROUTES,
+            },
+        },
+        server: {
+            port: lodash_1.get(varletConfig, 'port'),
+            host: host === 'localhost' ? '0.0.0.0' : host,
+        },
+        publicDir: constant_1.SITE_PUBLIC_PATH,
+        plugins: [
+            plugin_vue_1.default({
+                include: [/\.vue$/, /\.md$/],
+            }),
+            markdown_vite_plugin_1.default({ style: lodash_1.get(varletConfig, 'highlight.style') }),
+            plugin_vue_jsx_1.default(),
+            vite_plugin_html_1.injectHtml({
+                data: {
+                    pcTitle: lodash_1.get(varletConfig, "title[" + defaultLanguage + "]"),
+                    mobileTitle: lodash_1.get(varletConfig, "title[" + defaultLanguage + "]"),
+                    logo: lodash_1.get(varletConfig, "logo"),
+                    baidu: lodash_1.get(varletConfig, "analysis.baidu", ''),
+                },
+            }),
+        ],
+    };
+}
+exports.getDevConfig = getDevConfig;
+function getBuildConfig(varletConfig) {
+    var devConfig = getDevConfig(varletConfig);
+    return __assign(__assign({}, devConfig), { build: {
+            outDir: constant_1.SITE_OUTPUT_PATH,
+            brotliSize: false,
+            emptyOutDir: true,
+            rollupOptions: {
+                input: {
+                    main: path_1.resolve(constant_1.SITE, 'index.html'),
+                    nested: path_1.resolve(constant_1.SITE, 'mobile.html'),
+                },
+            },
+        } });
+}
+exports.getBuildConfig = getBuildConfig;
+function inlineCSS(fileName, dir) {
+    return {
+        name: 'varlet-inline-css-vite-plugin',
+        apply: 'build',
+        closeBundle: function () {
+            var cssFile = path_1.resolve(dir, 'style.css');
+            var jsFile = path_1.resolve(dir, fileName);
+            var cssCode = fs_extra_1.readFileSync(cssFile, 'utf-8');
+            var jsCode = fs_extra_1.readFileSync(jsFile, 'utf-8');
+            var injectCode = ";(function(){var style=document.createElement('style');style.type='text/css';style.rel='stylesheet';style.appendChild(document.createTextNode(`" + cssCode.replace(/\\/g, '\\\\') + "`));var head=document.querySelector('head');head.appendChild(style)})();";
+            fs_extra_1.removeSync(cssFile);
+            fs_extra_1.writeFileSync(jsFile, "" + injectCode + jsCode);
+        },
+    };
+}
+function clear() {
+    return {
+        name: 'varlet-clear-vite-plugin',
+        apply: 'build',
+        closeBundle: function () {
+            fs_extra_1.removeSync(path_1.resolve(constant_1.CWD, 'dist'));
+        },
+    };
+}
+function getUMDConfig(varletConfig) {
+    var name = lodash_1.get(varletConfig, 'name');
+    var fileName = lodash_1.kebabCase(name) + ".js";
+    return {
+        logLevel: 'silent',
+        build: {
+            emptyOutDir: true,
+            lib: {
+                name: name,
+                formats: ['umd'],
+                fileName: function () { return fileName; },
+                entry: path_1.resolve(constant_1.ES_DIR, 'umdIndex.js'),
+            },
+            rollupOptions: {
+                external: ['vue'],
+                output: {
+                    dir: constant_1.UMD_DIR,
+                    exports: 'named',
+                    globals: {
+                        vue: 'Vue',
+                    },
+                },
+            },
+        },
+        plugins: [inlineCSS(fileName, constant_1.UMD_DIR), clear()],
+    };
+}
+exports.getUMDConfig = getUMDConfig;

package/lib/index.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var logger_1 = __importDefault(require("./shared/logger"));
 var commander_1 = require("commander");
 var dev_1 = require("./commands/dev");
 var build_1 = require("./commands/build");
@@ -28,9 +29,11 @@ var create_1 = require("./commands/create");
 var jest_1 = require("./commands/jest");
 var lint_1 = require("./commands/lint");
 var gen_1 = require("./commands/gen");
-var logger_1 = __importDefault(require("./shared/logger"));
 commander_1.version("varlet-cli " + require('../package.json').version).usage('<command> [options]');
-commander_1.command('dev').description('Run varlet development environment').action(dev_1.dev);
+commander_1.command('dev')
+    .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed')
+    .description('Run varlet development environment')
+    .action(dev_1.dev);
 commander_1.command('build').description('Build varlet site for production').action(build_1.build);
 commander_1.command('compile')
     .description('Compile varlet components library code')

package/lib/shared/constant.d.ts

@@ -9,6 +9,7 @@ export declare const TYPES_DIR: string;
 export declare const ROOT_DOCS_DIR: string;
 export declare const ESLINT_EXTENSIONS: string[];
 export declare const WEBPACK_RESOLVE_EXTENSIONS: string[];
+export declare const VITE_RESOLVE_EXTENSIONS: string[];
 export declare const SCRIPTS_EXTENSIONS: string[];
 export declare const PUBLIC_DIR_INDEXES: string[];
 export declare const STYLE_DIR_NAME = "style";
@@ -43,3 +44,4 @@ export declare const HL_WEB_TYPES_JSON: string;
 export declare const JEST_CONFIG: string;
 export declare const JEST_MEDIA_MOCK: string;
 export declare const JEST_STYLE_MOCK: string;
+export declare const JEST_LIB_MOCK: string;

package/lib/shared/constant.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JEST_STYLE_MOCK = exports.JEST_MEDIA_MOCK = exports.JEST_CONFIG = exports.HL_WEB_TYPES_JSON = exports.HL_ATTRIBUTES_JSON = exports.HL_TAGS_JSON = exports.HL_DIR = exports.HL_MD = exports.HL_TITLE_SLOTS_RE = exports.HL_TITLE_EVENTS_RE = exports.HL_TITLE_ATTRIBUTES_RE = exports.HL_API_RE = exports.HL_COMPONENT_NAME_RE = exports.SITE_EXAMPLE_GLOB = exports.SITE_DOCS_GLOB = exports.SITE_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.SITE_PC_MAIN = exports.SITE_MOBILE_MAIN = exports.PRIMARY_COLOR = exports.CLI_PACKAGE_JSON = exports.GENERATORS_DIR = exports.TESTS_DIR_NAME = exports.EXAMPLE_DIR_INDEX = exports.DOCS_DIR_NAME = exports.EXAMPLE_LOCALE_DIR_NAME = exports.EXAMPLE_DIR_NAME = exports.STYLE_DIR_NAME = exports.PUBLIC_DIR_INDEXES = exports.SCRIPTS_EXTENSIONS = exports.WEBPACK_RESOLVE_EXTENSIONS = exports.ESLINT_EXTENSIONS = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.TS_CONFIG = exports.POSTCSS_CONFIG = exports.CWD = void 0;
+exports.JEST_LIB_MOCK = exports.JEST_STYLE_MOCK = exports.JEST_MEDIA_MOCK = exports.JEST_CONFIG = exports.HL_WEB_TYPES_JSON = exports.HL_ATTRIBUTES_JSON = exports.HL_TAGS_JSON = exports.HL_DIR = exports.HL_MD = exports.HL_TITLE_SLOTS_RE = exports.HL_TITLE_EVENTS_RE = exports.HL_TITLE_ATTRIBUTES_RE = exports.HL_API_RE = exports.HL_COMPONENT_NAME_RE = exports.SITE_EXAMPLE_GLOB = exports.SITE_DOCS_GLOB = exports.SITE_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.SITE_PC_MAIN = exports.SITE_MOBILE_MAIN = exports.PRIMARY_COLOR = exports.CLI_PACKAGE_JSON = exports.GENERATORS_DIR = exports.TESTS_DIR_NAME = exports.EXAMPLE_DIR_INDEX = exports.DOCS_DIR_NAME = exports.EXAMPLE_LOCALE_DIR_NAME = exports.EXAMPLE_DIR_NAME = exports.STYLE_DIR_NAME = exports.PUBLIC_DIR_INDEXES = exports.SCRIPTS_EXTENSIONS = exports.VITE_RESOLVE_EXTENSIONS = exports.WEBPACK_RESOLVE_EXTENSIONS = exports.ESLINT_EXTENSIONS = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.TS_CONFIG = exports.POSTCSS_CONFIG = exports.CWD = void 0;
 var path_1 = require("path");
 exports.CWD = process.cwd();
 exports.POSTCSS_CONFIG = path_1.resolve(exports.CWD, 'postcss.config.js');
@@ -13,6 +13,7 @@ exports.TYPES_DIR = path_1.resolve(exports.CWD, 'types');
 exports.ROOT_DOCS_DIR = path_1.resolve(exports.CWD, 'docs');
 exports.ESLINT_EXTENSIONS = ['.vue', '.ts', '.js', '.mjs', '.tsx', '.jsx'];
 exports.WEBPACK_RESOLVE_EXTENSIONS = ['.js', '.jsx', '.vue', '.ts', '.tsx', '.css', '.less'];
+exports.VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.less', '.css'];
 exports.SCRIPTS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'];
 exports.PUBLIC_DIR_INDEXES = ['index.vue', 'index.tsx', 'index.ts', 'index.jsx', 'index.js'];
 exports.STYLE_DIR_NAME = 'style';
@@ -50,3 +51,4 @@ exports.HL_WEB_TYPES_JSON = path_1.resolve(exports.HL_DIR, 'web-types.json');
 exports.JEST_CONFIG = path_1.resolve(__dirname, '../config/jest.config.js');
 exports.JEST_MEDIA_MOCK = path_1.resolve(__dirname, '../config/jest.media.mock.js');
 exports.JEST_STYLE_MOCK = path_1.resolve(__dirname, '../config/jest.style.mock.js');
+exports.JEST_LIB_MOCK = path_1.resolve(__dirname, '../config/jest.lib.mock.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.21.0",
+  "version": "1.22.0-alpha.5+92fc6bb7",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "e6dfe7af1e601108222c170b04639d94c3f30ac1",
+  "gitHead": "92fc6bb770a969a984707921b66f616d606f1d58",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
@@ -41,69 +41,55 @@
     "@release-it/conventional-changelog": "^3.3.0",
     "@varlet/eslint-config": "^1.13.0",
     "@varlet/icons": "^1.0.0",
-    "@varlet/markdown-loader": "^1.20.0",
+    "@varlet/markdown-vite-plugin": "^1.20.0",
     "@varlet/stylelint-config": "^1.9.0",
     "@varlet/touch-emulator": "^1.0.1",
-    "@varlet/ui": "^1.21.0",
-    "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "3.1.4",
+    "@varlet/ui": "^1.22.0-alpha.5+92fc6bb7",
+    "@vitejs/plugin-vue": "1.9.2",
+    "@vitejs/plugin-vue-jsx": "1.1.8",
+    "@vue/babel-plugin-jsx": "^1.0.7",
     "@vue/test-utils": "^2.0.0-rc.6",
     "babel-jest": "26.6.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-import": "^1.13.3",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.2",
-    "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.6",
     "commander": "^6.2.0",
     "commitizen": "^4.2.2",
     "conventional-changelog-cli": "^2.1.1",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.2.7",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.30.0",
     "execa": "^5.0.0",
-    "fork-ts-checker-webpack-plugin": "^5.2.1",
     "fs-extra": "^9.0.1",
     "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "^5.1.0",
     "husky": "^7.0.1",
     "inquirer": "^8.1.2",
     "jest": "^26.6.3",
     "less": "^3.12.2",
-    "less-loader": "^7.0.2",
     "lint-staged": "^10.5.0",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "ora": "^5.4.0",
-    "portfinder": "^1.0.28",
-    "postcss": "^8.3.7",
-    "postcss-loader": "^4.0.4",
-    "postcss-preset-env": "^6.7.0",
     "prettier": "^2.3.2",
     "release-it": "^14.11.5",
     "slash": "^3.0.0",
-    "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "ts-jest": "^26.5.1",
     "typescript": "^4.3.5",
+    "vite": "2.5.10",
+    "vite-plugin-html": "^2.1.0",
     "vue-jest": "^5.0.0-alpha.8",
     "vue-loader": "16.5.0",
-    "vue-router": "4.0.0-rc.1",
-    "webpack": "^5.23.0",
-    "webpack-dev-server": "^4.2.0",
-    "webpack-merge": "^5.3.0",
-    "webpackbar": "^5.0.0-3"
+    "vue-router": "4.0.0-rc.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
-    "@types/copy-webpack-plugin": "^8.0.1",
     "@types/fs-extra": "^9.0.2",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.168",
-    "@types/webpack-dev-server": "^4.1.0"
+    "@types/lodash": "^4.14.174"
   },
   "peerDependencies": {
-    "vue": "3.1.4"
+    "@vue/compiler-sfc": "3.2.17",
+    "vue": "3.2.17"
   }
 }

package/site/{pc/index.html → index.html}

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title><%= pcTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
-  <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+  <link href="<%= logo %>" rel="icon" type="image/png" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
         name="viewport" />
   <style>
@@ -19,11 +19,11 @@
     }
   </style>
   <script>
-    if ('<%= htmlWebpackPlugin.options.baidu %>') {
+    if ('<%= baidu %>') {
       var _hmt = _hmt || [];
       (function() {
         var hm = document.createElement('script')
-        hm.src = '<%= htmlWebpackPlugin.options.baidu %>'
+        hm.src = '<%= baidu %>'
         var s = document.getElementsByTagName('script')[0]
         s.parentNode.insertBefore(hm, s)
       })()
@@ -32,5 +32,7 @@
 </head>
 <body>
 <div id="app"></div>
+
+<script type="module" src="/pc/main.ts"></script>
 </body>
 </html>

package/site/mobile/App.vue

@@ -53,7 +53,7 @@ import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { bigCamelize, removeEmpty, setThemes, watchLang } from '../utils'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 
 type Language = Record<string, string>
 
@@ -107,8 +107,6 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 body {
   margin: 0;
   padding: 0;

package/site/mobile/components/AppHome.vue

@@ -72,8 +72,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .logo {
   height: 100px;
   padding-top: 30px;

package/site/mobile/main.ts

@@ -6,8 +6,16 @@ import App from './App.vue'
 import '@varlet/touch-emulator'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
+
 import { Icon, AppBar, Button, Menu, Cell, Ripple } from '@varlet/ui'
-import { get } from 'lodash'
+import '@varlet/ui/es/icon/style'
+import '@varlet/ui/es/app-bar/style'
+import '@varlet/ui/es/button/style'
+import '@varlet/ui/es/menu/style'
+import '@varlet/ui/es/cell/style'
+import '@varlet/ui/es/ripple/style'
+
+import { get } from 'lodash-es'
 import { inIframe, isPhone } from '../utils'
 
 const redirect = get(config, 'mobile.redirect')

package/site/{mobile/mobile.html → mobile.html}

@@ -2,12 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title><%= mobileTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
-  <meta content="<%= htmlWebpackPlugin.options.description %>" name="description" />
-  <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+  <link href="<%= logo %>" rel="icon" type="image/png" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
         name="viewport" />
   <style>
@@ -20,11 +19,11 @@
     }
   </style>
   <script>
-    if ('<%= htmlWebpackPlugin.options.baidu %>') {
+    if ('<%= baidu %>') {
       var _hmt = _hmt || [];
       (function() {
         var hm = document.createElement('script')
-        hm.src = '<%= htmlWebpackPlugin.options.baidu %>'
+        hm.src = '<%= baidu %>'
         var s = document.getElementsByTagName('script')[0]
         s.parentNode.insertBefore(hm, s)
       })()
@@ -33,5 +32,7 @@
 </head>
 <body>
 <div id="app"></div>
+
+<script type="module" src="/mobile/main.ts"></script>
 </body>
 </html>

package/site/pc/App.vue

@@ -36,7 +36,7 @@ import AppHeader from './components/AppHeader'
 import AppSidebar from './components/AppSidebar'
 import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { getPCLocationInfo, isPhone, MenuTypes, setThemes } from '../utils'
 
 type Language = Record<string, string>
@@ -142,7 +142,7 @@ export default defineComponent({
 </style>
 
 <style lang="less">
-@import '~@varlet/ui/es/progress/progress';
+@import '@varlet/ui/es/progress/progress';
 
 @doc-active: {
   display: inline;

package/site/pc/components/AppHeader.vue

@@ -48,7 +48,7 @@
 // @ts-ignore
 import config from '@config'
 import { ref, computed } from 'vue'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { getPCLocationInfo, removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
@@ -91,8 +91,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .fade-enter-active {
   animation-name: fade-in;
   animation-duration: 0.3s;

package/site/pc/components/AppSidebar.vue

@@ -30,7 +30,7 @@ import { MenuTypes } from '../../utils'
 import { reactive, ref } from 'vue'
 import type { PropType } from 'vue'
 import type { Menu } from '../App'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 
 export default {
   name: 'AppSidebar',
@@ -68,8 +68,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .varlet-site-sidebar {
   padding: 0 0 15px;
   position: sticky;

package/site/pc/main.ts

@@ -4,10 +4,15 @@ import '@varlet/touch-emulator'
 import routes from '@pc-routes'
 // @ts-ignore
 import config from '@config'
+
 import { Cell, Ripple, Icon } from '@varlet/ui'
+import '@varlet/ui/es/cell/style'
+import '@varlet/ui/es/ripple/style'
+import '@varlet/ui/es/icon/style'
+
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { useProgress } from '../useProgress'
 
 const defaultLanguage = get(config, 'defaultLanguage')

package/site/useProgress.ts

@@ -4,7 +4,7 @@ import { Progress } from '@varlet/ui'
 import config from '@config'
 // @ts-ignore
 import { mountInstance } from '@varlet/ui/es/utils/components'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 
 export function useProgress() {
   const props = reactive({

package/site/utils.ts

@@ -1,5 +1,5 @@
 import { onMounted, onUnmounted } from 'vue'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { StyleProvider } from '@varlet/ui'
 
 export function camelize(str: string): string {