perf(cli): remove vite-plugin-html (#11416)

* fix(cli): remove docsearch

* chore: remove react

* docs: add changelog

package.json

@@ -26,18 +26,5 @@
     "nano-staged": "^0.8.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2"
-  },
-  "pnpm": {
-    "overrides": {
-      "esbuild": "^0.14"
-    },
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search",
-        "@types/react",
-        "react",
-        "react-dom"
-      ]
-    }
   }
 }

packages/vant-area-data/package.json

@@ -36,7 +36,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2"
   },

packages/vant-cli/changelog.md

@@ -1,5 +1,12 @@
 # 更新日志
 
+## v6.0.0 [unreleased]
+
+- vite: 由 v3 升级至 v4
+- @vitejs/plugin-vue: 由 v3 升级至 v4
+- @vitejs/plugin-vue-jsx: 由 v2 升级至 v3
+- 移除 `site.searchConfig` 配置项
+
 ## v5.1.0
 
 `2022-11-05`

packages/vant-cli/docs/config.md

@@ -16,7 +16,6 @@
     - [site.nav](#sitenav)
     - [site.versions](#siteversions)
     - [site.baiduAnalytics](#sitebaiduanalytics)
-    - [site.searchConfig](#sitesearchconfig)
     - [site.hideSimulator](#sitehidesimulator)
     - [site.simulator.url](#sitesimulatorurl)
     - [site.htmlMeta](#sitehtmlmeta)
@@ -355,13 +354,6 @@ module.exports = {
 };
 ```
 
-### site.searchConfig
-
-- Type: `object`
-- Default: `undefined`
-
-Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia.
-
 ### site.hideSimulator
 
 - Type: `boolean`

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

@@ -16,7 +16,6 @@
     - [site.nav](#sitenav)
     - [site.versions](#siteversions)
     - [site.baiduAnalytics](#sitebaiduanalytics)
-    - [site.searchConfig](#sitesearchconfig)
     - [site.hideSimulator](#sitehidesimulator)
     - [site.simulator.url](#sitesimulatorurl)
     - [site.htmlMeta](#sitehtmlmeta)
@@ -357,15 +356,6 @@ module.exports = {
 };
 ```
 
-### site.searchConfig
-
-- Type: `object`
-- Default: `undefined`
-
-文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
-
-配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
-
 ### site.hideSimulator
 
 - Type: `boolean`

packages/vant-cli/package.json

@@ -42,27 +42,24 @@
     "@jest/types": "^29.1.2",
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
+    "@types/lodash": "^4.14.191",
     "@types/markdown-it": "^12.2.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "vue": "^3.2.45"
   },
   "dependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-typescript": "^7.18.6",
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
     "@types/jest": "^29.1.1",
     "@vant/eslint-config": "^3.5.0",
     "@vant/touch-emulator": "^1.4.0",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.4.8",
     "commander": "^9.4.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.25",
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.10",
     "eslint": "^8.23.0",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.11",
@@ -72,9 +69,10 @@
     "husky": "^8.0.1",
     "jest": "^29.1.2",
     "jest-canvas-mock": "^2.4.0",
-    "jest-serializer-html": "^7.1.0",
     "jest-environment-jsdom": "^29.1.2",
+    "jest-serializer-html": "^7.1.0",
     "less": "^4.1.3",
+    "lodash": "^4.17.21",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^8.6.4",
     "nano-staged": "^0.8.0",
@@ -84,10 +82,10 @@
     "postcss-load-config": "^3.1.4",
     "prettier": "^2.7.1",
     "release-it": "^15.4.1",
+    "terser": "^5.16.1",
     "transliteration": "^2.3.5",
     "typescript": "^4.8.2",
-    "vite": "3.1.8",
-    "vite-plugin-html": "^2.1.2",
+    "vite": "^4.0.3",
     "vite-plugin-md": "^0.11.9",
     "vue-router": "^4.1.5"
   },

packages/vant-cli/site/desktop/components/Header.vue

@@ -64,12 +64,6 @@
               {{ langLabel }}
             </a>
           </li>
-
-          <search-input
-            v-if="searchConfig"
-            :lang="lang"
-            :search-config="searchConfig"
-          />
         </ul>
       </div>
     </div>
@@ -77,17 +71,12 @@
 </template>
 
 <script>
-import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
 import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
 
-  components: {
-    SearchInput,
-  },
-
   props: {
     lang: String,
     config: Object,
@@ -122,10 +111,6 @@ export default {
       return {};
     },
 
-    searchConfig() {
-      return this.config.searchConfig;
-    },
-
     themeImg() {
       if (this.currentTheme === 'light') {
         return 'https://b.yzcdn.cn/vant/dark-theme.svg';

packages/vant-cli/site/desktop/components/SearchInput.vue

@@ -1,63 +0,0 @@
-<template>
-  <div id="docsearch" />
-</template>
-
-<script>
-export default {
-  name: 'VanDocSearch',
-
-  props: {
-    lang: String,
-    searchConfig: Object,
-  },
-
-  watch: {
-    lang() {
-      this.initDocsearch();
-    },
-  },
-
-  mounted() {
-    this.initDocsearch();
-  },
-
-  methods: {
-    initDocsearch() {
-      if (this.searchConfig) {
-        import('@docsearch/css');
-        import('@docsearch/js').then((docsearch) => {
-          docsearch.default({
-            ...this.searchConfig,
-            container: '#docsearch',
-          });
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-#docsearch {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.DocSearch-Button {
-  height: 32px;
-  background: #f7f8fa;
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.DocSearch-Search-Icon {
-  width: 18px;
-  height: 18px;
-}
-
-.DocSearch-Button-Key {
-  font-size: 12px;
-}
-</style>

packages/vant-cli/site/index.html

@@ -11,12 +11,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
     />
-    <%- meta %>
+    <%= meta %>
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <% if (headHtml) { %>
-      <%- headHtml %>
+      <%= headHtml %>
     <% } %>
     <% if (baiduAnalytics) { %>
     <script>

packages/vant-cli/site/mobile.html

@@ -11,12 +11,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
     />
-    <%- meta %>
+    <%= meta %>
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <% if (headHtml) { %>
-      <%- headHtml %>
+      <%= headHtml %>
     <% } %>
     <% if (enableVConsole) { %>
     <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>

packages/vant-cli/src/config/vite.site.ts

@@ -6,7 +6,7 @@ import vitePluginVue from '@vitejs/plugin-vue';
 import vitePluginJsx from '@vitejs/plugin-vue-jsx';
 import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
 import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js';
-import { injectHtml } from 'vite-plugin-html';
+import lodash from 'lodash';
 import type { InlineConfig, PluginOption } from 'vite';
 import type MarkdownIt from 'markdown-it';
 import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
@@ -131,6 +131,18 @@ function vitePluginGenVantBaseCode(): PluginOption {
   };
 }
 
+function vitePluginHTML(data: object): PluginOption {
+  return {
+    name: 'vite-plugin-html',
+    transformIndexHtml: {
+      enforce: 'pre',
+      transform(html) {
+        return lodash.template(html)(data);
+      },
+    },
+  };
+}
+
 export function getViteConfigForSiteDev(): InlineConfig {
   setBuildTarget('site');
 
@@ -177,18 +189,16 @@ export function getViteConfigForSiteDev(): InlineConfig {
         },
       }),
       vitePluginJsx(),
-      injectHtml({
-        data: {
-          ...siteConfig,
-          title,
-          // `description` is used by the HTML ejs template,
-          // so it needs to be written explicitly here to avoid error: description is not defined
-          description: siteConfig.description,
-          headHtml,
-          baiduAnalytics,
-          enableVConsole,
-          meta: getHTMLMeta(vantConfig),
-        },
+      vitePluginHTML({
+        ...siteConfig,
+        title,
+        // `description` is used by the HTML ejs template,
+        // so it needs to be written explicitly here to avoid error: description is not defined
+        description: siteConfig.description,
+        headHtml,
+        baiduAnalytics,
+        enableVConsole,
+        meta: getHTMLMeta(vantConfig),
       }),
     ],
 

packages/vant-compat/package.json

@@ -39,7 +39,7 @@
     "@vue/runtime-core": "^3.2.27",
     "vant": "workspace:*",
     "vue": "^3.2.45",
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.10",
     "release-it": "^15.1.1",
     "typescript": "^4.7.4"
   },

packages/vant-popperjs/package.json

@@ -38,7 +38,7 @@
   "license": "MIT",
   "devDependencies": {
     "@popperjs/core": "^2.11.6",
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2"
   },

packages/vant-use/package.json

@@ -37,7 +37,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2",
     "vue": "^3.2.45"

packages/vant/src/badge/Badge.tsx

@@ -82,8 +82,10 @@ export default defineComponent({
       if (props.offset) {
         const [x, y] = props.offset;
         const { position } = props;
-        const offsetY = position.indexOf('top') > -1 ? 'top' : 'bottom';
-        const offsetX = position.indexOf('left') > -1 ? 'left' : 'right';
+        const [offsetY, offsetX] = position.split('-') as [
+          'top' | 'bottom',
+          'left' | 'right'
+        ];
 
         if (slots.default) {
           if (typeof y === 'number') {

packages/vant/src/badge/README.md

@@ -139,7 +139,7 @@ Use `position` prop to set the position of badge.
 | color | Background color | _string_ | `#ee0a24` |
 | dot | Whether to show dot | _boolean_ | `false` |
 | max | Max value, show `{max}+` when exceed, only works when content is number | _number \| string_ | - |
-| offset `v3.0.5` | Offset of badge dot | _[number \| string, number \| string]_ | - |
+| offset `v3.0.5` | Offset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` |
 | position `v3.2.7` | Badge position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 

packages/vant/src/badge/README.zh-CN.md

@@ -147,7 +147,7 @@ app.use(Badge);
 | color | 徽标背景颜色 | _string_ | `#ee0a24` |
 | dot | 是否展示为小红点 | _boolean_ | `false` |
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
-| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
+| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | 当 content 为数字 0 或字符串 '0' 时，是否展示徽标 | _boolean_ | `true` |
 | position `v3.2.7` | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 

packages/vant/src/badge/test/index.spec.ts

@@ -98,6 +98,57 @@ test('should change dot position when using offset prop without children', () =>
   expect(badge.style.marginLeft).toEqual('2px');
 });
 
+test('should change dot position when using offset prop and position is bottom-right', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'bottom-right',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.bottom).toEqual('4rem');
+  expect(badge.style.right).toEqual('-2px');
+});
+
+test('should change dot position when using offset prop and position is bottom-left', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'bottom-left',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.bottom).toEqual('4rem');
+  expect(badge.style.left).toEqual('2px');
+});
+
+test('should change dot position when using offset prop and position is top-left', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'top-left',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.top).toEqual('-4rem');
+  expect(badge.style.left).toEqual('2px');
+});
+
 test('should not render zero when show-zero is false', async () => {
   const wrapper = mount(Badge, {
     props: {

packages/vant/vant.config.mjs

@@ -32,9 +32,6 @@ export default {
     baiduAnalytics: {
       seed: 'af5d41bc4e446e76665dbe3ec18d55c3',
     },
-    htmlMeta: {
-      'docsearch:version': 'v4',
-    },
     headHtml: `<script>
 if (location.host === 'youzan.github.io') {
 location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');