· glotstack.ai

Idioma

Começar com React

Instale o glotstack com

yarn

yarn install glotstack

Adicione o provedor glotstack à sua aplicação React

import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // fetch() a partir de diretórios estáticos para limitar o tamanho dos bundles. As traduções devem ser guardadas num caminho estático.
  return fetch(`/public/translations/${locale}.json`)
}
// // OU implemente requires inline para traduções internas -- funciona sem suporte a importação dinâmica
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}

Quando usar fetch ou import?

fetch()

obtém ficheiros de diretórios estáticos que pode hospedar onde quiser, como numa CDN - ajuda a manter os bundles pequenos se tiver limite de tamanho, como no Cloudflare Workers.

fetch()

é quase sempre melhor, exceto se o ambiente não suportar importação dinâmica; nesse caso, o método

require()

é a melhor opção, com um pouco mais de código extra. Para aplicações pequenas ou react-native, recomendamos usar

require()

para compilar os recursos nos bundles hospedados.

useGlotstack()

dentro dos seus componentes

import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}

Crie o seu ficheiro fonte de traduções

Pode usar a sua língua nativa, mas o Glotstack usa por defeito o

en-US.json

. Recomendamos colocá-lo num local como

./translations/en-US.json

. Se se preocupar com o tamanho dos bundles, pode reduzi-los dividindo e utilizando ficheiros públicos como

./public/translations/en-US.json

Novo

Não gosta de editar JSON?

Experimente escrever o seu ficheiro de tradução em YAML (nós usamos!)i18n com YAML

Obter traduções

Opção 1

: Crie

.glotstack.json

no seu projeto

Pode usar a chave API fornecida na configuração. Pode realizar 10 traduções antes de precisar de se registrar.

Execute

get-translations

yarn glotstack get-translations

Em breve! Traduções ao vivo via

yarn glotstack live-translate

Opção 2:

Utilize o CLI para obter as suas traduções

export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

Usar o terminal é permitido! Mas as nossas opções podem mudar frequentemente e será mais fácil para nós adicionar um codemod à sua configuração do que atualizar o comando guardado.

Características Voltar

Glotstack é um fluxo de trabalho de localização focado em programadores para React: gerencie traduções em YAML/JSON, mantenha os locais sincronizados e lance novas línguas mais rápido com ferramentas assistidas por IA.