From 368f508b6c4d5e55a24590c55b0ef27da3c2231d Mon Sep 17 00:00:00 2001
From: Marine Dunstetter <bluecut.official@gmail.com>
Date: Fri, 23 Feb 2024 13:10:52 +0100
Subject: [PATCH 1/2] implement the accelerating increment / decrement buttons

---
 src/lib/task.ts                             |  2 +-
 src/routes/+page.svelte                     |  1 +
 src/routes/accelerating-button/+page.svelte | 41 +++++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/accelerating-button/+page.svelte

diff --git a/src/lib/task.ts b/src/lib/task.ts
index 98ac53b5..34b49c03 100644
--- a/src/lib/task.ts
+++ b/src/lib/task.ts
@@ -52,7 +52,7 @@ export function task<TArgs = undefined, TReturn = unknown>(
 		cancel() {
 			abort_controller.abort();
 		},
-		perform(...args: undefined extends TArgs ? [] : [TArgs]) {
+		perform(...args: unknown[]) {
 			abort_controller.signal.removeEventListener('abort', cancel_linked_and_update_store);
 			abort_controller = new AbortController();
 			abort_controller.signal.addEventListener('abort', cancel_linked_and_update_store);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 81c12707..b4e3f55e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import Child from './Child.svelte';
 
 	const parent = task(async function* (param: number) {
+		debugger
 		await new Promise((r) => setTimeout(r, 2000));
 		yield;
 		alert('Parent finished');
diff --git a/src/routes/accelerating-button/+page.svelte b/src/routes/accelerating-button/+page.svelte
new file mode 100644
index 00000000..36d5f87f
--- /dev/null
+++ b/src/routes/accelerating-button/+page.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { task } from '$lib/task.js';
+
+  let count: number = 0;
+
+  const incrementBy = task(async function* ([increment]: [increment: number]) {
+    let speed = 400;
+    while (true) {
+      count = count + increment;
+      await new Promise((r) => setTimeout(r, speed));
+		  yield;
+      speed = Math.max(50, speed * 0.8);
+    }
+  });
+
+</script>
+
+<p>Hold down the buttons to accelerate:</p>
+<p>Count: {count}</p>
+<button
+	on:mousedown={async () => {
+		await incrementBy.perform(-1);
+	}}
+  on:mouseup={async () => {
+		await incrementBy.cancel();
+	}}
+>-- Decrease</button>
+<button
+	on:mousedown={async () => {
+		await incrementBy.perform(1);
+	}}
+  on:mouseup={async () => {
+		await incrementBy.cancel();
+	}}
+>Increase ++</button>
+
+<p>This example is inspired by 
+  <a target="_blank" rel="noopener noreferrer" href="http://ember-concurrency.com/docs/examples/increment-buttons">
+    ember-concurrency example "Accelerating Increment / Decrement Buttons"
+  </a>
+</p>

From c2399c1ed5867851e1055801b7ea88683f61b57b Mon Sep 17 00:00:00 2001
From: Marine Dunstetter <bluecut.official@gmail.com>
Date: Fri, 23 Feb 2024 16:25:17 +0100
Subject: [PATCH 2/2] implement race

---
 src/lib/task.ts              |  4 +--
 src/routes/+page.svelte      |  1 -
 src/routes/race/+page.svelte | 69 ++++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/race/+page.svelte

diff --git a/src/lib/task.ts b/src/lib/task.ts
index 34b49c03..81e99da1 100644
--- a/src/lib/task.ts
+++ b/src/lib/task.ts
@@ -2,7 +2,7 @@ import { onDestroy } from 'svelte';
 import { writable } from 'svelte/store';
 
 type SvelteConcurrencyUtils = {
-	signal: AbortSignal;
+	abortController: AbortController;
 	link: <T extends { cancel: () => void }>(task: T) => T;
 };
 
@@ -65,7 +65,7 @@ export function task<TArgs = undefined, TReturn = unknown>(
 				try {
 					// eslint-disable-next-line @typescript-eslint/no-explicit-any
 					const gen_or_value = await gen_or_fun(args as any, {
-						signal: abort_controller.signal,
+						abortController: abort_controller,
 						link,
 					});
 					const is_generator =
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b4e3f55e..81c12707 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,6 @@
 	import Child from './Child.svelte';
 
 	const parent = task(async function* (param: number) {
-		debugger
 		await new Promise((r) => setTimeout(r, 2000));
 		yield;
 		alert('Parent finished');
diff --git a/src/routes/race/+page.svelte b/src/routes/race/+page.svelte
new file mode 100644
index 00000000..7a157a44
--- /dev/null
+++ b/src/routes/race/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { task, type Task } from '$lib/task.js';
+
+  type Challenger = {
+    name: string;
+    progress: number;
+  };
+
+  let challengers: Challenger[] = [];
+  for (let i = 1; i <= 3; i++) {
+    challengers.push({
+      name: `Challenger ${i}`,
+      progress: 0,
+    })
+  }
+
+  let winner: Challenger|undefined;
+
+  const runTheRace = task(async function* (_, { abortController, link }) {
+    console.log('Run the race')
+    let challengerRaces = challengers.map(challenger => {
+      return link(race).perform(challenger);
+    })
+    let first = await Promise.race(challengerRaces);
+    console.log(`First arrived is ${first.name}`);
+    abortController.abort();
+    return first;
+  });
+
+  const race = task(async function* ([challenger]: [challenger: Challenger]) {
+    console.log(`${challenger.name} runs`);
+    while (challenger.progress < 100) {
+      await new Promise((r) => setTimeout(r, Math.random() * 100 + 100));
+		  yield;
+      challenger.progress = Math.min(
+        100,
+        Math.floor(challenger.progress + Math.random() * 20),
+      );
+      console.log(`${challenger.name} progress: ${challenger.progress}`);
+    }
+    return challenger;
+  });
+
+</script>
+
+<button
+	on:click={async () => {
+    winner = await runTheRace.perform();
+	}}
+>Start race</button>
+
+<button
+	on:click={() => {
+    challengers[0].progress = 50;
+    challengers[1].progress = 20;
+    challengers[2].progress = 70;
+	}}
+>Test</button>
+
+{#each challengers as challenger}
+  <div>
+    <span>{challenger.name}</span>
+    <progress max="100" value={challenger.progress} />
+  </div>
+{/each}
+
+{#if winner}
+	<p>The winner is {winner.name}</p>
+{/if}
\ No newline at end of file