i18n support ?

[kiuKisas]

Quick question: Does anything concern i18n support is plan for elderjs ?

[nickreese]

To be honest, I’ve never been intimately involved in an i18n project so my understanding of how things are usually handled is minimal.

That said, this should doable by a plugin/hook.

Essentially in your route.js file would return request objects that include any params you need to build the permalink/URL as usual but you’d also include any params needed for i18n such as a {lang: “es”}.

In your svelte template/layout you’d then use __i18n_variable_name or some other unique string that would identify something to be replaced.

Then in your hooks.js file or in a plugin, register a regex function on the html hook which globally replaces any strings prefixed with __i18n_ with some central store of strings.

Honestly, as I’ve written this out I believe writing a plugin to support this should be relatively straight forward and due to the fact plugins have their own closure scope users could define their __i18n_ strings in their elder.config.js file.

The only wildcard in my mind is the data.js file which would need to be left up to the final developer to make sure they were looking at the request.lang (returned from a route’s all function as defined above) and were customizing any template data as needed.

Another possible concern I see is an SEO one around effective management if hreflang tags and alternate lang tags and making sure those are handled well when a language specific route/url does or doesnt exsist. The “head” hook would be perfect for this use case but the devil is in the implementation details.

If you have any feedback here or things I left out please do point them out. I’d love to make this issue into a “spec” of sorts for a plugin so someone with a business usecase to support this could implement this in a reusable pattern.

[kiuKisas]

Thank's for your complete answer. To me, you seem to cover most of the issues.
I plan to migrate an international website from vue to svelte around september/october, I'll probably go with elderjs and gonna dig into this. I'll let you know.

[m4rrc0]

Hey, just a quick thought...

I am far from being an i18n expert (or an ElderJS expert for that matter). I have built some multilingual websites but never really understood i18n libraries as it seems to me that it is up to the dev to keep a dictionary of terms to be translated and replaced where necessary. That is probably what i18n libs are doing but like I said... never really understood the benefice they offer... ^^'

That being said, I am not sure the html hook is the best place to handle translations as (if I understand ElderJS correctly) all hydrated content would be left out of the process and your __i18n_variable_name would appear once js loads.
You may very well start with a simple html page then decide you need js here and there and forget your i18n variable will not be handled and when you realize it, you may need to refactor a lot if you are solely relying on the html hook to replace all those strings...

Again, it may just be me not understanding i18n processes but in any case I see no problem implementing multilingual websites with ElderJS as is.

[nickreese]

@m4rrc0 I am far from an i18n expert but you bring up a very good point. Hydration is definitely an issue to take into account.

I'd defer to people with more knowledge, but it seems a JSON dictionary imported into Svelte components would solve a lot of this as the dictionary would be available in SSR and on the client without having to hydrate it again. Just passing in the request object to be hydrated could be enough.

If anyone is exploring i18n, totally interested in learning about different approaches and Elder.js can support those approaches. :)

[kiuKisas]

You can find a first draft of my plugin here: https://github.com/kiuKisas/elderjs-plugin-i18n
For now, it add locale into the request object, create alternative permalink according to this locale and let you manage your language data inside the data function.
This way we can have a 0kb js internationalize website and still have access to other locales permalink through an helper.
A data dictionary is not available yet on client side but it's plan, alongside an integration with svelte-i18n.
Feel free to check it out and give an opinion about it :)