Add a Lit TodoMVC app #251
Conversation
|
@rictic - lint check is failing. A good way to catch things is by running |
|
Huh, I think something is wrong with my prettier setup, as |
|
I was definitely doing something wrong. This should now be properly formatted and passing eslint |
|
@rictic - I noticed that you are defining the styles inside js, which is more idiomatic to lit, but doesn't let us manage consistency in the styles across todomvc apps. This workload also looks slightly different compared to the other ones. I added an alternate approach with css-modules here (if approved): these could be installed as a local package and that could potentially work? Just posting here for thoughts. |
I had to `rm -rf ./node_modules/ ./package-lock.json` to get it to regen
This isn't part of the other todomvcs in Speedometer
This was formatted by a different prettier config, and I forgot to reformat every file when importing into Speedometer
Instead of firing events, we add methods onto the root app element to get the relevant parts of the private shadow DOM so that the test code can interact with them directly. Added the callElementMethod method onto the Page class from WebKit#249
Currently, editing a todo (toggling it or changing its text) creates a new Todo object and splices it into the array. This is unnecessary work, if we instead make the `<todo-item>` take each field of the todo separately (common in Lit for leaf elements) then we can update it in place. This exercises more idiomatic Lit code (more template bindings) and less copying and splicing of the array of todos.
|
This build looks great and it's pretty easy to follow along and parsing the code 🚀 . The only thing that threw me off was that the Todos class also handles route changes. I'd expect the app to listen for those and notify or set the filter in the Todos class., but that's maybe subjective. Besides that, the only other difference I noticed was here the todos id is a simple int that increments, vs other implementations where we use uuid / nanoid. |
This required some changes to the querySelectorAll implementation because the DOM is set up like:
* todo-app
* todo-list
* todo-item
- .toggle
- .destroy
* todo-item
- .toggle
- .destroy
* ...
The current implementation does the "selectAll" logic only at the final lowest level.
I implemented this as a generator function so that we don't do array allocation and copying at every level.
|
Because this wasn't super clear for everybody, the lit code already uses socalled "constructable css" with its |
|
Yeah, expanding on that, the |
resources/todomvc/architecture-examples/lit/src/lib/todo-app.ts
Outdated
Show resolved
Hide resolved
Yes, this sounds good to me! I just wanted other folks to know that this uses |
resources/todomvc/architecture-examples/lit/src/lib/todo-footer.ts
Outdated
Show resolved
Hide resolved
These weren't triggering, but they may save eslint time
To match the vanilla webcomponents suite at WebKit#251
| @@ -0,0 +1,53 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
There was a problem hiding this comment.
Can we use spaces instead of tabs like all other files?
It's hand authored, so it should be formatted and linted.
This aims to fix #52