feat: replace lwr with lwc-dev-server

Author: bpbuch

src/commands/lightning/dev/component.ts

@@ -7,17 +7,16 @@
 
 import path from 'node:path';
 import { SfCommand, Flags } from '@salesforce/sf-plugins-core';
-import { Messages, SfProject } from '@salesforce/core';
+import { Messages, SfProject, Logger } from '@salesforce/core';
+import { Platform } from '@salesforce/lwc-dev-mobile-core';
 import { ComponentUtils } from '../../../shared/componentUtils.js';
 import { PromptUtils } from '../../../shared/promptUtils.js';
 import { PreviewUtils } from '../../../shared/previewUtils.js';
+import { startLWCServer } from '../../../lwc-dev-server/index.js';
 
 Messages.importMessagesDirectoryFromMetaUrl(import.meta.url);
 const messages = Messages.loadMessages('@salesforce/plugin-lightning-dev', 'lightning.dev.component');
 
-// TODO: generate ldp server url
-const ldpServerUrl = 'http://localhost:3000';
-
 export default class LightningDevComponent extends SfCommand<void> {
   public static readonly summary = messages.getMessage('summary');
   public static readonly description = messages.getMessage('description');
@@ -39,13 +38,30 @@ export default class LightningDevComponent extends SfCommand<void> {
 
   public async run(): Promise<void> {
     const { flags } = await this.parse(LightningDevComponent);
+    const logger = await Logger.child(this.ctor.name);
     const project = await SfProject.resolve();
 
+    let sfdxProjectRootPath = '';
+    try {
+      sfdxProjectRootPath = await SfProject.resolveProjectPath();
+    } catch (error) {
+      // return Promise.reject(new Error(messages.getMessage('error.no-project', [(error as Error)?.message ?? ''])));
+      throw new Error('failed to resolve project path');
+    }
+
     let componentName = flags['name'];
     const clientSelect = flags['client-select'];
     const targetOrg = flags['target-org'];
 
-    const { ldpServerId } = await PreviewUtils.initializePreviewConnection(targetOrg);
+    const { ldpServerId, ldpServerToken } = await PreviewUtils.initializePreviewConnection(targetOrg);
+
+    logger.debug('Determining the next available port for Local Dev Server');
+    const serverPorts = await PreviewUtils.getNextAvailablePorts();
+    logger.debug(`Next available ports are http=${serverPorts.httpPort} , https=${serverPorts.httpsPort}`);
+
+    logger.debug('Determining Local Dev Server url');
+    const ldpServerUrl = PreviewUtils.generateWebSocketUrlForLocalDevServer(Platform.desktop, serverPorts, logger);
+    logger.debug(`Local Dev Server url is ${ldpServerUrl}`);
 
     const namespacePaths = await ComponentUtils.getNamespacePaths(project);
     const componentPaths = await ComponentUtils.getAllComponentPaths(namespacePaths);
@@ -101,7 +117,7 @@ export default class LightningDevComponent extends SfCommand<void> {
       }
     }
 
-    // TODO: launch the local dev server
+    await startLWCServer(logger, sfdxProjectRootPath, ldpServerToken, Platform.desktop, serverPorts);
 
     const targetOrgArg = PreviewUtils.getTargetOrgFromArguments(this.argv);
     const launchArguments = PreviewUtils.generateComponentPreviewLaunchArguments(

src/lwc-dev-server/index.ts

@@ -30,7 +30,9 @@ async function createLWCServerConfig(
   const { namespace } = projectJson;
 
   // e.g. lwc folders in force-app/main/default/lwc, package-dir/lwc
-  const namespacePaths = (await Promise.all(packageDirs.map((dir) => glob(`${dir.fullPath}/**/lwc`, { absolute: true })))).flat();
+  const namespacePaths = (
+    await Promise.all(packageDirs.map((dir) => glob(`${dir.fullPath}/**/lwc`, { absolute: true })))
+  ).flat();
 
   const ports = serverPorts ??
     (await ConfigUtils.getLocalDevServerPorts()) ?? {
@@ -46,6 +48,7 @@ async function createLWCServerConfig(
     // use custom workspace if any is provided, or fetch from config file (if any), otherwise use the default workspace
     workspace: workspace ?? (await ConfigUtils.getLocalDevServerWorkspace()) ?? LOCAL_DEV_SERVER_DEFAULT_WORKSPACE,
     identityToken: token,
+    // @ts-expect-error - TEMP: there is dependency mismatch when linking a local copy of the lwc-dev-server
     lifecycle: Lifecycle.getInstance(),
     clientType,
     namespace: typeof namespace === 'string' && namespace.trim().length > 0 ? namespace.trim() : undefined,
@@ -74,6 +77,7 @@ export async function startLWCServer(
   const config = await createLWCServerConfig(rootDir, token, clientType, serverPorts, certData, workspace);
 
   logger.trace(`Starting LWC Dev Server with config: ${JSON.stringify(config)}`);
+  // @ts-expect-error - TEMP: there is dependency mismatch when linking a local copy of the lwc-dev-server
   let lwcDevServer: LWCServer | null = await startLwcDevServer(config, logger);
 
   const cleanup = (): void => {

src/shared/previewUtils.ts

@@ -230,10 +230,11 @@ export class PreviewUtils {
     targetOrg?: string
   ): string[] {
     // TODO: vanity application target
-    let appPath = `lwr/application/ai/${encodeURIComponent(
+    let appPath = `lwr/application/e/devpreview/ai/${encodeURIComponent(
       'localdev%2Fpreview'
     )}?ldpServerUrl=${ldpServerUrl}&ldpServerId=${ldpServerId}`;
     if (componentName) {
+      // TODO: support other namespaces
       appPath += `&specifier=c/${componentName}`;
     }