Translations

To use I18n translations, add a sidecar YAML file:

# app/components/example_component.yml
en:
  hello: "Hello world!"

Translations can also be defined in per-locale files:

# app/components/example_component.en.yml
en:
  hello: "Hello world!"

# app/components/example_component.fr.yml
fr:
  hello: "Bonjour le monde !"

These files can be automatically generated by the component generator when the --locale flag is specified.

Access component-local translations with a leading dot:

<%# app/components/example_component.html.erb %>
<%= t(".hello") %>

Global Rails translations are available as well:

<%# app/components/example_component.html.erb %>
<%= t("my.global.translation") %>

Access global translations via helpers or I18n:

<%# app/components/example_component.html.erb %>
<%= helpers.t("hello") %>
<%= I18n.t("hello") %>

Inheritance

Translations are inherited from the component’s parent class. Given a parent component with a translation file:

# app/components/parent_component.yml
en:
  hello: "Hello world!"
  greeting: "Cheers!"

The translation is available in subclasses of ParentComponent, allowing translations to be used as-is or overridden by the subclass:

# app/components/child_component.yml
en:
  greeting: "Howdy!"

# app/components/child_component.rb
class ChildComponent < ParentComponent
  def call
    t(".hello") # => "Hello world!" (inherited)
    t(".greeting") # => "Howdy!"    (overridden)
  end
end