Localization service integration

[kazupon]

Spec

to support continuous translation in translation service, vue-cli-plugin-i18n provides the following commands:

Commands:

vue-cli-service i18n:set

set the main locale message to localization service

vue-cli-service i18n:update

sync the main locale messages to localization service

vue-cli-service i18n:status

show the status of the localization service.

• --progress: show the current translation progress at localization service
• --locales: show the current translation languages

vue-cli-service i18n:pull

pull the locale messages on localization service. default all locales on localization service.

• --locale: pull the target locale

Configrations

• VUE_APP_I18N_LOCALIZATION_ID: API user id of localization service
• VUE_APP_I18N_LOCALIZATION_TOKEN: API token of localization service

[jgribonvald]

What do you think about adding this function into i18n.js

function checkLang(availableLanguages) {
 // defined from https://gist.github.com/ksol/62b489572944ca70b4ba
  // These window.navigator contain language information
  // 1. languages -> Array of preferred languages (eg ["en-US", "zh-CN", "ja-JP"]) Firefox^32, Chrome^32
  // 2. language  -> Preferred language as String (eg "en-US") Firefox^5, IE^11, Safari,
  //                 Chrome sends Browser UI language
  // 3. browserLanguage -> UI Language of IE
  // 4. userLanguage    -> Language of Windows Regional Options
  // 5. systemLanguage  -> UI Language of Windows
  let browserLanguagePropertyKeys = [
    "languages",
    "language",
    "browserLanguage",
    "userLanguage",
    "systemLanguage"
  ];

  let allLangs = [];
  browserLanguagePropertyKeys.forEach(a => allLangs.push(navigator[a]));
  allLangs = [].concat
    .apply([], allLangs) // merge all values into flattened array
    .filter(v => v) //Remove undefined values
    .map(v => v.substring(0, 2)) //Shorten strings to use two chars (en-US -> en)
    .filter((v, i, a) => a.indexOf(v) === i); // Returns unique values
  let detectedLocale = allLangs.find(x => availableLanguages.includes(x)); //Returns first language matched in available languages

  return detectedLocale || "en"; //If no locale is detected, fallback to 'en'
}

export default new VueI18n({
  locale: checkLang(["fr", "en"]),
  fallbackLocale: 'en',
  messages: loadLocaleMessages()
})

this can be improved, but it permit to auto detect the browser language

[kazupon]

Thank you for your proposal!

I assume that will plan to integrate with using missing handler and translation service (e.g. locize).

I think that your proposal does not necessarily match the use cases of all applications. 🤔

[jgribonvald]

yes but providing the function can help for those who wants to use the browser language detection.