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
Member

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 Oct 20, 2019
@jmromer jmromer requested a review from sethherr Oct 21, 2019
README.markdown Outdated Show resolved Hide resolved
Copy link
Member

sethherr left a comment

Cool!

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

@jmromer jmromer force-pushed the react-i18n branch from bd770f5 to 0417040 Oct 21, 2019
jmromer 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 force-pushed the react-i18n branch from 0417040 to 536b777 Oct 21, 2019
@jmromer jmromer merged commit 10e929e into master Oct 21, 2019
2 checks passed
2 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: upload-coverage Your tests passed on CircleCI!
Details
@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
Projects
None yet
2 participants
You can’t perform that action at this time.