dannyconnell / quasalang Goto Github PK

"buttHair" in russian is more like "жопные волосы", definetly not "стыковые волосы" 😉

Found a nice way to populate the translations quickly using Google Translate via Google Sheets.

Language codes can be found here.
https://cloud.google.com/translate/docs/languages

The formula entered into a new Locale column you want to add to your translations sheet.

=GOOGLETRANSLATE(cell with text, “source language”, “target language”)
such as
=GOOGLETRANSLATE($B2,"en","fr")

Then you can drag the formula down all the cells.

Then you can File | Download | CSV and replace the one in your project file and generate as normal.

Hi Danny,

Trying to use with Arabic, and the Quasar language switcher does not seem to be working.

Wanting to auto detect locale and use if available, but if set by user (stored in LocalStorage) then to use one that is set if possible with a fallback. I have the LocalStorage part working, but the RTL languages like Arabic are still be on the left align rather than rtl.

I have build config with rtl=true in the quasar.conf.
It's like its not loading the language pack from Quasar I'm sure i'm doing something wrong just thought I'de ask if you have an example of this kind of language switcher for a recent Quasar version?

Experiencing some teething pains with eslint.
Is there some way your cli tool could auto fix linter issues after generating the files if eslint is present?
Or perhaps some kind of eslint.md documentation in the repo may be worthwhile.
Sorry if this is common knowledge, haven't touched front-end in quite a while my self.

[webpack-dev-server] ERROR in src/i18n/de/index.js:8:2
eol-last: Newline required at end of file but not found.
    6 | 	goodbye: `Auf Wiedersehen`,
    7 | 	thanks: `Danke`,
  > 8 | }
      |  ^

index.js?a29e:558 [webpack-dev-server] ERROR in src/i18n/index.js:10:2
quote-props: Unnecessarily quoted property 'de' found.
     8 | 	'en-US': enUS, // English
     9 | 	'fr': fr, // French
  > 10 | 	'de': de, // German
       | 	^^^^^^^^
    11 | }

indent: Expected indentation of 2 spaces but found 1 tab.
     6 |
     7 | export default { 
  >  8 | 	'en-US': enUS, // English
       | ^
     9 | 	'fr': fr, // French
    10 | 	'de': de, // German
    11 | }

Found a few work-arounds which might be okay.

1. Turning off the rules in the .eslintrc.js file.
Or disable eslint completely, which is not recommend as linters serve a great purpose, enforcing a consistent code styling which helps immensely when diffing changes in source control and when reading the code.

    // Ignore some "errors" that are a pain.
    // eol-last: Newline required at end of file but not found.
    'eol-last': 'off',
    // comma-dangle: Unexpected trailing comma.
    'comma-dangle': 'off',
    // quote-props: Unnecessarily quoted property '...' found.
    'quote-props': 'off',
    // indent: Expected indentation of 2 spaces but found 1 tab.
    'indent': 'off',

2. Fixing in Webstorm/Editor with a Beautify or other fix up command.
In Webstorm there is a "Fix ESLint Problems" on the right click menu.

3. Fixing with npm run lint -- --fix
npm run lint -- --fix

Or perhaps

npx eslint --ext .js ./src/i18n/ --fix

Well this one seems good, if eslint is present/enabled perhaps quasalang cli could run it or a variant of the command on the i18n directory after generating the files?

In my package.json generated by Quasar CLI for a new project it looks something like this.

  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./"
  },

4. Configure webPackDevServer to auto fix eslint
In quasar.conf.js you can add to the eslint configuration to specify fix: true

I'm using Type Script but it looks something like this.

    supportTS: {
      tsCheckerConfig: {
        eslint: {
          enabled: true,
          files: './src/**/*.{ts,tsx,js,jsx,vue}',
          options: {
            fix: true
          }
        }
      }
    },

I think I had to stop and restart quasar dev command to re-load this change.
Turning on auto fix seems to be a good option for me.

https://webpack.js.org/plugins/eslint-webpack-plugin/#fix

Hi Danny ... I watched your video and this is a great addition to the Quasar community. Well done!

I've tackled this problem in a slightly different way so I though I'd share what I did and learned in case its of interest to your future roadmap.

Ideas

I've created an app that auto translates JSON files using a cloud translation service. My JSON object translation engine can specify which key values are translated. String values can contain i18n fields or HTML tags that are not translated . Instead of comments to break up sections I just use a nested JSON object for each feature area. I find that nested arrays can be handy for creating things like static QSelect options or QTabs lists. I also merge in a separate language selector list where language names have been previously auto translated with native language names untranslated. So far the translation quality has been ok (according to my reviewers) but my source JSON file can contain rules that override translation for specific languages if I need to. A special key defines an array of output locales so adding a new language is very easy to do. The Quasar app I originally wrote for this takes about 25 seconds to generate its 50 language translations.

One issue I've not yet resolved is that I found the Google Translation API can randomly return different translations each time you run it so eventually I'll attempt to fix this by only translating keys that have changed by caching past results. The downside of this is that automated translation works best when it has more context so smaller translation requests may not be as accurate.

Obviously there are pros and cons of our different approaches. Your approach of using a CSV as the primary source is nice and simple to work with (KISS) and you can see the translations side by side which is likely much simpler for translators to assist you and you're in full control of the process.

Attribution

One gotcha I only recently discovered is that Google Translate requires attribution in your web site or app. Ouch! So I'm planning to switch to using Azure as they only recommend attribution and they have better support for locales like French (France vs Canada), Portuguese (Portugal vs Brazil), Cantonese and Kurdish (Central vs Northern).

My propose is this. When one make app use something like this

$t(':::This is my key')
$t('thi-is-my-key:::Thi is my key text')

The idea is that when you create your app you do not think about saving keys in CSV you just place ::: in your text. Later you run command

quasalang parse

This will parse all documents and look for /\$t\(("|')([.]*)?:::([.]*)("|')\)/. Something like this nod exactly. But it will look all $t function with ::: in a string. When it finds :::And then text it created key from text and-then-text and save in CSV key and english translation, and content ot $t in the code change to key.

Before parse $t(':::This is my key'), after parse $t('this-is-my-key') and this-is-my-key = This is my key in CSV.
Before parse $t('short-key:::Very long text'), after parse $t('short-key') and short-key = Very long text in CSV.

I did that on a number of projects already and I'll be happy to share is approved.

Error: ENOENT: no such file or directory, open '/app/node_modules/quasalang/node_modules/figlet/fonts/big.flf'
The file name is Big.flf

I'm running the project on a file system that is case sensitive.