crowdin / ota-client-js Goto Github PK

Привет,

We have an Angular application and а Crowdin project we want to use for translations ( Project ID: 486605). We use JSON files and have translations in 3 languages: Finnish, French and Swedish. Our initial setup is with CDN integration. We have created a distribution pointing to our source translations in English (en.ts). We have uploaded our current translations and made distribution release and build the project.
We installed the ota-client library and we got empty strings for our translation. Here is detailed description:

Case 1: When file setting for the source content file en.ts was missing leading slash: development/%two_letters_code%.ts:
ota-client Library Behaviour: CDN files were created in 3 different folders for the 3 locales rather then in the development folder, e.g.
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/fr/development/fr.ts?timestamp=1643978136
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/fi/development/fi.ts?timestamp=1643978136
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/sv-SE/development/sv.ts?timestamp=1643978136

As a result I could not get any strings from the ota-client calling methods getStrings() which returned the 3 locales with empty content and getLanguageTranslations("fi") was returning an error. The distribution manifest file was:
"files": [
"development/%two_letters_code%.ts"
],

Case 2: Support suggested using File setting path: development/en.ts. Again 3 different folders were created but all files were named en.ts, e.g.:
https://distributions.crowdin.net/<distribution_hash>/content/fr/development/en.ts?timestamp=<some_timestamp>
ota-client Library Behaviour*: The distribution manifest file was:
"files": [
"development/en.ts"
],
Method client.getStrings() still returned empty objects for the 3 locales. Method client..getLanguageTranslations('fr') returned values for the specified locale.
This was not optimal because we need also to download the files and having them all named correctly.

Case 3: Then I decided that path might be expected with starting slash. Changing path to /development/%two_letters_code%.ts generated expected file structure in CDN - now all 3 files are in one folder:
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/development/fi.ts?timestamp=1644326939
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/development/fr.ts?timestamp=1644326939
https://distributions.crowdin.net/8bd5fd98d64a79388c828a8g2b9/content/development/sv.ts?timestamp=1644326939
ota-client Library Behaviour*: Method client.getStrings() still returns empty objects for the 3 locales. Method client..getLanguageTranslations('fr') returns values for the specified locale.

Expected behaviour: Method getStrings() returns values for the 3 locales.
We also expected to get error or some insight that File Setting path was wrong.
Your response is highly appreciated.

С уважением,
Лиляна

listLanguages() returns the list of languages as: ['en-GB', 'en-US', 'de', 'es', 'pt']

Calling getTranslations() throws an error at replaceLanguagePlaceholders function.

This is due to the replaceLanguagePlaceholders searching the language only by it twoLetterCode, returning undefined for the en-GB and en-US. This function should also search by the locale value.

Using getFileTranslations I can download all languages, but for the English language, I had to use the 'en' code and not being able to get the different English translations.

I'm trying to use the wiki article for using the Crowdin ota-client to work with i18next using React with Typescript in my project. I notice that the read method never gets invoked.

I was originally using react-i18next with local json files but would need to use the Crowdin ota-client with i18next to do the translations on the fly.

Please see code snippet below. Any help will be greatly appreciated.

Thanks

React ^17.0.2
i18next ^22.0.5
@crowdin/ota-client ^0.7.0
i18next-browser-languagedetector ^7.0.1

-------- File 18n.ts (invoked from index.tsx) ------------

import i18next, { BackendModule } from 'i18next';
import otaClient from '@crowdin/ota-client';

import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

//Import all translation files
import COMMON_EN from 'locale/en/common.json';
import FPNS_EN from 'locale/en/fpns.json';
import MH_EN from 'locale/en/mh.json';
import COMMON_DE from 'locale/de/common.json';
import FPNS_DE from 'locale/de/fpns.json';
import MH_DE from 'locale/de/mh.json';

const crowdin_hash = 'xxxxxxxxxxxxxxxx';

const resources = {
  en: {
    common: COMMON_EN,
    fpns: FPNS_EN,
    mh: MH_EN
  },
  de: {
    common: COMMON_DE,
    fpns: FPNS_DE,
    mh: MH_DE
  }
};

const backendModule: BackendModule = {
  type: 'backend',
  init: () => {
    console.log('Init');
  },
  read(language: string, namespace: string, callback: any) {
    const client = new otaClient(crowdin_hash);
    console.log('Calling Backend module::read method');
    client
      .getStringsByLocale(undefined, language)
      .then((value) => callback(null, value))
      .catch((e) => callback(e, null));
  }
};

i18next
  .use(backendModule)
  //.use(initReactI18next)
  .use(LanguageDetector)
  .init(
    {
      //resources,
      resources: {},
      fallbackLng: 'en',
      interpolation: {
        escapeValue: false
      }
    },
    () => {
      console.log('Trying to invoke i18next');
      i18next.t('abc');
      // const outputElement = document.getElementById('output') as HTMLInputElement;
      // outputElement.innerHTML = i18next.t('key');
    }
  );

