Internationalization Architecture

Question

We're working on a web based video game: https://colonist.io/

We're interested in internationalizing our product and need advice on how we should handle it. i18next seemed like a well-designed framework with a lot of plugins that allow for integration with all kinds of different products, but after some research and testing we're finding some difficulties in gettings things to work in a way that is suitable for us.

We use Typescript across our code base. On the server side, we are using Express (Node.JS) to handle APIs and render EJS templates. On the client side, we're are not using any special library or framework, just vanilla Typescript, with SASS for styling and PIXI.js for game rendering. We use Webpack for bundling.

We have 3 folders, server, client, shared.

---

Currently, We have texts in multiple places in the code base:

1. Texts inside a shared text file, that can be accessed both from the server and client.
2. Texts directly inside EJS templates.
3. Texts directly inside TS code, both on the server and client.

---

Ideally, the system should work so that:

1. On the server side: a. Easy to tie a locale to a http request/API request/socket connection (we're fine with disconnecting sockets when the language is changed) b. Easily use the localized texts in EJS templates c. Localize rendering SASS when needed (if style needs special rule for both LTR and RTL, etc...)
2. On the client side: a. Code should only load the resources necessary for the selected locale (so no downloading Spanish for an English user). b. Preferable handled by Webpack bundles and away from explicitly requesting resources asynchronously. c. Caching.
3. Shared locales; no need to create separate files for the server and client.
4. Easy to add new entries, we'll probably automatically add or use GitHub Copilot/Google Translate for the majority of the texts.
5. Isolated languages/locales, not everything in one file.
6. Auto detect strings that need translation and giving notice.

---

Questions:

1. Would it be possible to achieve this directly with already-built plugins?
2. If not all, which can and which cannot?
3. How hard would it be to implement our own approaches for thing that don't work out of the box? Will it be difficult to do or prone to break? Will it need constant updates?
4. Are there other frameworks that can achieve this (and still handle most i18n cases like plurals, formatting, etc...)?

Answer 1

1. Yes.
3. It will take time, it will need constant updates up until some point. But after you cover everything, it will be easier.
4. Yes.