@varlet/cli 1.23.0-alpha.24 → 1.23.4-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.23.3](https://github.com/haoziqaq/varlet/compare/v1.23.2...v1.23.3) (2021-11-20)
+
+
+### Bug Fixes
+
+* **cli/jest:** add watchAll mode ([84ebb4e](https://github.com/haoziqaq/varlet/commit/84ebb4efe823cb9d7f22995d429b82d8fc3e05c8))
+
+
+
+
+
+# [1.23.0](https://github.com/haoziqaq/varlet/compare/v1.22.10...v1.23.0) (2021-11-19)
+
+
+### Bug Fixes
+
+* **ui,cli:** move dark theme import to example ([579e461](https://github.com/haoziqaq/varlet/commit/579e461a620c2a7e416193b43368b885ec02b862))
+* add assert for example lang ([7ce8bae](https://github.com/haoziqaq/varlet/commit/7ce8baefeaaf0f10d2638cb4927ccbf570b28006))
+* **cli:** bump typescript and commander version ([af893e9](https://github.com/haoziqaq/varlet/commit/af893e970b71ddc46365187c94ecba244513ef5a))
+* **doc:** progress bar should not use unmount function ([0587103](https://github.com/haoziqaq/varlet/commit/05871038e42a50f38fdc2a201107d786431691cd))
+* **site:** modify the width of nav ([af0bfbe](https://github.com/haoziqaq/varlet/commit/af0bfbe8557182fa23083b8a4060625b18132c92))
+* **site:** support bg-color for dark mode of nav button ([b8417fe](https://github.com/haoziqaq/varlet/commit/b8417fe0873b8ecea4bcef21068aa0328ec32f88))
+
+
+### Features
+
+* **all:** support dark mode ([94d9899](https://github.com/haoziqaq/varlet/commit/94d9899cd54ebe1ac864712484d2c6f6f958150a))
+* **cli/generators:** support dark mode ([4795af8](https://github.com/haoziqaq/varlet/commit/4795af8c25cc155eb1fe7cd8d8a6b23b45379989))
+* **menu:** add dark-mode ([e2807f6](https://github.com/haoziqaq/varlet/commit/e2807f6f45ee3331acdd3b9ba4180b16096f0114))
+
+
+
+
+
 ## [1.22.10](https://github.com/haoziqaq/varlet/compare/v1.22.9...v1.22.10) (2021-11-03)
 
 

package/README.en-US.md

@@ -116,6 +116,7 @@ module.exports = {
       'en-US': 'A components library',
     },
     header: {
+      darkMode: null,
       i18n: null,
       github: 'https://github.com/haoziqaq/varlet',
     },
@@ -157,6 +158,7 @@ module.exports = {
       'en-US': 'A components library',
     },
     header: {
+      darkMode: null,
       i18n: null,
       github: 'https://github.com/haoziqaq/varlet',
     },
@@ -200,6 +202,8 @@ varlet-cli test
 
 ```shell
 varlet-cli test -w
+or
+varlet-cli test -wa
 ```
 
 #### Lint code

package/README.md

@@ -111,6 +111,7 @@ module.exports = {
       'zh-CN': '一个组件库',
     },
     header: {
+      darkMode: null,
       i18n: null,
       github: 'https://github.com/haoziqaq/varlet',
     },
@@ -152,6 +153,7 @@ module.exports = {
       'zh-CN': '一个组件库',
     },
     header: {
+      darkMode: null,
       i18n: null,
       github: 'https://github.com/haoziqaq/varlet',
     },
@@ -195,6 +197,8 @@ varlet-cli test
 
 ```shell
 varlet-cli test -w
+or
+varlet-cli test -wa
 ```
 
 #### 检查代码

package/generators/sfc/.gitignore

@@ -7,6 +7,7 @@ node_modules
 .DS_Store
 
 site
+lib
 es
 umd
 coverage

package/generators/sfc/README.md

@@ -47,7 +47,9 @@ yarn test
 #### Run unit test in watch mode
 
 ```shell
-yarn test:watch
+yarn test:watch 
+or
+yarn test:watchAll 
 ```
 
 #### Quickly create a component folder

package/generators/sfc/docs/home.zh-CN.md

@@ -1,6 +1,8 @@
 <div class="varlet-introduce">
-  <img class="varlet-introduce__image" src="../public/logo.svg" />
-  <div class="varlet-introduce__name">Basic</div>  
+  <div class="varlet-introduce__row">
+    <img class="varlet-introduce__image" src="../public/logo.svg" />
+    <div class="varlet-introduce__name">Basic UI</div>  
+  </div>
   <div class="varlet-introduce__des">一个组件库</div>
 </div>
 

package/generators/sfc/package.json

@@ -2,6 +2,7 @@
   "name": "basic-ui",
   "version": "0.0.0",
   "description": "A basic components library",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "typings": "types/index.d.ts",
   "vetur": {
@@ -27,7 +28,8 @@
     "genAllLog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "release": "yarn compile && release-it",
     "test": "varlet-cli jest",
-    "test:watch": "varlet-cli jest -w"
+    "test:watch": "varlet-cli jest -w",
+    "test:watchAll": "varlet-cli jest -wa"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
@@ -63,6 +65,7 @@
   "eslintConfig": {
     "root": true,
     "ignorePatterns": [
+      "lib/**",
       "es/**",
       "umd/**",
       "site/**",
@@ -79,6 +82,7 @@
       "@varlet/stylelint-config"
     ],
     "ignoreFiles": [
+      "lib/**",
       "es/**",
       "umd/**",
       "site/**",

package/generators/sfc/varlet.config.js

@@ -5,6 +5,14 @@ module.exports = {
   logo: './logo.svg',
   useMobile: true,
   themes: {
+    'color-body': '#fff',
+    'color-bar': '#fff',
+    'color-sub-bar': '#f5f5f5',
+    'color-text': '#555',
+    'color-sub-text': '#888',
+    'color-border': 'rgba(0, 0, 0, 0.12)',
+    'color-shadow': '#eee',
+    'color-introduce-border': '#009688',
     'color-primary': '#009688',
     'color-link': '#009688',
     'color-type': '#009688',
@@ -13,12 +21,37 @@ module.exports = {
     'color-side-bar': '#009688',
     'color-side-bar-active-background': '#00968821',
     'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
     'color-pc-language-active': '#009688',
     'color-pc-language-active-background': '#00968821',
     'color-mobile-language-active': '#009688',
     'color-mobile-language-active-background': '#00968821',
     'color-mobile-cell-hover': '#009688'
   },
+  darkThemes: {
+    'color-body': '#121212',
+    'color-bar': '#1e1e1e',
+    'color-sub-bar': '#272727',
+    'color-text': '#fff',
+    'color-sub-text': '#aaa',
+    'color-border': '#333',
+    'color-shadow': '#121212',
+    'color-introduce-border': '#555',
+    'color-primary': '#009688',
+    'color-link': '#009688',
+    'color-type': '#009688',
+    'color-progress': '#009688',
+    'color-progress-track': '#202020',
+    'color-side-bar': '#009688',
+    'color-side-bar-active-background': '#00968821',
+    'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+    'color-pc-language-active': '#009688',
+    'color-pc-language-active-background': '#00968821',
+    'color-mobile-language-active': '#009688',
+    'color-mobile-language-active-background': '#00968821',
+    'color-mobile-cell-hover': '#009688',
+  },
   highlight: {
     style: './highlight.css',
   },

package/generators/tsx/.gitignore

@@ -7,6 +7,7 @@ node_modules
 .DS_Store
 
 site
+lib
 es
 umd
 coverage

package/generators/tsx/README.md

@@ -47,7 +47,9 @@ yarn test
 #### Run unit test in watch mode
 
 ```shell
-yarn test:watch
+yarn test:watch 
+or
+yarn test:watchAll 
 ```
 
 #### Quickly create a component folder

package/generators/tsx/docs/home.zh-CN.md

@@ -1,6 +1,8 @@
 <div class="varlet-introduce">
-  <img class="varlet-introduce__image" src="../public/logo.svg" />
-  <div class="varlet-introduce__name">Basic</div>  
+  <div class="varlet-introduce__row">
+    <img class="varlet-introduce__image" src="../public/logo.svg" />
+    <div class="varlet-introduce__name">Basic UI</div>  
+  </div>
   <div class="varlet-introduce__des">一个组件库</div>
 </div>
 

package/generators/tsx/package.json

@@ -2,6 +2,7 @@
   "name": "basic-ui",
   "version": "0.0.0",
   "description": "A basic components library",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "typings": "types/index.d.ts",
   "vetur": {
@@ -27,7 +28,8 @@
     "genAllLog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "release": "yarn compile && release-it",
     "test": "varlet-cli jest",
-    "test:watch": "varlet-cli jest -w"
+    "test:watch": "varlet-cli jest -w",
+    "test:watchAll": "varlet-cli jest -wa"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
@@ -63,6 +65,7 @@
   "eslintConfig": {
     "root": true,
     "ignorePatterns": [
+      "lib/**",
       "es/**",
       "umd/**",
       "site/**",
@@ -79,6 +82,7 @@
       "@varlet/stylelint-config"
     ],
     "ignoreFiles": [
+      "lib/**",
       "es/**",
       "umd/**",
       "site/**",

package/generators/tsx/varlet.config.js

@@ -5,6 +5,14 @@ module.exports = {
   logo: './logo.svg',
   useMobile: true,
   themes: {
+    'color-body': '#fff',
+    'color-bar': '#fff',
+    'color-sub-bar': '#f5f5f5',
+    'color-text': '#555',
+    'color-sub-text': '#888',
+    'color-border': 'rgba(0, 0, 0, 0.12)',
+    'color-shadow': '#eee',
+    'color-introduce-border': '#009688',
     'color-primary': '#009688',
     'color-link': '#009688',
     'color-type': '#009688',
@@ -13,12 +21,37 @@ module.exports = {
     'color-side-bar': '#009688',
     'color-side-bar-active-background': '#00968821',
     'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
     'color-pc-language-active': '#009688',
     'color-pc-language-active-background': '#00968821',
     'color-mobile-language-active': '#009688',
     'color-mobile-language-active-background': '#00968821',
     'color-mobile-cell-hover': '#009688'
   },
+  darkThemes: {
+    'color-body': '#121212',
+    'color-bar': '#1e1e1e',
+    'color-sub-bar': '#272727',
+    'color-text': '#fff',
+    'color-sub-text': '#aaa',
+    'color-border': '#333',
+    'color-shadow': '#121212',
+    'color-introduce-border': '#555',
+    'color-primary': '#009688',
+    'color-link': '#009688',
+    'color-type': '#009688',
+    'color-progress': '#009688',
+    'color-progress-track': '#202020',
+    'color-side-bar': '#009688',
+    'color-side-bar-active-background': '#00968821',
+    'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+    'color-pc-language-active': '#009688',
+    'color-pc-language-active-background': '#00968821',
+    'color-mobile-language-active': '#009688',
+    'color-mobile-language-active-background': '#00968821',
+    'color-mobile-cell-hover': '#009688',
+  },
   highlight: {
     style: './highlight.css',
   },

package/lib/commands/compile.d.ts

@@ -1,4 +1,4 @@
-export declare function removeDir(): Promise<[void, void, void]>;
+export declare function removeDir(): Promise<[void, void, void, void]>;
 export declare function runTask(taskName: string, task: () => any): Promise<void>;
 export declare function compile(cmd: {
     noUmd: boolean;

package/lib/commands/compile.js

@@ -48,7 +48,7 @@ var compileModule_1 = require("../compiler/compileModule");
 var compileTemplateHighlight_1 = require("../compiler/compileTemplateHighlight");
 var compileTypes_1 = require("../compiler/compileTypes");
 function removeDir() {
-    return Promise.all([(0, fs_extra_1.remove)(constant_1.ES_DIR), (0, fs_extra_1.remove)(constant_1.HL_DIR), (0, fs_extra_1.remove)(constant_1.UMD_DIR)]);
+    return Promise.all([(0, fs_extra_1.remove)(constant_1.ES_DIR), (0, fs_extra_1.remove)(constant_1.LIB_DIR), (0, fs_extra_1.remove)(constant_1.HL_DIR), (0, fs_extra_1.remove)(constant_1.UMD_DIR)]);
 }
 exports.removeDir = removeDir;
 function runTask(taskName, task) {
@@ -87,20 +87,22 @@ function compile(cmd) {
                     return [4 /*yield*/, removeDir()];
                 case 1:
                     _b.sent();
-                    return [4 /*yield*/, Promise.all([
-                            runTask('types', compileTypes_1.compileTypes),
-                            runTask('template highlight', compileTemplateHighlight_1.compileTemplateHighlight),
-                            runTask('module', compileModule_1.compileModule),
-                        ])];
+                    return [4 /*yield*/, Promise.all([runTask('types', compileTypes_1.compileTypes), runTask('template highlight', compileTemplateHighlight_1.compileTemplateHighlight)])];
                 case 2:
+                    _b.sent();
+                    return [4 /*yield*/, runTask('module', compileModule_1.compileModule)];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, runTask('commonjs', function () { return (0, compileModule_1.compileModule)('commonjs'); })];
+                case 4:
                     _b.sent();
                     _a = !cmd.noUmd;
-                    if (!_a) return [3 /*break*/, 4];
+                    if (!_a) return [3 /*break*/, 6];
                     return [4 /*yield*/, runTask('umd', function () { return (0, compileModule_1.compileModule)('umd'); })];
-                case 3:
+                case 5:
                     _a = (_b.sent());
-                    _b.label = 4;
-                case 4:
+                    _b.label = 6;
+                case 6:
                     _a;
                     return [2 /*return*/];
             }

package/lib/commands/create.js

@@ -60,7 +60,7 @@ function create(name) {
                     indexTemplate = "import " + bigCamelizeName + " from './" + bigCamelizeName + ".vue'\nimport type { App } from 'vue'\n\n" + bigCamelizeName + ".install = function(app: App) {\n  app.component(" + bigCamelizeName + ".name, " + bigCamelizeName + ")\n}\n\nexport const _" + bigCamelizeName + "Component = " + bigCamelizeName + "\n\nexport default " + bigCamelizeName + "\n";
                     testsTemplate = "import example from '../example'\nimport " + bigCamelizeName + " from '..'\nimport { createApp } from 'vue'\nimport { mount } from '@vue/test-utils'\n\ntest('test " + name + " example', () => {\n  const wrapper = mount(example)\n  expect(wrapper.html()).toMatchSnapshot()\n})\n\ntest('test " + name + " plugin', () => {\n  const app = createApp({}).use(" + bigCamelizeName + ")\n  expect(app.component(" + bigCamelizeName + ".name)).toBeTruthy()\n})\n";
                     exampleTemplate = "<template>\n  <app-type></app-type>\n  <" + namespace + "-" + name + "/>\n</template>\n\n<script>\nimport " + bigCamelizeName + " from '..'\nimport AppType from '@varlet/cli/site/mobile/components/AppType'\nimport { watchLang } from '@varlet/cli/site/utils'\nimport { use, pack } from './locale'\n\nexport default {\n  name: '" + bigCamelizeName + "Example',\n  components: {\n    [" + bigCamelizeName + ".name]: " + bigCamelizeName + ",\n    AppType\n  },\n  setup() {\n\n     watchLang(use)\n\n     return {\n       pack\n     }\n  }\n}\n</script>\n";
-                    localeIndexTemplate = "// lib\nimport _zhCN from '../../../locale/zh-CN'\nimport _enCN from '../../../locale/en-US'\n// mobile example doc\nimport zhCN from './zh-CN'\nimport enUS from './en-US'\nimport { useLocale, add as _add, use as _use } from '../../../locale'\n\nconst { add, use: exampleUse, pack, packs, merge } = useLocale()\n\nconst use = (lang: string) => {\n  _use(lang)\n  exampleUse(lang)\n}\n\nexport { add, pack, packs, merge, use }\n\n// lib\n_add('zh-CN', _zhCN)\n_add('en-US', _enCN)\n// mobile example doc\nadd('zh-CN', zhCN)\nadd('en-US', enUS)\n";
+                    localeIndexTemplate = "// lib\nimport _zhCN from '../../../locale/zh-CN'\nimport _enCN from '../../../locale/en-US'\n// mobile example doc\nimport zhCN from './zh-CN'\nimport enUS from './en-US'\nimport { useLocale, add as _add, use as _use } from '../../../locale'\n\nconst { add, use: exampleUse, pack, packs, merge } = useLocale()\n\nconst use = (lang: string) => {\n  _use(lang)\n  exampleUse(lang)\n}\n\nexport { add, pack, packs, merge, use }\n\n// lib\n_add('zh-CN', _zhCN)\n_add('en-US', _enCN)\n// mobile example doc\nadd('zh-CN', zhCN as any)\nadd('en-US', enUS as any)\n";
                     localTemplate = "export default {\n\n}\n";
                     componentDir = (0, path_1.resolve)(constant_1.SRC_DIR, name);
                     testsDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.TESTS_DIR_NAME);

package/lib/commands/jest.d.ts

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

package/lib/commands/jest.js

@@ -53,6 +53,7 @@ function jest(cmd) {
                     config = {
                         rootDir: constant_1.CWD,
                         watch: cmd.watch,
+                        watchAll: cmd.watchAll,
                         clearCache: cmd.clearCache,
                         config: constant_1.JEST_CONFIG,
                         testRegex: cmd.component && cmd.component + "/__tests__/.*.spec.[jt]s?$",

package/lib/compiler/compileModule.d.ts

@@ -1,4 +1,4 @@
 export declare function compileUMD(): Promise<void>;
 export declare function compileDir(dir: string): Promise<void>;
 export declare function compileFile(file: string): Promise<void>;
-export declare function compileModule(modules?: string | boolean): Promise<void>;
+export declare function compileModule(modules?: 'umd' | 'commonjs' | boolean): Promise<void>;

package/lib/compiler/compileModule.js

@@ -127,23 +127,26 @@ exports.compileFile = compileFile;
 function compileModule(modules) {
     if (modules === void 0) { modules = false; }
     return __awaiter(this, void 0, void 0, function () {
-        var moduleDir, _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var dest, moduleDir, publicDirs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     if (!(modules === 'umd')) return [3 /*break*/, 2];
                     return [4 /*yield*/, compileUMD()];
                 case 1:
-                    _c.sent();
+                    _a.sent();
                     return [2 /*return*/];
-                case 2: return [4 /*yield*/, (0, fs_extra_1.copy)(constant_1.SRC_DIR, constant_1.ES_DIR)];
+                case 2:
+                    process.env.BABEL_MODULE = modules === 'commonjs' ? 'commonjs' : 'module';
+                    dest = modules === 'commonjs' ? constant_1.LIB_DIR : constant_1.ES_DIR;
+                    return [4 /*yield*/, (0, fs_extra_1.copy)(constant_1.SRC_DIR, dest)];
                 case 3:
-                    _c.sent();
+                    _a.sent();
                     return [4 /*yield*/, (0, fs_extra_1.readdir)(constant_1.ES_DIR)];
                 case 4:
-                    moduleDir = _c.sent();
+                    moduleDir = _a.sent();
                     return [4 /*yield*/, Promise.all(moduleDir.map(function (filename) {
-                            var file = (0, path_1.resolve)(constant_1.ES_DIR, filename);
+                            var file = (0, path_1.resolve)(dest, filename);
                             if ((0, fsUtils_1.isDir)(file)) {
                                 (0, fs_extra_1.ensureFileSync)((0, path_1.resolve)(file, './style/index.js'));
                                 (0, fs_extra_1.ensureFileSync)((0, path_1.resolve)(file, './style/less.js'));
@@ -151,13 +154,13 @@ function compileModule(modules) {
                             return (0, fsUtils_1.isDir)(file) ? compileDir(file) : null;
                         }))];
                 case 5:
-                    _c.sent();
-                    _a = compileScript_1.compileLibraryEntry;
-                    _b = [constant_1.ES_DIR];
+                    _a.sent();
                     return [4 /*yield*/, (0, fsUtils_1.getPublicDirs)()];
-                case 6: return [4 /*yield*/, _a.apply(void 0, _b.concat([_c.sent()]))];
+                case 6:
+                    publicDirs = _a.sent();
+                    return [4 /*yield*/, (modules === 'commonjs' ? (0, compileScript_1.compileCommonJSEntry)(dest, publicDirs) : (0, compileScript_1.compileESEntry)(dest, publicDirs))];
                 case 7:
-                    _c.sent();
+                    _a.sent();
                     return [2 /*return*/];
             }
         });

package/lib/compiler/compileScript.d.ts

@@ -8,4 +8,5 @@ export declare const replaceJSXExt: (script: string) => string;
 export declare const replaceTSXExt: (script: string) => string;
 export declare function compileScript(script: string, file: string): Promise<void>;
 export declare function compileScriptFile(file: string): Promise<void>;
-export declare function compileLibraryEntry(dir: string, publicDirs: string[]): Promise<void>;
+export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;
+export declare function compileCommonJSEntry(dir: string, publicDirs: string[]): Promise<void>;

package/lib/compiler/compileScript.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileLibraryEntry = exports.compileScriptFile = exports.compileScript = exports.replaceTSXExt = exports.replaceJSXExt = exports.replaceTSExt = exports.replaceVueExt = exports.IMPORT_TSX_PATH_RE = exports.IMPORT_JSX_PATH_RE = exports.IMPORT_TS_PATH_RE = exports.IMPORT_VUE_PATH_RE = void 0;
+exports.compileCommonJSEntry = exports.compileESEntry = exports.compileScriptFile = exports.compileScript = exports.replaceTSXExt = exports.replaceJSXExt = exports.replaceTSExt = exports.replaceVueExt = exports.IMPORT_TSX_PATH_RE = exports.IMPORT_JSX_PATH_RE = exports.IMPORT_TS_PATH_RE = exports.IMPORT_VUE_PATH_RE = void 0;
 var core_1 = require("@babel/core");
 var fsUtils_1 = require("../shared/fsUtils");
 var fs_extra_1 = require("fs-extra");
@@ -57,7 +57,7 @@ var replaceTSXExt = function (script) { return script.replace(exports.IMPORT_TSX
 exports.replaceTSXExt = replaceTSXExt;
 function compileScript(script, file) {
     return __awaiter(this, void 0, void 0, function () {
-        var code;
+        var code, modules;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, (0, core_1.transformAsync)(script, {
@@ -65,8 +65,9 @@ function compileScript(script, file) {
                     })];
                 case 1:
                     code = (_a.sent()).code;
-                    code = (0, compileStyle_1.extractStyleDependencies)(file, code, compileStyle_1.IMPORT_CSS_RE, 'css', false);
-                    code = (0, compileStyle_1.extractStyleDependencies)(file, code, compileStyle_1.IMPORT_LESS_RE, 'less', false);
+                    modules = process.env.BABEL_MODULE;
+                    code = (0, compileStyle_1.extractStyleDependencies)(file, code, modules === 'commonjs' ? compileStyle_1.REQUIRE_CSS_RE : compileStyle_1.IMPORT_CSS_RE, 'css', false);
+                    code = (0, compileStyle_1.extractStyleDependencies)(file, code, modules === 'commonjs' ? compileStyle_1.REQUIRE_LESS_RE : compileStyle_1.IMPORT_LESS_RE, 'less', false);
                     code = (0, exports.replaceVueExt)(code);
                     code = (0, exports.replaceTSXExt)(code);
                     code = (0, exports.replaceJSXExt)(code);
@@ -95,7 +96,7 @@ function compileScriptFile(file) {
     });
 }
 exports.compileScriptFile = compileScriptFile;
-function compileLibraryEntry(dir, publicDirs) {
+function compileESEntry(dir, publicDirs) {
     return __awaiter(this, void 0, void 0, function () {
         var imports, plugins, constInternalComponents, cssImports, lessImports, publicComponents, install, indexTemplate, styleTemplate, umdTemplate, lessTemplate;
         return __generator(this, function (_a) {
@@ -134,4 +135,40 @@ function compileLibraryEntry(dir, publicDirs) {
         });
     });
 }
-exports.compileLibraryEntry = compileLibraryEntry;
+exports.compileESEntry = compileESEntry;
+function compileCommonJSEntry(dir, publicDirs) {
+    return __awaiter(this, void 0, void 0, function () {
+        var requires, plugins, cssRequires, lessRequires, publicComponents, install, indexTemplate, styleTemplate, lessTemplate;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    requires = [];
+                    plugins = [];
+                    cssRequires = [];
+                    lessRequires = [];
+                    publicComponents = [];
+                    publicDirs.forEach(function (dirname) {
+                        var publicComponent = (0, fsUtils_1.bigCamelize)(dirname);
+                        publicComponents.push(publicComponent);
+                        requires.push("const " + publicComponent + " = require('./" + dirname + "')");
+                        plugins.push(publicComponent + ".install && app.use(" + publicComponent + ")");
+                        cssRequires.push("require('./" + dirname + "/style')");
+                        lessRequires.push("require('./" + dirname + "/style/less')");
+                    });
+                    install = "\nfunction install(app) {\n  " + plugins.join('\n  ') + "\n}\n";
+                    indexTemplate = requires.join('\n') + "\n\n" + install + "\n\nmodule.exports = {\n  install,\n  " + publicComponents.join(',\n  ') + "\n}\n";
+                    styleTemplate = cssRequires.join('\n') + "\n";
+                    lessTemplate = lessRequires.join('\n') + "\n";
+                    return [4 /*yield*/, Promise.all([
+                            (0, fs_extra_1.writeFile)((0, path_1.resolve)(dir, 'index.js'), indexTemplate, 'utf-8'),
+                            (0, fs_extra_1.writeFile)((0, path_1.resolve)(dir, 'style.js'), styleTemplate, 'utf-8'),
+                            (0, fs_extra_1.writeFile)((0, path_1.resolve)(dir, 'less.js'), lessTemplate, 'utf-8'),
+                        ])];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.compileCommonJSEntry = compileCommonJSEntry;

package/lib/compiler/compileStyle.d.ts

@@ -2,6 +2,8 @@ export declare const EMPTY_SPACE_RE: RegExp;
 export declare const EMPTY_LINE_RE: RegExp;
 export declare const IMPORT_CSS_RE: RegExp;
 export declare const IMPORT_LESS_RE: RegExp;
+export declare const REQUIRE_CSS_RE: RegExp;
+export declare const REQUIRE_LESS_RE: RegExp;
 export declare const STYLE_IMPORT_RE: RegExp;
 export declare const clearEmptyLine: (s: string) => string;
 export declare function normalizeStyleDependency(styleImport: string, reg: RegExp): string;

package/lib/compiler/compileStyle.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 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;
+exports.compileLess = exports.extractStyleDependencies = exports.normalizeStyleDependency = exports.clearEmptyLine = exports.STYLE_IMPORT_RE = exports.REQUIRE_LESS_RE = exports.REQUIRE_CSS_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");
 var less_1 = require("less");
 var fsUtils_1 = require("../shared/fsUtils");
@@ -45,6 +45,8 @@ exports.EMPTY_SPACE_RE = /[\s]+/g;
 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.REQUIRE_CSS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.css)['"]\s*\);?(?!\s*['"`])/g;
+exports.REQUIRE_LESS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.less)['"]\s*\);?(?!\s*['"`])/g;
 exports.STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
 var clearEmptyLine = function (s) { return s.replace(exports.EMPTY_LINE_RE, '').replace(exports.EMPTY_SPACE_RE, ' '); };
 exports.clearEmptyLine = clearEmptyLine;
@@ -63,14 +65,19 @@ function extractStyleDependencies(file, code, reg, expect, self) {
     var styleImports = (_a = code.match(reg)) !== null && _a !== void 0 ? _a : [];
     var cssFile = (0, path_1.resolve)(dir, './style/index.js');
     var lessFile = (0, path_1.resolve)(dir, './style/less.js');
+    var modules = process.env.BABEL_MODULE;
     styleImports.forEach(function (styleImport) {
         var normalizedPath = normalizeStyleDependency(styleImport, reg);
-        (0, fsUtils_1.smartAppendFileSync)(cssFile, "import '" + normalizedPath + ".css'\n");
-        (0, fsUtils_1.smartAppendFileSync)(lessFile, "import '" + normalizedPath + "." + expect + "'\n");
+        (0, fsUtils_1.smartAppendFileSync)(cssFile, modules === 'commonjs' ? "require('" + normalizedPath + ".css')\n" : "import '" + normalizedPath + ".css'\n");
+        (0, fsUtils_1.smartAppendFileSync)(lessFile, modules === 'commonjs' ? "require('" + normalizedPath + "." + expect + "')\n" : "import '" + normalizedPath + "." + expect + "'\n");
     });
     if (self) {
-        (0, fsUtils_1.smartAppendFileSync)(cssFile, "import '" + normalizeStyleDependency(base, reg) + ".css'\n");
-        (0, fsUtils_1.smartAppendFileSync)(lessFile, "import '" + normalizeStyleDependency(base, reg) + "." + expect + "'\n");
+        (0, fsUtils_1.smartAppendFileSync)(cssFile, modules === 'commonjs'
+            ? "require('" + normalizeStyleDependency(base, reg) + ".css')\n"
+            : "import '" + normalizeStyleDependency(base, reg) + ".css'\n");
+        (0, fsUtils_1.smartAppendFileSync)(lessFile, modules === 'commonjs'
+            ? "require('" + normalizeStyleDependency(base, reg) + "." + expect + "')\n"
+            : "import '" + normalizeStyleDependency(base, reg) + "." + expect + "'\n");
     }
     return code.replace(reg, '');
 }

package/lib/config/babel.config.js

@@ -5,13 +5,13 @@ module.exports = function (api, options) {
     if (api) {
         api.cache.never();
     }
-    var isTest = process.env.NODE_ENV === 'test';
+    var isCommonJS = process.env.NODE_ENV === 'test' || process.env.BABEL_MODULE === 'commonjs';
     return {
         presets: [
             [
                 require.resolve('@babel/preset-env'),
                 {
-                    modules: isTest ? 'commonjs' : false,
+                    modules: isCommonJS ? 'commonjs' : false,
                     loose: options.loose,
                 },
             ],

package/lib/index.js

@@ -49,7 +49,8 @@ program.command('create <name>').description('Create a component directory').act
 program
     .command('jest')
     .description('Run Jest in work directory')
-    .option('-w, --watch', 'Watch files change auto jest')
+    .option('-w, --watch', 'Watch files for changes and rerun tests related to changed files')
+    .option('-wa, --watchAll', 'Watch files for changes and rerun all tests when something changes')
     .option('-c, --component <componentName>', 'Test a specific component')
     .option('-cc --clearCache', 'Clear test cache')
     .action(jest_1.jest);

package/lib/shared/constant.d.ts

@@ -2,6 +2,7 @@ export declare const CWD: string;
 export declare const VARLET_CONFIG: string;
 export declare const SRC_DIR: string;
 export declare const ES_DIR: string;
+export declare const LIB_DIR: string;
 export declare const UMD_DIR: string;
 export declare const TYPES_DIR: string;
 export declare const ROOT_DOCS_DIR: string;

package/lib/shared/constant.js

@@ -1,11 +1,12 @@
 "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_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_DIR = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.CLI_PACKAGE_JSON = exports.UI_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.ESLINT_EXTENSIONS = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.CWD = void 0;
+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_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_DIR = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.CLI_PACKAGE_JSON = exports.UI_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.ESLINT_EXTENSIONS = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.LIB_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.CWD = void 0;
 var path_1 = require("path");
 exports.CWD = process.cwd();
 exports.VARLET_CONFIG = (0, path_1.resolve)(exports.CWD, 'varlet.config.js');
 exports.SRC_DIR = (0, path_1.resolve)(exports.CWD, 'src');
 exports.ES_DIR = (0, path_1.resolve)(exports.CWD, 'es');
+exports.LIB_DIR = (0, path_1.resolve)(exports.CWD, 'lib');
 exports.UMD_DIR = (0, path_1.resolve)(exports.CWD, 'umd');
 exports.TYPES_DIR = (0, path_1.resolve)(exports.CWD, 'types');
 exports.ROOT_DOCS_DIR = (0, path_1.resolve)(exports.CWD, 'docs');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.0-alpha.24+eb929c3b",
+  "version": "1.23.4-alpha.0+4a424d4c",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "eb929c3b3b6f4546dd7c9f770f6bf19a68554738",
+  "gitHead": "4a424d4c066f7de69cbf561a5bc9279862739637",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
@@ -40,7 +40,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@release-it/conventional-changelog": "^3.3.0",
     "@varlet/eslint-config": "^1.13.0",
-    "@varlet/icons": "^1.22.0",
+    "@varlet/icons": "^1.23.0",
     "@varlet/markdown-vite-plugin": "^1.22.0",
     "@varlet/stylelint-config": "^1.9.0",
     "@varlet/touch-emulator": "^1.0.1",

package/site/mobile/App.vue

@@ -31,11 +31,13 @@
         </template>
         <template #right>
           <var-site-button
-            style="transform: translateX(2px)"
             text
             round
             color="transparent"
             text-color="#fff"
+            :style="{
+              transform: languages ? 'translateX(2px)' : 'translateX(-4px)'
+            }"
             v-if="darkMode"
             @click="toggleTheme"
           >
@@ -51,7 +53,7 @@
             color="transparent"
             text-color="#fff"
             @click.stop="showMenu = true"
-            v-if="languages || darkMode"
+            v-if="languages"
           >
             <var-site-icon name="translate" :size="24" />
             <var-site-icon name="chevron-down" :size="22" />
@@ -101,7 +103,7 @@ import {
 import { get } from 'lodash-es'
 
 export default defineComponent({
-  setup() {
+  setup: function() {
     const bigCamelizeComponentName: Ref<string> = ref('')
     const route = useRoute()
     const showBackIcon: Ref<boolean> = ref(false)
@@ -171,6 +173,8 @@ export default defineComponent({
       }
     }
 
+    (window as any).toggleTheme = toggleTheme
+
     setThemes(config, currentThemes.value)
     window.postMessage(getThemesMessage(), '*')
 
@@ -197,7 +201,7 @@ export default defineComponent({
       changeLanguage,
       toggleTheme
     }
-  },
+  }
 })
 </script>
 

package/site/pc/App.vue

@@ -154,7 +154,7 @@ export default defineComponent({
 body {
   min-width: 1200px;
   margin: 0;
-  padding: 0;
+  padding: 60px 0 0;
   font-family: 'Roboto', sans-serif;
   background: var(--site-config-color-body);
   color: var(--site-config-color-text);
@@ -213,13 +213,12 @@ iframe {
     &-content {
       display: flex;
       background: var(--site-config-color-body);
-      margin-top: 60px;
       margin-left: 240px;
+      min-height: calc(100vh - 60px);
     }
 
     &-doc-container {
       flex: 1 0 0;
-      overflow-y: auto;
       min-width: 500px;
       padding: 0 25px;
       overflow-x: hidden;

package/site/utils.ts

@@ -1,7 +1,6 @@
 import { onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash-es'
 import { formatStyleVars } from './components/utils/elements'
-import dark from '@varlet/ui/src/themes/dark'
 
 export * from './components/utils/components'
 export * from './components/utils/elements'
@@ -150,7 +149,7 @@ export function getBrowserThemes(): 'darkThemes' | 'themes' {
   return currentThemes
 }
 
-export function watchDarkMode(cb?: (themes: 'darkThemes' | 'themes') => void) {
+export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
   watchThemes((themes) => {
     StyleProvider(themes === 'darkThemes' ? dark : null)