rewrite subtitle rendering engine

client/tools.ts

@@ -41,6 +41,33 @@ export function wait_for_dom_refresh(): Promise<void> {
 	});
 }
 
+/**
+ * Provides a locking abstraction around any ref-passed object to provide inner mutability that can
+ * automatically release on promise resolution. This provides "atomic transactions" on the inner
+ * type.
+ *
+ * This allows you to not await the transaction result, but offload the waiting to the next call
+ * to run. So other tasks can normally run when the transaction is executing. And if the inner
+ * type is needed again... the run call will wait for the (possibly) running transaction to
+ * finish first.
+ */
+export class AsyncRunner<T> {
+	private inner: T;
+	private lock: Promise<void>;
+
+	public constructor(inner: T) {
+		this.inner = inner;
+		this.lock = Promise.resolve();
+	}
+
+	public async run(transaction: (target: T) => Promise<void>): Promise<void> {
+		await this.lock;
+		this.lock = new Promise((resolver) => {
+			transaction(this.inner).then(() => { resolver() });
+		});
+	}
+}
+
 export namespace el {
 	function add_classes(target: HTMLElement, classes?: string[]): void {
 		if (classes === undefined) { return; }