@varlet/cli 2.7.0-alpha.1673584157662 → 2.7.0-alpha.1673622160795

package/lib/node/bin.js

@@ -42,10 +42,9 @@ program
 program
     .command('compile')
     .description('Compile varlet components library code')
-    .option('-nu, --noUmd', 'Do not compile umd target code')
-    .action(async (options) => {
+    .action(async () => {
     const { compile } = await import('./commands/compile.js');
-    return compile(options);
+    return compile();
 });
 program
     .command('lint')

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

@@ -1,7 +1,3 @@
 export declare function removeDir(): Promise<[void, void, void, void]>;
 export declare function runTask(taskName: string, task: () => any): Promise<void>;
-interface CompileCommandOptions {
-    noUmd?: boolean;
-}
-export declare function compile(options: CompileCommandOptions): Promise<void>;
-export {};
+export declare function compile(): Promise<void>;

package/lib/node/commands/compile.js

@@ -20,18 +20,17 @@ export async function runTask(taskName, task) {
         logger.error(e.toString());
     }
 }
-export async function compile(options) {
+export async function compile() {
     process.env.NODE_ENV = 'compile';
     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);
     process.env.TARGET_MODULE = 'commonjs';
     process.env.BABEL_MODULE = 'commonjs';
     await runTask('commonjs', compileModule);
-    process.env.TARGET_MODULE = 'umd';
-    !options.noUmd && (await runTask('umd', compileModule));
+    process.env.BABEL_MODULE = '';
+    process.env.TARGET_MODULE = 'bundle';
+    await runTask('bundle', compileModule);
 }

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

@@ -1,5 +1,4 @@
-export declare function compileUMD(): Promise<void>;
-export declare function compileESMBundle(): Promise<void>;
+export declare function compileBundle(): Promise<void>;
 export declare function compileDir(dir: string): Promise<void>;
 export declare function compileFile(file: string): Promise<void>;
 export declare function compileModule(): Promise<void>;

package/lib/node/compiler/compileModule.js

@@ -1,22 +1,42 @@
 import fse from 'fs-extra';
 import { build } from 'vite';
 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 { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME, LIB_DIR, UMD_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, getScriptExtname } from './compileScript.js';
 import { clearLessFiles, compileLess } from './compileStyle.js';
-import { getESMBundleConfig, getUMDConfig } from '../config/vite.config.js';
+import { getBundleConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
 import { generateReference } from './compileTypes.js';
+import { get } from 'lodash-es';
+import { kebabCase } from '@varlet/shared';
 const { copy, ensureFileSync, readdir, removeSync } = fse;
-export async function compileUMD() {
+export async function compileBundle() {
     const varletConfig = await getVarletConfig();
-    await build(getUMDConfig(varletConfig));
-}
-export async function compileESMBundle() {
-    const varletConfig = await getVarletConfig();
-    await build(getESMBundleConfig(varletConfig));
+    const name = kebabCase(get(varletConfig, 'name'));
+    const buildOptions = [
+        {
+            format: 'es',
+            fileName: `${name}.esm.js`,
+            output: ES_DIR,
+            emptyOutDir: false,
+        },
+        {
+            format: 'cjs',
+            fileName: `${name}.cjs.js`,
+            output: LIB_DIR,
+            emptyOutDir: false,
+        },
+        {
+            format: 'umd',
+            fileName: `${name}.js`,
+            output: UMD_DIR,
+            emptyOutDir: true,
+        },
+    ];
+    const tasks = buildOptions.map((options) => build(getBundleConfig(varletConfig, options)));
+    await Promise.all(tasks);
 }
 export async function compileDir(dir) {
     const dirs = await readdir(dir);
@@ -37,12 +57,8 @@ export async function compileFile(file) {
 }
 export async function compileModule() {
     const targetModule = process.env.TARGET_MODULE;
-    if (targetModule === 'umd') {
-        await compileUMD();
-        return;
-    }
-    if (targetModule === 'esm-bundle') {
-        await compileESMBundle();
+    if (targetModule === 'bundle') {
+        await compileBundle();
         return;
     }
     const dest = targetModule === 'commonjs' ? LIB_DIR : ES_DIR;
@@ -50,7 +66,7 @@ export async function compileModule() {
     const moduleDir = await readdir(dest);
     await Promise.all(moduleDir.map((filename) => {
         const file = resolve(dest, filename);
-        isDir(file) && ensureFileSync(resolve(file, `./style/index.${getScriptExtname()}`));
+        isDir(file) && ensureFileSync(resolve(file, `./style/index${getScriptExtname()}`));
         return isDir(file) ? compileDir(file) : null;
     }));
     const publicDirs = await getPublicDirs();

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

@@ -2,12 +2,14 @@ export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
 export declare const IMPORT_DEPENDENCE_RE: RegExp;
 export declare const REQUIRE_DEPENDENCE_RE: RegExp;
 export declare const scriptExtNames: string[];
+export declare const styleExtNames: string[];
 export declare const scriptIndexes: string[];
+export declare const styleIndexes: string[];
 export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
 export declare const resolveDependence: (file: string, 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 getScriptExtname(): ".js" | ".mjs";
 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

@@ -10,36 +10,53 @@ const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExi
 // https://regexr.com/765a4
 export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
 // https://regexr.com/764ve
-export const IMPORT_DEPENDENCE_RE = /import\s+['"]\s*\.{1,2}\/(.+)\s*['"];?/g;
+export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
 // https://regexr.com/764vn
-export const REQUIRE_DEPENDENCE_RE = /require\(['"]\s*(\.{1,2}\/.+)\s*['"]\)/g;
-export const scriptExtNames = ['mjs', 'vue', 'ts', 'tsx', 'js', 'jsx'];
+export const REQUIRE_DEPENDENCE_RE = /require\((".*?"|'.*?')\)/g;
+export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
+export const styleExtNames = ['.less', '.css'];
 export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
+export const styleIndexes = ['index.less', 'index.css'];
 export const tryMatchExtname = (file, extname) => {
     // eslint-disable-next-line no-restricted-syntax
     for (const ext of extname) {
-        const matched = `${file}.${ext}`;
+        const matched = `${file}${ext}`;
         if (pathExistsSync(matched)) {
             return ext;
         }
     }
 };
 export const resolveDependence = (file, script) => {
-    return script.replace(IMPORT_FROM_DEPENDENCE_RE, (source, dependence) => {
+    const replacer = (source, dependence) => {
         dependence = dependence.slice(1, dependence.length - 1);
         const ext = extname(dependence);
         const targetDependenceFile = resolve(dirname(file), dependence);
         const scriptExtname = getScriptExtname();
         const inNodeModules = !dependence.startsWith('.');
+        const done = (targetDependence) => source.replace(dependence, targetDependence);
         if (inNodeModules) {
             // e.g. @varlet/shared
             return source;
         }
+        if (ext) {
+            if (scriptExtNames.includes(ext)) {
+                // e.g. './a.vue' -> './a.m?js'
+                return done(dependence.replace(ext, scriptExtname));
+            }
+            if (styleExtNames.includes(ext)) {
+                // e.g. './a.css' -> './a.css' './a.less' -> './a.less'
+                return source;
+            }
+        }
         if (!ext) {
             // e.g. ../button/props -> ../button/props.m?js
-            const matched = tryMatchExtname(targetDependenceFile, scriptExtNames);
-            if (matched) {
-                return source.replace(dependence, `${dependence}.${scriptExtname}`);
+            const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
+            if (matchedScript) {
+                return done(`${dependence}${scriptExtname}`);
+            }
+            const matchedStyle = tryMatchExtname(targetDependenceFile, styleExtNames);
+            if (matchedStyle) {
+                return done(`${dependence}${matchedStyle}`);
             }
         }
         if (!ext && isDir(targetDependenceFile)) {
@@ -48,17 +65,20 @@ export const resolveDependence = (file, script) => {
             const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
             if (hasScriptIndex) {
                 // e.g. -> ../button/index.m?js
-                return source.replace(dependence, `${dependence}/index.${scriptExtname}`);
+                return done(`${dependence}/index${scriptExtname}`);
             }
-            const hasStyleIndex = files.some((file) => ['index.less', 'index.css'].some((name) => file.endsWith(name)));
+            const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
             if (hasStyleIndex) {
                 // e.g. -> ../button/index.css
-                return source.replace(dependence, `${dependence}/index.css`);
+                return done(`${dependence}/index.css`);
             }
         }
-        // e.g. ../button/props.ts -> ../button/props.m?js
-        return source.replace(dependence, dependence.replace(ext, `.${scriptExtname}`));
-    });
+        return '';
+    };
+    return script
+        .replace(IMPORT_FROM_DEPENDENCE_RE, replacer)
+        .replace(IMPORT_DEPENDENCE_RE, replacer)
+        .replace(REQUIRE_DEPENDENCE_RE, replacer);
 };
 export const moduleCompatible = async (script) => {
     const moduleCompatible = get(await getVarletConfig(), 'moduleCompatible', {});
@@ -77,11 +97,11 @@ export async function compileScript(script, file) {
         filename: file,
     }));
     if (code) {
+        code = resolveDependence(file, code);
         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 = resolveDependence(file, code);
         removeSync(file);
-        writeFileSync(replaceExt(file, `.${getScriptExtname()}`), code, 'utf8');
+        writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
     }
 }
 export async function compileScriptFile(file) {
@@ -90,9 +110,9 @@ export async function compileScriptFile(file) {
 }
 export function getScriptExtname() {
     if (process.env.TARGET_MODULE === 'module') {
-        return 'mjs';
+        return '.mjs';
     }
-    return 'js';
+    return '.js';
 }
 export async function compileESEntry(dir, publicDirs) {
     const imports = [];
@@ -103,12 +123,12 @@ export async function compileESEntry(dir, publicDirs) {
     const scriptExtname = getScriptExtname();
     publicDirs.forEach((dirname) => {
         const publicComponent = bigCamelize(dirname);
-        const module = `'./${dirname}/index.${scriptExtname}'`;
+        const module = `'./${dirname}/index${scriptExtname}'`;
         publicComponents.push(publicComponent);
         imports.push(`import ${publicComponent} from ${module}`);
         exports.push(`export * from ${module}`);
         plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
-        cssImports.push(`import './${dirname}/style/index.${scriptExtname}'`);
+        cssImports.push(`import './${dirname}/style/index${scriptExtname}'`);
     });
     const install = `
 function install(app) {
@@ -174,6 +194,7 @@ export async function compileCommonJSEntry(dir, publicDirs) {
         plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
         cssRequires.push(`require('./${dirname}/style/index.js')`);
     });
+    const version = `const version = '${getVersion()}'`;
     const install = `
 function install(app) {
   ${plugins.join('\n  ')}
@@ -181,11 +202,12 @@ function install(app) {
 `;
     const indexTemplate = `\
 ${requires.join('\n')}\n
+${version}
 ${install}
 
 function ignoreDefault(module) {
   return Object.keys(module).reduce((exports, key) => {
-    if (key !=== 'default') {
+    if (key !== 'default') {
       exports[key] = module[key]
     }
 
@@ -193,11 +215,10 @@ function ignoreDefault(module) {
   }, {})
 }
 
-exports.install = install
-
 module.exports = {
+  version,
   install,
-  ${exports.join(',\n  ')}
+  ${exports.join(',\n  ')},
   ${publicComponents.join(',\n  ')}
 }
 `;

package/lib/node/compiler/compileStyle.js

@@ -25,7 +25,7 @@ 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.${getScriptExtname()}`);
+    const cssFile = resolve(parse(file).dir, `./style/index${getScriptExtname()}`);
     const targetModule = process.env.TARGET_MODULE;
     styleImports.forEach((styleImport) => {
         const normalizedPath = normalizeStyleDependency(styleImport, styleReg);

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

@@ -2,5 +2,10 @@ import { InlineConfig } from 'vite';
 import { VarletConfig } from './varlet.config';
 export declare function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig;
 export declare function getBuildConfig(varletConfig: Required<VarletConfig>): InlineConfig;
-export declare function getESMBundleConfig(varletConfig: Required<VarletConfig>): InlineConfig;
-export declare function getUMDConfig(varletConfig: Required<VarletConfig>): InlineConfig;
+export interface BundleBuildOptions {
+    fileName: string;
+    output: string;
+    format: 'es' | 'cjs' | 'umd';
+    emptyOutDir: boolean;
+}
+export declare function getBundleConfig(varletConfig: Required<VarletConfig>, buildOptions: BundleBuildOptions): InlineConfig;

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

@@ -2,8 +2,7 @@ import fse from 'fs-extra';
 import vue from '@vitejs/plugin-vue';
 import jsx from '@vitejs/plugin-vue-jsx';
 import { markdown, html, inlineCss } from '@varlet/vite-plugins';
-import { kebabCase } from '@varlet/shared';
-import { ES_DIR, LIB_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, UMD_DIR, VITE_RESOLVE_EXTENSIONS, } from '../shared/constant.js';
+import { ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, } from '../shared/constant.js';
 import { get } from 'lodash-es';
 import { resolve } from 'path';
 const { copyFileSync, removeSync } = fse;
@@ -57,24 +56,32 @@ export function getBuildConfig(varletConfig) {
             },
         } });
 }
-export function getESMBundleConfig(varletConfig) {
+export function getBundleConfig(varletConfig, buildOptions) {
+    const plugins = [];
     const name = get(varletConfig, 'name');
-    const fileName = `${kebabCase(name)}.esm.js`;
+    const { fileName, output, format, emptyOutDir } = buildOptions;
+    if (format === 'umd') {
+        plugins.push(inlineCss({
+            jsFile: resolve(output, fileName),
+            cssFile: resolve(output, 'style.css'),
+        }));
+    }
     return {
         logLevel: 'silent',
         build: {
-            emptyOutDir: false,
+            minify: format === 'cjs' ? false : 'esbuild',
+            emptyOutDir,
             copyPublicDir: false,
             lib: {
                 name,
-                formats: ['es'],
+                formats: [format],
                 fileName: () => fileName,
                 entry: resolve(ES_DIR, 'index.umd.mjs'),
             },
             rollupOptions: {
                 external: ['vue'],
                 output: {
-                    dir: ES_DIR,
+                    dir: output,
                     exports: 'named',
                     globals: {
                         vue: 'Vue',
@@ -84,42 +91,3 @@ export function getESMBundleConfig(varletConfig) {
         },
     };
 }
-export function getUMDConfig(varletConfig) {
-    const name = get(varletConfig, 'name');
-    const fileName = `${kebabCase(name)}.js`;
-    const jsFile = resolve(UMD_DIR, fileName);
-    const cssFile = resolve(UMD_DIR, 'style.css');
-    return {
-        logLevel: 'silent',
-        build: {
-            emptyOutDir: true,
-            copyPublicDir: false,
-            lib: {
-                name,
-                formats: ['umd'],
-                fileName: () => fileName,
-                entry: resolve(ES_DIR, 'index.umd.mjs'),
-            },
-            rollupOptions: {
-                external: ['vue'],
-                output: {
-                    dir: UMD_DIR,
-                    exports: 'named',
-                    globals: {
-                        vue: 'Vue',
-                    },
-                },
-            },
-        },
-        plugins: [
-            inlineCss({
-                jsFile,
-                cssFile,
-                onEnd() {
-                    copyFileSync(cssFile, resolve(LIB_DIR, 'style.css'));
-                    removeSync(cssFile);
-                },
-            }),
-        ],
-    };
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.7.0-alpha.1673584157662",
+  "version": "2.7.0-alpha.1673622160795",
   "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.7.0-alpha.1673584157662",
-    "@varlet/shared": "2.7.0-alpha.1673584157662"
+    "@varlet/vite-plugins": "2.7.0-alpha.1673622160795",
+    "@varlet/shared": "2.7.0-alpha.1673622160795"
   },
   "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.7.0-alpha.1673584157662",
-    "@varlet/touch-emulator": "2.7.0-alpha.1673584157662"
+    "@varlet/touch-emulator": "2.7.0-alpha.1673622160795",
+    "@varlet/icons": "2.7.0-alpha.1673622160795"
   },
   "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.7.0-alpha.1673584157662",
-    "@varlet/touch-emulator": "2.7.0-alpha.1673584157662"
+    "@varlet/icons": "2.7.0-alpha.1673622160795",
+    "@varlet/touch-emulator": "2.7.0-alpha.1673622160795"
   },
   "scripts": {
     "dev": "tsc --watch",