JavaScript

2733 readers

3 users here now

founded 3 years ago

MODERATORS

erlingur@programming.dev

Ategon@programming.dev

nick@programming.dev

ReactJS Syntax For Web Components (programming.dev)

submitted 5 days ago* (last edited 5 days ago) by xoron@programming.dev to c/javascript@programming.dev

2 comments fedilink hide all child comments

Im investigating an idea i had about JSX for webcomponents after some experience with Lit.

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.

(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 push "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 intended for myself on my own projects. This project is far from finished. I am sharing because it might be interesting for someone. Feel free to reach out for clarity if you have any questions.

top 2 comments

sorted by: hot top controversial new old

[–] nykula@piefed.social 1 points 5 days ago (1 children)

How to install the library? A search for @dim/core on npm returns no match.

Readme says Zero Dependencies, but also says: Built on top of Lit. Does this mean you maintain a fork of Lit? What are your changes compared to upstream, and is it difficult to keep up with its patches?

Are there existing real-world apps dogfooding Dim, in addition to the demos?

Do your projects that currently use React have SSR, and if yes, how are you going to reimplement it when you switch them to Dim?

[–] xoron@programming.dev 1 points 5 days ago

How to install the library?

it isnt published to npm or anything else. there are a lot of details in the project that i dont think are refined enough to publish.

Readme says Zero Dependencies, but also says: Built on top of Lit.

some context on the approach: i originally wanted to create this as vanilla webcomponents. it turned out to be more difficult than i expected... in particular handling the rendering. so i used the render function from lit-html. instead of importing the render function from lit-html (a common practice), i decided to "pluck out" the render function and add it into my repo( because i only needed the render function)... and that way i can avoid lit as a dependency in the typical sense (in package.json). the render function is straight-up copied from lit and so its important to mention in the readme that its used (credit where due). i did it that way because my intention is still to work towards creating my own render function... its only going to take longer than i anticipated.

there is no "keep up with patches", this is far from finished and not stable enough for me to confidently advise anyone else to use. its open source, but not something i advise people actively use.

existing real-world apps

im integrating details like encryption-at-rest and bottom-up state-management into other projects like https://enkrypted.chat/ ... that project can be a whole separate conversation. its largely React. that is the project i would like to use dim to replace react. the project there is pretty complicated and i wont be able to replace react there any time soon.

SSR

my apps dont use SSR. there is emphesis in my project for them to use client-side functionality. i have thought about SSR, but its way at the bottom of my todo list.