1marc / modern-todomvc-vanillajs Goto Github PK

One issue with vanilla JS is that your selectors get tightly coupled to the generated DOM.

The more I think about this, something like:

<div data-jsmodule="behavior"></div>

document.querySelector('[data-jsmodule="behavior"]')

Would work better for selectors since now you can move the data attributes around to hook the JS into it not worry as much about the actual markup.

Recap of where I’m at with the TypeScript branch: https://github.com/1Marc/todomvc-vanillajs-2022/tree/typescript/js

Spent a few minutes getting the compiler happy (though some of this is quite hacky) but here's what's next:

• App is currently erroring in the browser on new/super with subclassing the browser’s EventTarget
• Having both returning DOM nodes on $ (like $.list) and having DOM modification methods (like $.setActive) is overloading which means you need a union type Function | HTMLElement then cast as you call the methods so there’s got to be a way to prefix DOM method keys, or we can simply give them their own namespace
• A class-based approach might be better for typescript? otherwise you have to describe the object/App type before implementing it (unless there's a better way to do this) but scrolling up to the top anytime you want to add a method seems tedious

This was a naive "satisfy the compiler" stab just get it working. Trying to build a base that works to start making a nicer solution.

It looks like there is no difference.
But it's still nice to read the simple .slice(1)

Here https://github.com/1Marc/todomvc-vanillajs-2022/blob/5509f8645ed98ada2b7ca7d31f299dde231cc5c4/js/helpers.js#L5

This is a fun project! Thanks for creating and sharing it.

I may be overlooking it, but I don't see a link I can click to test this (without downloading the repo). I'm on my phone, and it would be nice to have a link to a live version of this.

Consider enabling GitHub Pages for this repo and linking to that URL in the project description and/or readme.

Why did you decide not to use web components? Use of shadow DOM might not be needed (although it couldn't hurt either), but custom elements might be a nice addition.

Current behavior:
When you toggle an item, since it's re-rendered, the focus is be lost.

Expected behavior:
Focus remains on the checkbox or label when toggling.

Additional context:
I think this is a common problem with naive declarative UI implementations. React, at least, doesn't seem have this problem with its sophisticated virtual DOM.

Btw, if you're interested, I took a stab at recreating TodoMVC in vanilla JavaScript with Web Components, with a somewhat unorthodox approach: https://github.com/johnfactotum/todomvc