@critical-path/svelte 0.17.11 → 0.18.0

package/src/task-metrics-state.svelte.ts

@@ -1,5 +1,6 @@
 /// <reference types="svelte" />
 import type { CriticalPathClient } from '@critical-path/client';
+import { LatestRequest } from './latest-request.js';
 import type {
   TaskMetrics,
   TaskProgressHistory,
@@ -11,6 +12,9 @@ import type {
 } from '@critical-path/core';
 
 export class TaskMetricsState {
+  #fetchMetricsRequest = new LatestRequest();
+  #fetchAllRequest = new LatestRequest();
+  #fetchHistoryRequest = new LatestRequest();
   metrics = $state<TaskMetrics | null>(null);
   history = $state<TaskProgressHistory | null>(null);
   loading = $state<boolean>(false);
@@ -28,51 +32,67 @@ export class TaskMetricsState {
   ) {}
 
   async fetchMetrics(): Promise<TaskMetrics | null> {
+    const { api, signal } = this.#fetchMetricsRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.metrics = await this.client.getTaskMetrics(this.taskId);
+      this.metrics = await api.getTaskMetrics(this.taskId);
+      if (signal.aborted) return null;
       return this.metrics;
     } catch (err) {
+      if (signal.aborted) return null;
       this.error = err instanceof Error ? err : new Error(String(err));
       return null;
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
 
   async fetchHistory(): Promise<TaskProgressHistory | null> {
+    const { api, signal } = this.#fetchHistoryRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.history = await this.client.getTaskProgressHistory(this.taskId);
+      this.history = await api.getTaskProgressHistory(this.taskId);
+      if (signal.aborted) return null;
       return this.history;
     } catch (err) {
+      if (signal.aborted) return null;
       this.error = err instanceof Error ? err : new Error(String(err));
       return null;
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
 
   async fetchAll(): Promise<{ metrics: TaskMetrics | null; history: TaskProgressHistory | null }> {
+    const { api, signal } = this.#fetchAllRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
       const [m, h] = await Promise.all([
-        this.client.getTaskMetrics(this.taskId),
-        this.client.getTaskProgressHistory(this.taskId)
+        api.getTaskMetrics(this.taskId),
+        api.getTaskProgressHistory(this.taskId)
       ]);
+      if (signal.aborted) return { metrics: null, history: null };
       this.metrics = m;
       this.history = h;
       return { metrics: m, history: h };
     } catch (err) {
+      if (signal.aborted) return { metrics: null, history: null };
       this.error = err instanceof Error ? err : new Error(String(err));
       return { metrics: null, history: null };
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchMetricsRequest.cancel();
+    this.#fetchAllRequest.cancel();
+    this.#fetchHistoryRequest.cancel();
+  }
 }
 
 export function createTaskMetricsState(

package/src/task-state.svelte.ts

@@ -2,8 +2,10 @@
 import type { CreateTaskBody, UpdateTaskBody } from '@critical-path/core/schemas';
 import type { CriticalPathClient } from '@critical-path/client';
 import { type Task, type TaskStatus, isTempTaskId } from '@critical-path/core';
+import { LatestRequest } from './latest-request.js';
 
 export class TaskState {
+  #fetchRequest = new LatestRequest();
   data = $state<Task[]>([]);
   loading = $state<boolean>(false);
   error = $state<Error | null>(null);
@@ -17,14 +19,17 @@ export class TaskState {
   ) {}
 
   async fetch() {
+    const { api, signal } = this.#fetchRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.data = await this.client.getTasks(this.projectId);
+      this.data = await api.getTasks(this.projectId);
+      if (signal.aborted) return;
     } catch (err) {
+      if (signal.aborted) return;
       this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
 
@@ -185,6 +190,11 @@ export class TaskState {
       throw errorObj;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchRequest.cancel();
+  }
 }
 
 export function createTaskState(

package/src/task-transitions-state.svelte.ts

@@ -1,7 +1,9 @@
 /// <reference types="svelte" />
 import type { CriticalPathClient } from '@critical-path/client';
+import { LatestRequest } from './latest-request.js';
 
 export class TaskTransitionsState {
+  #fetchRequest = new LatestRequest();
   allowedTransitions = $state<string[]>([]);
   loading = $state<boolean>(false);
   error = $state<Error | null>(null);
@@ -9,6 +11,7 @@ export class TaskTransitionsState {
   constructor(private client: CriticalPathClient, public taskId?: string) {}
 
   async fetch(taskId?: string) {
+    const { api, signal } = this.#fetchRequest.begin(this.client);
     const targetTaskId = taskId || this.taskId;
     if (!targetTaskId) {
       this.allowedTransitions = [];
@@ -19,13 +22,20 @@ export class TaskTransitionsState {
     this.loading = true;
     this.error = null;
     try {
-      this.allowedTransitions = await this.client.getAllowedTaskTransitions(targetTaskId);
+      this.allowedTransitions = await api.getAllowedTaskTransitions(targetTaskId);
+      if (signal.aborted) return;
     } catch (err) {
+      if (signal.aborted) return;
       this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchRequest.cancel();
+  }
 }
 
 export function createTaskTransitionsState(

package/src/timeline-ladder-state.svelte.ts

@@ -1,5 +1,6 @@
 /// <reference types="svelte" />
 import type { CriticalPathClient } from '@critical-path/client';
+import { LatestRequest } from './latest-request.js';
 import type {
   TimelineLadder,
   TimelineLadderOptions,
@@ -9,6 +10,7 @@ import type {
 } from '@critical-path/core';
 
 export class TimelineLadderState {
+  #fetchRequest = new LatestRequest();
   data = $state<TimelineLadder | null>(null);
   level = $state<AbstractionLevel>('all');
   loading = $state<boolean>(false);
@@ -34,19 +36,27 @@ export class TimelineLadderState {
   }
 
   async fetch(options?: TimelineLadderOptions) {
+    const { api, signal } = this.#fetchRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.data = await this.client.getTimelineLadder(this.projectId, {
+      this.data = await api.getTimelineLadder(this.projectId, {
         level: this.level,
         ...options
       });
+      if (signal.aborted) return;
     } catch (err) {
+      if (signal.aborted) return;
       this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchRequest.cancel();
+  }
 }
 
 export function createTimelineLadderState(

package/src/workflow-state.svelte.ts

@@ -1,8 +1,10 @@
 /// <reference types="svelte" />
 import type { CriticalPathClient } from '@critical-path/client';
 import type { Workflow } from '@critical-path/core';
+import { LatestRequest } from './latest-request.js';
 
 export class WorkflowState {
+  #fetchRequest = new LatestRequest();
   data = $state<Workflow[]>([]);
   loading = $state<boolean>(false);
   error = $state<Error | null>(null);
@@ -10,14 +12,17 @@ export class WorkflowState {
   constructor(private client: CriticalPathClient) {}
 
   async fetch() {
+    const { api, signal } = this.#fetchRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.data = await this.client.getWorkflows();
+      this.data = await api.getWorkflows();
+      if (signal.aborted) return;
     } catch (err) {
+      if (signal.aborted) return;
       this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
 
@@ -55,6 +60,11 @@ export class WorkflowState {
       throw errorObj;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchRequest.cancel();
+  }
 }
 
 export function createWorkflowState(client: CriticalPathClient): WorkflowState {

package/src/workload-state.svelte.ts

@@ -1,5 +1,6 @@
 /// <reference types="svelte" />
 import type { CriticalPathClient } from '@critical-path/client';
+import { LatestRequest } from './latest-request.js';
 import type {
   WorkloadDistribution,
   WorkloadDistributionOptions,
@@ -10,6 +11,7 @@ import type {
 } from '@critical-path/core';
 
 export class WorkloadState {
+  #fetchRequest = new LatestRequest();
   data = $state<WorkloadDistribution | null>(null);
   interval = $state<WorkloadInterval>('week');
   groupBy = $state<WorkloadGroupBy>('assignee');
@@ -56,22 +58,30 @@ export class WorkloadState {
   }
 
   async fetch(options?: WorkloadDistributionOptions) {
+    const { api, signal } = this.#fetchRequest.begin(this.client);
     this.loading = true;
     this.error = null;
     try {
-      this.data = await this.client.getWorkloadDistribution(this.projectId, {
+      this.data = await api.getWorkloadDistribution(this.projectId, {
         ...this.initialOptions,
         interval: this.interval,
         groupBy: this.groupBy,
         metric: this.metric,
         ...options
       });
+      if (signal.aborted) return;
     } catch (err) {
+      if (signal.aborted) return;
       this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
-      this.loading = false;
+      if (!signal.aborted) this.loading = false;
     }
   }
+
+  /** Cancels in-flight requests, e.g. from a component's onDestroy. */
+  destroy() {
+    this.#fetchRequest.cancel();
+  }
 }
 
 export function createWorkloadState(