feat(cli): bump webpack-dev-server v4 (#9292)

* feat(cli): bump webpack-dev-server v4

* fix: deps

packages/vant-cli/package.json

@@ -42,7 +42,6 @@
     "@babel/preset-typescript": "^7.14.5",
     "@docsearch/css": "3.0.0-alpha.33",
     "@docsearch/js": "3.0.0-alpha.33",
-    "@types/webpack-dev-server": "^3.11.4",
     "@vant/eslint-config": "^3.3.2",
     "@vant/markdown-loader": "^4.1.0",
     "@vant/markdown-vetur": "^2.2.0",
@@ -50,7 +49,6 @@
     "@vant/touch-emulator": "^1.3.0",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/test-utils": "2.0.0-rc.6",
-    "address": "^1.1.2",
     "autoprefixer": "^9.0.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
@@ -92,7 +90,7 @@
     "vue-loader": "^16.1.2",
     "vue-router": "^4.0.0",
     "webpack": "^5.38.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.8.0",
     "webpackbar": "^5.0.0-3"
   },

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

@@ -52,6 +52,7 @@ export async function changelog(): Promise<void> {
     conventionalChangelog(
       {
         preset: 'angular',
+        releaseCount: 2,
       },
       null,
       null,

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

@@ -1,6 +1,5 @@
 import type Webpack from 'webpack';
-import type WebpackDevServer from 'webpack-dev-server';
 
 export type WebpackConfig = Webpack.Configuration & {
-  devServer?: WebpackDevServer.Configuration;
+  devServer?: any;
 };

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

@@ -1,56 +1,33 @@
-import chalk from 'chalk';
-import address from 'address';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { get } from 'lodash';
-import { getPort } from 'portfinder';
-import { GREEN } from '../common/constant';
+import { getPortPromise } from 'portfinder';
 import { getSiteDevConfig } from '../config/webpack.site.dev';
 import { getSitePrdConfig } from '../config/webpack.site.prd';
 
-function logServerInfo(port: number) {
-  const local = `http://localhost:${port}/`;
-  const network = `http://${address.ip()}:${port}/`;
-
-  console.log('\n  Site running at:\n');
-  console.log(`  ${chalk.bold('Local')}:    ${chalk.hex(GREEN)(local)} `);
-  console.log(`  ${chalk.bold('Network')}:  ${chalk.hex(GREEN)(network)}`);
-}
-
-function runDevServer(
+async function runDevServer(
   port: number,
   config: ReturnType<typeof getSiteDevConfig>
 ) {
-  const server = new WebpackDevServer(webpack(config), config.devServer);
-
-  // this is a hack to disable wds status log
-  (server as any).showStatus = function () {};
-
   const host = get(config.devServer, 'host', 'localhost');
-  server.listen(port, host, (err?: Error) => {
-    if (err) {
-      console.log(err);
-    }
-  });
+  const server = new WebpackDevServer(
+    {
+      ...config.devServer,
+      port,
+      host,
+    },
+    webpack(config)
+  );
+
+  await server.start();
 }
 
-function watch() {
+async function watch() {
   const config = getSiteDevConfig();
-
-  getPort(
-    {
-      port: config.devServer!.port,
-    },
-    (err, port) => {
-      if (err) {
-        console.log(err);
-        return;
-      }
-
-      logServerInfo(port);
-      runDevServer(port, config);
-    }
-  );
+  const port = await getPortPromise({
+    port: config.devServer.port,
+  });
+  await runDevServer(port, config);
 }
 
 function build() {
@@ -71,6 +48,6 @@ export async function compileSite(production = false) {
   if (production) {
     await build();
   } else {
-    watch();
+    await watch();
   }
 }

packages/vant-cli/src/config/webpack.site.dev.ts

@@ -49,9 +49,11 @@ export function getSiteDevBaseConfig(): WebpackConfig {
     devServer: {
       port: 8080,
       host: '0.0.0.0',
-      stats: 'errors-only',
-      publicPath: '/',
-      disableHostCheck: true,
+      allowedHosts: 'all',
+      devMiddleware: {
+        stats: 'errors-only',
+        publicPath: '/',
+      },
     },
     resolve: {
       alias: {

packages/vant-cli/src/module.d.ts

@@ -6,6 +6,7 @@ declare module 'hash-sum';
 declare module 'clean-css';
 declare module 'webpackbar';
 declare module 'release-it';
+declare module 'webpack-dev-server';
 declare module 'html-webpack-plugin';
 declare module 'conventional-changelog';
 declare module '@vant/markdown-vetur';

src/dialog/Dialog.tsx

@@ -72,6 +72,7 @@ export default defineComponent({
 
     const close = (action: DialogAction) => {
       updateShow(false);
+
       if (props.callback) {
         props.callback(action);
       }

src/image-preview/test/index.spec.ts

@@ -215,7 +215,6 @@ test('before close prop', async () => {
   expect(wrapper.emitted('close')).toBeFalsy();
 
   await wrapper.setProps({ show: false });
-  expect(wrapper.emitted('update:show')![0]).toBeTruthy();
   expect(wrapper.emitted('close')![0]).toBeTruthy();
 });
 

src/popup/Popup.tsx

@@ -115,17 +115,15 @@ export default defineComponent({
       }
     };
 
-    const triggerClose = () => {
-      opened = false;
-      emit('close');
-      emit('update:show', false);
-    };
-
     const close = () => {
       if (opened) {
         callInterceptor({
           interceptor: props.beforeClose,
-          done: triggerClose,
+          done() {
+            opened = false;
+            emit('close');
+            emit('update:show', false);
+          },
         });
       }
     };
@@ -224,7 +222,8 @@ export default defineComponent({
         if (value) {
           open();
         } else {
-          close();
+          opened = false;
+          emit('close');
         }
       }
     );

src/popup/test/index.spec.js

@@ -230,3 +230,16 @@ test('should allow to prevent close with before-close prop', async () => {
   await wrapper.find('.van-overlay').trigger('click');
   expect(wrapper.emitted('update:show')[0]).toEqual([false]);
 });
+
+test('should not call before-close when show prop becomes false', async () => {
+  const beforeClose = jest.fn();
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      beforeClose,
+    },
+  });
+
+  await wrapper.setProps({ show: false });
+  expect(beforeClose).toHaveBeenCalledTimes(0);
+});