Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Detect locale

See original GitHub issue

User’s locale should be detected automatically if possible, but also allow customization. The approach should work both on server and in browser and it should follow guidelines for multilingual sites

Proposal

Websites which serve different content for each locale (e.g. Wikipedia) will always use just URL to detect the current locale.

Locale-adaptive apps (i.e. same content, but UI is internationalized, like GitHub, Twitter, Facebook) should detect locale from following sources:

On server, detect locale from:

URL (subdomain en.example.com, path example.com/en/ or search param example.com?l=en). This is useful even for locale-adaptive apps for search engines, i.e. user’s will always use example.com and customize locale through user’s profile or cookies, but search engine will be advised to follow example.com/?l=en to crawl site in specific locale.
Cookie (for user’s overrides)
HTTP Accept-Language header

In browser, detect locale from:

<html lang> attribute (if set by server).

This should be the only option for server-side rendered pages. For client-side rendered pages, there are other options:

URL (same motivation as above)
Cookie (for user’s overrides)
navigator.language

Implementation

Each detector <please insert better name> should be just a plain function returning a locale or null (if not found):

type Detector<Config extends {}> = (config: Config) => string | null

// just an example with pseudocode
function detectFromCookie({ name, expiration }) {
  if (typeof window !== "undefined") {
    // server side code
    if (has cookie) {
      return req.cookie[name]
    }
  } else {
    // client-side code
  }
}

Then we can chain them together to get the first match:

const locale = detect(
  detectFromURL(),
  detectFromCookie({ cookieName: "locale" }),
  detectFromRequest()
)

Resources

[Guide - Detecting active locale in LinguiJS] - I’ve started writing draft of guide, it’s available in nxt/detect-locale branch. Feel free to use it or throw it away, I just needed to figure out a possible approach.
fluent-langneg - once we have a list of requested locales, we might compare it with list of available locales to get the best match. Probably only useful when detecting locale from navigator.language or Accent-Language header.
i18next/language-detector includes several strategies to detect locale. The implementation seems to be tighly coupled to i18next, but it could definitely serve as an inspiration.

Checklist

Create a new package @lingui/detect-locale or find existing solution in JS ecosystem.
Document how to detect locale in different kind of apps (static vs locale-adaptive, SSR vs CSR)

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:9 (9 by maintainers)

Top GitHub Comments

1reaction

semoalcommented, Oct 26, 2020

Assign this to me Tomáš, i’ve already started working on it 👍🏻

1reaction

danielkczcommented, Oct 14, 2019

We have been using https://github.com/fabulator/locales-detector. It’s nice because it can be configured in various ways. Especially transformers are super useful. I am not so sure there is a need for a dedicated Lingui tool for detection. I mean each app has different needs. What about recommending one instead?

  const resolver = new LocaleResolver(
    [new DETECTORS.NavigatorDetector()],
    [new TRANSFORMERS.LanguageOnlyTransformer()],
  )
  const languages = resolver.getLocales()