@varlet/cli 2.6.1 → 2.7.0-alpha.1673534139536

package/lib/node/commands/compile.js

@@ -25,11 +25,13 @@ export async function compile(options) {
     await removeDir();
     await Promise.all([runTask('types', compileTypes), runTask('template highlight', compileTemplateHighlight)]);
     process.env.TARGET_MODULE = 'module';
+    process.env.BABEL_MODULE = 'module';
     await runTask('module', compileModule);
     process.env.TARGET_MODULE = 'esm-bundle';
-    await runTask('esm bundle', () => compileModule('esm-bundle'));
+    await runTask('esm bundle', compileModule);
     process.env.TARGET_MODULE = 'commonjs';
-    await runTask('commonjs', () => compileModule('commonjs'));
+    process.env.BABEL_MODULE = 'commonjs';
+    await runTask('commonjs', compileModule);
     process.env.TARGET_MODULE = 'umd';
-    !options.noUmd && (await runTask('umd', () => compileModule('umd')));
+    !options.noUmd && (await runTask('umd', compileModule));
 }

package/lib/node/compiler/compileModule.d.ts

@@ -2,4 +2,4 @@ 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' | 'esm-bundle' | boolean): Promise<void>;
+export declare function compileModule(): Promise<void>;

package/lib/node/compiler/compileModule.js

@@ -4,29 +4,19 @@ import { resolve } from 'path';
 import { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME, LIB_DIR, } from '../shared/constant.js';
 import { getPublicDirs, isDir, isDTS, isLess, isScript, isSFC } from '../shared/fsUtils.js';
 import { compileSFC } from './compileSFC.js';
