feat(cli): support build types (#8264)

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

@@ -1,6 +1,7 @@
+import execa from 'execa';
 import chokidar from 'chokidar';
 import { join, relative } from 'path';
-import { remove, copy, readdirSync } from 'fs-extra';
+import { remove, copy, readdirSync, existsSync } from 'fs-extra';
 import { clean } from './clean';
 import { CSS_LANG } from '../common/css';
 import { ora, consola, slimPath } from '../common/logger';
@@ -63,50 +64,58 @@ async function compileDir(dir: string) {
   );
 }
 
-async function buildEs() {
+async function copySourceCode() {
+  await copy(SRC_DIR, ES_DIR);
+  await copy(SRC_DIR, LIB_DIR);
+}
+
+async function buildESMOutputs() {
   setModuleEnv('esmodule');
   setBuildTarget('package');
-  await copy(SRC_DIR, ES_DIR);
   await compileDir(ES_DIR);
 }
 
-async function buildLib() {
+async function buildCJSOutputs() {
   setModuleEnv('commonjs');
   setBuildTarget('package');
-  await copy(SRC_DIR, LIB_DIR);
   await compileDir(LIB_DIR);
 }
 
+async function buildTypeDeclarations() {
+  const tsConfig = join(process.cwd(), 'tsconfig.declaration.json');
+
+  if (existsSync(tsConfig)) {
+    await execa('tsc', ['-p', tsConfig]);
+  }
+}
+
 async function buildStyleEntry() {
   await genStyleDepsMap();
   genComponentStyle();
 }
 
-async function buildPackageEntry() {
+async function buildPackageScriptEntry() {
   const esEntryFile = join(ES_DIR, 'index.js');
   const libEntryFile = join(LIB_DIR, 'index.js');
-  const styleEntryFile = join(LIB_DIR, `index.${CSS_LANG}`);
 
   genPackageEntry({
     outputPath: esEntryFile,
     pathResolver: (path: string) => `./${relative(SRC_DIR, path)}`,
   });
 
-  setModuleEnv('esmodule');
-  await compileJs(esEntryFile);
+  await copy(esEntryFile, libEntryFile);
+}
+
+async function buildPackageStyleEntry() {
+  const styleEntryFile = join(LIB_DIR, `index.${CSS_LANG}`);
 
   genPackageStyle({
     outputPath: styleEntryFile,
     pathResolver: (path: string) => path.replace(SRC_DIR, '.'),
   });
-
-  setModuleEnv('commonjs');
-  await copy(esEntryFile, libEntryFile);
-  await compileJs(libEntryFile);
-  await compileStyle(styleEntryFile);
 }
 
-async function buildPackages() {
+async function buildBundledOutputs() {
   setModuleEnv('esmodule');
   await compilePackage(false);
   await compilePackage(true);
@@ -115,24 +124,36 @@ async function buildPackages() {
 
 const tasks = [
   {
-    text: 'Build ESModule Outputs',
-    task: buildEs,
+    text: 'Copy Source Code',
+    task: copySourceCode,
   },
   {
-    text: 'Build Commonjs Outputs',
-    task: buildLib,
+    text: 'Build Package Script Entry',
+    task: buildPackageScriptEntry,
   },
   {
-    text: 'Build Style Entry',
+    text: 'Build Component Style Entry',
     task: buildStyleEntry,
   },
   {
-    text: 'Build Package Entry',
-    task: buildPackageEntry,
+    text: 'Build Package Style Entry',
+    task: buildPackageStyleEntry,
   },
   {
-    text: 'Build Packed Outputs',
-    task: buildPackages,
+    text: 'Build Type Declarations',
+    task: buildTypeDeclarations,
+  },
+  {
+    text: 'Build ESModule Outputs',
+    task: buildESMOutputs,
+  },
+  {
+    text: 'Build CommonJS Outputs',
+    task: buildCJSOutputs,
+  },
+  {
+    text: 'Build Bundled Outputs',
+    task: buildBundledOutputs,
   },
 ];
 

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

@@ -4,8 +4,13 @@ import { replaceExt } from '../common';
 import { replaceCssImportExt } from '../common/css';
 import { replaceScriptImportExt } from './get-deps';
 
-export function compileJs(filePath: string): Promise<void> {
+export async function compileJs(filePath: string): Promise<void> {
   return new Promise((resolve, reject) => {
+    if (filePath.includes('.d.ts')) {
+      resolve();
+      return;
+    }
+
     let code = readFileSync(filePath, 'utf-8');
 
     code = replaceCssImportExt(code);

src/dialog/Dialog.tsx

@@ -73,7 +73,7 @@ export default createComponent({
       }
     };
 
-    const handleAction = (action: DialogAction) => {
+    const getActionHandler = (action: DialogAction) => () => {
       // should not trigger close event when hidden
       if (!props.show) {
         return;
@@ -99,6 +99,9 @@ export default createComponent({
       }
     };
 
+    const onCancel = getActionHandler('cancel');
+    const onConfirm = getActionHandler('confirm');
+
     const renderTitle = () => {
       const title = slots.title ? slots.title() : props.title;
       if (title) {
@@ -153,9 +156,7 @@ export default createComponent({
             class={bem('cancel')}
             style={{ color: props.cancelButtonColor }}
             loading={loading.cancel}
-            onClick={() => {
-              handleAction('cancel');
-            }}
+            onClick={onCancel}
           />
         )}
         {props.showConfirmButton && (
@@ -165,9 +166,7 @@ export default createComponent({
             class={[bem('confirm'), { [BORDER_LEFT]: props.showCancelButton }]}
             style={{ color: props.confirmButtonColor }}
             loading={loading.confirm}
-            onClick={() => {
-              handleAction('confirm');
-            }}
+            onClick={onConfirm}
           />
         )}
       </div>
@@ -182,9 +181,7 @@ export default createComponent({
             class={bem('cancel')}
             color={props.cancelButtonColor}
             loading={loading.cancel}
-            onClick={() => {
-              handleAction('cancel');
-            }}
+            onClick={onCancel}
           />
         )}
         {props.showConfirmButton && (
@@ -194,9 +191,7 @@ export default createComponent({
             class={bem('confirm')}
             color={props.confirmButtonColor}
             loading={loading.confirm}
-            onClick={() => {
-              handleAction('confirm');
-            }}
+            onClick={onConfirm}
           />
         )}
       </ActionBar>