Export/Expose Lit "Task"

[nackler]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

14.2.0

Bug summary

As a backoffice developer I would like to be able to use Lit's "Task" class without having to install Lit in my project along side umbraco-cms/backoffice.

Specifics

If I have a backoffice component that needs to do some async work, such as calling an API, I would like to leverage the Lit "Task" functionality described in https://lit.dev/docs/data/task/

However that article suggests an import statement
import {Task} from '@lit/task';

Assuming I am only using the umbraco-cms/backoffice package, I need some other import statement such as
import {Task} from '@umbraco-cms/backoffice/lit/task'; but that isn't a valid import path. Since the backoffice uses lit should we have some access to some of its primary classes too?

Would it be possible to expose Lit's "Task" through the umbraco backoffice package somehow?

It is possible this is just my naivety concerning typescript and packages, if so, a reply on https://our.umbraco.com/forum/using-umbraco-and-getting-started/114569-v14-javascript-question-calling-async-function-from-inside-render-section-just-displays-object-promise might help.

Steps to reproduce

Install the backoffice front-end library (@umbraco-cms/backoffice) then try to write an extension using typescript that does some async work using Lit "Task"

Expected result / actual result

I would like to be able to import "Task" from somewhere, instead I cannot write a valid import statement.

[iOvergaard]

I think you should be able to install @lit/task yourself and use the Backoffice lit at the same time. The Backoffice doesn't use lit/task and doesn't have a reference to it, so you wouldn't be adding any new code per se if that's what you are worried about. Even if you were to install and bundle up Lit in your package, it wouldn't add that much of an overhead to the application as a whole (I think Lit is something like 5 kb bundled).

During the development of 14.0, we discovered that we weren't compatible with lit/task at all due to the way our controllers worked. We are not using Lit's controller system and our methods collided with theirs. We fixed that shortly before release to ensure that anyone should be able to use the newer stuff coming out of the Lit Labs.

Please let us know how you fare with this and if you hit any obstacles!

[nackler]

What if there was a 'renderAsync' method as well?

[iOvergaard]

I mean, that is exactly what lit/task solves. What I usually do without lit/task is to set up a state property with the result and then populate the result in connectedCallback. The render method will then update automatically when the state updates:

export class MyElement extends UmbLitElement {
  @state()
  private _result?: string;

  async override connectedCallback() {
    super.connectedCallback();
    const result = await fetch(URL).then(res => res.json());
    this._result = result.whateverProperty;
  }

  render() {
    return html`<div>${this._result ? this._result : html`<uui-loader-bar></uui-loader-bar>`}</div>`;
  }
}

[nackler]

Whoa... thanks so much for the code example! I am new to typescript so I haven't used state properties but it sounds like a great solution. I'll give that a shot.

[iOvergaard]

States and properties behave the same way in Lit, so can be used interchangeably. If you look through the lit.dev documentation, there are some excellent playgrounds to show off properties, and @lit/task is also there. Async data is unfortunately not well documented. They push you towards @lit/task to accomplish the task, but given the opportunity to use it, I would have done so as well.

[nackler]

Worked beautifully! Thanks again.