Translation doesn't work for Svelte components with some specific client directives

[bojonvi]

Describe the bug

Hello guys! I just want to address some bug that I've encountered. I know that there's not yet an official support (or an example) of this library with Svelte components, but I just want to share about the bug that I've encountered during my development to this community, maybe this could help for other people who also uses Svelte.

It seems that astro-i18next doesn't work properly when using a Svelte component that has one of these Astro client directives <SvelteComp client:load>, <SvelteComp client:only={...}>, and <SvelteComp client:media={...}>. What I meant by not working properly is that, sometimes it shows the translated keys that I have used instead of showing the actual translation that I've prepared from the json file.

To Reproduce

Steps to reproduce the behavior:

1. Create an Astro project that has astro-i18next and Svelte installed by using npm install astro-i18next and npx astro add svelte.
2. Configure astro-i18next.config.mjs:

   /** @type {import('astro-i18next').AstroI18nextConfig} */
   export default {
   defaultLocale: "en",
   locales: ["en", "zh"],
   load: ["server", "client"],
   };

3. Create a json for the translation based on this documentation. It would look like this:

4. Create a Svelte component

   
   <!-- src/components/SvelteComp.svelte -->
   <script>
   import { t } from "i18next";
   
   const test = t("test");
   </script>

{test}

5. Import the Svelte component to the `index.astro` alongside with the directives I listed on the bug description (e.g. `<SvelteComp client:load>`, `<SvelteComp client:only={...}>`, and `<SvelteComp client:media={...}>`)
```astro
---
// src/pages/index.astro

import Layout from "../layouts/Layout.astro";
import SvelteComp from "../components/SvelteComp.svelte";
---

<Layout title="Welcome to Astro.">
  <main>
    <SvelteComp client:load />
  </main>
</Layout>

6. Run the project and see the error (Remember to turn off the Disable Cache feature in the Developer tools)

Expected behavior

Translations sometimes doesn't work and only shows the translation keys (60% of the time?),

Screenshots

If the bug is not acting up:

If the bug is acting up:

Context (please complete the following information):

• astro-i18next version: ^1.0.0-beta.15
• astro version: ^1.9.0
• @astrojs/svelte version: ^1.0.2
• OS: Ubuntu 22.04 (WSL2)
• Browser: OperaGX and Chrome (Both are up-to-date)

Possible fixes

I don't know how to fix this, but I was able to avoid it by using other Astro client directives such as <SvelteComp client:idle> and <SvelteComp client:visible>.

[jcdogo]

I'm also seeing similar issues with this using same beta version. Only I am seeing the issue with client:idle.

[ZerdoX-x]

For me it just does (not) work in any of client:* directives. If you will enable debug mode on client's library you will clearly see what is the issue (see screenshots). I can build and preview (same happens in dev mode) and just refresh the page maybe 50 times and at least a few reloads of 50 will get you a different result.

I will try to make a minimal reproduction repo soon when I will get any mood to debug this (why and where init happens before calling t's). The easiest way for me to avoid this is just using vanilla js without svelte. For me this is the most confusing thing because I dont even want to load client library (I use translations in header which is written in svelte because of DOM manipulations and other stuff, but all the t functions remain static and should be generated as plain text). I hope svelte will find it's way to (pre) compile translations as static texts, especially when it's used in SSG tools like astro.

This is some work I would like to share with you guys: svelte-intl-precompile where cibernox did some work and did not forgot the main idea of the svelte.

So.. back to the topic: you can try to use this NishuGoel/svelte-i18next wrapper and try to explore react example in this repo. I hope someone will be involved in resolving this issue.

Do you have any thoughts to share with us @yassinedoghri? Maybe @kaisermann will be interested in this topic also (thanks for your i18n contributions to svelte).