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',
  })
});

I tested the Spa component with different configurations before realizing that scrollIntoView option set to false would break the SPA navigation.

codesandbox with minimal issue reproduction

Describe the bug
Client-side components are not rehydrated in the case where I navigate from Page A to Page B, then back to Page A. This means that any client-side components that previously worked on Page A when I first loaded it will cease to work when I return to it.

My understanding is that this is because the hydration scripts outputted by Astro are ES modules, and ES modules can only be evaluated once per page load. This means that the hydration scripts for Page A ran once to hydrate any client-side components (so it works initially), but on return to the page, since the page is not actually reloaded, the script will not run again (and therefore any client-side components will not be rehydrated) despite any attempts at re-injecting it to the head. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts

EDIT: Just to elaborate a little, the core issue at hand here is not about the exact navigation sequence of Page A -> Page B -> Page A, but the fact that once a page has been visited, returning to it will lead to any client-side components no longer working. You can play around with the back/forward button and see that once any of the pages have been visited, any return to it will yield the same problem.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://test-astro-spa.vercel.app/
2. Verify that Counter works in Index page.
3. Click on "Next" link to go to /Next page.
4. Click on "Back" link to return to Index page.
5. Verify that Counter no longer works as it should.

Configuration for astro-spa
<Spa containerSelector="#container" />

Versions

• Astro: v0.22.18
• astro-spa: v1.3.8

Types missing for TS projects: is there any plan to support them?

Could not find a declaration file for module 'astro-spa'. '/media/DATA/proj/TESTS/my-astro-site/node_modules/.pnpm/[email protected]/node_modules/astro-spa/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/astro-spa` if it exists or add a new declaration (.d.ts) file containing `declare module 'astro-spa';`ts(7016)

support typescript

Hi! I tried this example with a new version of Astro and it seems to be broken.
https://codesandbox.io/s/enteleform-test--astro-spa--partial-update-ebbbf7

On a clean install of Astro using the Minimal as the base, I get a 500 internal server error when I add

import { Spa } from "astro-spa";

To index.astro

Log on the page:

D:/Development/calvarytucson-web-astro/node_modules/astro-spa/Spa.astro: Expected "}" but found "{"

Error: Transform failed with 1 error:
D:/Development/calvarytucson-web-astro/node_modules/astro-spa/Spa.astro:158:148: error: Expected "}" but found "{"
at failureErrorWithLog (D:\Development\calvarytucson-web-astro\node_modules\astro\node_modules\esbuild\lib\main.js:1493:15)
at D:\Development\calvarytucson-web-astro\node_modules\astro\node_modules\esbuild\lib\main.js:1282:29
at D:\Development\calvarytucson-web-astro\node_modules\astro\node_modules\esbuild\lib\main.js:629:9
at handleIncomingPacket (D:\Development\calvarytucson-web-astro\node_modules\astro\node_modules\esbuild\lib\main.js:726:9)
at Socket.readFromStdout (D:\Development\calvarytucson-web-astro\node_modules\astro\node_modules\esbuild\lib\main.js:596:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at Socket.Readable.push (node:internal/streams/readable:228:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

package.json file:

{
  "name": "@example/minimal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "devDependencies": {
    "astro": "^0.21.4"
  },
  "dependencies": {
    "astro-spa": "^1.3.0"
  }
}