Add client-side translation facilities, localize Bike search components

[jmromer]

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

After

Closes #963

[sethherr]

Cool!

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