`paraglide-sveltekit`: Anchor tags `<a>` break exported snippets when not using `data-no-translate`

[Wombosvideo]

Describe the bug

• Svelte 5.5.0 adds the possibility of exporting snippets for use in other components. This is incredibly useful to make snippets reusable.
• Adding an anchor tag <a> to the exported snippet breaks compilation. I assume this is due to the snippets being defined outside of the ParaglideJS wrapper component, meaning paraglide-sveltekit can't preprocess these anchor tags.
• Adding data-no-translate to the anchor tag "fixes" this issue, but prevents internal links from being localized.

Reproduction

<!-- file: links.svelte -->
<script lang="ts" module>
  export { linkToHome };
</script>

{#snippet linkToHome()}
  <a href="/">Home</a>
{/snippet}

<!-- file: +layout.svelte -->
<script lang="ts">
  import { i18n } from '$lib/i18n';
  import { ParaglideJS } from '@inlang/paraglide-sveltekit';
  import { linkToHome } from './links.svelte';
</script>

<ParaglideJS {i18n}>
  {@render linkToHome()}
</ParaglideJS>

Expected behaviour

• If the exported snippet is only used within components in the ParaglideJS wrapper, the links should be automatically localized.
• If this is not possible, at least show a meaningful error, like

  Automatic link localisation is only available within the `<ParaglideJS>` wrapper.
  Please add the `data-no-translate` attribute and manually localise the link.
  

Workarounds

• Do not use anchor tags <a> in exported snippets.
  • Good: Fixes compilation.
  • Bad: Forces you to follow bad practices (like using a <button> for navigation) if you still want to do page navigation.
• Disable automatic link localisation by adding data-no-translate to the anchor tag.
  • Good: Fixes compilation. Best solution if not linking to internal pages.
  • Bad: Forces you to localize links manually and pass them as a snippet property.

Additional context

Exported snippets seem to be working fine most of the time, but are facing some issues with tooling when referencing foreign declarations, see sveltejs/language-tools#2640. I've also ran into the mentioned issue, as seen in the comment, but since I had compilation errors when the author of the issue didn't, I was suspicious that the cause of this compilation error was beyond language-server or vite-plugin-svelte. I then tried to create a minimal reproduction and learned that the compilation errors only occur when using anchor tags. Adding data-no-translate fixed the compilation error.

[samuelstroschein]

I am working on the sveltekit adapter v1.0. I will refrain from AST transforms precisely because issue like these pop up, and it's a never ending fixing story that is unmaintainable.

[samuelstroschein]

yes, the new sveltekit adapter will not do ast transforms anymore. this issue will self-close itself with the 2.0 release

[Stadly]

I noticed that the preprocessor is missing in the main branch. How does the new SvelteKit adapter handle link localization?

[samuelstroschein]

You have to explicitly localize a link in v2.

'<a href={localizePath("/page")>'

The AST transforms with auto link localization lead to bugs and countless edge cases.

It's better if devs explicitly state which links should be localized.

Link extraction can potentially be one click with LLMs.

[samuelstroschein]

Closing as "fixed in Paraglide JS 2.0".

Localizing hrefs needs to happen explicitly now to avoid bugs.

-<a href="/about">
+<a href={localizeHref("/about")}>
  Something
</a>