Hydrogen i18n example #1279

juanpprieto · 2023-08-25T17:56:02Z

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

blittle · 2023-09-05T15:57:47Z

examples/i18n/RFC.md

+// Configure the i18n locale format. e.g this will match /fr-CA/ or /en-CA
+export const subfolderLocaleParser = createSubfolderLocaleParser({
+  parser: ({COUNTRY, language, delimiter}) =>
+    `/${language}${delimiter['-']}${COUNTRY}`,


Would it be simpler to just make the parser be case insensitive? And the signature could also be {country, language, delimiter}?

blittle · 2023-09-05T15:59:20Z

examples/i18n/RFC.md

+  const {i18n, i18nSfApi} = await getI18n<typeof DEFAULT_I18N>({
+    cache,
+    defaultI18n: DEFAULT_I18N,
+    prefixParser: subfolderLocaleParser,


Not all i18n will use URL prefixes, would this be better to be just named parser?

blittle · 2023-09-05T16:00:03Z

examples/i18n/RFC.md

+  isDefault: true,
+  country: defaultCountry,
+  language: defaultLanguage,
+  prefix: subfolderLocaleParser({


What would this be if i18n was in the domain?

blittle · 2023-09-05T16:00:40Z

examples/i18n/RFC.md

+    mode: process.env.NODE_ENV,
+    getLoadContext: () => ({
+      cart,
+      i18n, // Step 5. pass i18n to the Remix context


Suggested change

i18n, // Step 5. pass i18n to the Remix context

i18n, // Step 6. pass i18n to the Remix context

blittle · 2023-09-05T16:02:11Z

examples/i18n/RFC.md

+  // ...
+  return defer({
+    // return i18n so that it is available throughout the app
+    i18n: context.i18n,


Does this mean that the entire i18n json for every route is sent down?

blittle · 2023-09-05T16:03:48Z

examples/i18n/RFC.md

+        <Links />
+      </head>
+      <body>
+        <Layout {...data} key={`${i18n.language.code}-${i18n.country.code}`}>


Curious why the Layout has the key passed in like this?

blittle · 2023-09-05T16:06:39Z

examples/i18n/RFC.md

+  // Step 3. use localized content for the account a login CTA's
+  const loginLabel = isLoggedIn
+    ? t('layout.header.ctas.account')
+    : t('layout.header.ctas.login');


We talked about this before, but I'd like to start a discussion about somehow offering translation type safety.

Have you considered using a library like react-i18next for the example? I think many people will want use advanced features that these kind of libs offer and type safety for the TFunction is really easy with it.

examples/i18n/RFC.md

Co-authored-by: Dominik <[email protected]>

frandiox

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 🙈

magnattic · 2023-09-20T18:54:14Z

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 · 2023-09-29T13:11:12Z

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 · 2023-09-30T10:34:28Z

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 · 2023-10-01T14:33:46Z

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 · 2024-01-04T10:48:55Z

Hello,

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

Thank you.

jmdalmasso · 2024-01-09T17:36:26Z

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 · 2024-02-05T15:30:57Z

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 · 2024-06-20T14:33:21Z

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

jamalsoueidan · 2024-06-20T19:16:40Z

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],
  );

juanpprieto added 13 commits August 25, 2023 10:33

Scaffold skeleton

4a46588

Add locales json files

9272112

create subfolderLocaleParser utility

d026bf3

Update server.ts to support i18n

bd02f68

Add i18n type to the remix context

16d7653

Update root.tsx to support i18n

3b95682

Add i18n helpers and utilities

54689b7

Add i18n components

29debcc

Implement i18n in components

5ccee61

Implement i18n in routes

fa171c5

Add required packages and setup

b5611cc

Add RFC.md

bac621c

Update README.md

fad0ec6

juanpprieto requested a review from a team August 25, 2023 18:15

blittle reviewed Sep 5, 2023

View reviewed changes

magnattic reviewed Sep 7, 2023

View reviewed changes

examples/i18n/RFC.md Outdated Show resolved Hide resolved

Update examples/i18n/RFC.md

1eb67fb

Co-authored-by: Dominik <[email protected]>

github-actions bot deployed to preview September 13, 2023 19:29 View deployment

frandiox reviewed Sep 19, 2023

View reviewed changes

michenly added the Blocked Progress on this issue is blocked by something outside of our control label May 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hydrogen i18n example #1279

Hydrogen i18n example #1279

juanpprieto commented Aug 25, 2023 •

edited

Loading

blittle Sep 5, 2023

blittle Sep 5, 2023

blittle Sep 5, 2023

blittle Sep 5, 2023

blittle Sep 5, 2023

blittle Sep 5, 2023

blittle Sep 5, 2023

magnattic Sep 15, 2023

frandiox left a comment

magnattic commented Sep 20, 2023

carstensbix commented Sep 29, 2023 •

edited

Loading

magnattic commented Sep 30, 2023

carstensbix commented Oct 1, 2023 •

edited

Loading

hydropik commented Jan 4, 2024

jmdalmasso commented Jan 9, 2024 •

edited

Loading

chrisvltn commented Feb 5, 2024

dominikx96 commented Jun 20, 2024

jamalsoueidan commented Jun 20, 2024

	i18n, // Step 5. pass i18n to the Remix context
	i18n, // Step 6. pass i18n to the Remix context

Hydrogen i18n example #1279

Are you sure you want to change the base?

Hydrogen i18n example #1279

Conversation

juanpprieto commented Aug 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox left a comment

Choose a reason for hiding this comment

magnattic commented Sep 20, 2023

carstensbix commented Sep 29, 2023 • edited Loading

magnattic commented Sep 30, 2023

carstensbix commented Oct 1, 2023 • edited Loading

hydropik commented Jan 4, 2024

jmdalmasso commented Jan 9, 2024 • edited Loading

chrisvltn commented Feb 5, 2024

dominikx96 commented Jun 20, 2024

jamalsoueidan commented Jun 20, 2024

juanpprieto commented Aug 25, 2023 •

edited

Loading

carstensbix commented Sep 29, 2023 •

edited

Loading

carstensbix commented Oct 1, 2023 •

edited

Loading

jmdalmasso commented Jan 9, 2024 •

edited

Loading