choo
choo copied to clipboard
feature: language change API
When implementing the new version of Bankai, I noticed that we always default to en_US and ltr for language. There have definitely been sites built on Choo using Farsi, Japanese and Arabic, all of which need different language attributes . It'd be cool if we had an API to set the language from within choo, and expose a property on the state which can be read to figure it out.
In an ideal scenario we could have a matrix of supported languages available, and then through an Accept-Language header, return the right version.
The browser currently has a 'languagechange' event, and exposes a navigator.language property. I couldn't find one for direction, but if someone knows of prior art it might be useful!
Keen to hear thoughts on the API; especially thoughts on how to create an output matrix for languages during SSR. Thanks!
Oh, also any links on other internationalization work would be helpful! I haven't done much research around this yet; pointers would be amazing on any constraints, links, good inl implementations and more! Thanks!
Hi there, I've been experimenting with a generic get/set settings API today over on choo-conductor. Mine is for slightly different purposes, but I feel as if this would work well for misc. settings and is similar to express. Not sure if the similarity is intentional or is a goal for you, but that's how it was described to me by coworkers.
Edit: I don't have a ton of experience or research in i18n either but seems like this would be a good place to start or at least make considerations for support: https://formatjs.io/github/ (specifically the Intl.js polyfill and perhaps their addon libs)
@yoshuawuyts I think the common pattern for figuring out direction is usually by having a dict of languages that uses rtl (or ltr) and deciding based on accept-language.
@jbergstroem did a bit of digging here, and I don't think we can sensibly change the HTML dir attribute based on language. Perhaps we should add in an event for that too; or like an extra attribute:
var app = choo()
app.use((state, emitter) => {
emitter.emit('languagechange', 'en_US') // ltr is implied by default
emitter.emit('languagechange', 'en_US', 'ltr') // but can be passed explicitely
})
@yoshuawuyts seems to be the most appropriate call.