crowdin / ota-client-js Goto Github PK
View Code? Open in Web Editor NEWJavaScript client library for Crowdin Over-The-Air Content Delivery
Home Page: https://crowdin.github.io/ota-client-js
License: MIT License
JavaScript client library for Crowdin Over-The-Air Content Delivery
Home Page: https://crowdin.github.io/ota-client-js
License: MIT License
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;
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?
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.
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:
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.
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.
Привет,
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.
С уважением,
Лиляна
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.