.github/workflows/deploy-v4-site.yml

@@ -33,7 +33,7 @@ jobs:
         run: npm run build:site
 
       - name: Deploy for Gitee 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.6.0
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
@@ -57,9 +57,9 @@ jobs:
             vant-use/**/*
 
       - name: Deploy for GitHub 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.6.0
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
-          branch: gh-pages
+          branch: main
           folder: packages/vant/site-dist
           token: ${{ secrets.VANT_UI_TOKEN }}
           repository-name: vant-ui/vant-ui.github.io

package.json

@@ -17,9 +17,9 @@
     "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "engines": {
-    "pnpm": ">= 9.0.0"
+    "pnpm": ">= 8.8.0"
   },
-  "packageManager": "pnpm@9.0.4",
+  "packageManager": "pnpm@8.14.1",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",

packages/vant-cli/changelog.md

@@ -1,12 +1,5 @@
 # 更新日志
 
-## v7.0.2
-
-`2024-04-20`
-
-- 支持读取 `rsbuild.config.*` 配置文件
-- 支持编译 Vue SFC scopeId
-
 ## v7.0.1
 
 `2024-04-14`

packages/vant-cli/docs/config.md

@@ -1,8 +1,6 @@
 # Config
 
 - [Config](#----)
-  - [rsbuild.config.mjs](#rsbuildconfigmjs)
-  - [vite.config.mjs](#viteconfigmjs)
   - [vant.config.mjs](#vantconfigmjs)
     - [name](#name)
     - [build.css.base](#buildcssbase)
@@ -10,6 +8,7 @@
     - [build.site.publicPath](#buildsitepublicpath)
     - [build.srcDir](#buildsrcdir)
     - [build.namedExport](#buildnamedexport)
+    - [build.configureVite](#buildconfigurevite)
     - [build.packageManager](#buildpackagemanager)
     - [site.title](#sitetitle)
     - [site.logo](#sitelogo)
@@ -25,34 +24,6 @@
     - [Default Config](#-----1)
   - [browserslist](#browserslist)
 
-## rsbuild.config.mjs
-
-Vant CLI uses [Rsbuild](https://github.com/web-infra-dev/rsbuild) to build the documentation site. You can create an Rsbuild configuration file in the same directory as `vant.config.mjs`. The contents of the file will be automatically read by Vant CLI.
-
-```js
-// rsbuild.config.mjs or rsbuild.config.ts
-export default {
-  plugins: [
-    // Configure Rsbuild plugins
-  ],
-  dev: {
-    // Options related to local development
-  },
-  html: {
-    // Options related to HTML generation
-  },
-  // Other options
-};
-```
-
-> Please refer to [Configure Rsbuild](https://rsbuild.dev/guide/basic/configure-rsbuild) for more information.
-
-## vite.config.mjs
-
-Vant Cli uses Vite to build component library code. You can create a Vite configuration file in the same directory as `vant.config.mjs`. In this file, you can add any Vite configuration.
-
-> Please refer to [Vite Configuration](https://vitejs.dev/config/) to learn more.
-
 ## vant.config.mjs
 
 `vant.config.mjs` includes bundle and documentation site config. Please create this file and place it in your project root directory. Here is a basic example:
@@ -221,6 +192,28 @@ module.exports = {
 };
 ```
 
+```js
+module.exports = {
+  build: {
+    configureVite(config) {
+      const { BUILD_TARGET } = process.env;
+
+      if (BUILD_TARGET === 'package') {
+        // component library bundle config
+      }
+
+      if (BUILD_TARGET === 'site') {
+        // documentation site bundle config
+      }
+
+      return config;
+    },
+  },
+};
+```
+
+Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
+
 If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
 
 ### build.packageManager

packages/vant-cli/docs/config.zh-CN.md

@@ -1,8 +1,6 @@
 # 配置指南
 
 - [配置指南](#----)
-  - [rsbuild.config.mjs](#rsbuildconfigmjs)
-  - [vite.config.mjs](#viteconfigmjs)
   - [vant.config.mjs](#vantconfigmjs)
     - [name](#name)
     - [build.css.base](#buildcssbase)
@@ -10,6 +8,7 @@
     - [build.site.publicPath](#buildsitepublicpath)
     - [build.srcDir](#buildsrcdir)
     - [build.namedExport](#buildnamedexport)
+    - [build.configureVite](#buildconfigurevite)
     - [build.packageManager](#buildpackagemanager)
     - [site.title](#sitetitle)
     - [site.logo](#sitelogo)
@@ -25,34 +24,6 @@
     - [默认配置](#-----1)
   - [browserslist](#browserslist)
 
-## rsbuild.config.mjs
-
-Vant CLI 使用 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 来构建文档站点，你可以在 `vant.config.mjs` 的同级目录下创建 Rsbuild 的配置文件，文件内容会被 Vant CLI 自动读取。
-
-```js
-// rsbuild.config.mjs 或 rsbuild.config.ts
-export default {
-  plugins: [
-    // 配置 Rsbuild 插件
-  ],
-  dev: {
-    // 与本地开发有关的选项
-  },
-  html: {
-    // 与 HTML 生成有关的选项
-  },
-  // 其他选项
-};
-```
-
-> 请参考 [配置 Rsbuild](https://rsbuild.dev/zh/guide/basic/configure-rsbuild) 了解更多。
-
-## vite.config.mjs
-
-Vant Cli 使用 Vite 来构建组件库代码，你可以在 `vant.config.mjs` 的同级目录下创建 Vite 的配置文件，在该文件中你可以添加任意的 Vite 配置。
-
-> 请参考 [Vite 配置](https://vitejs.dev/config/) 了解更多。
-
 ## vant.config.mjs
 
 `vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
@@ -203,6 +174,50 @@ module.exports = {
 
 开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
 
+### build.configureVite
+
+- Type: `(config: InlineConfig): InlineConfig | undefined`
+- Default: `undefined`
+
+vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)（从 4.0.0 版本开始支持）。
+
+```js
+module.exports = {
+  build: {
+    configureVite(config) {
+      config.server.port = 3000;
+      return config;
+    },
+  },
+};
+```
+
+在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分：
+
+```js
+module.exports = {
+  build: {
+    configureVite(config) {
+      const { BUILD_TARGET } = process.env;
+
+      if (BUILD_TARGET === 'package') {
+        // 修改组件库构建配置
+      }
+
+      if (BUILD_TARGET === 'site') {
+        // 修改文档站点构建配置
+      }
+
+      return config;
+    },
+  },
+};
+```
+
+注意，由于 `vant.config.mjs` 文件会被打包到文档网站的代码中，因此 `configureVite` 中不允许引用 vite 插件。
+
+如果需要配置 vite 插件，可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。
+
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm' | 'bun'`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "7.0.2",
+  "version": "7.0.1",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -43,15 +43,15 @@
     "@types/lodash": "^4.17.0",
     "@types/markdown-it": "^13.0.7",
     "rimraf": "^5.0.5",
-    "vue": "^3.4.23"
+    "vue": "^3.4.21"
   },
   "dependencies": {
     "@babel/core": "^7.24.4",
     "@babel/preset-typescript": "^7.24.1",
-    "@rsbuild/core": "0.6.4",
-    "@rsbuild/plugin-babel": "0.6.4",
-    "@rsbuild/plugin-vue": "0.6.4",
-    "@rsbuild/plugin-vue-jsx": "0.6.4",
+    "@rsbuild/core": "0.6.1",
+    "@rsbuild/plugin-babel": "0.6.1",
+    "@rsbuild/plugin-vue": "0.6.1",
+    "@rsbuild/plugin-vue-jsx": "0.6.1",
     "@vant/eslint-config": "workspace:^",
     "@vant/touch-emulator": "workspace:^",
     "@vitejs/plugin-vue": "^4.6.2",
@@ -82,6 +82,6 @@
     "transliteration": "^2.3.5",
     "typescript": "^5.0.4",
     "vite": "^5.0.12",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.0"
   }
 }

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

@@ -6,7 +6,6 @@ import {
   SFCBlock,
   compileTemplate,
   compileScript,
-  compileStyle,
 } from 'vue/compiler-sfc';
 import { replaceExt } from '../common/index.js';
 
@@ -38,7 +37,7 @@ function injectRender(script: string, render: string) {
 }
 
 function injectScopeId(script: string, scopeId: string) {
-  script += `\n${VUEIDS}.__scopeId = '${scopeId}'`;
+  script += `\n${VUEIDS}._scopeId = '${scopeId}'`;
   return script;
 }
 
@@ -76,8 +75,7 @@ export async function compileSfc(filePath: string): Promise<any> {
   const { template, styles } = descriptor;
 
   const hasScoped = styles.some((s) => s.scoped);
-  const scopeId = hasScoped ? hash(source) : '';
-  const scopeKey = scopeId ? `data-v-${scopeId}` : '';
+  const scopeId = hasScoped ? `data-v-${hash(source)}` : '';
 
   // compile js part
   if (descriptor.script || descriptor.scriptSetup) {
@@ -89,32 +87,35 @@ export async function compileSfc(filePath: string): Promise<any> {
       new Promise((resolve) => {
         let script = '';
 
-        const { bindings, content } = compileScript(descriptor, {
-          id: scopeKey,
-        });
+        let bindingMetadata;
+        if (descriptor.scriptSetup) {
+          const { bindings, content } = compileScript(descriptor, {
+            id: scopeId,
+          });
+          script += content;
+          bindingMetadata = bindings;
+        } else {
+          script += descriptor.script!.content;
+        }
 
-        script += content;
         script = injectStyle(script, styles, filePath);
-
         script = script.replace(EXPORT, `const ${VUEIDS} =`);
 
         if (template) {
           const render = compileTemplate({
-            id: scopeKey,
+            id: scopeId,
             source: template.content,
-            scoped: !!scopeKey,
             filename: filePath,
             compilerOptions: {
-              scopeId: scopeKey,
-              bindingMetadata: bindings,
+              bindingMetadata,
             },
           }).code;
 
           script = injectRender(script, render);
         }
 
-        if (scopeKey) {
-          script = injectScopeId(script, scopeKey);
+        if (scopeId) {
+          script = injectScopeId(script, scopeId);
         }
 
         script += `\n${EXPORT} ${VUEIDS}`;
@@ -135,14 +136,20 @@ export async function compileSfc(filePath: string): Promise<any> {
     ...styles.map(async (style, index: number) => {
       const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index);
 
-      const styleSource = compileStyle({
-        source: style.content,
-        filename: path.basename(cssFilePath),
-        scoped: style.scoped,
-        id: scopeId,
-      });
+      const styleSource = trim(style.content);
 
-      return outputFile(cssFilePath, trim(styleSource.code));
+      // TODO support scoped
+      // if (style.scoped) {
+      //   styleSource = compileUtils.compileStyle({
+      //     id: scopeId,
+      //     scoped: true,
+      //     source: styleSource,
+      //     filename: cssFilePath,
+      //     preprocessLang: style.lang,
+      //   }).code;
+      // }
+
+      return outputFile(cssFilePath, styleSource);
     }),
   );
 

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

@@ -3,11 +3,7 @@ import { getVantConfig, setBuildTarget } from '../common/index.js';
 import { getTemplateParams } from './get-template-params.js';
 import { genPackageEntry } from './gen-package-entry.js';
 import { genStyleDepsMap } from './gen-style-deps-map.js';
-import {
-  loadConfig,
-  mergeRsbuildConfig,
-  type RsbuildConfig,
-} from '@rsbuild/core';
+import type { RsbuildConfig } from '@rsbuild/core';
 import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module';
 import { CSS_LANG } from '../common/css.js';
 import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
@@ -99,11 +95,9 @@ export async function compileSite(isProd = false) {
     },
   };
 
-  const userRsbuildConfig = await loadConfig({ cwd: process.cwd() });
-
   const rsbuild = await createRsbuild({
     cwd: SITE_SRC_DIR,
-    rsbuildConfig: mergeRsbuildConfig(rsbuildConfig, userRsbuildConfig.content),
+    rsbuildConfig,
   });
 
   if (isProd) {

packages/vant-compat/package.json

@@ -36,9 +36,9 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "@vue/runtime-core": "^3.4.23",
+    "@vue/runtime-core": "^3.4.21",
     "vant": "workspace:*",
-    "vue": "^3.4.23",
+    "vue": "^3.4.21",
     "esbuild": "^0.20.2",
     "rimraf": "^5.0.5",
     "typescript": "^5.0.4"

packages/vant-eslint-config/package.json

@@ -23,7 +23,7 @@
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.25.0"
+    "eslint-plugin-vue": "^9.24.1"
   },
   "devDependencies": {
     "eslint": "^8.57.0",

packages/vant-use/package.json

@@ -41,7 +41,7 @@
     "esbuild": "^0.20.2",
     "rimraf": "^5.0.5",
     "typescript": "^5.0.4",
-    "vue": "^3.4.23"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant/package.json

@@ -48,13 +48,13 @@
   "dependencies": {
     "@vant/popperjs": "workspace:^",
     "@vant/use": "workspace:^",
-    "@vue/shared": "^3.4.23"
+    "@vue/shared": "^3.4.21"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.19.31",
+    "@types/node": "^18.19.29",
     "@vant/area-data": "workspace:*",
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
@@ -62,7 +62,7 @@
     "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/coverage-istanbul": "^1.1.3",
-    "@vue/runtime-core": "^3.4.23",
+    "@vue/runtime-core": "^3.4.21",
     "@vue/test-utils": "^2.4.5",
     "csstype": "^3.1.3",
     "diffable-html": "^5.0.0",
@@ -71,8 +71,8 @@
     "vite": "^5.0.12",
     "vitest": "^1.1.3",
     "vitest-canvas-mock": "^0.3.3",
-    "vue": "^3.4.23",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
   },
   "sideEffects": [
     "es/**/style/*",