@varlet/cli 2.16.7 → 2.16.8-alpha.1695227124357

package/README.md

@@ -58,6 +58,7 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `directives` | Directive folder names | _string[]_ | `[]` |
 | `copy` | Copy file options | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
 | `icons` | Font icon packaging related configuration | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `esbuild` | Esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 
 #### Menu
 

package/README.zh-CN.md

@@ -58,7 +58,7 @@ varlet-cli gen
 | `directives` | 组件库指令文件夹名称 | _string[]_ | `[]` |
 | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
 | `icons` | 字体图标打包相关配置 | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
-
+| `esbuild` | Esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 
 #### Menu
 

package/lib/node/commands/compile.js

@@ -12,8 +12,9 @@ export function removeDir() {
 export async function runTask(taskName, task) {
     const s = createSpinner().start({ text: `Compiling ${taskName}` });
     try {
+        const start = performance.now();
         await task();
-        s.success({ text: `Compilation ${taskName} completed!` });
+        s.success({ text: `Compilation ${taskName} completed! (${Math.ceil(performance.now() - start)}ms)` });
     }
     catch (e) {
         s.error({ text: `Compilation ${taskName} failed!` });

package/lib/node/compiler/compileModule.js

@@ -21,18 +21,21 @@ export async function compileBundle() {
             fileName: `${name}.esm.js`,
             output: ES_DIR,
             emptyOutDir: false,
+            removeEnv: true,
         },
         {
             format: 'cjs',
             fileName: `${name}.cjs.js`,
             output: LIB_DIR,
             emptyOutDir: false,
+            removeEnv: false,
         },
         {
             format: 'umd',
             fileName: `${name}.js`,
             output: UMD_DIR,
             emptyOutDir: true,
+            removeEnv: true,
         },
     ];
     const tasks = buildOptions.map((options) => build(getBundleConfig(varletConfig, options)));

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

@@ -7,6 +7,8 @@ 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 function compileScriptByBabel(script: string, file: string): Promise<string>;
+export declare function compileScriptByEsbuild(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(): string;

package/lib/node/compiler/compileScript.js

@@ -1,9 +1,12 @@
 import fse from 'fs-extra';
+import esbuild from 'esbuild';
 import { transformAsync } from '@babel/core';
 import { bigCamelize } from '@varlet/shared';
-import { getVersion, isDir, replaceExt } from '../shared/fsUtils.js';
+import { getVersion, isDir, isJsx, isTsx, replaceExt } from '../shared/fsUtils.js';
 import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle.js';
 import { resolve, extname, dirname } from 'path';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { get } from 'lodash-es';
 const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
 // https://regexr.com/765a4
 export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
@@ -78,10 +81,34 @@ export const resolveDependence = (file, script) => {
         .replace(EXPORT_FROM_DEPENDENCE_RE, replacer)
         .replace(IMPORT_DEPENDENCE_RE, replacer);
 };
-export async function compileScript(script, file) {
-    let { code } = (await transformAsync(script, {
+export async function compileScriptByBabel(script, file) {
+    const { code } = (await transformAsync(script, {
         filename: file,
+        babelrc: false,
+        presets: ['@babel/preset-typescript'],
+        plugins: [
+            [
+                '@vue/babel-plugin-jsx',
+                {
+                    enableObjectSlots: false,
+                },
+            ],
+        ],
     }));
+    return code;
+}
+export async function compileScriptByEsbuild(script) {
+    const varletConfig = await getVarletConfig();
+    const { code } = await esbuild.transform(script, {
+        loader: 'ts',
+        target: get(varletConfig, 'esbuild.target'),
+        format: 'esm',
+    });
+    return code;
+}
+export async function compileScript(script, file) {
+    let code = isJsx(file) || isTsx(file) ? await compileScriptByBabel(script, file) : script;
+    code = await compileScriptByEsbuild(code);
     if (code) {
         code = resolveDependence(file, code);
         code = extractStyleDependencies(file, code, IMPORT_CSS_RE);

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

@@ -20,6 +20,9 @@ export interface VarletConfigIcons {
     fontWeight?: string;
     fontStyle?: string;
 }
+export interface VarletConfigEsbuild {
+    target?: string | string[];
+}
 export interface VarletConfig {
     /**
      * @default `Varlet`
@@ -62,6 +65,7 @@ export interface VarletConfig {
     mobile?: Record<string, any>;
     copy?: CopyOptions['paths'];
     icons?: VarletConfigIcons;
+    esbuild?: VarletConfigEsbuild;
     /**
      * @default `[]`
      * Directive folder name for component library.

package/lib/node/config/varlet.default.config.js

@@ -539,5 +539,8 @@ export default defineConfig({
         fontFamilyClassName: 'var-icon--set',
         base64: true,
     },
+    esbuild: {
+        target: 'es2016',
+    },
     directives: [],
 });

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

@@ -6,6 +6,7 @@ export interface BundleBuildOptions {
     fileName: string;
     output: string;
     format: 'es' | 'cjs' | 'umd';
+    removeEnv: boolean;
     emptyOutDir: boolean;
 }
 export declare function getBundleConfig(varletConfig: Required<VarletConfig>, buildOptions: BundleBuildOptions): InlineConfig;

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

@@ -66,21 +66,20 @@ export function getBuildConfig(varletConfig) {
 export function getBundleConfig(varletConfig, buildOptions) {
     const plugins = [];
     const name = get(varletConfig, 'name');
-    const { fileName, output, format, emptyOutDir } = buildOptions;
+    const { fileName, output, format, emptyOutDir, removeEnv } = buildOptions;
     if (format === 'umd') {
         plugins.push(inlineCss({
             jsFile: resolve(output, fileName),
             cssFile: resolve(output, 'style.css'),
         }));
     }
-    const define = format === 'umd'
-        ? {
-            'process.env.NODE_ENV': JSON.stringify('production'),
-        }
-        : undefined;
     return {
         logLevel: 'silent',
-        define,
+        define: removeEnv
+            ? {
+                'process.env.NODE_ENV': JSON.stringify('production'),
+            }
+            : undefined,
         plugins,
         build: {
             minify: format === 'cjs' ? false : 'esbuild',

package/lib/node/shared/fsUtils.d.ts

@@ -3,6 +3,8 @@ export declare const isMD: (file: string) => boolean;
 export declare const isDir: (file: string) => boolean;
 export declare const isSFC: (file: string) => boolean;
 export declare const isDTS: (file: string) => boolean;
+export declare const isJsx: (file: string) => boolean;
+export declare const isTsx: (file: string) => boolean;
 export declare const isScript: (file: string) => boolean;
 export declare const isLess: (file: string) => boolean;
 export declare const isPublicDir: (dir: string) => boolean;

package/lib/node/shared/fsUtils.js

@@ -12,6 +12,8 @@ export const isMD = (file) => pathExistsSync(file) && extname(file) === '.md';
 export const isDir = (file) => pathExistsSync(file) && lstatSync(file).isDirectory();
 export const isSFC = (file) => pathExistsSync(file) && extname(file) === '.vue';
 export const isDTS = (file) => pathExistsSync(file) && file.endsWith('.d.ts');
+export const isJsx = (file) => pathExistsSync(file) && file.endsWith('.jsx');
+export const isTsx = (file) => pathExistsSync(file) && file.endsWith('.tsx');
 export const isScript = (file) => pathExistsSync(file) && SCRIPTS_EXTENSIONS.includes(extname(file));
 export const isLess = (file) => pathExistsSync(file) && extname(file) === '.less';
 export const isPublicDir = (dir) => PUBLIC_DIR_INDEXES.some((index) => pathExistsSync(resolve(dir, index)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.16.7",
+  "version": "2.16.8-alpha.1695227124357",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -16,7 +16,6 @@
   "license": "MIT",
   "files": [
     "lib",
-    "cjs",
     "client.js",
     "client.d.ts",
     "template",
@@ -36,15 +35,13 @@
   },
   "dependencies": {
     "@babel/core": "^7.22.5",
-    "@babel/helper-plugin-utils": "^7.22.5",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@vitejs/plugin-vue": "4.2.3",
     "@vitejs/plugin-vue-jsx": "3.0.1",
     "@vue/babel-plugin-jsx": "1.1.4",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/runtime-core": "3.3.4",
+    "esbuild": "0.19.3",
     "vitest": "0.34.3",
     "chokidar": "^3.5.2",
     "commander": "^8.3.0",
@@ -67,8 +64,8 @@
     "vite": "4.3.5",
     "vue": "3.3.4",
     "webfont": "^9.0.0",
-    "@varlet/shared": "2.16.7",
-    "@varlet/vite-plugins": "2.16.7"
+    "@varlet/shared": "2.16.8-alpha.1695227124357",
+    "@varlet/vite-plugins": "2.16.8-alpha.1695227124357"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -83,9 +80,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/icons": "2.16.7",
-    "@varlet/touch-emulator": "2.16.7",
-    "@varlet/ui": "2.16.7"
+    "@varlet/ui": "2.16.8-alpha.1695227124357",
+    "@varlet/icons": "2.16.8-alpha.1695227124357",
+    "@varlet/touch-emulator": "2.16.8-alpha.1695227124357"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -98,9 +95,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/ui": "2.16.7",
-    "@varlet/icons": "2.16.7",
-    "@varlet/touch-emulator": "2.16.7"
+    "@varlet/ui": "2.16.8-alpha.1695227124357",
+    "@varlet/touch-emulator": "2.16.8-alpha.1695227124357",
+    "@varlet/icons": "2.16.8-alpha.1695227124357"
   },
   "scripts": {
     "dev": "tsc --watch",

package/template/generators/base/.browserslistrc

@@ -0,0 +1,2 @@
+Chrome >= 54
+iOS >= 10

package/template/generators/base/package.json

@@ -67,10 +67,6 @@
     "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
     "commit-msg": "pnpm exec varlet-cli commit-lint $1"
   },
-  "browserslist": [
-    "Chrome >= 54",
-    "iOS >= 10"
-  ],
   "packageManager": "pnpm@8.0.0",
   "engines": {
     "pnpm": ">=8.0"

package/cjs/babel.config.cjs

@@ -1,29 +0,0 @@
-module.exports = (api, options) => {
-  if (api) {
-    api.cache.never()
-  }
-
-  const isCommonJS = process.env.NODE_ENV === 'test' || process.env.BABEL_MODULE === 'commonjs'
-
-  return {
-    presets: [
-      [
-        require.resolve('@babel/preset-env'),
-        {
-          modules: isCommonJS ? 'commonjs' : false,
-          loose: options.loose,
-        },
-      ],
-      require.resolve('@babel/preset-typescript'),
-      require('./babel.sfc.transform.cjs'),
-    ],
-    plugins: [
-      [
-        require.resolve('@vue/babel-plugin-jsx'),
-        {
-          enableObjectSlots: options.enableObjectSlots,
-        },
-      ],
-    ],
-  }
-}

package/cjs/babel.sfc.transform.cjs

@@ -1,18 +0,0 @@
-const { readFileSync } = require('fs')
-const { declare } = require('@babel/helper-plugin-utils')
-
-module.exports = declare(() => ({
-  overrides: [
-    {
-      test: (file) => {
-        if (/\.vue$/.test(file)) {
-          const code = readFileSync(file, 'utf8')
-          return code.includes('lang="ts"') || code.includes("lang='ts'")
-        }
-
-        return false
-      },
-      plugins: [require.resolve('@babel/plugin-transform-typescript')],
-    },
-  ],
-}))

package/template/generators/base/babel.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@varlet/cli/preset.cjs',
-      {
-        loose: process.env.NODE_ENV === 'compile',
-      },
-    ],
-  ],
-}