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

package/lib/node/compiler/compileModule.js

@@ -50,7 +50,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/package.json

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