-import { compileESEntry, compileCommonJSEntry, compileScriptFile } from './compileScript.js';
+import { compileESEntry, compileCommonJSEntry, compileScriptFile, getScriptExtname } from './compileScript.js';
 import { clearLessFiles, compileLess } from './compileStyle.js';
 import { getESMBundleConfig, getUMDConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
 import { generateReference } from './compileTypes.js';
 const { copy, ensureFileSync, readdir, removeSync } = fse;
-export function compileUMD() {
-    return new Promise((resolve, reject) => {
-        getVarletConfig().then((varletConfig) => {
-            build(getUMDConfig(varletConfig))
-                .then(() => resolve())
-                .catch(reject);
-        });
-    });
+export async function compileUMD() {
+    const varletConfig = await getVarletConfig();
+    await build(getUMDConfig(varletConfig));
 }
-export function compileESMBundle() {
-    return new Promise((resolve, reject) => {
-        getVarletConfig().then((varletConfig) => {
-            build(getESMBundleConfig(varletConfig))
-                .then(() => resolve())
-                .catch(reject);
-        });
-    });
+export async function compileESMBundle() {
+    const varletConfig = await getVarletConfig();
+    await build(getESMBundleConfig(varletConfig));
 }
 export async function compileDir(dir) {
     const dirs = await readdir(dir);
@@ -45,26 +35,26 @@ export async function compileFile(file) {
     isLess(file) && (await compileLess(file));
     isDir(file) && (await compileDir(file));
 }
-export async function compileModule(modules = false) {
-    if (modules === 'umd') {
+export async function compileModule() {
+    const targetModule = process.env.TARGET_MODULE;
+    if (targetModule === 'umd') {
         await compileUMD();
         return;
     }
-    if (modules === 'esm-bundle') {
+    if (targetModule === 'esm-bundle') {
         await compileESMBundle();
         return;
     }
-    process.env.BABEL_MODULE = modules === 'commonjs' ? 'commonjs' : 'module';
-    const dest = modules === 'commonjs' ? LIB_DIR : ES_DIR;
+    const dest = targetModule === 'commonjs' ? LIB_DIR : ES_DIR;
     await copy(SRC_DIR, dest);
     const moduleDir = await readdir(dest);
     await Promise.all(moduleDir.map((filename) => {
         const file = resolve(dest, filename);
-        isDir(file) && ensureFileSync(resolve(file, './style/index.js'));
+        isDir(file) && ensureFileSync(resolve(file, `./style/index.${getScriptExtname()}`));
         return isDir(file) ? compileDir(file) : null;
     }));
     const publicDirs = await getPublicDirs();
-    if (modules === 'commonjs') {
+    if (targetModule === 'commonjs') {
         await compileCommonJSEntry(dest, publicDirs);
     }
     else {

package/lib/node/compiler/compileSFC.js

@@ -68,7 +68,7 @@ export async function compileSFC(sfc) {
             });
             code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
             writeFileSync(file, clearEmptyLine(code), 'utf-8');
-            smartAppendFileSync(cssFile, process.env.BABEL_MODULE === 'commonjs'
+            smartAppendFileSync(cssFile, process.env.TARGET_MODULE === 'commonjs'
                 ? `require('${dependencyPath}.css')\n`
                 : `import '${dependencyPath}.css'\n`);
             if (style.lang === 'less') {

package/lib/node/compiler/compileScript.d.ts

@@ -13,5 +13,6 @@ export declare const replaceTSXExt: (script: string) => string;
 export declare const moduleCompatible: (script: string) => Promise<string>;
 export declare function compileScript(script: string, file: string): Promise<void>;
 export declare function compileScriptFile(file: string): Promise<void>;
+export declare function getScriptExtname(): "mjs" | "js";
 export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;
 export declare function compileCommonJSEntry(dir: string, publicDirs: string[]): Promise<void>;

package/lib/node/compiler/compileScript.js

@@ -15,7 +15,7 @@ export const REQUIRE_VUE_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\
 export const REQUIRE_TS_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.ts(\s*['"`]\))(?!\s*['"`])/g;
 export const REQUIRE_JSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.jsx(\s*['"`]\))(?!\s*['"`])/g;
 export const REQUIRE_TSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.tsx(\s*['"`]\))(?!\s*['"`])/g;
-const scriptReplacer = (_, p1, p2) => `${p1}.js${p2}`;
+const scriptReplacer = (_, p1, p2) => `${p1}.${getScriptExtname()}${p2}`;
 export const replaceVueExt = (script) => script.replace(IMPORT_VUE_PATH_RE, scriptReplacer).replace(REQUIRE_VUE_PATH_RE, scriptReplacer);
 export const replaceTSExt = (script) => script.replace(IMPORT_TS_PATH_RE, scriptReplacer).replace(REQUIRE_TS_PATH_RE, scriptReplacer);
 export const replaceJSXExt = (script) => script.replace(IMPORT_JSX_PATH_RE, scriptReplacer).replace(REQUIRE_JSX_PATH_RE, scriptReplacer);
@@ -29,39 +29,46 @@ export const moduleCompatible = async (script) => {
     return script;
 };
 export async function compileScript(script, file) {
-    const modules = process.env.BABEL_MODULE;
-    if (modules === 'commonjs') {
+    const targetModule = process.env.TARGET_MODULE;
+    if (targetModule === 'commonjs') {
         script = await moduleCompatible(script);
     }
     let { code } = (await transformAsync(script, {
         filename: file,
     }));
-    code = extractStyleDependencies(file, code, modules === 'commonjs' ? REQUIRE_CSS_RE : IMPORT_CSS_RE);
-    code = extractStyleDependencies(file, code, modules === 'commonjs' ? REQUIRE_LESS_RE : IMPORT_LESS_RE);
+    code = extractStyleDependencies(file, code, targetModule === 'commonjs' ? REQUIRE_CSS_RE : IMPORT_CSS_RE);
+    code = extractStyleDependencies(file, code, targetModule === 'commonjs' ? REQUIRE_LESS_RE : IMPORT_LESS_RE);
     code = replaceVueExt(code);
     code = replaceTSXExt(code);
     code = replaceJSXExt(code);
     code = replaceTSExt(code);
     removeSync(file);
-    writeFileSync(replaceExt(file, '.js'), code, 'utf8');
+    writeFileSync(replaceExt(file, `.${getScriptExtname()}`), code, 'utf8');
 }
 export async function compileScriptFile(file) {
     const sources = readFileSync(file, 'utf-8');
     await compileScript(sources, file);
 }
+export function getScriptExtname() {
+    if (process.env.TARGET_MODULE === 'module') {
+        return 'mjs';
+    }
+    return 'js';
+}
 export async function compileESEntry(dir, publicDirs) {
     const imports = [];
     const plugins = [];
     const constInternalComponents = [];
     const cssImports = [];
     const publicComponents = [];
+    const scriptExtname = getScriptExtname();
     publicDirs.forEach((dirname) => {
         const publicComponent = bigCamelize(dirname);
         publicComponents.push(publicComponent);
-        imports.push(`import ${publicComponent}, * as ${publicComponent}Module from './${dirname}'`);
+        imports.push(`import ${publicComponent}, * as ${publicComponent}Module from './${dirname}/index.${scriptExtname}'`);
         constInternalComponents.push(`export const _${publicComponent}Component = ${publicComponent}Module._${publicComponent}Component || {}`);
         plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
-        cssImports.push(`import './${dirname}/style'`);
+        cssImports.push(`import './${dirname}/style/index.${scriptExtname}'`);
     });
     const install = `
 function install(app) {
@@ -100,9 +107,9 @@ export default {
 }
 `;
     await Promise.all([
-        writeFile(resolve(dir, 'index.js'), indexTemplate, 'utf-8'),
-        writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf-8'),
-        writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'index.mjs'), indexTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'index.umd.mjs'), umdTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'style.mjs'), styleTemplate, 'utf-8'),
     ]);
 }
 export async function compileCommonJSEntry(dir, publicDirs) {
@@ -113,9 +120,9 @@ export async function compileCommonJSEntry(dir, publicDirs) {
     publicDirs.forEach((dirname) => {
         const publicComponent = bigCamelize(dirname);
         publicComponents.push(publicComponent);
-        requires.push(`var ${publicComponent} = require('./${dirname}')['default']`);
+        requires.push(`var ${publicComponent} = require('./${dirname}/index.js')['default']`);
         plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
-        cssRequires.push(`require('./${dirname}/style')`);
+        cssRequires.push(`require('./${dirname}/style/index.js')`);
     });
     const install = `
 function install(app) {

package/lib/node/compiler/compileStyle.js

@@ -3,6 +3,7 @@ import less from 'less';
 import glob from 'glob';
 import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
 import { parse, resolve } from 'path';
+import { getScriptExtname } from './compileScript.js';
 const { render } = less;
 const { readFileSync, writeFileSync, unlinkSync } = fse;
 export const EMPTY_SPACE_RE = /[\s]+/g;
@@ -24,11 +25,11 @@ export function normalizeStyleDependency(styleImport, reg) {
 export function extractStyleDependencies(file, code, styleReg) {
     var _a;
     const styleImports = (_a = code.match(styleReg)) !== null && _a !== void 0 ? _a : [];
-    const cssFile = resolve(parse(file).dir, './style/index.js');
-    const modules = process.env.BABEL_MODULE;
+    const cssFile = resolve(parse(file).dir, `./style/index.${getScriptExtname()}`);
+    const targetModule = process.env.TARGET_MODULE;
     styleImports.forEach((styleImport) => {
         const normalizedPath = normalizeStyleDependency(styleImport, styleReg);
-        smartAppendFileSync(cssFile, modules === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n`);
+        smartAppendFileSync(cssFile, targetModule === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n`);
     });
     return code.replace(styleReg, '');
 }

package/lib/node/config/vite.config.js

@@ -69,7 +69,7 @@ export function getESMBundleConfig(varletConfig) {
                 name,
                 formats: ['es'],
                 fileName: () => fileName,
-                entry: resolve(ES_DIR, 'umdIndex.js'),
+                entry: resolve(ES_DIR, 'index.umd.mjs'),
             },
             rollupOptions: {
                 external: ['vue'],
@@ -98,7 +98,7 @@ export function getUMDConfig(varletConfig) {
                 name,
                 formats: ['umd'],
                 fileName: () => fileName,
-                entry: resolve(ES_DIR, 'umdIndex.js'),
+                entry: resolve(ES_DIR, 'index.umd.mjs'),
             },
             rollupOptions: {
                 external: ['vue'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.6.1",
+  "version": "2.7.0-alpha.1673534139536",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -66,8 +66,8 @@
     "vite": "4.0.4",
     "vue": "3.2.25",
     "vue-jest": "^5.0.0-alpha.8",
-    "@varlet/vite-plugins": "2.6.1",
-    "@varlet/shared": "2.6.1"
+    "@varlet/vite-plugins": "2.7.0-alpha.1673534139536",
+    "@varlet/shared": "2.7.0-alpha.1673534139536"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -79,8 +79,8 @@
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
     "@types/inquirer": "^9.0.2",
-    "@varlet/icons": "2.6.1",
-    "@varlet/touch-emulator": "2.6.1"
+    "@varlet/icons": "2.7.0-alpha.1673534139536",
+    "@varlet/touch-emulator": "2.7.0-alpha.1673534139536"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.2.16",
@@ -90,8 +90,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/icons": "2.6.1",
-    "@varlet/touch-emulator": "2.6.1"
+    "@varlet/icons": "2.7.0-alpha.1673534139536",
+    "@varlet/touch-emulator": "2.7.0-alpha.1673534139536"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/pc/components/AppHeader.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         class="varlet-site-header__versions"
         @mouseenter="isOpenVersionsMenu = true"
         @mouseleave="isOpenVersionsMenu = false"
-        v-if="versionItems"
+        v-if="nonEmptyVersions && Object.keys(nonEmptyVersions).length"
       >
         <span style="font-size: 14px;">{{ currentVersion }}</span>
         <var-icon name="chevron-down"/>