Which i18n solution to use?

[baltpeter]

Astro itself (very) unfortunately only provides i18n routing, but we of course also need to translate strings.
And the annoying problem is that we need this to work both server- and client-side.

In datenanfragen/website, we had a similar (though it's built-time and client-side here). There, we're using two different i18n frameworks (Hugo's and preact-i18n).

It would be unfortunate if we also needed two different solutions here…

[baltpeter]

Here are the Astro-specific options I found:

• The docs have an (outdated) i18n tutorial that recommends rolling your own (too simple) translation function: https://docs.astro.build/en/recipes/i18n/#translate-ui-strings
• https://github.com/Alexandre-Fernandez/astro-i18n
• https://github.com/yassinedoghri/astro-i18next

[baltpeter]

While I do like i18next in concept and I understand why it is so big, it seems vastly overkill for. Especially since we'll want to only have the absolute minimum in client-side JS components and I don't want to ship all of i18next just for that.

[baltpeter]

Honestly, I would prefer to keep this as simple and similar to our existing as possible. I'll try whether we can't also use preact-i18n in Astro components (creating our own wrapper component instead of using the (P)react-specific ones).

[baltpeter]

The server-side integration wasn't too bad thanks to https://www.npmjs.com/package/astro-global.

[baltpeter]

I also wanted a better way to share the translation files between server and client than we have in datenanfragen/website. Here's what I came up with:

{
    "base": {
        "skip-to-content": "Skip to content",
        "back-to-home": "Back to homepage",
        "test!": "abc"
    }
}

Only translations with keys that end in ! are available to the client:

[baltpeter]

Annoyingly, astro-global causes a few TS errors:

node_modules/astro-global/integration.ts:1:16 - error TS2307: Cannot find module 'node:fs' or its corresponding type declarations.

1 import fs from "node:fs"
                 ~~~~~~~~~

node_modules/astro-global/integration.ts:6:26 - error TS6133: 'options' is declared but its value is never read.

6 export default function (options: Partial<Options> = {}): AstroIntegration {
                           ~~~~~~~

node_modules/astro-global/integration.ts:20:29 - error TS7030: Not all code paths return a value.

20                             resolveId(source) {
                               ~~~~~~~~~

node_modules/astro-global/runtime/als.ts:1:35 - error TS2307: Cannot find module 'node:async_hooks' or its corresponding type declarations.

1 import { AsyncLocalStorage } from "node:async_hooks"
                                    ~~~~~~~~~~~~~~~~~~

node_modules/astro-global/runtime/virtual-module.ts:72:3 - error TS1360: Type '{ readonly clientAddress: any; readonly cookies: any; readonly generator: any; readonly locals: any; readonly params: any; readonly preferredLocale: any; readonly preferredLocaleList: any; ... 5 more ...; readonly currentLocale: any; }' does not satisfy the expected type 'AstroGlobal'.
  Type '{ readonly clientAddress: any; readonly cookies: any; readonly generator: any; readonly locals: any; readonly params: any; readonly preferredLocale: any; readonly preferredLocaleList: any; ... 5 more ...; readonly currentLocale: any; }' is missing the following properties from type 'Readonly<Omit<APIContext<Record<string, any>, Record<string, string | undefined>>, "ResponseWithEncoding">>': rewrite, getActionResult

72 } satisfies AstroGlobal
     ~~~~~~~~~

It ships untranspiled TS files. skipLibCheck and @ts-ignores unfortunately don't help.

The node:* errors could be fixed easily enough by adding @types/node but the other ones are actual errors in the library code.

I think I'm leaning towards just using patch-package. I don't see a clean way to solve this and don't want to waste more time on it.