i18n and code splitting

[stereobooster]

Is this a bug report?

No, rather a feature request.

i18n

There are ways to extract keys for internationalisation, like:

• standalone tool https://github.com/evenchange4/react-intl-cra
• babel macro https://github.com/evenchange4/react-intl.macro

Those methods can extract keys, and place it in either:

• one big file
• one file pre each JS files

Code splitting

CRA supports code splitting out of the box 👍, I would also like to split i18n the same way as JS splitted:

Loadable.Map({
  loader: {
    Bar: () => import(/* webpackChunkName: Bar */ './Bar'),
    i18n: () => fetch(`./i18n/${lang}/bar.json`).then(res => res.json()),
  },
  render(loaded, props) {
    let Bar = loaded.Bar.default;
    let i18n = loaded.i18n;
    return <Bar {...props} i18n={i18n}/>;
  },
});

Bar can contain other components (with static imports and i18n keys), for example Foo. So Bar.xxxx.chunk.js can require i18n keys for Foo and for Bar or it can happen that Foo, will be splitted in common.xxxx.chunk.js.

It would be nice to have Bar.xxxx.chunk.json and common.xxxx.chunk.json with i18n keys so appropriate translation files can be generated.

Obviously CRA should not lock-in users with some exact i18n library, but rather we can look into providing low level APIs so other libraries can reuse it. This idea still miss some details, for example, how i18n would work in development environment and maybe other.

Related tickets:

• Help wanted Using react-intl #1227
• i18n support? #1091
• Hashing JSON files for i18n #2949

[Guillerbr]

ok tanks

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.