From bbe5ae4bd3e8eec61d7550236ea62ccb23911a4c Mon Sep 17 00:00:00 2001 From: ConnorQi01 Date: Thu, 14 May 2026 09:48:57 +0800 Subject: [PATCH] Handle packager port setting changes in status bar --- src/common/packager.ts | 1 + src/extension/packagerStatusIndicator.ts | 26 ++++++++++++++++--- src/extension/rn-extension.ts | 33 ++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/common/packager.ts b/src/common/packager.ts index f2948d3c1..e69168629 100644 --- a/src/common/packager.ts +++ b/src/common/packager.ts @@ -114,6 +114,7 @@ export class Packager { public resetToSettingsPort(): void { this.packagerPort = SettingsHelper.getPackagerPort(this.workspacePath); + this.packagerStatusIndicator.setPendingPackagerPort(undefined); } public setRunOptions(runOptions: IRunOptions): void { diff --git a/src/extension/packagerStatusIndicator.ts b/src/extension/packagerStatusIndicator.ts index d73b0c6ca..fad07cae1 100644 --- a/src/extension/packagerStatusIndicator.ts +++ b/src/extension/packagerStatusIndicator.ts @@ -35,6 +35,8 @@ export class PackagerStatusIndicator implements Disposable { private displayVersion!: string; private projectRoot?: string; private packagerPort?: number; + private pendingPackagerPort?: number; + private packagerStatus: PackagerStatus = PackagerStatus.PACKAGER_STOPPED; private isShowIndicator: boolean = true; private static PACKAGER_NAME: string = localize("ReactNativePackager", "React Native Packager"); @@ -117,32 +119,50 @@ export class PackagerStatusIndicator implements Disposable { ): void { this.updateDisplayVersion(); this.togglePackagerItem.command = command; - this.togglePackagerItem.tooltip = tooltip; + this.togglePackagerItem.tooltip = this.getTooltip(tooltip); if (!this.isShowIndicator) { icon = PackagerStatusIndicator.NOT_SHOW_INDICATOR; } const portSuffix = this.packagerPort ? ` :${this.packagerPort}` : ""; + const pendingPortSuffix = this.pendingPackagerPort ? " $(warning)" : ""; switch (this.displayVersion) { case PackagerStatusIndicator.FULL_VERSION: - this.togglePackagerItem.text = `${icon} ${PackagerStatusIndicator.PACKAGER_NAME}${portSuffix}`; + this.togglePackagerItem.text = `${icon} ${PackagerStatusIndicator.PACKAGER_NAME}${portSuffix}${pendingPortSuffix}`; this.togglePackagerItem.show(); this.restartPackagerItem.show(); break; case PackagerStatusIndicator.SHORT_VERSION: - this.togglePackagerItem.text = `${icon}${portSuffix}`; + this.togglePackagerItem.text = `${icon}${portSuffix}${pendingPortSuffix}`; this.togglePackagerItem.show(); this.restartPackagerItem.show(); break; } } + private getTooltip(tooltip: string): string { + if (this.pendingPackagerPort && this.packagerPort) { + return `${tooltip}\n\nRunning on port ${this.packagerPort}.\nPort setting changed to ${this.pendingPackagerPort}. It will be reset on next start.`; + } + return tooltip; + } + + public setPendingPackagerPort(port?: number): void { + this.pendingPackagerPort = port; + this.updatePackagerStatus(this.packagerStatus); + } + public updatePackagerStatus(status: PackagerStatus, port?: number): void { + this.packagerStatus = status; if (port !== undefined) { this.packagerPort = port; + if (this.pendingPackagerPort === port) { + this.pendingPackagerPort = undefined; + } } switch (status) { case PackagerStatus.PACKAGER_STOPPED: this.packagerPort = undefined; + this.pendingPackagerPort = undefined; this.setupPackagerStatusIndicatorItems( PackagerStatusIndicator.START_ICON, PackagerStatusIndicator.START_COMMAND, diff --git a/src/extension/rn-extension.ts b/src/extension/rn-extension.ts index c31cf71c2..1caf64306 100644 --- a/src/extension/rn-extension.ts +++ b/src/extension/rn-extension.ts @@ -47,6 +47,7 @@ import { TipNotificationService } from "./services/tipsNotificationsService/tips import { SurveyService } from "./services/surveyService/surveyService"; import { RNProjectObserver } from "./rnProjectObserver"; import { StopPackager } from "./commands"; +import { PackagerStatus } from "./packagerStatusIndicator"; nls.config({ messageFormat: nls.MessageFormat.bundle, @@ -66,6 +67,7 @@ interface ISetupableDisposable extends vscode.Disposable { } let EXTENSION_CONTEXT: vscode.ExtensionContext; +const PACKAGER_PORT_CONFIGURATION = "react-native.packager.port"; /** * We initialize the counter starting with a large value in order * to not overlap indices of the workspace folders originally generated by VS Code @@ -136,6 +138,9 @@ export async function activate(context: vscode.ExtensionContext): Promise onChangeWorkspaceFolders(event), ), ); + EXTENSION_CONTEXT.subscriptions.push( + vscode.workspace.onDidChangeConfiguration(event => onChangeConfiguration(event)), + ); EXTENSION_CONTEXT.subscriptions.push(TipNotificationService.getInstance()); EXTENSION_CONTEXT.subscriptions.push(SurveyService.getInstance()); @@ -256,6 +261,34 @@ function onChangeWorkspaceFolders(event: vscode.WorkspaceFoldersChangeEvent) { } } +export function onChangeConfiguration(event: vscode.ConfigurationChangeEvent): void { + if (event.affectsConfiguration(PACKAGER_PORT_CONFIGURATION)) { + updatePackagerPortFromSettings(); + } +} + +function updatePackagerPortFromSettings(): void { + const packagers = Object.values(ProjectsStorage.projectsCache).map(appLauncher => + appLauncher.getPackager(), + ); + packagers.forEach(packager => { + const status = packager.getPackagerStatus(); + const isRunningPackager = + status === PackagerStatus.PACKAGER_STARTED || + status === PackagerStatus.PACKAGER_STARTING || + status === PackagerStatus.PACKAGER_STOPPING; + + if (isRunningPackager) { + const settingsPort = SettingsHelper.getPackagerPort(packager.getProjectPath()); + const pendingPort = settingsPort === packager.getPort() ? undefined : settingsPort; + packager.getStatusIndicator().setPendingPackagerPort(pendingPort); + return; + } + + packager.resetToSettingsPort(); + }); +} + export function createAdditionalWorkspaceFolder(folderPath: string): vscode.WorkspaceFolder | null { if (fs.existsSync(folderPath)) { const folderUri = vscode.Uri.file(folderPath);