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...
The stack blitz demos did not work on Safari iOS…. got a blank screen.
I'll take a look. Thanks for reporting.
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.
1. Lit encourages the use of features which aren't a part of the spec. eg: @customElement('simple-greeting'). TC39 has been discussing decorators for years. It's not available yet on any browser. https://caniuse.com/decorators
2. I was not able to find a way to use JSX with lit. Template strings have so many downsides. vscode support is kludgy, because it's a template string.
The idea behind webjsx is that you may not need much in the framework. webjsx is less than 200 lines of code.
So much YES, somethin akin to JSX is the missing piece in web components. Lit-html, although impressive in itself feature wise, is painful to use and does not feel ergonomic.
You know that’s just some syntactic sugar for Typescript right? You can just use JavaScript without any of that but it’s certainly not something I would say is “non-standard”. I can’t actually think of a more standards aligned front end library than Lit.
Also I have to say none of what you mentioned about JS template literals even remotely matches my experience nor have I ever heard of anyone mention this before I’d love to know more of what you’re referring to here though.
How a feature that’s literally built into the JavaScript spec is somehow buggier than JSX is actually kind of confusing to me to be totally honest with you.
> You know that’s just some syntactic sugar for Typescript right
But it's also something JS is standardizing. Previously TypeScript had stuff that broke when JS decided to standardize differently. In fact, it's happened in decorators as well when the spec changed - old TypeScript code which used this syntax will stop working at some point if it hasn't already.
> How a feature that’s literally built into the JavaScript spec is somehow buggier than JSX is actually kind of confusing to me
The problem is that strings have no type information, unless we parse it into some AST and connect it with the rest of the program. You could do that during dev with extra tooling, but because JSX parsing is built into TypeScript (and hence VSCode) it just works out of the box.
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.
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.)
I agree is Tailwind is easiest to use with global styles, and make the components use Light DOM in that case. I'd use Shadow DOM only when I need components to be fully isolated (includng styling and node visibility).
See also https://github.com/wisercoder/uibuilder For a complete application see https://github.com/wisercoder/eureka/tree/master/webapp/Clie...
Interesting project. Gonna take a look. Thanks.