feat: create dev server for desktop site

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

@@ -1,5 +1,5 @@
 import { build } from 'vite';
-import { getViteConfigForPackage } from '../config/vite.config.package';
+import { getViteConfigForPackage } from '../config/vite.package';
 
 export async function compilePackage(minify: boolean) {
   return build(getViteConfigForPackage(minify));

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

@@ -1,53 +1,15 @@
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
-import { get } from 'lodash';
-import { getPortPromise } from 'portfinder';
-import { getSiteDevConfig } from '../config/webpack.site.dev';
-import { getSitePrdConfig } from '../config/webpack.site.prd';
+import { createServer } from 'vite';
+import { getViteConfigForSiteDev } from '../config/vite.site';
+import { genSiteEntry } from './vant-cli-site-plugin';
 
-async function runDevServer(
-  port: number,
-  config: ReturnType<typeof getSiteDevConfig>
-) {
-  const host = get(config.devServer, 'host', 'localhost');
-  const server = new WebpackDevServer(
-    {
-      ...config.devServer,
-      port,
-      host,
-    },
-    webpack(config)
-  );
-
-  await server.start();
-}
-
-async function watch() {
-  const config = getSiteDevConfig();
-  const port = await getPortPromise({
-    port: config.devServer.port,
-  });
-  await runDevServer(port, config);
-}
-
-function build() {
-  return new Promise<void>((resolve, reject) => {
-    const config = getSitePrdConfig();
-
-    webpack(config, (err, stats) => {
-      if (err || (stats && stats.hasErrors())) {
-        reject();
-      } else {
-        resolve();
-      }
-    });
-  });
-}
+async function build() {}
 
 export async function compileSite(production = false) {
+  await genSiteEntry();
   if (production) {
     await build();
   } else {
-    await watch();
+    const server = await createServer(getViteConfigForSiteDev());
+    await server.listen();
   }
 }

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -1,9 +1,8 @@
 import glob from 'fast-glob';
 import { join, parse } from 'path';
-import { existsSync, readdirSync } from 'fs-extra';
+import { existsSync, readFileSync, readdirSync } from 'fs-extra';
 import {
   pascalize,
-  removeExt,
   getVantConfig,
   smartOutputFile,
   normalizePath,
@@ -90,8 +89,9 @@ function genExportDocuments(items: DocumentItem[]) {
 };`;
 }
 
-function genImportConfig() {
-  return `import config from '${removeExt(normalizePath(VANT_CONFIG_FILE))}';`;
+function genVantConfigContent() {
+  const content = readFileSync(VANT_CONFIG_FILE, 'utf-8');
+  return content.replace('module.exports', 'const config');
 }
 
 function genExportConfig() {
@@ -103,7 +103,7 @@ function genExportVersion() {
 }
 
 function genInstall() {
-  return `import './package-style';`;
+  return `import './package-style.less';`;
 }
 
 function genExportPackageEntry() {
@@ -114,10 +114,11 @@ export function genSiteDesktopShared() {
   const dirs = readdirSync(SRC_DIR);
   const documents = resolveDocuments(dirs);
 
-  const code = `${genImportConfig()}
-${genInstall()}
+  const code = `${genInstall()}
 ${genImportDocuments(documents)}
 
+${genVantConfigContent()}
+
 ${genExportPackageEntry()}
 ${genExportConfig()}
 ${genExportDocuments(documents)}

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

@@ -1,4 +1,3 @@
-import { Compiler } from 'webpack';
 import { replaceExt } from '../common';
 import { CSS_LANG } from '../common/css';
 import { genPackageEntry } from './gen-package-entry';
@@ -8,8 +7,6 @@ import { genSiteDesktopShared } from './gen-site-desktop-shared';
 import { genStyleDepsMap } from './gen-style-deps-map';
 import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
 
-const PLUGIN_NAME = 'VantCliSitePlugin';
-
 export async function genSiteEntry(): Promise<void> {
   return new Promise((resolve, reject) => {
     genStyleDepsMap()
@@ -30,13 +27,3 @@ export async function genSiteEntry(): Promise<void> {
       });
   });
 }
-
-export class VantCliSitePlugin {
-  apply(compiler: Compiler) {
-    if (process.env.NODE_ENV === 'production') {
-      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, genSiteEntry);
-    } else {
-      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, genSiteEntry);
-    }
-  }
-}

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

@@ -0,0 +1,80 @@
+import { join } from 'path';
+import hljs from 'highlight.js';
+import vitePluginMd from 'vite-plugin-md';
+import vitePluginVue from '@vitejs/plugin-vue';
+import vitePluginJsx from '@vitejs/plugin-vue-jsx';
+import { setBuildTarget } from '../common';
+import {
+  SITE_DESKTOP_SHARED_FILE,
+  SITE_MOBILE_SHARED_FILE,
+} from '../common/constant';
+import type { InlineConfig } from 'vite';
+
+function markdownHighlight(str: string, lang: string) {
+  if (lang && hljs.getLanguage(lang)) {
+    // https://github.com/highlightjs/highlight.js/issues/2277
+    return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+  }
+
+  return '';
+}
+
+function markdownCardWrapper(htmlCode: string) {
+  const group = htmlCode
+    .replace(/<h3/g, ':::<h3')
+    .replace(/<h2/g, ':::<h2')
+    .split(':::');
+
+  return group
+    .map((fragment) => {
+      if (fragment.indexOf('<h3') !== -1) {
+        return `<div class="van-doc-card">${fragment}</div>`;
+      }
+
+      return fragment;
+    })
+    .join('');
+}
+
+export function getViteConfigForSiteDev(): InlineConfig {
+  setBuildTarget('package');
+
+  return {
+    root: join(__dirname, '../../site'),
+
+    plugins: [
+      vitePluginVue({
+        include: [/\.vue$/, /\.md$/],
+      }),
+      vitePluginMd({
+        wrapperClasses: 'van-doc-markdown-body',
+        transforms: {
+          after: markdownCardWrapper,
+        },
+        markdownItOptions: {
+          highlight: markdownHighlight,
+        },
+        markdownItSetup(md: any) {
+          const { slugify } = require('transliteration');
+          const markdownItAnchor = require('markdown-it-anchor');
+          md.use(markdownItAnchor, {
+            level: 2,
+            slugify,
+          });
+        },
+      }),
+      vitePluginJsx(),
+    ],
+
+    resolve: {
+      alias: {
+        'site-mobile-shared': SITE_MOBILE_SHARED_FILE,
+        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
+      },
+    },
+
+    server: {
+      host: '0.0.0.0',
+    },
+  };
+}

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

@@ -6,7 +6,6 @@ import { merge } from 'webpack-merge';
 import { baseConfig } from './webpack.base';
 import { WebpackConfig } from '../common/types';
 import { getVantConfig, getWebpackConfig } from '../common';
-import { VantCliSitePlugin } from '../compiler/vant-cli-site-plugin';
 import {
   GREEN,
   SITE_MOBILE_SHARED_FILE,
@@ -81,7 +80,6 @@ export function getSiteDevBaseConfig(): WebpackConfig {
         name: 'Vant Cli',
         color: GREEN,
       }),
-      new VantCliSitePlugin(),
       new HtmlWebpackPlugin({
         title,
         logo: siteConfig.logo,