Splitting messages into smaller chunks about formatjs HOT 4 CLOSED

@gpbl I think you're in the right track, let me give you few more hints:

pass messages in one go

I will not recommend to organize your translations per react component, this is proven to be a refactor hazard. keep in mind that translations are normally re-use after a refactor, plus, professional translators should not be exposed to the implementation details and component organization, we recommend to organize them in logical groups that can tell translators where to look.

whatever organization you use for your translations (even if you decide to go with a very granular or a giant flat file with all translations), you should be able to pipe that thru the entire app:

render: function () {
    <MyApp messages={computedMessagesPerLocale[currentLocale]} locales={[currentLocale, fallbackLocale]}></App>
}

on the server

you can simply have a middleware to compute the currentLocale, and to require all language files (organized) in namespace if needed, and this is a one time operation per locale, not a big deal, essentially, based on the previous example, computedMessagesPerLocale should hold that information, including any fallback mechanism (computing missing entries, etc).

on the client

load a bundle with all locale (this is equivalent to computedMessagesPerLocale[currentLocale] and in fact can be computed once for server and client), then just pass that data into the app initialization. we do not recommend to have fallback for messages because that means you have to load 2 or more bundles, instead, rely on a build process to solve inconsistencies between language files, and apply completion on those that are missing or incomplete.

from formatjs.

Thanks @caridy for sharing your experience, you are right on everything :-) (I'm also against the fallbacks) I'll follow you ideas and keep this issue updated with my progress, in case someone else is interested.

from formatjs.

So after working for a while with react-intl, this isn't actually an issue anymore. A related discussion is #89.

from formatjs.

Hi all! ✌️

I was running into a similar issue and came up with a solution that inlines your localized messages so that it's coupled with your code and easy to split into smaller bundles (think CSS-in-JS for i18n messages). See this for more info on the motivation for it.

Check it out here: babel-plugin-inline-i18n-messages

This idea would it would inline the messages like this:

<FormattedMessage id="key.path.hello" />
<FormattedMessage id="key.path.sup" />

      ↓ ↓ ↓ ↓ ↓ ↓

import { addMessages } from "i18n/addMessages.js";
addMessages([
  ["key.path.hello", "hello, world"],
  ["key.path.sup", "sup, world"],
]);
<FormattedMessage id="key.path.hello" />
<FormattedMessage id="key.path.sup" />

It plays very nicely with react-intl. Here's an example

I'd appreciate you all checking it out and letting me know if it solves your splitting issues 🙇

cc @gpbl @caridy

from formatjs.