react_on_rails i18n - Loading locales on demand (webpack)

[amf9t2]

Hi,

Its really helpful to use react_on_rails i18n setup. It is doing a great job of getting all the locales from yml file and putting them in two json file (translation.js and default.js) but same time we are loosing a benefit of loading the locales on demand which we get through react-intl (addLocaleData).

As we import translation.js and default.js file in root component all the locales are loaded and while rendering we filter out the selected locale from translation.js file. These js files will get big over the time when application starts supporting multiple languages. Being a newbie I am having hard time to figure out the best way.

Let me know if I am missing any setup which will allow on demand loading or there is already a plan to fix this.

Thanks.

[justin808]

You will want to break this out into different webpack bundles that load depending on the user's locale.

@JasonYCHuang or @martyphee Might have some advice here.

It would be GREAT to have this information in our i18n.md doc!

[amf9t2]

@JasonYCHuang @martyphee I would really appreciate your advice on this. Thanks.

[justin808]

@amf9t2 @martyphee Any update on this one?

[waishub]

Hi, Thank you for this really helpful gem!
I'm following the pattern (breaking into multiple webpack bundles) and noticed that
in SSR, config.server_bundle_js should be set after I18n.locale is set in application_controller,
like:
[application_controller.rb]
I18n.locale = extract_locale_from_tld || I18n.default_locale
[somewhere else]
server_bundle_js_file = 'server-bundle-' + I18n.locale.to_s + '.js'
(which gives like: "_server-bundle-en.js_" or "_server-bundle-ja.js_").

I think in this case, react_on_rails.rb initializer is not proper place to set server_bundle_js_file, because I18n.locale is not set yet.
Is there any way?

[waishub]

Hi, I changed following line in lib/react_on_rails/utils.rb and it works fine now.

from:
bundle_name = ReactOnRails.configuration.server_bundle_js_file
to:
bundle_name = ReactOnRails.configuration.server_bundle_js_file + '-' + I18n.locale.to_s + '.js'

In config/initializers/react_on_rails.rb:
config.server_bundle_js_file = 'server-bundle'

[justin808]

@waishub I'm not clear what you are doing. Currently, server rendering only supports ONE bundle as the VM context gets reused between requests.

[justin808]

If anybody reading this would be interested in having support for locale-specific bundles be a feature of React on Rails Pro, please contact me. Otherwise, I'm open to PRs for code and docs.

[waishub]

Hi, as @amf9t2 mentioned, I think it's better to load only single locale because users rarely change their locale during use. In addition, as mentioned by google or even from the point of view of RESTful application, I think it's better to use "language specific URLs" rather than using cookies or redux-states to select language.

If I use such "language specific URLs", I don't need to use polyglot or react-intl but can use i18n-webpack-plugin and make individual bundle files beforehand, like:

[english bundle files]
_app-bundle-en.js_
_app-bundle-en.css_
_server-bundle-en.js_

[japanese bundle files]
_app-bundle-ja.js_
_app-bundle-ja.css_
_server-bundle-ja.js_

And in application_controller.rb,

  before_action :set_locale

  def set_locale
    I18n.locale = extract_locale_from_subdomain
  end

  def extract_locale_from_subdomain
    parsed_locale = request.subdomains.first
    I18n.available_locales.include?(parsed_locale.to_sym) ? parsed_locale : I18n.default_locale
  end

Then, for example, if I access en.mysite.com, english bundle files are loaded, and if I access ja.mysite.com, japanese bundle files are loaded.

This is the background.
i18n-webpack-plugin is not so flexible but in most cases it's useful.

I'm not familiar with PRs, so sorry for writing here.