refact: Migrate $helper.queue to TypeScript (#7981)

Author: distantnative

panel/src/helpers/queue.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import queue from "./queue";
+
+describe("queue()", () => {
+	it("should resolve with results for all tasks", async () => {
+		const results = await queue([
+			() => Promise.resolve(1),
+			() => Promise.resolve(2),
+			() => Promise.resolve(3)
+		]);
+
+		expect(results).toEqual([1, 2, 3]);
+	});
+
+	it("should resolve with an empty array for no tasks", async () => {
+		const results = await queue([]);
+
+		expect(results).toEqual([]);
+	});
+
+	it("should preserve the order of results regardless of completion order", async () => {
+		const results = await queue([
+			() => new Promise<number>((resolve) => setTimeout(() => resolve(1), 30)),
+			() => new Promise<number>((resolve) => setTimeout(() => resolve(2), 20)),
+			() => new Promise<number>((resolve) => setTimeout(() => resolve(3), 10))
+		]);
+
+		expect(results).toEqual([1, 2, 3]);
+	});
+
+	it("should not exceed the concurrency limit", async () => {
+		let active = 0;
+		let maxActive = 0;
+		const task = () =>
+			new Promise<void>((resolve) => {
+				active++;
+				maxActive = Math.max(maxActive, active);
+				setTimeout(() => {
+					active--;
+					resolve();
+				}, 10);
+			});
+
+		await queue(
+			Array.from({ length: 6 }, () => task),
+			2
+		);
+
+		expect(maxActive).toBeLessThanOrEqual(2);
+	});
+
+	it("should capture rejected tasks as results", async () => {
+		const error = new Error("task failed");
+		const results = await queue([
+			() => Promise.resolve(1),
+			() => Promise.reject(error),
+			() => Promise.resolve(3)
+		]);
+
+		expect(results).toEqual([1, error, 3]);
+	});
+});

panel/src/helpers/queue.js panel/src/helpers/queue.tspanel/src/helpers/queue.js renamed to panel/src/helpers/queue.ts

@@ -2,17 +2,24 @@
  * Async function that runs a list of async functions
  * with a max number of concurrent tasks
  *
- * @param {Array} tasks list of async functions
- * @param {Number} concurrent max number of concurrent tasks
- * @returns {Promise<Array>}
+ * @example
+ * const tasks = urls.map((url) => () => fetch(url))
+ * await queue(tasks, 5) // runs at most 5 fetches concurrently
+ *
+ * @param tasks - list of async functions
+ * @param concurrent - max number of concurrent tasks
  */
-export default async function (tasks, concurrent = 20) {
+export default async function <T>(
+	tasks: (() => Promise<T>)[],
+	concurrent: number = 20
+): Promise<T[]> {
+	const results: T[] = [];
 	let active = 0;
 	let index = 0;
 
 	return new Promise((done) => {
-		const resolve = (index) => (result) => {
-			tasks[index] = result;
+		const resolve = (index: number) => (result: T) => {
+			results[index] = result;
 			active--;
 			next();
 		};
@@ -26,7 +33,7 @@ export default async function (tasks, concurrent = 20) {
 			}
 
 			if (active === 0 && index === tasks.length) {
-				done(tasks);
+				done(results);
 			}
 		};
 

panel/src/panel/upload.js

@@ -2,7 +2,7 @@ import { reactive } from "vue";
 import { uuid } from "@/helpers/string";
 import State from "./state.js";
 import listeners from "./listeners.js";
-import queue from "@/helpers/queue.js";
+import queue from "@/helpers/queue";
 import { uploadAsChunks } from "@/helpers/upload.js";
 import { extension, name, niceSize } from "@/helpers/file.js";