What is the suggested way to implement locale switching?

[rmontgomery429]

The docs mention setting a display option so that a user can select a language like English or French.

config.lookbook.preview_display_options = {
  bg_color: '#fff', # default bg_color value
  theme: ["light", "dark"], # dynamic 'theme' display option
  lang: [
    ["English", "en"],
    ["French", "fr"]
  ]
}

This will add the option to select the language in the UI.

Selecting the language does nothing. The locale switching logic needs to be (as far as I can tell) set up manually.

After some poking around, I found that we can override the controller for previews and decided to add the locale switching logic to that controller.

config.view_component.preview_controller = "PreviewController"

...

class PreviewController < ViewComponentsController
  before_action :set_locale

  def set_locale
    I18n.locale = params[:lookbook][:display][:lang] || I18n.default_locale
  end
end

This kind of worked but only because I had, at some point, viewed the UI and selected a language which selected a locale and stored it in a cookie. So for me calling params[:lookbook][:display][:lang] returned fr and language switching appeared to work.

I shipped this to my colleague who immediately sent me a message saying he was receiving an error. After some troubleshooting the value of params[:lookbook][:display][:lang] for him was ["French", "fr"] where as the value for the exact same call for me returned fr. This was pretty confusing.

It took some time to discover the cookie thing and I started to dig in as to how to handle this when the cookie is not yet set. In troubleshooting this I noticed that params[:lookbook][:display][:lang] will return either an Array, a string of the Array or a string of the locale code itself.

We have since had to implement the following logic to avoid these pitfalls and it just seems like either maybe I'm swimming upstream or nobody else has tried to do language switching in lookbook yet.

class PreviewController < ViewComponentsController
  before_action :set_locale

  def set_locale
    I18n.locale = selected_language
  end

  def selected_language
    lang = params[:lookbook][:display][:lang]

    if lang.is_a?(Array)
      lang.second
    elsif lang.is_a?(String)
      begin
        JSON.parse(lang).second
      rescue JSON::ParserError
        lang
      end
    else
      I18n.default_locale
    end
  end
end

Is there a better or recommended approach to this? I'm happy to help contribute to the project if this needs better docs or maybe a PR to change how language switching works but I thought I'd start with a conversation here first and see how other are solving this problem.

[allmarkedup]

Hey @rmontgomery429 - sorry for the slow reply, I missed this!

You are correct that there is no in-built locale switching, that is up to the app to implement. However, the inconsistent behaviour of the params[:lookbook][:display][:lang] value is definitely a bug! It should always just return the value itself (i.e fr).

I'll create an issue from this discussion and try to get that fixed up as soon as I can. Whilst you'll still need to implement the actual locale switching yourself that should make things a bit easier!

FWIW, I suspect (just guessing here though) that the issue may be worked around by defining your languages like this:

config.lookbook.preview_display_options = {
  lang: ["en", "fr"]
}

You will obviously not get the human-readable text displayed in the select but it may make the param value behave more consistently.

That's just a potential workaround however - this is definitely a bug. I'll get a new release out with a fix as soon as it is sorted. Thanks for bringing it to my attention 👍

[Spone]

Just a quick tip: you'd want to use around_action and with_locale for defining the locale, instead of before_action and locale=, to be thread-safe.

See rails/rails#34043

[henrik]

I looked into this since I thought this wasn't an issue anymore (since locale is set thread-locally).

Let me know if I got anything wrong, but it seems like:

• Servers may reuse a thread/process for multiple requests.
• If you don't set the locale explicitly for every request, it could thus inherit a value set by a previous request.
• There is a I18n::Middleware that resets it after each request.
• So far I haven't found anything to indicate that Rails uses this middleware by default. (EDIT: Rails docs don't mention it but do mention with_locale.)

[Spone]

If I understand this correctly, I think you have two options:

• use around_action and with_locale
• or use the middleware so you don't have to care about resetting the locale after handling the request (so a before_action would be enough?)

I think I prefer the first option as the behavior is more explicit and self-contained.

[allmarkedup]

@rmontgomery429 I've just released v1.5.3 that should fix the inconsitency issue you are seeing here - params[:lookbook][:display][:lang] should now always correctly return the value as a string (i.e. fr).

You may have to clear the lookbook-display-lang cookie before it will work correctly however. Apologies for the inconvenience and please let me know if you still have any issues with it.

[rmontgomery429]

I updated to 1.5.3 and have adjusted the PreviewController as follows and everything is working great! Thanks so much! 👏

class PreviewController < ViewComponentsController
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:lookbook][:display][:lang] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end
end

[emaklita]

Thank you so much! 🙏🏼

[halo]

Thank you for clarifying this. For anyone else ending up in this thread, the code mentioned above is wrong:

# This is wrong. This does nothing in lookbook and is silently ignored.
config.view_component.preview_controller = "PreviewController" 

# This is the correct way to configure the controller.
config.lookbook.preview_controller = 'PreviewController'

And your custom controller should then be located in app/controllers/preview_controller.rb 😌

[allmarkedup]

@rmontgomery429 fantastic! Glad it works for you now and sorry for the frustration. When I have a chance I'll try to add an example to the docs using your code above as I'm sure others would find it useful :-)