Spa not working with svelte correctly

[Brentlok]

I've wanted to use astro-spa with svelte (@astrojs/svelte), but I've found out that astro-spa doesn't really seem like working with it.

Links created inside astro components/pages works fine but in svelte components they don't.

Something like this fixes pure navigation problem:

<a
   on:click|preventDefault={() => window.spa.navigate(`/recipe/${id}`)}
   href={`/recipes/${id}`}
>Link</a>

But I don't really like putting that line in every place I want to use link + prefetching doesn't work even if I manually set something like this:

<a
   on:mouseover={() => window.spa.prefetch(`/recipes/${id}`)}
   on:click|preventDefault={() => window.spa.navigate(`/recipe/${id}`)}
   href={`/recipes/${id}`}
>Link</a>

Any ideas how I can fix that? Or I'm getting something wrong and astro-spa doesn't support external UI frameworks.

Versions:

"svelte": "3.55.0",
"astro-spa": "1.3.9",
"astro": "1.6.15",
"@astrojs/svelte": "1.0.2",
"@astrojs/node": "3.1.1",

config:

export default defineConfig({
  output: 'server',
  integrations: [svelte(), tailwind()],
  adapter: node({
    mode: 'standalone',
  })
});

[Brentlok]

For anyone having the same issue, I've came up with that simple function

import { afterUpdate } from "svelte";

export const watchLinks = () => afterUpdate(() => window.spa.scan());

Just put this in between your script tags in svelte components, I guess this idea can be used in other frameworks (React, Vue, etc.)