rxliuli

Svelte5: A Less Favorable Vue3

Background

Svelte5 was released in October last year, touted as the best version of Svelte to date. The team was particularly proud of "runes," a reactive state system built on proxies. However, after experiencing Vue3's Composition API and SolidJS signals, I didn't feel particularly excited. This blog outlines specific issues encountered when using Svelte5 in real projects. If you're a Svelte5 enthusiast, you might want to stop reading now.

Runes Only Work in Svelte Components or .svelte.ts Files

When trying to write hooks with runes similar to React/Vue, like useCounter:

atomiks

// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.
// Replace <Tippy /> with <LazyTippy /> component and it should work the same.

const LazyTippy = forwardRef((props, ref) => {
  const [mounted, setMounted] = useState(false);

  const lazyPlugin = {
    fn: () => ({
      onMount: () => setMounted(true),
      onHidden: () => setMounted(false),

markerikson

[8:27 PM] cquill: @acemarke Right, so many portions of the UI will be connected. But does each connected portion typically get its own container component? Seems verbose and redundant to have the following for each CRUD resource: UserList, UserListContainer, UserView, UserViewContainer, UserEdit, UserEditContainer, UserNew, UserNewContainer. Is there a simpler way?
[9:56 PM] acemarke: @cquill : this leads into one of my favorite (?) semi-rants, and one that I apparently need to write down so I can paste it
[9:57 PM] acemarke: A "container" component is simply any component whose primary job is to fetch data from somewhere, and pass that data on to its children
[9:58 PM] acemarke: With Redux, the wrapper components generated by connect are "container" components, since their job is to extract data from the Redux store
[9:58 PM] acemarke: I generally dislike the somewhat-common approach of trying to divide everything into a "components" folder and a "containers" folder
[9:59 P