feat: Verify package name in real-time (#1213)

Author: CsCherrYY

extension/package-lock.json

@@ -864,6 +864,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^7.2.0",
     "@types/google-protobuf": "^3.15.5",
+    "@types/lodash": "^4.14.182",
     "@types/mocha": "^9.1.0",
     "@types/node": "^14.14.31",
     "@types/sinon": "^10.0.11",
@@ -890,6 +891,7 @@
     "await-lock": "^2.1.0",
     "fs-extra": "^10.0.1",
     "get-port": "^5.1.1",
+    "lodash": "^4.17.21",
     "minimatch": "^3.0.5",
     "string-argv": "^0.3.1",
     "tree-kill": "^1.2.2",

extension/package.json

@@ -3,6 +3,7 @@
 
 import * as vscode from "vscode";
 import { IProjectCreationMetadata, IProjectCreationStep, StepResult } from "./types";
+import { asyncDebounce } from "./utils";
 
 export class SpecifySourcePackageNameStep implements IProjectCreationStep {
     public static GET_NORMALIZED_PACKAGE_NAME = "getNormalizedPackageName";
@@ -11,12 +12,17 @@ export class SpecifySourcePackageNameStep implements IProjectCreationStep {
         if (!metadata.client) {
             return StepResult.STOP;
         }
+        const getNormalizedPackageNameTrigger = asyncDebounce(
+            metadata.client.getNormalizedPackageName,
+            500 /** ms */,
+            metadata.client
+        );
         const disposables: vscode.Disposable[] = [];
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const specifySourcePackageNamePromise = new Promise<StepResult>(async (resolve, _reject) => {
             const inputBox = vscode.window.createInputBox();
             const defaultName = metadata.sourcePackageName || "";
-            const normalizedName = await metadata.client.getNormalizedPackageName(defaultName);
+            const normalizedName = await getNormalizedPackageNameTrigger(defaultName);
             if (!normalizedName) {
                 return resolve(StepResult.STOP);
             }
@@ -25,7 +31,7 @@ export class SpecifySourcePackageNameStep implements IProjectCreationStep {
             })`;
             inputBox.prompt = "Input source package name of your project.";
             inputBox.placeholder = "e.g. " + normalizedName;
-            inputBox.value = normalizedName;
+            inputBox.value = normalizedName as string;
             inputBox.ignoreFocusOut = true;
             inputBox.enabled = true;
             if (metadata.steps.length) {
@@ -39,15 +45,26 @@ export class SpecifySourcePackageNameStep implements IProjectCreationStep {
                 );
             }
             disposables.push(
+                inputBox.onDidChangeValue(async () => {
+                    const normalizedName = await getNormalizedPackageNameTrigger(inputBox.value);
+                    if (!normalizedName) {
+                        return;
+                    } else if (normalizedName !== inputBox.value) {
+                        this.setInputInvalid(inputBox, normalizedName as string);
+                    } else {
+                        this.setInputValid(inputBox);
+                    }
+                }),
                 inputBox.onDidAccept(async () => {
                     const normalizedName = await metadata.client.getNormalizedPackageName(inputBox.value);
-                    if (normalizedName === inputBox.value) {
+                    if (!normalizedName) {
+                        return;
+                    } else if (normalizedName !== inputBox.value) {
+                        this.setInputInvalid(inputBox, normalizedName as string);
+                    } else {
                         metadata.sourcePackageName = inputBox.value;
                         metadata.nextStep = undefined;
                         resolve(StepResult.NEXT);
-                    } else {
-                        inputBox.enabled = false;
-                        inputBox.validationMessage = `Invalid source package name, suggest name: ${normalizedName}`;
                     }
                 }),
                 inputBox.onDidHide(() => {
@@ -64,6 +81,20 @@ export class SpecifySourcePackageNameStep implements IProjectCreationStep {
             disposables.forEach((d) => d.dispose());
         }
     }
+
+    private setInputInvalid(inputBox: vscode.InputBox, normalizedName: string) {
+        if (inputBox) {
+            inputBox.enabled = false;
+            inputBox.validationMessage = `Invalid source package name, suggest name: ${normalizedName}`;
+        }
+    }
+
+    private setInputValid(inputBox: vscode.InputBox) {
+        if (inputBox) {
+            inputBox.enabled = true;
+            inputBox.validationMessage = undefined;
+        }
+    }
 }
 
 export const specifySourcePackageNameStep = new SpecifySourcePackageNameStep();

extension/src/createProject/SpecifySourcePackageNameStep.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { debounce } from "lodash";
+
+export function asyncDebounce(func: any, wait: any, bind: any) {
+    const debounced = debounce(async (resolve, reject, bindSelf, args) => {
+        try {
+            const result = await func.bind(bindSelf)(...args);
+            resolve(result);
+        } catch (error) {
+            reject(error);
+        }
+    }, wait);
+
+    function returnFunc(...args: any[]) {
+        return new Promise((resolve, reject) => {
+            debounced(resolve, reject, bind, args);
+        });
+    }
+
+    return returnFunc;
+}