I know it sounds stupid, but my biggest turnoff switching between Svelte and React is `className`. I type it 100 times a day and it hurts a little every time
Comments
Log in with your Bluesky account to leave a comment
weirdly enough the biggest thing that pushed me from react to svelte was… astro. once i tried HTML-based single-file components i never wanted to go back.
Yeah, the HTML-first dev experience is nice. In Custom Elements land (i.e. Web Components land) we've chatted about "Declarative Custom Elements" and the prototypes we've made so far are HTML-first ("HTML modules"), that include reactivity and templating, JavaScript optional.
Search terms include "html modules", "declarative custom elements", and "element modules" (possibly more, including "signals"). Search for those in these repos:
I guess this is in line with React's "it's just JS" philosophy?
After all, the core of React for declaratively building reactive trees of anything is separate, and React HTML is one implementation of that (with others like RN, animation/3D libs, etc...)
Yeah, but this is the tiniest part of why both frameworks are worth a try!
There's a lot of other things about Svelte that'll make you wanna stay, and I assume the same applies to Vue.js (haven't used Vue myself, but it looks pretty cool too, particularly with Nuxt)
Oh absolutely, I've seen bits and pieces about svelte that make me want to try it, runes and lots of much lighter cleaner components in svelte than in react, which is my style for suuure
Just to, you know, be clear and not propagate unnecessary "React bad" stuff: HTML attribute name is `class`, but the JS DOM name is `className`. It's a property on the `Element` object. React's "choice" is to use the JS DOM name over HTML attribute name: https://developer.mozilla.org/en-US/docs/Web/API/Element/className
We, end users of the DOM, ultimately need our framework to let us choose, so that we're never blocked by the framework. For example in Lit we have `class=` and `.className=` to allow us to choose which one we set. Solid.js similarly has `attr:class=` and `prop:className=`. Not available in React.
Meh, that argument has never moved me. JSX is an awkward blend of HTML and JS already. Choose the API devs naturally expect (and the one that’s easier to type)
autoPlay, playsInline, autoFocus, formEncType, allowFullScreen, srcDoc, autoComplete, and enterKeyHint all do not exist in the DOM -- autoplay is the property, playsinline, etc.
Along the same vein, onChange is aliased to onInput, you can't get the real change event in React, only input.
IIRC there was some talk of this in the context of React compiler, but I imagine a lot of parsers and tooling would break, and the `class` keyword conflict is a tricky one. Maybe one day 🤷
Yeah, tooling would need to support `class` but the compiler can support both paths, ignoring `className` like it ignores memo and callback optimizations.
Right, because they want to keep the API same as vanilla JS but now with the compiler in between react and app code, maybe compiler can switch class with className
Comments
(also do you have a link 👀)
There's a list of demos/proposals here (from @eisenbergeffect.com, @jaredwhite.com, @justinfagnani.com, myself, and others):
https://github.com/w3c/webcomponents-cg/issues/80
- https://github.com/w3c/webcomponents-cg
- https://github.com/WICG/webcomponents
As well as the Web Components CG Discord server:
https://discord.gg/PZH8ucFHp2
You can see from my specific demo that it is a small amount of JavaScript to make it possible:
https://github.com/trusktr/element-modules/blob/main/very-rough-ponyfill.js
It isn't reactive though (would need to import Solid.js as a placeholder for TC39 Signals).
https://dev.to/swyx/how-to-use-class-instead-of-classname-with-preact-and-typescript-2bjh
this clear separation removes the JS restriction on the 'class' keyword from the html templates, since there's no ambiguity
I guess this is in line with React's "it's just JS" philosophy?
After all, the core of React for declaratively building reactive trees of anything is separate, and React HTML is one implementation of that (with others like RN, animation/3D libs, etc...)
There's a lot of other things about Svelte that'll make you wanna stay, and I assume the same applies to Vue.js (haven't used Vue myself, but it looks pretty cool too, particularly with Nuxt)
It's a choice
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
Along the same vein, onChange is aliased to onInput, you can't get the real change event in React, only input.
https://bsky.app/profile/arpitdalal.dev/post/3ldestymilc2r