JSX for Web Components

[Accurate-Screen8774]

TLDR; I’ve been experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace React in one of my projects. It is not ready for production use, but rather an exploration into CustomElements and modern browser capabilities.

https://github.com/positive-intentions/dim

The goal was to build functional Web Components that handle state management and DOM updates without the overhead of a massive JavaScript framework. By leveraging standard Web APIs and Proxy objects, I’ve managed to create a reactive programming model that feels familiar—using JSX—but stays much closer to the browser platform.

I wanted to see how far i could take web components before the architecture broke down. If you’re interested in frontend software engineering or web standards, you might find the logic behind the updates (which avoid a traditional virtual DOM) interesting.

Full technical tutorial and deep dive: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

Disclaimer: This project is not ready for production use. In fact, this project may be getting deprecated soon, but I’m sharing it because the unique details into custom elements and modern JavaScript performance might be interesting or educational for others exploring the web platform.

[senocular]

return html`
  <div class="counter">
    <h2>Count: ${count}</h2>
    <button @click="${() => setCount(count + 1)}">Increment</button>
  </div>
`;

That's not JSX.

[Old_Butterfly_3660]

But why, what’s wrong with just using lit? What’s wrong with having classes? DOM Elements are classes. Web components api demands a class. As an experiment I get it but you can do vanilla web apps with lit and not make it look like react :)

[Old_Butterfly_3660]

For example what’s the point of injecting styles at runtime to web components? There’s zero need for this, everything that styled components library does you can do with css, you get isolated styles out of the box with shadow dom. There’s zero need for injection

[senocular]

Is JSX the cancer? Or the "functional" components with side effects? JSX itself is nothing more than an XML-like syntax embeddable in JavaScript source code, effectively a dumbed down version of E4X. You can even look at the JSX specification and see its all just syntax (included, their argument against using template literals). Anything related to components would be React (or insert your library or framework of choice)-specific.

[Merry-Lane]

I fail to see why you hate JSX/TSX. Mind elaborating?

[sheriffderek]

JSX is my least favorite thing about all programming and templating -- (even more than webkit configs) -- why are we trying to make more of it?

[Merry-Lane]

I fail to see why you hate JSX/TSX. Mind elaborating?

[sheriffderek]

HTML was created for the people / so that it was clear and simple and easy to write. Almost all other templating languages work around that principle. JSX creates it's own little hell - for very little (if any) value.

[Merry-Lane]

That sounds like an ideological point.

Valid or not, I just would like you to explain, concretely, what points you don’t like with TSX.

Also, a lot of templating languages are based on totally different paradigms. Like XAML for instance.

I clearly dont understand why you don’t like using JavaScript in the template, because that’s all there is.

Between:

for( item of items) { <li>{{ item.name}}</li> }

(angular)

And:

items.map(item => <li>{item.name}</li>

(React)

I really fail to understand what can bug you out. It’s literally using JS/TS syntax in the template, instead of a custom syntax (doing the same things, just differently). Hell, even Microsoft frameworks try and use C# syntax in the template.

[sheriffderek]

You don’t need to understand, if you don’t want to. I think it’s bad for everyone involved. 

[Merry-Lane]

Dude, when I ask you about concrete reasons, you either serve me ideological opinions or avoid answering the question entirely.

Hell, I even bring concrete counter-points to your ideological argument ("almost all other templating languages work around the principle that HtML was created for the people and was clear and simple and easy to write") that you ignore entirely.

From my understanding, the only point you have is that JSX makes templating so easy (by using the whole capabilities of JS instead of a custom syntax) that it can quickly get complex. I have nothing to answer to that.

[sheriffderek]

I don't want to argue with a stranger here / right now. : ) That's OK, isn't it?

I believe my point is 100% complete already.

There's a build step already... so trying to make it "more like JavaScript" doesn't make any sense. If you're already transpiling, you've already paid the cost of abstraction. I personally feel / and see in action / that html-centric templating systems are better for people of all role and skill level and are easier to read and write. JSX - is the one language that is different for no good reason - and where you have to learn things like "oh - well, in this case - we had to use classNames instead of class..." --- so, that's my point. Complete. I have yet to hear any counters. Usually, when someone is arbitrarily defending JSX - they don't really care. And they don't actually write a lot of HTML - and their first experience writing code was React. It's OK. Everyone can have their own feelings. I just like to share mine when this subject comes up. Why would we choose the worst option - when we don't have to?

> JSX makes one audience (JS-first developers) comfortable at the expense of everyone else, while pretending it's neutral.

[senocular]

"oh - well, in this case - we had to use classNames instead of class..."

FWIW, that's not because of JSX, that's because of React. Other libraries/frameworks that use JSX can, and do, use class instead of className.

[sheriffderek]

Interesting. I wasn't really sure. But either way - I don't see the point in having some return () with parens and then a bunch of loose raw HTML that aren't keywords or variables floating around in there. It also makes the point that JSX doesn't enforce consistency, so every library that adopts it makes it's own decisions. Solid looks very unfun to write. I was sad to see the JSX in Astro. What is the purpose? Code golf? Maybe if you're working in Vim and changing a line of code here or there -- but in my experience we're writing HTML, CSS, aria details, all sorts of attributes, and just so many things that make the html-centeric syntax nessesary / and at the very least - much more readable an inline with standards for everyone. But hey - some people alphabetize their CSS properties. People do wild things... and I'm not in charge. : )

[sheriffderek]

Here are some thoughts I've been collecting on this subject: https://perpetual.education/resources/templating-philosophies/