perf(cli): replace ora with nanospinner (#10779)

* chore: bump eslint-plugin-vue v9

* chore: release @vant/eslint-config@3.5.0

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

package.json

@@ -9,7 +9,7 @@
     "build": "pnpm --dir ./packages/vant build",
     "build:site": "pnpm --dir ./packages/vant build:site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",
@@ -22,7 +22,7 @@
     "@vant/stylelint-config": "workspace:*",
     "eslint": "^8.2.0",
     "husky": "^8.0.1",
-    "lint-staged": "^12.1.2",
+    "nano-staged": "^0.8.0",
     "prettier": "^2.5.0",
     "rimraf": "^3.0.2",
     "stylelint": "^13.13.1"

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -20,11 +20,11 @@
   "author": "",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "nano-staged",
       "commit-msg": "vant-cli commit-lint"
     }
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.{ts,tsx,js,jsx,vue}": "eslint --fix",
     "*.{vue,css,less,scss}": "stylelint --fix"
   },

packages/create-vant-cli-app/generators/vue3/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -22,7 +22,7 @@
     "test:coverage": "open test/coverage/index.html"
   },
   "author": "",
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/create-vant-cli-app/package.json

@@ -33,15 +33,15 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^8.1.3",
-    "release-it": "^14.11.6",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
     "consola": "^2.11.3",
     "fast-glob": "^3.2.4",
     "fs-extra": "^10.0.0",
