Resolvers personalizados de idioma

Max PrilutskiyCEO e cofundadorAtualizado em: há 7 meses · 3 min de leitura

Alfa

O Lingo.dev Compiler está em alfa. É instável, não é recomendado para produção e as APIs podem mudar entre versões.

Os resolvers personalizados de idioma permitem-lhe substituir a forma como o Lingo.dev Compiler deteta e persiste o idioma do utilizador. Por predefinição, o Compiler usa persistência baseada em cookies, configurada através da opção localePersistence. Se precisar de mais controlo — encaminhamento por URL, deteção por cabeçalhos, localStorage ou qualquer lógica personalizada — crie ficheiros de resolver no diretório .lingo/.

Ficheiros de resolver#

O Compiler procura dois ficheiros opcionais:

FicheiroAmbienteExportações
.lingo/locale-resolver.server.tsNo servidor (SSR, RSC)resolveLocale(request: Request): string
.lingo/locale-resolver.client.tsNo cliente (navegador)resolveLocale(): string e persistLocale(locale: string): void

Se existir um ficheiro de resolver, o Compiler usa-o em vez do comportamento predefinido baseado em cookies. Se existir apenas um ficheiro, o outro ambiente recorre ao comportamento predefinido.

Resolver no servidor#

O resolver do servidor recebe o objeto Request da pedido recebido e devolve uma string com o código de idioma:

ts
// .lingo/locale-resolver.server.ts

export function resolveLocale(request: Request): string {
  const url = new URL(request.url);

  // Check URL path prefix: /es/about -> "es"
  const pathLocale = url.pathname.split("/")[1];
  const supportedLocales = ["en", "es", "de", "fr", "ja"];

  if (supportedLocales.includes(pathLocale)) {
    return pathLocale;
  }

  // Fall back to Accept-Language header
  const acceptLanguage = request.headers.get("Accept-Language");
  if (acceptLanguage) {
    const preferred = acceptLanguage.split(",")[0].split("-")[0];
    if (supportedLocales.includes(preferred)) {
      return preferred;
    }
  }

  return "en";
}

Resolver no cliente#

O resolver do cliente tem duas funções: uma para ler o idioma atual e outra para persistir uma alteração de idioma:

ts
// .lingo/locale-resolver.client.ts

export function resolveLocale(): string {
  // Check URL path prefix
  const pathLocale = window.location.pathname.split("/")[1];
  const supportedLocales = ["en", "es", "de", "fr", "ja"];

  if (supportedLocales.includes(pathLocale)) {
    return pathLocale;
  }

  // Fall back to localStorage
  const stored = localStorage.getItem("locale");
  if (stored && supportedLocales.includes(stored)) {
    return stored;
  }

  return "en";
}

export function persistLocale(locale: string): void {
  localStorage.setItem("locale", locale);

  // Navigate to the locale-prefixed URL
  const path = window.location.pathname.replace(/^\/[a-z]{2}/, "");
  window.location.href = `/${locale}${path}`;
}

Padrões comuns de resolver#

Encaminhamento por prefixo no caminho do URL (/es/about, /de/pricing):

ts
// .lingo/locale-resolver.server.ts
export function resolveLocale(request: Request): string {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1];
  const supported = ["en", "es", "de", "fr"];
  return supported.includes(locale) ? locale : "en";
}
ts
// .lingo/locale-resolver.client.ts
export function resolveLocale(): string {
  const locale = window.location.pathname.split("/")[1];
  const supported = ["en", "es", "de", "fr"];
  return supported.includes(locale) ? locale : "en";
}

export function persistLocale(locale: string): void {
  const path = window.location.pathname.replace(/^\/[a-z]{2}/, "");
  window.location.href = `/${locale}${path}`;
}

A função resolveLocale tem de devolver um código de idioma que corresponda a um dos targetLocales ou sourceLocale configurados. Se devolver um código de idioma não suportado, o Compiler recorre ao idioma de origem.

Próximos passos#