Templ + Svelte?

[pidanou]

Hi,
I am a devops and I wanted to learn more about web dev so I picked up Go + Templ to learn.
Before that I tried React and Svelte and I hated React and loved Svelte.

Now I wanted to know if there is a way to use Svelte instead of React to build islands of interactivity.

AFAIK, Svelte simply compiles to js so I believe it should be doable.

Is there a good way to do it? Is it a good idea to do it?

Thank you for your inputs!

[t-lock]

@pidanou I just stumbled across this and noticed no one replied.

The answer is YES. It is a great idea, and very easy to accomplish. In my opinion Svelte is even easier to use for islands of interactivity, and the dx and productivity over React is significant.

run npm create vite@latest and choose svelte (and probably use typescript and set strict mode on in tsconfig -- thank me later for that one).

check out main.ts, it'll look something like:

// main.ts

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')!,
})

You can easily mount whichever components to whichever DOM elements you like there, you do not have to do just a single "App" parent. You can have unrelated sibling component trees mounted, and they can each individually consume global reactive stores, etc, with no issue whatsoever. Everything just works, and there is no runtime overhead like you'd get in React with virtual dom:

import One from "./One.svelte";
import Two from "./Two.svelte";

new One({
  target: document.getElementById("one")
});
new Two({
  target: document.getElementById("two")
});
//... and so on

If you're especially clever, you can use dynamic imports, so vite will code-split your application and you can mount only the components you find in the DOM on that page, so your users won't download the javascript for all svelte components on your site, just the ones it needs for the current page:

// main.ts

const targets = [
  {
    fileName: "BoxOne",
    id: "box-1",
  },
  {
    fileName: "BoxTwo",
    id: "box-2",
  },
  {
    fileName: "BoxThree",
    id: "box-3",
  },
];

targets.forEach(({ fileName, id }) => {
  const domTarget = document.getElementById(id);
  if (domTarget) {
    import(`./lib/${fileName}.svelte`).then((module) => {
      const Component = module.default;
      domTarget.innerHTML = "";
      new Component({ target: domTarget });
    });
  }
});

I am currently working on something even better, IMHO, which is server-rendering your svelte components in go, using v8go library and templ code-only components. POC is very promising. You can have your cake and eat it too. But you do have to pay for the cake. V8 is a fast js engine with JIT compilation, but its still much slower at rendering out html strings than go/templ... But if you were to SSR with Sveltekit your entire app would have to be an expensive cake, whereas this will be just little cake islands, and entirely opt-in. If a given chunk of interactive UI is worth server-rendering, you can "pay for it" with 10 milliseconds or so to render it in v8. Otherwise, leave it empty like the traditional "islands" pattern, or give it a loading skeleton to be hydrated client side if you need to hit a slow third party api and not block the rest of the page load. Its up to you.

[t-lock]

Here is a pre-alpha proof of concept: https://github.com/t-lock/sveltempl. At this point, I feel confident saying that the outlook for this approach is very bright!

I'll come back and post here when I reach v0.1.0 and v1.0.0 releases.

Cheers!