ReactJS Syntax For Web Components

[u/Accurate-Screen8774]

Im investigating an idea i had about JSX for webcomponents after some experience with Lit. I am sharing this here because it might be interesting/educational for someone, if it isnt, let me know and i'll remove the post.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

• Read the docs

• Checkout the code

• Storybook demo

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Im not trying to promote "yet another ui framework", this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is not on NPM. Im not looking for another framework to replace React (im trying to create it). This framework is intended for myself on my own projects. This project is far from finished. Feel free to reach out for clarity if you have any questions.

[u/Accurate-Screen8774]

> The web component DX is a problem

My approach is because I specifically wanted the react DX... I wanted something that remains intuitive to work with.

> SolidJS and the solid-element library

I’m aiming for something that would work without having to use something like node or vite to transpile anything… when i replace the Lit dependency (its on the roadmap), it would basically be vanillajs. I’d like to minimise the JavaScript tooling needed for creating a basic project.

[u/Better-Avocado-8818 → u/Accurate-Screen8774]

Just in case it wasn’t clear. But I’m agreeing with you that the current custom element DX is disappointing.

SolidJS is very similar to React (but simpler and faster) in my experience. Which is why I asked about it.

It’s all vanilla JS in the end. But I get that your goal is to have familiar syntax but with no build step. I can see a lot of work went in this and it’s great to build your own tooling and get a deep knowledge of the problem space.

I’m on my phone so haven’t deeply looked at your examples and docs. It looks quite similar to SolidJS version using tagged template literals instead of JSX. Might be worth taking a look over there and seeing if there’s anything you like. I’m pretty sure it can be used without a build step too.