Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Wombosvideo opened this issue Jan 5, 2025 · 1 comment
Labels

Comments

@Wombosvideo
Copy link

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.

Copy link
Member

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 samuelstroschein added the v2.0 label Jan 24, 2025 — with Linear
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants