Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add client-side translation facilities, localize Bike search components #1353

Merged
merged 7 commits into from Oct 21, 2019

Conversation

jmromer
Copy link
Contributor

@jmromer jmromer commented Oct 20, 2019

Adds i18n-js ruby gem and npm package to generate client-side translations from the Rails translation file.

Usage

  1. Initialize a t() translation helper function with the appropriate keyspace for the given module. For example, for ExternalRegistrySearchResult, we can either invoke I18n.t with a full scope or use the following:
// app/javascript/packs/external_registry_search/components/ExternalRegistrySearchResult.js L9 (5364dea1)

const t = BikeIndex.translator("bikes_search");

[source]

// app/javascript/packs/external_registry_search/components/ExternalRegistrySearchResult.js L18-24 (5364dea1)

<strong>
  {
    bike.manufacturer_name === "unknown_brand"
      ? t(bike.manufacturer_name)
      : _.titleize(bike.manufacturer_name)
  }
</strong> {_.titleize(bike.frame_model)}

[source]

-# app/views/layouts/application.html.haml L10-16 (37db61e1)

= javascript_include_tag 'application_revised'
= javascript_include_tag "i18n"
= javascript_include_tag "translations", skip_pipeline: true
:javascript
  window.BikeIndex.translator = (keyspace) => {
    return (key, args={}) => I18n.t(`javascript.${keyspace}.${key}`, args);
  }

[source]

by convention, client-side translations are nested within the javascript key in translation files.

Configuration

Client-side translations are generated in an object loaded from public/javascripts/translation.js and populated with entries from translation files (only those found within the javascript key space):

# config/i18n-js.yml L1-3 (f03a54ff)

translations:
- file: "public/javascripts/translations.js"
  only: "*.javascript.*"

[source]

# config/locales/en.yml L3213-3223 (a57b8087)

javascript:
  bikes_search:
    abandoned: Abandoned
    color: Color
    location: Location
    registry: Registry
    registry_id: Registry ID
    serial: Serial
    stolen: Stolen
    unknown: Unknown
    unknown_brand: Unknown Brand

[source]

Generation

The JS translation file can be generated manually with bin/rake i18n:js:export.

This patch adds JS translation file generation as a step to bin/rake prepare_translations:

# lib/tasks/rake_tasks.rake L21-30 (2d51de17)

desc "Prepare translations for committing to master"
task prepare_translations: :environment do
  # . . .
  # Export JS translations to public/javascripts/translations.js
  I18n::JS.export
end

[source]

Before

Screen Shot 2019-10-20 at 2 28 20 PM

After

Screen Shot 2019-10-20 at 3 21 34 PM

Closes #963

@jmromer jmromer self-assigned this Oct 20, 2019
@jmromer jmromer force-pushed the react-i18n branch 2 times, most recently from 9613b46 to bd770f5 Compare Oct 21, 2019
@jmromer jmromer requested a review from sethherr Oct 21, 2019
README.markdown Outdated Show resolved Hide resolved
Copy link
Member

@sethherr sethherr left a comment

Cool!

I think it would be nice to separate out the readme documentation, but this is great!

Jake Romer added 7 commits Oct 21, 2019
- Namespace JS translations within .javascript.
- Inlcude i18n.js in assets to compile
- Provide a `translator` builder to generate a `t` helper function with the
  provided keyspace set in the scope keypath.
@jmromer jmromer merged commit 10e929e into master Oct 21, 2019
2 checks passed
@jmromer jmromer deleted the react-i18n branch Oct 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants