This is kind of cool to see... but to be really honest, I absolutely hate compile time PFM that isn't obvious. I've been participating on a project where the entire file based routing is like that. It's auto-generated at run/build time.
On the flip side, I've created a handful of web components for some mostly stand-alone reusable bits, and I'm thinking that in concert with some decent bundling for styling, that there might be something much simpler, and closer to standards based that could come out of all of this.
I still wish that e4x had taken off a few decades ago, even if JSX is close enough, it still really isn't in the box, and I wish that it was. Makes me want to look into some of the old on-demand based loader/parser projects from early react versions.
It's not just for JS/TS, but since there are client libraries that support JS/TS with this, I figured I'd post here since I think it could be really useful.
Slightly disappointed there's no Deno library, or that the published library doesn't support all three.
That's my concern as well.. FWIW, you can dynamically set the content in most UI frameworks for the raw SVG content, which can use CSS properties for attribute usage beyond a single color... so you could use var(--brand-color) and match against body.dark or body.light for adjusting an accent color as well.
Assuming your light/dark integration changes the html or body element as appropriate, most will/do just that. I will generally detect for localStorage falling back to native preference, then set the html element appropriately as well as integration with my UI toolkit as such. I do similar for handling various side-menu states combined with breakpoint integrations.
If you have the "real" content, then why would you need a skeleton? I get that it uses the DOM values... but you'd need to have a placeholder for say "Last, First" or "123 any street" while the real data is loading, one would assume while the real data is loaded... that's the point of skeletons, generally speaking.
Kinda cool.. but you need to have placeholder values while loading, as well as assuming you aren't using a UI toolkit that already includes a skeleton component wrapper.