I wrote this because I felt that Web Components are ready to replace various React-like Component Frameworks out there. It was mostly written with gpt-o1. What was most impressive is the excellent test suite it produced.

I must have used around 50 prompts for this. The source code is here: https://github.com/webjsx/webjsx

This was the first prompt: https://chatgpt.com/share/66f0307c-e0f8-800d-873c-beb65abd7f...

Fun project and all but we already have good solutions for this written by teams of professionals with huge test cases and lots and lots of real world usage and you’re not going to prompt your way to something remotely of comparable quality as say Lit which already has the same kind of JSX functionality you’re looking for here, I’d even argue it’s better than JSX to be fair.

The statement I struggle with is "Web Components are mature now", not because of bugs per-se, but more of interoperability with the larger eco-system.

One example: if I want to use tailwindcss, then adopting web components comes at a cost/risk. While there are techniques like in this tutorial [1], you end up getting cut by the bleeding edge if you are not using Lit, you are using vite (based on comments), etc etc. (And the space moves so fast, I'd be afraid that any architectural differences between Tailwind and Web Components, might start to hurt me further in the future.)

1: https://www.youtube.com/watch?v=HwkXCYiRgtE

I am not that deep into react, but I always wondered, what exactly a vdom is and how the diffing works, the code is so easy to read and has a lot of comments which is really nice, thanks! I think I now understand react (or at least I hope so) a bit better.

See also https://github.com/wisercoder/uibuilder For a complete application see https://github.com/wisercoder/eureka/tree/master/webapp/Clie...