Hydrogen i18n example

[juanpprieto]

For detailed information on this PR please read the included RFC.md

[magnattic]

Would it be possible to just make the JSON files available to existing i18n libraries instead of implementing our own t(...) functionality? I think that's a huge rabbit hole with hidden features like pluralization etc. that we should avoid 🙈

It's definitely possible. I just did this for our project by combining the data fetching logic from this PR (getOxygenAssetsUrl etc) with react-i18next. Works like a charm so far. The readme of https://github.com/sergiodxa/remix-i18next gives a few pointers in their setup for what needs to be done, specifically <I18NextProvider> setup in entry.client and entry.server and then also some static way to access translations in loaders and actions.

[carstensbix]

Would it be possible to just make the JSON files available to existing i18n libraries instead of implementing our own t(...) functionality? I think that's a huge rabbit hole with hidden features like pluralization etc. that we should avoid 🙈

It's definitely possible. I just did this for our project by combining the data fetching logic from this PR (getOxygenAssetsUrl etc) with react-i18next. Works like a charm so far. The readme of https://github.com/sergiodxa/remix-i18next gives a few pointers in their setup for what needs to be done, specifically <I18NextProvider> setup in entry.client and entry.server and then also some static way to access translations in loaders and actions.

@magnattic Can you share you're code? I am having trouble setting it up.

[magnattic]

Can you share you're code? I am having trouble setting it up.

It's in a private repo of one of my customers, so I can't share it directly. I could try to set up an example repo but that would take me some time which is in short supply right now. Maybe this PR is not the best place to discuss this, but if you let me know what's not working I could try to give you some pointers.

[carstensbix]

It's in a private repo of one of my customers, so I can't share it directly. I could try to set up an example repo but that would take me some time which is in short supply right now. Maybe this PR is not the best place to discuss this, but if you let me know what's not working I could try to give you some pointers.

@magnattic Where do you use getOxygenAssetsUrl (please show content of that file)? And how does your "i18next.server.ts" look with i18next-fetch-backend. If you could show that file it would definitely solve my problem.

So the file "i18next.server.ts" would be very appreciated :)

Would really appreciate just a very basic repo with the changes that made it working nothing else.

If you send discord we can discuss it there instead :), then i can delete these messages in this PR.

[hydropik]

Hello,

Would be great if we could have an exemple with i18next :)

Thank you.

[jmdalmasso]

Any update on this PR? An example on how to setup i18n would be very helpful. This PR looks like it rewrites a lot of i18n functionality which is a little strange. Curious to hear why.

[chrisvltn]

One thing I don't see addressed here is the support for plural translations.

For example, in the cart I'd expect to see a text saying 4 items in your cart or something similar, and items would need to be different depending on the number.

Depending on the language, you might also have 2+ different plural variants for items that depend on how amount of items you have.

Here there are a few examples on different cases of plural: https://www.i18next.com/translation-function/plurals

Maybe here makes sense to use an external library to handle that? Otherwise it might be too much code rewriting inside Hydrogen itself.

[dominikx96]

Hey, what is the status of i18n in Hydrogen? What is the recommended approach at this moment?

[jamalsoueidan]

I use metaobject (key, value) in shopify, so store owner can change the translations values

and then just load them using @inContext language, create a react-hook

const t = useCallback(
    (key: string, options: Record<string, any> = {}) => {
      const value = data[key];
      if (!value) {
        console.log(`missing_${key}`, data);
        return `missing_${key}`;
      }
      return interpolateText(value, options);
    },
    [data, interpolateText],
  );