Code Style

• package.json
• Translations
  • Translation files structure
  • Converting a translation key to a string
    • Typescript
    • Vue

package.json

Formatting a package.json file:

pnpx prettier-package-json --write package.json

 Linting a package.json file:

pnpx npm-package-json-lint .

Translations

All language readable strings must be located in a translation file that can be processed by weblate.

All the localization related to Cristal can be found in Weblate's Cristal category.

When a module has translation files for the first time, it will automatically be added to the Cristal category.

Only English (en) translation files should be manipulated manually. The rest of the languages should only be updated through Weblate.

Translation files structure

Translation files are located in <module_root>/translation-<lang>.json.

File structure example:

{
  "translation.key": "Localized string"
}

Then, a typescript file src/translations.ts must be added, following the pattern below:

import en from "../langs/translation-en.json";
import fr from "../langs/translation-fr.json";
// Repeat the import for each existing language.

const translations: Record<string, Record<string, string>> = {
  en,
  fr,
// Repeat for each existing language.
};

export default translations;

Converting a translation key to a string

Typescript

import { useI18n } from "vue-i18n";
import messages from "./translations";

// Translations loading.
const { t, mergeLocaleMessage } = useI18n();
for (const messagesKey in messages) {
  mergeLocaleMessage(messagesKey, messages[messagesKey]);
}

// Translations use

t("my.key")

Vue

// In the template section:

import { useI18n } from "vue-i18n";
import messages from "../translations";

const { t } = useI18n({
  messages,
});

// In the template section:
// To bind the translated value to a component prop
<my-component :label="t('my.key')"></my-component>
// To add the translated value in the text
{{ t('my.key') }}