[task] Passing the parameters inside the task render callback

[botezatumihaicatalin]

Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Task (@lit/task)

Description

Which package(s) are affected?
Task (@lit/task)

Description
It would be super useful to get the parameters inside the task render callback, for example to adjust the render output using these params.
For example:

import {Task, TaskStatus} from '@lit/task';
// ...

class MyElement extends LitElement {
  @state()
  private _userId: number = -1;

  private _apiTask = new Task(
    this,
    ([userId]) =>
      fetch(`//example.com/api/userInfo?${userId}`).then((response) =>
        response.json()
      ),
    () => [this._userId]
  );

  render() {
    return html`
      <div>User Info</div>
      ${this._apiTask.render({
        pending: ([userId]) => html`Loading user info by id:${userId}...`,
        error: ([userId]) => html`Loading user by id:${userId} failed :(`,
        complete: (user) => html`${user.name}`,
      })}
      <!-- ... -->
    `;
  }
} 

Is this a regression?
No.

Affected versions
all

Browser/OS/Node environment
all

Alternatives and Workarounds

It's possible to achieve the same result by setting taskParams manualy in the LitElement instance. But I would like to avoid unecessary code
For example:

import { Task, TaskStatus } from "@lit/task";
// ...

class MyElement extends LitElement {
    private _apiParams: [string] = [""];

    private _apiTask = new Task(this, {
       task: async ([userId]) => {
            this._apiParams = [userId];

            const response = await fetch(`//example.com/api/userInfo?${userId}`);
            const json = await response.json();
            return json;
        },
        autoRun: false,
    });

    /* I can now call this._apiTask.run() with different params */

    render() {
        return html`
            <div>User Info</div>
            ${this._apiTask.render({
                pending: ([userId]) => html`Loading user info by id:${this._apiParams[0]}...`,
                error: ([userId]) => html`Loading user by id:${this._apiParams[0]} failed :(`,
                complete: (user) => html`${user.name}`,
            })}
            <!-- ... -->
        `;
    }
}

[justinfagnani]

This seems like a good suggestion to me!

[justinfagnani]

PRs very welcome for this. Just make sure that the error callback is backwards compatible and that the complete call is forwards compatible with new complete-specific arguments by passing the task args as an array there too.