fix: @ W-17818313 add base components and support label selection (#379)

* fix: add base components and support label selection

* chore: upgrade lwr

Author: bpbuch

lwc.config.json

@@ -0,0 +1,7 @@
+{
+  "modules": [
+    {
+      "npm": "lightning-base-components"
+    }
+  ]
+}

package.json

@@ -9,14 +9,15 @@
     "@inquirer/select": "^2.4.7",
     "@lwc/lwc-dev-server": "~11.5.0",
     "@lwc/sfdc-lwc-compiler": "~11.5.0",
-    "@lwrjs/api": "0.16.10",
+    "@lwrjs/api": "0.18.1",
     "@oclif/core": "^4.1.0",
     "@salesforce/core": "^8.6.2",
     "@salesforce/kit": "^3.1.6",
     "@salesforce/lwc-dev-mobile-core": "4.0.0-alpha.9",
     "@salesforce/sf-plugins-core": "^11.2.4",
     "axios": "^1.7.9",
     "glob": "^10.4.5",
+    "lightning-base-components": "1.27.2-alpha",
     "lwc": "~8.12.5",
     "node-fetch": "^3.3.2",
     "xml2js": "^0.6.2"

src/commands/lightning/dev/component.ts

@@ -6,6 +6,7 @@
  */
 
 import path from 'node:path';
+import url from 'node:url';
 import { SfCommand, Flags } from '@salesforce/sf-plugins-core';
 import { Messages, SfProject } from '@salesforce/core';
 import { cmpDev } from '@lwrjs/api';
@@ -72,9 +73,12 @@ export default class LightningDevComponent extends SfCommand<void> {
     let name = flags.name;
     if (name) {
       // validate that the component exists before launching the server
-      if (!components.find((component) => name === component.name)) {
+      const match = components.find((component) => name === component.name || name === component.label);
+      if (!match) {
         throw new Error(messages.getMessage('error.component-not-found', [name]));
       }
+
+      name = match.name;
     } else {
       // prompt the user for a name if one was not provided
       name = await PromptUtils.promptUserToSelectComponent(components);
@@ -83,12 +87,16 @@ export default class LightningDevComponent extends SfCommand<void> {
       }
     }
 
+    const dirname = path.dirname(url.fileURLToPath(import.meta.url));
+    const rootDir = path.resolve(dirname, '../../../..');
     const port = parseInt(process.env.PORT ?? '3000', 10);
 
     await cmpDev({
+      rootDir,
       mode: 'dev',
       port,
       name: `c/${name}`,
+      namespacePaths,
     });
   }
 }

src/shared/componentUtils.ts

@@ -57,10 +57,31 @@ export class ComponentUtils {
       return undefined;
     }
 
+    if (parsedData.LightningComponentBundle) {
+      parsedData.LightningComponentBundle.masterLabel = this.normalizeMetaProperty(
+        parsedData.LightningComponentBundle.masterLabel
+      );
+      parsedData.LightningComponentBundle.description = this.normalizeMetaProperty(
+        parsedData.LightningComponentBundle.description
+      );
+    }
+
     return parsedData;
   }
 
   private static isLwcMetadata(obj: unknown): obj is LwcMetadata {
     return (obj && typeof obj === 'object' && 'LightningComponentBundle' in obj) === true;
   }
+
+  private static normalizeMetaProperty(prop: string[] | string | undefined): string | undefined {
+    if (!prop || typeof prop === 'string') {
+      return prop;
+    }
+
+    if (Array.isArray(prop) && prop.length > 0) {
+      return prop[0];
+    }
+
+    return undefined;
+  }
 }