-    "inquirer": "^8.0.0"
+    "inquirer": "^8.0.0",
+    "picocolors": "^1.0.0"
   },
   "release-it": {
     "git": {

packages/create-vant-cli-app/src/generator.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import glob from 'fast-glob';
-import chalk from 'chalk';
+import color from 'picocolors';
 import consola from 'consola';
 import { prompt } from 'inquirer';
 import { sep, join } from 'path';
@@ -64,7 +64,7 @@ export class VanGenerator {
 
   writing() {
     console.log();
-    consola.info(`Creating project in ${chalk.green(this.outputDir)}\n`);
+    consola.info(`Creating project in ${color.green(this.outputDir)}\n`);
 
     // see https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows
     const templatePath = join(GENERATOR_DIR, this.inputs.vueVersion).replace(
@@ -99,16 +99,16 @@ export class VanGenerator {
     fs.writeFileSync(to, content);
 
     const name = to.replace(this.outputDir + sep, '');
-    consola.success(`${chalk.green('create')} ${name}`);
+    consola.success(`${color.green('create')} ${name}`);
   }
 
   end() {
     const { name } = this.inputs;
 
     console.log();
-    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(`Successfully created ${color.yellow(name)}.`);
     consola.success(
-      `Run ${chalk.yellow(
+      `Run ${color.yellow(
         `cd ${name} && git init && yarn && yarn dev`
       )} to start development!`
     );

packages/vant-area-data/package.json

@@ -37,8 +37,8 @@
   "license": "MIT",
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "release-it": {
     "git": {

packages/vant-cli/README.md

@@ -47,7 +47,7 @@ Please add the followed config to `package.json` file.
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/vant-cli/README.zh-CN.md

@@ -43,7 +43,7 @@ pnpm add @vant/cli -D
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/vant-cli/changelog.md

@@ -1,5 +1,15 @@
 # 更新日志
 
+## v4.0.3
+
+`2022-07-02`
+
+- 新增 `build.bundleOptions` 配置项
+- 新增 `css.removeSourceFile` 配置项
+- 修复编译后的 script setup 中，引用的组件不生效的问题
+- 移除未使用的 esm bundle
+- 移除未使用的 ssr.js 文件
+
 ## v4.0.2
 
 `2022-05-14`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -61,7 +61,6 @@
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.4.0",
-    "chalk": "^4.1.2",
     "commander": "^8.3.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.24",
@@ -78,17 +77,18 @@
     "jest-canvas-mock": "^2.3.1",
     "jest-serializer-html": "^7.1.0",
     "less": "^4.1.2",
-    "lint-staged": "^12.1.2",
     "markdown-it": "^12.2.0",
     "markdown-it-anchor": "^8.4.1",
-    "ora": "^6.0.1",
+    "nano-staged": "^0.8.0",
+    "nanospinner": "^1.1.0",
+    "picocolors": "^1.0.0",
     "postcss": "^8.3.11",
     "postcss-load-config": "^3.1.0",
     "prettier": "^2.5.0",
-    "release-it": "^14.11.6",
+    "release-it": "^15.1.1",
     "stylelint": "^13.0.0",
     "transliteration": "^2.2.0",
-    "typescript": "^4.5.2",
+    "typescript": "^4.7.4",
     "vite": "^2.9.0",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-md": "^0.11.4",

packages/vant-cli/src/commands/build.ts

@@ -3,7 +3,7 @@ import execa from 'execa';
 import { join, relative } from 'path';
 import { clean } from './clean.js';
 import { CSS_LANG } from '../common/css.js';
-import { ora, consola } from '../common/logger.js';
+import { createSpinner, consola } from '../common/logger.js';
 import { installDependencies } from '../common/manager.js';
 import { compileSfc } from '../compiler/compile-sfc.js';
 import { compileStyle } from '../compiler/compile-style.js';
@@ -178,14 +178,14 @@ const tasks = [
 async function runBuildTasks() {
   for (let i = 0; i < tasks.length; i++) {
     const { task, text } = tasks[i];
-    const spinner = ora(text).start();
+    const spinner = createSpinner(text).start();
 
     try {
       /* eslint-disable no-await-in-loop */
       await task();
-      spinner.succeed(text);
+      spinner.success({ text });
     } catch (err) {
-      spinner.fail(text);
+      spinner.error({ text });
       console.log(err);
       throw err;
     }

packages/vant-cli/src/commands/changelog.ts

@@ -1,7 +1,7 @@
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { ROOT } from '../common/constant.js';
-import { ora, slimPath } from '../common/logger.js';
+import { createSpinner, slimPath } from '../common/logger.js';
 import { createWriteStream, readFileSync } from 'fs';
 import conventionalChangelog from 'conventional-changelog';
 
@@ -48,7 +48,7 @@ function transform(item: any) {
 }
 
 export async function changelog(): Promise<void> {
-  const spinner = ora('Generating changelog...').start();
+  const spinner = createSpinner('Generating changelog...').start();
 
   return new Promise((resolve) => {
     conventionalChangelog(
@@ -68,7 +68,9 @@ export async function changelog(): Promise<void> {
     )
       .pipe(createWriteStream(DIST_FILE))
       .on('close', () => {
-        spinner.succeed(`Changelog generated at ${slimPath(DIST_FILE)}`);
+        spinner.success({
+          text: `Changelog generated at ${slimPath(DIST_FILE)}`,
+        });
         resolve();
       });
   });

packages/vant-cli/src/commands/lint.ts

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import { consola, ora } from '../common/logger.js';
+import { consola, createSpinner } from '../common/logger.js';
 import { SCRIPT_EXTS } from '../common/constant.js';
 
 type RunCommandMessages = {
@@ -13,7 +13,7 @@ function runCommand(
   options: string[],
   messages: RunCommandMessages
 ) {
-  const spinner = ora(messages.start).start();
+  const spinner = createSpinner(messages.start).start();
 
   return new Promise((resolve) => {
     execa(cmd, options, {
@@ -21,11 +21,11 @@ function runCommand(
       env: { FORCE_COLOR: true },
     })
       .then(() => {
-        spinner.succeed(messages.succeed);
+        spinner.success({ text: messages.succeed });
         resolve(true);
       })
       .catch((err: any) => {
-        spinner.fail(messages.failed);
+        spinner.error({ text: messages.failed });
         consola.error(err.stderr || err.stdout);
         resolve(false);
       });

packages/vant-cli/src/commands/release.ts

@@ -4,7 +4,7 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PLUGIN_PATH = join(__dirname, '../../cjs/vant-cli-release-plugin.cjs');
+const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
 
 export async function release(command: { tag?: string }) {
   await releaseIt({

packages/vant-cli/src/common/logger.ts

@@ -1,10 +1,10 @@
-import ora from 'ora';
-import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
+import color from 'picocolors';
 import consola from 'consola';
 import { ROOT } from '../common/constant.js';
 
 export function slimPath(path: string) {
-  return chalk.yellow(path.replace(ROOT, ''));
+  return color.yellow(path.replace(ROOT, ''));
 }
 
-export { ora, consola };
+export { createSpinner, consola };

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -92,10 +92,13 @@ export async function compileSfc(filePath: string): Promise<any> {
           script += '// @ts-nocheck\n';
         }
 
+        let bindingMetadata;
         if (descriptor.scriptSetup) {
-          script += compileScript(descriptor, {
+          const { bindings, content } = compileScript(descriptor, {
             id: scopeId,
-          }).content;
+          });
+          script += content;
+          bindingMetadata = bindings;
         } else {
           script += descriptor.script!.content;
         }
@@ -108,6 +111,9 @@ export async function compileSfc(filePath: string): Promise<any> {
             id: scopeId,
             source: template.content,
             filename: filePath,
+            compilerOptions: {
+              bindingMetadata,
+            },
           }).code;
 
           script = injectRender(script, render);

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import color from 'picocolors';
 import { createRequire } from 'module';
 import { createServer, build } from 'vite';
 import {
@@ -38,8 +38,8 @@ export async function compileSite(production = false) {
 
     const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');
-    const viteInfo = chalk.cyan(`vite v${version}`);
-    console.log(`\n  ${viteInfo}` + chalk.green(` dev server running at:\n`));
+    const viteInfo = color.cyan(`vite v${version}`);
+    console.log(`\n  ${viteInfo}` + color.green(` dev server running at:\n`));
     server.printUrls();
   }
 }

packages/vant-cli/src/compiler/vant-cli-release-plugin.ts

@@ -1,7 +1,7 @@
-const releaseIt = require('release-it');
-const { execSync } = require('child_process');
+import { Plugin } from 'release-it';
+import { execSync } from 'child_process';
 
-class VantCliReleasePlugin extends releaseIt.Plugin {
+class VantCliReleasePlugin extends Plugin {
   async beforeRelease() {
     // log an empty line
     console.log('');
@@ -11,4 +11,4 @@ class VantCliReleasePlugin extends releaseIt.Plugin {
   }
 }
 
-module.exports = VantCliReleasePlugin;
+export default VantCliReleasePlugin;

packages/vant-eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/eslint-config",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "eslint config of vant",
   "main": "index.js",
   "publishConfig": {
@@ -20,17 +20,17 @@
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.3",
+    "@typescript-eslint/parser": "^5.30.3",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "^8.4.0"
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^9.1.1"
   },
   "devDependencies": {
-    "enhanced-resolve": "^5.8.3",
-    "eslint": "^8.7.0",
-    "typescript": "~4.5.5"
+    "enhanced-resolve": "^5.10.0",
+    "eslint": "^8.19.0",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "eslint": "^7.32.0 || ^8.2.0"

packages/vant-icons/package.json

@@ -23,7 +23,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "^14.11.6"
+    "release-it": "^15.1.1"
   },
   "release-it": {
     "git": {

packages/vant-popperjs/package.json

@@ -41,8 +41,8 @@
   },
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "release-it": {
     "git": {

packages/vant-use/package.json

@@ -38,8 +38,8 @@
   "license": "MIT",
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.0.2",
-    "typescript": "~4.5.2",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4",
     "vue": "^3.2.27"
   },
   "release-it": {

packages/vant/package.json

@@ -58,8 +58,8 @@
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
     "@vue/runtime-core": "^3.2.27",
-    "@vue/test-utils": "^2.0.0-rc.16",
-    "typescript": "~4.5.2",
+    "@vue/test-utils": "^2.0.1",
+    "typescript": "^4.7.4",
     "vue": "^3.2.27",
     "vue-router": "^4.0.12"
   },

packages/vant/src/composables/use-expose.ts

@@ -5,6 +5,6 @@ import { extend } from '../utils';
 export function useExpose<T = Record<string, any>>(apis: T) {
   const instance = getCurrentInstance();
   if (instance) {
-    extend(instance.proxy, apis);
+    extend(instance.proxy as object, apis);
   }
 }