Allow task args to be readonly (#3131)

.changeset/dirty-rocks-happen.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/task': patch
+---
+
+Update Task typings to work better with inference and casting args to `as const` by making args a readonly array.

packages/labs/task/src/task.ts

@@ -7,10 +7,10 @@ import {notEqual} from '@lit/reactive-element';
 import {ReactiveControllerHost} from '@lit/reactive-element/reactive-controller.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type TaskFunction<D extends [...unknown[]], R = any> = (
+export type TaskFunction<D extends ReadonlyArray<unknown>, R = any> = (
   args: D
 ) => R | typeof initialState | Promise<R | typeof initialState>;
-export type ArgsFunction<D extends [...unknown[]]> = () => D;
+export type ArgsFunction<D extends ReadonlyArray<unknown>> = () => D;
 
 // `DepsFunction` is being maintained for BC with its previous name.
 export {ArgsFunction as DepsFunction};
@@ -40,7 +40,7 @@ export type StatusRenderer<R> = {
   error?: (error: unknown) => unknown;
 };
 
-export interface TaskConfig<T extends unknown[], R> {
+export interface TaskConfig<T extends ReadonlyArray<unknown>, R> {
   task: TaskFunction<T, R>;
   args?: ArgsFunction<T>;
   autoRun?: boolean;
@@ -98,8 +98,10 @@ export interface TaskConfig<T extends unknown[], R> {
  *   }
  * }
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export class Task<T extends [...unknown[]] = any, R = any> {
+export class Task<
+  T extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+  R = unknown
+> {
   private _previousArgs?: T;
   private _task: TaskFunction<T, R>;
   private _getArgs?: ArgsFunction<T>;

packages/labs/task/src/test/task_test.ts

@@ -66,7 +66,7 @@ suite('Task', () => {
 
       override update(changedProperties: PropertyValues): void {
         super.update(changedProperties);
-        this.taskValue = this.task.value ?? this.task.error;
+        this.taskValue = (this.task.value as string) ?? this.task.error;
         this.task.render({
           initial: () => (this.renderedStatus = 'initial'),
           pending: () => (this.renderedStatus = 'pending'),
@@ -425,4 +425,16 @@ suite('Task', () => {
     await new Promise((r) => setTimeout(r, 0));
     assert.equal(el.task.status, TaskStatus.INITIAL, 'new initial');
   });
+
+  test('task args functions can return const arrays', () => {
+    return class MyElement extends ReactiveElement {
+      task = new Task(
+        this,
+        ([a, b]) => [a * 2, b.split('')],
+        // Make sure that we can use `as const` to force inferece of the args
+        // as [number, string] instead of (number | string)[]
+        () => [1, 'b'] as const
+      );
+    };
+  });
 });