Implement IOptionsService.onSpecificOptionChange

Part of #4190

src/common/CoreTerminal.ts

@@ -261,7 +261,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this.coreMouseService.reset();
   }
 
-  protected _updateOptions(key: string): void {
+  protected _updateOptions(key: keyof ITerminalOptions): void {
     // TODO: These listeners should be owned by individual components
     switch (key) {
       case 'scrollback':

src/common/TestUtils.test.ts

@@ -9,7 +9,7 @@ import { clone } from 'common/Clone';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
 import { IBufferSet, IBuffer } from 'common/buffer/Types';
 import { BufferSet } from 'common/buffer/BufferSet';
-import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes, IAttributeData, IOscLinkData } from 'common/Types';
+import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes, IAttributeData, IOscLinkData, IDisposable } from 'common/Types';
 import { UnicodeV6 } from 'common/input/UnicodeV6';
 import { IDecorationOptions, IDecoration } from 'xterm';
 
@@ -113,7 +113,7 @@ export class MockOptionsService implements IOptionsService {
   public serviceBrand: any;
   public readonly rawOptions: Required<ITerminalOptions> = clone(DEFAULT_OPTIONS);
   public options: Required<ITerminalOptions> = this.rawOptions;
-  public onOptionChange: IEvent<string> = new EventEmitter<string>().event;
+  public onOptionChange: IEvent<keyof ITerminalOptions> = new EventEmitter<keyof ITerminalOptions>().event;
   constructor(testOptions?: Partial<ITerminalOptions>) {
     if (testOptions) {
       for (const key of Object.keys(testOptions)) {
@@ -121,6 +121,14 @@ export class MockOptionsService implements IOptionsService {
       }
     }
   }
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (arg1: ITerminalOptions[T]) => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (eventKey === key) {
+        listener(this.rawOptions[key]);
+      }
+    });
+  }
   public setOptions(options: ITerminalOptions): void {
     for (const key of Object.keys(options)) {
       this.options[key] = options[key];

src/common/services/OptionsService.ts

@@ -6,7 +6,7 @@
 import { IOptionsService, ITerminalOptions, FontWeight } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { isMac } from 'common/Platform';
-import { CursorStyle } from 'common/Types';
+import { CursorStyle, IDisposable } from 'common/Types';
 import { Disposable } from 'common/Lifecycle';
 
 export const DEFAULT_OPTIONS: Readonly<Required<ITerminalOptions>> = {
@@ -58,7 +58,7 @@ export class OptionsService extends Disposable implements IOptionsService {
   public readonly rawOptions: Required<ITerminalOptions>;
   public options: Required<ITerminalOptions>;
 
-  private readonly _onOptionChange = this.register(new EventEmitter<string>());
+  private readonly _onOptionChange = this.register(new EventEmitter<keyof ITerminalOptions>());
   public readonly onOptionChange = this._onOptionChange.event;
 
   constructor(options: Partial<ITerminalOptions>) {
@@ -82,6 +82,15 @@ export class OptionsService extends Disposable implements IOptionsService {
     this._setupOptions();
   }
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (value: ITerminalOptions[T]) => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (eventKey === key) {
+        listener(this.rawOptions[key]);
+      }
+    });
+  }
+
   private _setupOptions(): void {
     const getter = (propName: string): any => {
       if (!(propName in DEFAULT_OPTIONS)) {

src/common/services/Services.ts

@@ -182,9 +182,25 @@ export interface IOptionsService {
    * internally.
    */
   readonly rawOptions: Required<ITerminalOptions>;
+
+  /**
+   * Options as exposed through the public API, this property uses getters and setters with
+   * validation which makes it safer but slower. {@link rawOptions} should be used for pretty much
+   * all internal usage for performance reasons.
+   */
   readonly options: Required<ITerminalOptions>;
 
-  readonly onOptionChange: IEvent<string>;
+  /**
+   * Adds an event listener for when any option changes.
+   */
+  readonly onOptionChange: IEvent<keyof ITerminalOptions>;
+
+  /**
+   * Adds an event listener for when a specific option changes, this is a convenience method that is
+   * preferred over {@link onOptionChange} when only a single option is being listened to.
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (arg1: ITerminalOptions[T]) => any): IDisposable;
 }
 
 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number;