refactor(lit): update lit examples with current patterns

[lloydrichards]

Goals/Scope

I was using ComponentParty to help learn lit a couple months back and found it super helpful to compare the lifecycle methods of React vs Lit. Now with some more experiance I've notced that the lit examples are a little out of date with the current state of Lit/Lab.

In this PR i want to double check all the examples and add more modern patterns if possible, the current obvious one is the use .map() instead of the repeat directive.

Description

I noticed two patterns that I was able to upgrade:

repeat

While mapping over the array does work to render multiple items, lit provides the repeat directive which allows a key function to be passed helping make rerenders more performant.

Since React and other frameworks do this with the key prop directly in the returnd tag, I think its best to use the same permormance patterns.

task

Lit also provides a better way to manage async tasks with the task package. Defining a task can be return all the pattern matching on state without having to track it in the component. Makes for a much cleaner implementation.

Comments

Let me know if you want anything changed or updated 👍

[lloydrichards]

👋 @matschik

Just want to poke and see if there is anything you're missing from my side for this 😄

[matschik]

task is very interesting !

About repeat suggestion, from Lit documentation (https://lit.dev/docs/templates/directives/#repeat):

If you're not using a key function, you should consider using map().

As you said, since we are using key in iteration on other examples, let's do it !

Ok good for me ! Thank you very much for your contribution and patience 🙏