feat: emit onConnecting event upon receiving info (#48)

Co-authored-by: Richard Herman <[email protected]>

src/ui/__tests__/connection.test.ts

@@ -48,21 +48,27 @@ describe("connection", () => {
 	});
 
 	/**
-	 * Asserts `connected` is emitted once a connection has been established.
+	 * Asserts `connecting` and `connected` are emitted.
 	 */
-	it("emits connected", async () => {
+	it("emits connecting and connected", async () => {
 		// Arrange.
 		const uuid = "123_emits-connected";
+		const connectingSpy = jest.fn();
 		const connectedSpy = jest.fn();
 
 		// Act.
+		connection.on("connecting", connectingSpy);
 		connection.on("connected", connectedSpy);
+
 		await window.connectElgatoStreamDeckSocket(port, uuid, "register", JSON.stringify(registrationInfo), JSON.stringify(actionInfo));
 
 		// Assert
 		await connection.getInfo();
+		expect(connectingSpy).toHaveBeenCalledTimes(1);
+		expect(connectingSpy).toBeCalledWith<[RegistrationInfo, ActionInfo]>(registrationInfo, actionInfo);
 		expect(connectedSpy).toHaveBeenCalledTimes(1);
 		expect(connectedSpy).toBeCalledWith<[RegistrationInfo, ActionInfo]>(registrationInfo, actionInfo);
+		expect(connectingSpy.mock.invocationCallOrder[0]).toBeLessThan(connectedSpy.mock.invocationCallOrder[0]); // connecting before connected
 	});
 
 	/**

src/ui/__tests__/index.test.ts

@@ -39,14 +39,37 @@ describe("streamDeck", () => {
 	});
 
 	/**
-	 * Asserts {@link streamDeck.onDidConnect} is propagated when the connection emits `connected`.
+	 * Asserts {@link streamDeck.onConnecting} is propagated when the connection emits `connecting`.
 	 */
-	it("receives onDidConnect", () => {
+	it("receives onConnecting", () => {
 		// Arrange.
 		const listener = jest.fn();
 
 		// Act.
-		const disposable = streamDeck.onDidConnect(listener);
+		const disposable = streamDeck.onConnecting(listener);
+		connection.emit("connecting", registrationInfo, actionInfo);
+
+		// Assert.
+		expect(listener).toHaveBeenCalledTimes(1);
+		expect(listener).toHaveBeenCalledWith(registrationInfo, actionInfo);
+
+		// Act (dispose).
+		disposable.dispose();
+		connection.emit("connecting", registrationInfo, actionInfo);
+
+		// Assert (dispose).
+		expect(listener).toHaveBeenCalledTimes(1);
+	});
+
+	/**
+	 * Asserts {@link streamDeck.onConnected} is propagated when the connection emits `connected`.
+	 */
+	it("receives onConnected", () => {
+		// Arrange.
+		const listener = jest.fn();
+
+		// Act.
+		const disposable = streamDeck.onConnected(listener);
 		connection.emit("connected", registrationInfo, actionInfo);
 
 		// Assert.

src/ui/connection.ts

@@ -78,6 +78,7 @@ class Connection extends EventEmitter<ExtendedUIEventMap> {
 	private async connect(port: string, uuid: string, event: string, info: RegistrationInfo, actionInfo: ActionInfo): Promise<void> {
 		if (this.canConnect) {
 			this.canConnect = false;
+			this.emit("connecting", info, actionInfo);
 
 			const webSocket = new WebSocket(`ws://127.0.0.1:${port}`);
 			webSocket.onmessage = (ev: MessageEvent<string>): void => this.tryEmit(ev);
@@ -130,6 +131,11 @@ export type ConnectionInfo = {
  * An extended event map that includes connection events.
  */
 type ExtendedUIEventMap = UIEventMap & {
+	/**
+	 * Occurs when a connecting is being established.
+	 */
+	connecting: [info: RegistrationInfo, actionInfo: ActionInfo];
+
 	/**
 	 * Occurs when a connection is established.
 	 */

src/ui/index.ts

@@ -43,11 +43,20 @@ const streamDeck = {
 	system,
 
 	/**
-	 * Occurs when the UI connects to the Stream Deck.
+	 * Occurs before the UI has established a connection with Stream Deck.
 	 * @param listener Event handler function.
 	 * @returns A disposable that removes the listener when disposed.
 	 */
-	onDidConnect: <TSettings extends JsonObject = JsonObject>(listener: (info: RegistrationInfo, actionInfo: ActionInfo<TSettings>) => void): IDisposable => {
+	onConnecting: <TSettings extends JsonObject = JsonObject>(listener: (info: RegistrationInfo, actionInfo: ActionInfo<TSettings>) => void): IDisposable => {
+		return connection.disposableOn("connecting", listener);
+	},
+
+	/**
+	 * Occurs when the UI has established a connection with Stream Deck.
+	 * @param listener Event handler function.
+	 * @returns A disposable that removes the listener when disposed.
+	 */
+	onConnected: <TSettings extends JsonObject = JsonObject>(listener: (info: RegistrationInfo, actionInfo: ActionInfo<TSettings>) => void): IDisposable => {
 		return connection.disposableOn("connected", listener);
 	}
 };