@varlet/cli 1.25.0 → 1.25.1

package/lib/commands/compile.js

@@ -93,16 +93,19 @@ function compile(cmd) {
                     return [4 /*yield*/, runTask('module', compileModule_1.compileModule)];
                 case 3:
                     _b.sent();
-                    return [4 /*yield*/, runTask('commonjs', function () { return (0, compileModule_1.compileModule)('commonjs'); })];
+                    return [4 /*yield*/, runTask('esm bundle', function () { return (0, compileModule_1.compileModule)('esm-bundle'); })];
                 case 4:
+                    _b.sent();
+                    return [4 /*yield*/, runTask('commonjs', function () { return (0, compileModule_1.compileModule)('commonjs'); })];
+                case 5:
                     _b.sent();
                     _a = !cmd.noUmd;
-                    if (!_a) return [3 /*break*/, 6];
+                    if (!_a) return [3 /*break*/, 7];
                     return [4 /*yield*/, runTask('umd', function () { return (0, compileModule_1.compileModule)('umd'); })];
-                case 5:
-                    _a = (_b.sent());
-                    _b.label = 6;
                 case 6:
+                    _a = (_b.sent());
+                    _b.label = 7;
+                case 7:
                     _a;
                     return [2 /*return*/];
             }

package/lib/compiler/compileModule.d.ts

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

package/lib/compiler/compileModule.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileModule = exports.compileFile = exports.compileDir = exports.compileUMD = void 0;
+exports.compileModule = exports.compileFile = exports.compileDir = exports.compileESMBundle = exports.compileUMD = void 0;
 var vite_1 = require("vite");
 var path_1 = require("path");
 var fs_extra_1 = require("fs-extra");
@@ -57,6 +57,15 @@ function compileUMD() {
     });
 }
 exports.compileUMD = compileUMD;
