Karsten Schmidt#ReleaseFriday Triggered by a recent feature proposal[1], I went ahead and polished & published a closely related, already work-in-progress (but still private) feature in https://thi.ng/rdom to support something I call "bare lists"[2]. I've started working on this for another project last year, but needed to do more testing (which I think have sufficiently done by now).
These "bare" lists are managed reactive control components which attach items directly to the list's parent DOM element instead of first creating a wrapper/container element for the items and so avoid introducing additional nesting.
There're many use cases where this additional nesting was a real problem with the earlier approach, e.g. in containers with CSS grid or flex layout, tables, or generally situations where we want to have static & reactive list items as true siblings...
The new version of thi.ng/rdom is technically a breaking change (sorry!), but the actual changes required (for you) are tiny and purely limited to the $list() and $klist() component function calls, which are now accepting a parameter object instead of positional args for the different possible behaviors. Of course, lists with item wrapper elements can still be created too, just as before (but via new args).
I've updated & tested all existing examples impacted by this change and also created a new fully commented example project (example #187) to illustrate these "bare" lists in situ (check the DOM inspector to see the shallow structure and how updates are applied):
Demo:
https://demo.thi.ng/umbrella/rdom-bare-lists/
Source code:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-bare-lists/src/index.ts
[1] github.com/thi-ng/umbrella/discussions/562
[2] My use of "list" here is generic, not limited to <ul> or <ol>...
#ThingUmbrella #Reactive #UI #OpenSource #TypeScript #JavaScript #WebDev
Steam & Epic Games | Daily
Michael Simons
Stefan F. Wirth
Habr
Markus Eisele
