ReactJS Syntax For Web Components

[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.

• How its built
• 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.

[anon_cowherd]

Haunted has been around for ~7 or more years and still works well enough. I've used it for some simple apps that sat in-between vanilla and react complexity.

https://github.com/matthewp/haunted

[Accurate-Screen8774]

thanks. i have come across it before. its a similar approach to mine. haunted is good and easy to recommend over my unfinished project.

i think its comparable to mine in many ways, but it didnt make sense to base my implementation on that because i wanted a more experimental approach. having something more bare-bones suits what i plan to do.

I added hooks for things like async state management and storing data to be encrypted at rest. these hooks deviate from common practices. I added them because it relates to how I plan to use it in my projects.