+function compileESMBundle() {
+    return new Promise(function (resolve, reject) {
+        var config = (0, vite_config_1.getESMBundleConfig)((0, varlet_config_1.getVarletConfig)());
+        (0, vite_1.build)(config)
+            .then(function () { return resolve(); })
+            .catch(reject);
+    });
+}
+exports.compileESMBundle = compileESMBundle;
 function compileDir(dir) {
     return __awaiter(this, void 0, void 0, function () {
         var dirs;
@@ -138,13 +147,19 @@ function compileModule(modules) {
                     _a.sent();
                     return [2 /*return*/];
                 case 2:
+                    if (!(modules === 'esm-bundle')) return [3 /*break*/, 4];
+                    return [4 /*yield*/, compileESMBundle()];
+                case 3:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 4:
                     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:
+                case 5:
                     _a.sent();
                     return [4 /*yield*/, (0, fs_extra_1.readdir)(dest)];
-                case 4:
+                case 6:
                     moduleDir = _a.sent();
                     return [4 /*yield*/, Promise.all(moduleDir.map(function (filename) {
                             var file = (0, path_1.resolve)(dest, filename);
@@ -154,13 +169,13 @@ function compileModule(modules) {
                             }
                             return (0, fsUtils_1.isDir)(file) ? compileDir(file) : null;
                         }))];
-                case 5:
+                case 7:
                     _a.sent();
                     return [4 /*yield*/, (0, fsUtils_1.getPublicDirs)()];
-                case 6:
+                case 8:
                     publicDirs = _a.sent();
                     return [4 /*yield*/, (modules === 'commonjs' ? (0, compileScript_1.compileCommonJSEntry)(dest, publicDirs) : (0, compileScript_1.compileESEntry)(dest, publicDirs))];
-                case 7:
+                case 9:
                     _a.sent();
                     (0, compileTypes_1.generateReference)(dest);
                     return [2 /*return*/];

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

@@ -1,4 +1,5 @@
 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 getESMBundleConfig(varletConfig: Record<string, any>): InlineConfig;
 export declare function getUMDConfig(varletConfig: Record<string, any>): InlineConfig;

package/lib/config/vite.config.js

@@ -14,7 +14,7 @@ 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;
+exports.getUMDConfig = exports.getESMBundleConfig = 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"));
@@ -102,6 +102,34 @@ function clear() {
         },
     };
 }
+function getESMBundleConfig(varletConfig) {
+    var name = (0, lodash_1.get)(varletConfig, 'name');
+    var fileName = "".concat((0, lodash_1.kebabCase)(name), ".esm.js");
+    return {
+        logLevel: 'silent',
+        build: {
+            emptyOutDir: true,
+            lib: {
+                name: name,
+                formats: ['es'],
+                fileName: function () { return fileName; },
+                entry: (0, path_1.resolve)(constant_1.ES_DIR, 'umdIndex.js'),
+            },
+            rollupOptions: {
+                external: ['vue'],
+                output: {
+                    dir: constant_1.ES_DIR,
+                    exports: 'named',
+                    globals: {
+                        vue: 'Vue',
+                    },
+                },
+            },
+        },
+        plugins: [clear()],
+    };
+}
+exports.getESMBundleConfig = getESMBundleConfig;
 function getUMDConfig(varletConfig) {
     var name = (0, lodash_1.get)(varletConfig, 'name');
     var fileName = "".concat((0, lodash_1.kebabCase)(name), ".js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -33,9 +33,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "1.25.0",
-    "@varlet/markdown-vite-plugin": "1.25.0",
-    "@varlet/touch-emulator": "1.25.0",
+    "@varlet/icons": "1.25.1",
+    "@varlet/markdown-vite-plugin": "1.25.1",
+    "@varlet/touch-emulator": "1.25.1",
     "@vitejs/plugin-vue": "1.9.2",
     "@vitejs/plugin-vue-jsx": "1.1.8",
     "@vue/babel-plugin-jsx": "1.0.7",
@@ -74,7 +74,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.25.0",
+    "@varlet/touch-emulator": "1.25.1",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

package/site/components/code-example/CodeExample.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
-      <var-site-button text round @click="toggle" v-if="fold">
+      <var-site-button text round @click="toggle" v-if="fold && !disabledFold">
         <var-site-icon name="xml" size="18" />
       </var-site-button>
 
@@ -18,6 +18,7 @@
     <div
       :id="`clip-target-${cid}`"
       class="var-site-code-example__code"
+      :class="[disabledFold ? 'var-site-code-example--scroller' : null]"
       ref="code"
       :style="{
         height: height >= 0 ? `${height}px` : undefined,
@@ -53,8 +54,9 @@ export default defineComponent({
     const code: Ref<HTMLElement | null> = ref(null)
     const cid: Ref<number> = ref(clipId++)
     const fold: Ref = ref(get(config, 'pc.fold'))
+    const disabledFold: Ref<boolean> = ref(false)
     const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
-    const height: Ref<number> = ref(fold.value?.defaultFold ? fold.value?.foldHeight : -1)
+    const height: Ref<number> = ref(-1)
 
     const toggle = async () => {
       const foldHeight = fold.value.foldHeight
@@ -63,21 +65,10 @@ export default defineComponent({
         height.value = -1
         await nextTick()
         const { offsetHeight } = code.value as HTMLElement
-
         height.value = foldHeight
         await doubleRaf()
-
-        if (offsetHeight - foldHeight < offset) {
-          Snackbar(get(config, `pc.fold.message.${getPCLocationInfo().language}`))
-          height.value = foldHeight
-        } else {
-          height.value = offsetHeight
-        }
-      } else {
-        const { offsetHeight } = code.value as HTMLElement
-
         height.value = offsetHeight
-        await doubleRaf()
+      } else {
         height.value = foldHeight
       }
     }
@@ -88,6 +79,10 @@ export default defineComponent({
       trigger.on('success', () => {
         Snackbar.success(clipboard.value[getPCLocationInfo().language])
       })
+
+      const { offsetHeight } = code.value as HTMLElement
+      disabledFold.value = offsetHeight - fold.value.foldHeight < offset
+      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : -1
     })
 
     return {
@@ -95,6 +90,7 @@ export default defineComponent({
       height,
       cid,
       fold,
+      disabledFold,
       clipboard,
       toggle
     }

package/site/components/code-example/codeExample.less

@@ -20,4 +20,10 @@
     overflow: hidden;
     border-radius: 4px;
   }
+
+  &--scroller {
+    code {
+      white-space: nowrap;
+    }
+  }
 }

package/site/components/utils/shared.ts

@@ -16,9 +16,8 @@ export const isPlainObject = (val: unknown): val is Record<string, any> =>
   Object.prototype.toString.call(val) === '[object Object]'
 
 export function kebabCase(str: string): string {
-  const reg = /([^-])([A-Z])/g
-
-  return str.replace(reg, '$1-$2').replace(reg, '$1-$2').toLowerCase()
+  const ret = str.replace(/([A-Z])/g, ' $1').trim()
+  return ret.split(' ').join('-').toLowerCase()
 }
 
 export const isString = (val: unknown): val is string => typeof val === 'string'

package/varlet.default.config.js

@@ -37,10 +37,6 @@ module.exports = {
       'en-US': 'The code has been copied to the clipboard',
     },
     fold: {
-      message: {
-        'zh-CN': '已显示完整代码',
-        'en-US': 'Complete code displayed',
-      },
       defaultFold: true,
       foldHeight: 60,
     },
@@ -100,7 +96,7 @@ module.exports = {
     'color-progress-track': '#202020',
     'color-side-bar': '#4a7afe',
     'color-side-bar-active-background': '#4a7afe1a',
-    'color-app-bar': '#4a7afe',
+    'color-app-bar': '#272727',
     'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
     'color-mobile-cell-hover': '#4a7afe',
     'color-pc-language-active': '#4a7afe',