Remix i18n

[jeancx]

56

Done

Ready for review.

This site helps a lote to generate translations:

https://translate.i18next.com/

Info:

• Updated @remix-run/dev to v2.0 due to incompatibilities when installing i18n packages
• Update typescript to 5.1 to match from remix package
• I'm using node v18 due to incompatibilities
• After this PR be merged, is good to study a way to translate fixed texts before action function, like Zod form validator.

[netlify[bot]]

✅ Deploy Preview for inspiring-boba-355f4d ready!

Name	Link
🔨 Latest commit	dd57c253bfc84b1a7a126bea1052ea05eebf9869
🔍 Latest deploy log	https://app.netlify.com/sites/inspiring-boba-355f4d/deploys/657af95a7307d100089feafa
😎 Deploy Preview	https://deploy-preview-57--inspiring-boba-355f4d.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for remix-vendure ready!

Name	Link
🔨 Latest commit	dd57c253bfc84b1a7a126bea1052ea05eebf9869
🔍 Latest deploy log	https://app.netlify.com/sites/remix-vendure/deploys/657af95a4e73f30008907d92
😎 Deploy Preview	https://deploy-preview-57--remix-vendure.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kyunal]

I just tried this, thanks so much for all the work! Two things I have noticed:

1. The 'sign in' button on /sign-in displays Sign in twice
2. The dev server complains about Route ID collisions on startup. I haven't checked yet if this stems from your changes (or if it's an issue we had before..) but it's definitely something to look out for

Let me know if I can help or whenever this is ready!

[jeancx]

I just tried this, thanks so much for all the work! Two things I have noticed:

1. The 'sign in' button on /sign-in displays Sign in twice

2. The dev server complains about Route ID collisions on startup. I haven't checked yet if this stems from your changes (or if it's an issue we had before..) but it's definitely something to look out for

Let me know if I can help or whenever this is ready!

1 - The duplicated Signin text i fixed, just forgot to remove the text after add translation function on side. 2 - That issue had before, it is because exists a file routes/checkout.tsx and also routes/checkout/index.tsx.

[jeancx]

My sugestion would be:

• Rename route routes/checkout/index.tsx to routes/checkout/shipping.tsx since its class is CheckoutShipping.
• Rename route routes/account/index.tsx to routes/account/details.tsx since its class is AccountDetails.

Everything that is inside route folder becomes a website address, so as it uses friendly route, every ´folder/index´ becomes a ´folder´ route, so if there is a root file with same name as a folder with index inside it is a conflict.

[jeancx]

@kyunal it's ready.

[kyunal]

I will review this soon, currently at the Vendure Developer Meetup 👋

[kyunal]

Hi, again thanks so much for all the work! I've been playing around with it for about half an hour, and here's what I found:

• The duplicate route issue. I think this is just from the v1 routing adapter and as everything works we can probably safely ignore this
• The search site only shows the path string for the translation in its header (common.resultsFor/common.allResults)
  I'm a bit baffled by this, because it seems correct and I couldn't figure out why it happens. Maybe you know more.
• I get a lot of hydration errors locally (refresh, check the console log), which causes React to fall back to client-side rendering, which isn't really ideal
• It would be cool to have a language switch button since you already added other translations :sweat_smile:
  But don't feel obligated to do this, that's something I could easily follow up with :)

[jeancx]

• The routes works, but it is recommended to mark to rename the double index to avoid conflict.
• Fixed, had a space in the key of JSON "resultsFor "
• Hydratation error reasons have here: https://nextjs.org/docs/messages/react-hydration-error, mainly problem is to use browser's window API, I will see if I can find a alternative.
• I can do the language switch, but better leave it for after this PR is integrated, because there is already too much changes in this PR

[jeancx]

Solved the hydratation error, it was because the server was not finding the translations files.

[jeancx]

@kyunal You can review again, after the PR is merged i will open another PR and do the language switch.

[kyunal]

Sorry for the incredibly late reply, been busy then sick :(

Looks good to me, and will merge it now! Thanks so much for the work :heart:

[michaelbromley]

Hey @jeancx thank you for this excellent contribution!

I was wondering whether it makes sense to add anything to the readme to first of all make it known that this project has built-in i18n support, but also whether there is anything the dev needs to know to effectively work with it?

[michaelbromley]

@kyunal FYI this commit broke the demo site (https://092412a3.storefront-remix-starter-56q.pages.dev/). I didn't look into why yet, but for now I reverted to the 1eed261 commit which is working fine.

[jeancx]

@kyunal FYI this commit broke the demo site (https://092412a3.storefront-remix-starter-56q.pages.dev/). I didn't look into why yet, but for now I reverted to the 1eed261 commit which is working fine.

Maybe because of the need of node 18.

[kyunal]

There cannot be any node dependencies in most edge runtimes such as Cloudflare Pages which is what's used for the demo site. Specifically, the fs i18next backend required some node deps as well as React's renderToPipeableStream in the entry.server.tsx. I didn't catch this before merging unfortunately, but I addressed this in 554f1f2f350b51a3fe83675e715681869f6c4510 and made your i18n cross-runtime compatible :smile:

[jeancx]

I saw that was fixed 3 days ago, @kyunal if you want i can do the language change button, now that is merged.

[kyunal]

Sure thing! That would be great