hot to write translation files

[mbrevda]

Hi -

Thanks for the great post, it was really clear and helpful. Once thing I don't get though: what would a translated file like? And in the context of this project, where would that file live?

Thanks!

[keul]

@mbrevda I can partially answer to your question: after running...

npm run build:langs

...you will find a data.json inside build/locales. The file only contains english definitions but adding other is straightforward.

But still I find issues with this approach:

• We have a single json file with all languages inside. One file for every language is better IMHO.
• data.json in generated inside build directory, that's commonly in not under CVS
• If you make changes to the translation file then rerun build:langs you loose changes.

So: I think that unluckily this example doesn't provide a production environment.

[iam-peekay]

On point 1, that's personal preference. At coinbase we decided to put everything in one json file and then do a key lookup for the strings based on the users locale (which are then injected into the root component). But you can separate the files as well. Not a huge difference either way.

On point 3, you shouldn't be editing your translation files manually anyway. Any strings that require translation should be generated by react intl. This English one that is generated by react Intl (data.json) and then you upload that file to your translation service. They generate the strings for each locale you specify. Then you download the translated files back into your repo. I haven't shown the steps to do the upload / download here because I didn't want to pay for translation. But happy to answer questions about configuration though. I may have misunderstood your concern so let me know 🙂

On Thu, Dec 29, 2016 at 8:18 AM Luca Fabbri [email protected] wrote:

@mbrevda https://github.com/mbrevda I can partially answer to your question: after running...

npm run build:langs

...you will find a data.json inside build/locales. The file only contains english definitions but adding other is straightforward.

But still I find issues with this approach:

• We have a single json file with all languages inside. One file for every language is better IMHO.

• data.json in generated inside build directory, that's commonly in not under CVS

• If you make changes to the translation file then rerun build:langs you loose changes.

So: I think that unluckily this example doesn't provide a production environment.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/iam-peekay/inbox-react-intl/issues/1#issuecomment-269629047, or mute the thread https://github.com/notifications/unsubscribe-auth/AFK4inQh-SHj8sgi-SiQ5GRb-YCkyrCCks5rM7MWgaJpZM4J4VRL .

[keul]

Hi @iam-peekay

About point 1: true! Splitting in separate files is probably simple enough, let say that commonly other languages/libraries starts from separate files (I've lot of experience with Python and .po, .pot formats).

About point 3: I probably misunderstood how the translation should work for React Intl I fear. I never used an external translation service for this purpose: commonly I provide to customers i18n files (whatever format), they compile them for all needed languages, then files came back to us.

Let say I've the data.json of this example translated in italian... how this should work?

Thanks again for your time!

[iam-peekay]

Let's say you are supporting 3 locales. You can put the translated strings in separate files or in the same file. I prefer to put them all in the same file:

data.json

en: { /* ... english strings ... */ }
fr: { /* ... french strings ... */ }
es: { /* ... spanish strings ... */ }

Then in the root component file, you'll see we inject the name of the locale and the associated messages into the component based on the user's locale: https://github.com/iam-peekay/inbox-react-intl/blob/master/src/js/index.js#L52

So let's say your user's locale is es. Then you'd inject the es strings (require('data.json)['es']) as the messages. Note that these messages each need to have the same format as what react-intl generated for the default language (id and defaultMessage)

[keul]

Thanks you @iam-peekay, very kindly!

[firaskrichi]

Hi @iam-peekay! Thanks for the example!!

Question: Let's say you have your data.json file with all the translations.

What happens when you add new pages to your app?

Will all your translated material be lost if you run : "npm run build:langs" ?

My question is : What's your workflow for when you add content to your app?

Thank you 🙏