export default i18next;

crowdin.yml source file require to have Translation value and it requires a placeholder.
When working with custom languages as language info is stored locally in src/internal/util/exportPattern.ts it is not able to find any language that matches the one needed for building the route and throws Unsupported language code error

crowdin.yml:

"project_id_env" : "CROWDIN_PROJECT_ID"
"api_token_env" : "CROWDIN_PERSONAL_TOKEN"
"base_path" : "."
"base_url" : "https://api.crowdin.com"

#
# Choose file structure in Crowdin
# e.g. true or false
#
"preserve_hierarchy": true

#
# Files configuration
#
files: [
 {
  "source" : "/src/translations/screens.json",
  "dest" : "/screens.json",
  "translation" : "/%locale%/screens.json",
  "update_option": "update_as_unapproved",
 },
  {"source" : "/src/translations/general.json",
    "dest" : "/general.json",
    "translation" : "/%locale%/general.json",
    "update_option": "update_as_unapproved"
  }
]`

manifest.json

{"files":["\/%locale%\/general.json","\/%locale%\/screens.json"],
"languages":["ca","en","it","en-ls","es-ls","es-ES"],
"language_mapping":[],
"timestamp":1619601797}

"en-ls","es-ls" languages both throws that error

Is there any possibility of retrieving custom languages info to avoid custom patches and workarounds?

Hi, I used React -native- SDK before and I ran into a bug that I couldn't get the Indonesian and Hebrew translations.
crowdin/react-native-sdk#15
So I tried to use this library, when I called client.listlanguages (), I got the result is:

["af", "sq", "ar", "bn", "bg", "ca", "zh-CN", "zh-TW", "hr", "cs", "da", "nl", "et", "fi", "fr", "de", "el", "he", "hu", "id", "it", "ja", "km", "ko", "lv", "lt", "mk", "ms", "fa", "pl", "pt-PT", "pt-BR", "ro", "ru", "sr", "sk", "sl", "es-ES", "es-EM", "sv-SE", "th", "tr", "uk", "ur-PK", "vi"]

the list without these two languages('id' and 'he') was in it, I think this is the reason why I couldn't get it through React -native- SDK before, please help me locate why they don't exist, they do exist in crowdin project.

Hey guys! Great work. Olga shared the SDK and I'm trying to test it out.

I'm very interested to pull the files from our backend so we can hydrate our frontend with the initial translations. Is there any way your SDK could work for Node?

I got this:

Recently with #27 I realized that, by hardcoding the response from the Crowdin languages API endpoint, this might quickly become outdated and need an update through a PR. In order to fix that, I've thought of two possible solutions:

• Have the languages in a json file that gets updated daily through a GitHub action
• Add a language cache that stores the languages after they're needed and is null on startup. Since this endpoint doesn't require an API key, we can just make an extra API call once and it should be accurate throughout the rest of the session, since this list doesn't update often and projects also take a long time to add new languages.

Please let me know which one you'd prefer and I'd be willing to open a PR about this, although the solutions I've been experimenting with require a big refactor.

ERROR
Cannot read properties of undefined (reading 'create')
TypeError: Cannot read properties of undefined (reading 'create')
    at new AxiosHttpClient (http://localhost:3000/static/js/bundle.js:632:34)
    at new OtaClient (http://localhost:3000/static/js/bundle.js:395:94)
    at dynamicActivate (http://localhost:3000/static/js/bundle.js:242:18)
    at http://localhost:3000/static/js/bundle.js:251:5
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:28309:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:29802:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:29774:13)
    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:29764:11)
    at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:29754:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:31639:7)
ERROR
Cannot read properties of undefined (reading 'create')
TypeError: Cannot read properties of undefined (reading 'create')
    at new AxiosHttpClient (http://localhost:3000/static/js/bundle.js:632:34)
    at new OtaClient (http://localhost:3000/static/js/bundle.js:395:94)
    at dynamicActivate (http://localhost:3000/static/js/bundle.js:242:18)
    at http://localhost:3000/static/js/bundle.js:251:5
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:28309:30)
    at invokePassiveEffectMountInDEV (http://localhost:3000/static/js/bundle.js:29998:17)
    at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:31897:15)
    at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:31880:11)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:31653:9)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:31591:18)

We were following the basic tutorial to test Lingui and got this error.

By pinning the version of the Ota-client to 0.7 everything works properly.

export async function dynamicActivate(locale) {
  const client = new otaClient(crowdinDistributionKey)
  // error is here ^
  const messages = await client.getStringsByLocale(locale)

  i18n.load(locale, messages)
  i18n.activate(locale)
}

Perhaps Axios could be updated from the version in the library?
Or maybe I did something wrong?