diff --git a/docs/dev/how-to-translate.md b/docs/dev/how-to-translate.md index 77cbe3f4..b72b045a 100644 --- a/docs/dev/how-to-translate.md +++ b/docs/dev/how-to-translate.md @@ -1,107 +1,76 @@ # How to translate WorkAdventure -## How the translation files work - -In the `front/translations` folder, all json files of the form `[namespace].[language code].json` are interpreted to create languages by the language code in the file name. - -The only mandatory file (the entry point) is the `index.[language code].json` which must contain the properties `language`, `country` and `default` so that the language can be taken into account. - -Example: -```json -{ - "language": "English", # Language that will be used - "country": "United States", # Country specification (e.g. British English and American English are not the same thing) - "default": true # In some cases WorkAdventure only knows the language, not the country language of the browser. In this case it takes the language with the default property at true. -} -``` - -It does not matter where the file is placed in this folder. However, we have set up the following architecture in order to have a simple reading: - -- translations/ - - [language code]/ - - [namepace].[language code].json - -Example: -- translations/ - - en-US/ - - index.en-US.json - - main-menu.en-US.json - - chat.en-US.json - - fr-FR/ - - index.fr-FR.json - - main-menu.fr-FR.json - - chat.fr-FR.json - -If a key isn't found then it will be searched in the fallback language and if it isn't found then the key will be returned. By default the fallback language is `en-US` but you can set another one with the `FALLBACK_LANGUAGE` environment variable. +We use the [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) package to handle the translation. ## Add a new language It is very easy to add a new language! -First, in the translations folder create a new folder with the language code as name (the language code according to [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646)). +First, in the `front/src/i18n` folder create a new folder with the language code as name (the language code according to [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646)). -In the previously created folder, add a file named as index.[language code].json with the following content: +In the previously created folder, add a file named index.ts with the following content containing your language information (french from France in this example): -```json -{ - "language": "Language Name", - "country": "Country Name", - "default": true -} +```ts +import type { Translation } from "../i18n-types"; + +const fr_FR: Translation = { + ...en_US, + language: "Français", + country: "France", +}; + +export default fr_FR; ``` -See the section above (*How the translation files work*) for more information on how this works. - -BE CAREFUL if your language has variants by country don't forget to give attention to the default language used. If several languages are default the first one in the list will be used. - ## Add a new key ### Add a simple key + The keys are searched by a path through the properties of the sub-objects and it is therefore advisable to write your translation as a JavaScript object. -Please use [kebab-case](https://en.wikipedia.org/wiki/Letter_case#Kebab_case) to name your keys! +Please use kamelcase to name your keys! Example: -```json +```ts { - "messages": { - "coffe-machine":{ - "start": "Coffe machine has been started!" - } + messages: { + coffeMachine: { + start: "Coffe machine has been started!"; } + } } ``` -In the code you can translate using `translator.translate`, or the shortcut alias: `_`. +In the code you can translate using `$LL`: -```js -import { _ } from "../../Translator/Translator"; +```ts +import LL from "../../i18n/i18n-svelte"; -console.log(_('messages.coffe-machine.start')); +console.log($LL.messages.coffeMachine.start()); ``` ### Add a key with parameters You can also use parameters to make the translation dynamic. -Use the tag {{ [parameter name] }} to apply your parameters in the translations +Use the tag { [parameter name] } to apply your parameters in the translations Example: -```json +```ts { - "messages": { - "coffe-machine":{ - "player-start": "{{ playerName }} started the coffee machine!" - } + messages: { + coffeMachine: { + playerStart: "{ playerName } started the coffee machine!"; } + } } ``` In the code you can use it like this: -```js -_('messages.coffe-machine.player-start', { - playerName: "John" +```ts +$LL.messages.coffeMachine.playerStart.start({ + playerName: "John", }); ``` diff --git a/front/.typesafe-i18n.json b/front/.typesafe-i18n.json new file mode 100644 index 00000000..0cecbe32 --- /dev/null +++ b/front/.typesafe-i18n.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://unpkg.com/typesafe-i18n@2.59.0/schema/typesafe-i18n.json", + "baseLocale": "en-US", + "adapter": "svelte" +} \ No newline at end of file diff --git a/front/package.json b/front/package.json index 81da765c..100ae59c 100644 --- a/front/package.json +++ b/front/package.json @@ -21,7 +21,6 @@ "html-webpack-plugin": "^5.3.1", "jasmine": "^3.5.0", "lint-staged": "^11.0.0", - "merge-jsons-webpack-plugin": "^2.0.1", "mini-css-extract-plugin": "^1.6.0", "node-polyfill-webpack-plugin": "^1.1.2", "npm-run-all": "^4.1.5", @@ -65,11 +64,12 @@ "socket.io-client": "^2.3.0", "standardized-audio-context": "^25.2.4", "ts-proto": "^1.96.0", + "typesafe-i18n": "^2.59.0", "uuidv4": "^6.2.10", "zod": "^3.11.6" }, "scripts": { - "start": "run-p templater serve svelte-check-watch", + "start": "run-p templater serve svelte-check-watch typesafe-i18n", "templater": "cross-env ./templater.sh", "serve": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open", "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack", @@ -81,7 +81,8 @@ "svelte-check-watch": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore,a11y-media-has-caption:ignore\" --watch", "svelte-check": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore,a11y-media-has-caption:ignore\"", "pretty": "yarn prettier --write 'src/**/*.{ts,svelte}'", - "pretty-check": "yarn prettier --check 'src/**/*.{ts,svelte}'" + "pretty-check": "yarn prettier --check 'src/**/*.{ts,svelte}'", + "typesafe-i18n": "typesafe-i18n" }, "lint-staged": { "*.svelte": [ diff --git a/front/src/Components/AudioManager/AudioManager.svelte b/front/src/Components/AudioManager/AudioManager.svelte index aab2747e..3385d6da 100644 --- a/front/src/Components/AudioManager/AudioManager.svelte +++ b/front/src/Components/AudioManager/AudioManager.svelte @@ -5,7 +5,7 @@ import { get } from "svelte/store"; import type { Unsubscriber } from "svelte/store"; import { onDestroy, onMount } from "svelte"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; let HTMLAudioPlayer: HTMLAudioElement; let audioPlayerVolumeIcon: HTMLElement; @@ -145,7 +145,7 @@
diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte index 5f66837b..c4756a36 100644 --- a/front/src/Components/Chat/Chat.svelte +++ b/front/src/Components/Chat/Chat.svelte @@ -5,7 +5,7 @@ import ChatElement from "./ChatElement.svelte"; import { afterUpdate, beforeUpdate, onMount } from "svelte"; import { HtmlUtils } from "../../WebRtc/HtmlUtils"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; let listDom: HTMLElement; let chatWindowElement: HTMLElement; @@ -46,7 +46,7 @@

×

    -

  • {_("chat.intro")}

    • +

  • {$LL.chat.intro()}

    • {#each $chatMessagesStore as message, i}
    • {/each} diff --git a/front/src/Components/Chat/ChatMessageForm.svelte b/front/src/Components/Chat/ChatMessageForm.svelte index 345c4b7d..dd094394 100644 --- a/front/src/Components/Chat/ChatMessageForm.svelte +++ b/front/src/Components/Chat/ChatMessageForm.svelte @@ -1,6 +1,6 @@
    -

    {_("menu.about.map-info")}

    +

    {$LL.menu.about.mapInfo()}

    {mapName}

    {mapDescription}

    {#if mapLink}

    - > {_("menu.about.map-link")} < + > {$LL.menu.about.mapLink()} <

    {/if}

    (expandedMapCopyright = !expandedMapCopyright)}> - {_("menu.about.copyrights.map.title")} + {$LL.menu.about.copyrights.map.title()}

    (expandedTilesetCopyright = !expandedTilesetCopyright)}> - {_("menu.about.copyrights.tileset.title")} + {$LL.menu.about.copyrights.tileset.title()}

    (expandedAudioCopyright = !expandedAudioCopyright)}> - {_("menu.about.copyrights.audio.title")} + {$LL.menu.about.copyrights.audio.title()}

    diff --git a/front/src/Components/Menu/AudioGlobalMessage.svelte b/front/src/Components/Menu/AudioGlobalMessage.svelte index 12f7a848..3fadf5b6 100644 --- a/front/src/Components/Menu/AudioGlobalMessage.svelte +++ b/front/src/Components/Menu/AudioGlobalMessage.svelte @@ -4,7 +4,7 @@ import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService"; import uploadFile from "../images/music-file.svg"; import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; interface EventTargetFiles extends EventTarget { files: Array; @@ -77,7 +77,7 @@ {_("menu.global-audio.upload-info")} { fileInput.click(); }} @@ -86,7 +86,7 @@

    {fileName} : {fileSize}

    {/if} {#if errorFile} -

    {_("menu.global-audio.error")}

    +

    {$LL.menu.globalAudio.error()}

    {/if} + import LL from "../../i18n/i18n-svelte"; import { contactPageStore } from "../../Stores/MenuStore"; - import { _ } from "../../Translator/Translator"; function goToGettingStarted() { const sparkHost = "https://workadventu.re/getting-started"; @@ -16,18 +16,18 @@
    -

    {_("menu.contact.getting-started.title")}

    -

    {_("menu.contact.getting-started.description")}

    +

    {$LL.menu.contact.gettingStarted.title()}

    +

    {$LL.menu.contact.gettingStarted.description()}

    {$LL.menu.contact.gettingStarted.title()}
    -

    {_("menu.contact.create-map.title")}

    -

    {_("menu.contact.create-map.description")}

    +

    {$LL.menu.contact.createMap.title()}

    +

    {$LL.menu.contact.createMap.description()}

    {$LL.menu.contact.createMap.title()}
    diff --git a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte index 31bd674a..0d1b9887 100644 --- a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte +++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte @@ -1,7 +1,7 @@ @@ -102,7 +104,7 @@
    -

    {_("menu.title")}

    +

    {$LL.menu.title()}

    @@ -90,12 +90,12 @@
{$LL.menu.profile.logout()}
{:else}
- {_("menu.profile.login")} + {$LL.menu.profile.login()}
{/if}
diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte index a2eba2be..9ab9ba98 100644 --- a/front/src/Components/Menu/SettingsSubMenu.svelte +++ b/front/src/Components/Menu/SettingsSubMenu.svelte @@ -4,7 +4,9 @@ import { HtmlUtils } from "../../WebRtc/HtmlUtils"; import { isMobile } from "../../Enum/EnvironmentVariable"; import { menuVisiblilityStore } from "../../Stores/MenuStore"; - import { languages, translator, _ } from "../../Translator/Translator"; + import LL, { locale } from "../../i18n/i18n-svelte"; + import type { Locales } from "../../i18n/i18n-types"; + import { displayableLocales, setCurrentLocale } from "../../i18n/locales"; let fullscreen: boolean = localUserStore.getFullscreen(); let notification: boolean = localUserStore.getNotification() === "granted"; @@ -12,18 +14,17 @@ let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests(); let valueGame: number = localUserStore.getGameQualityValue(); let valueVideo: number = localUserStore.getVideoQualityValue(); - let valueLanguage: string = translator.getStringByLanguage(translator.getCurrentLanguage()) ?? "en-US"; + let valueLocale: string = $locale; let previewValueGame = valueGame; let previewValueVideo = valueVideo; - let previewValueLanguage = valueLanguage; + let previewValueLocale = valueLocale; function saveSetting() { let change = false; - if (valueLanguage !== previewValueLanguage) { - previewValueLanguage = valueLanguage; - translator.switchLanguage(previewValueLanguage); - change = true; + if (valueLocale !== previewValueLocale) { + previewValueLocale = valueLocale; + setCurrentLocale(valueLocale as Locales); } if (valueVideo !== previewValueVideo) { @@ -88,74 +89,73 @@
-

{_("menu.settings.game-quality.title")}

+

{$LL.menu.settings.gameQuality.title()}

-

{_("menu.settings.video-quality.title")}

+

{$LL.menu.settings.videoQuality.title()}

-

{_("menu.settings.language.title")}

+

{$LL.menu.settings.language.title()}

- + {#each displayableLocales as locale (locale.id)} + {/each}
-

{_("menu.settings.save.warning")}

+

{$LL.menu.settings.save.warning()}

{$LL.menu.settings.save.button()}
@@ -166,7 +166,7 @@ bind:checked={fullscreen} on:change={changeFullscreen} /> - {_("menu.settings.fullscreen")} + {$LL.menu.settings.fullscreen()}
diff --git a/front/src/Components/Menu/TextGlobalMessage.svelte b/front/src/Components/Menu/TextGlobalMessage.svelte index de863209..ec3e7039 100644 --- a/front/src/Components/Menu/TextGlobalMessage.svelte +++ b/front/src/Components/Menu/TextGlobalMessage.svelte @@ -5,7 +5,7 @@ import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService"; import type { Quill } from "quill"; import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; //toolbar const toolbarOptions = [ @@ -59,7 +59,7 @@ const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any quill = new Quill(QUILL_EDITOR, { - placeholder: _("menu.global-message.enter"), + placeholder: $LL.menu.globalMessage.enter(), theme: "snow", modules: { toolbar: toolbarOptions, diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte index c6acddec..6ffef4b6 100644 --- a/front/src/Components/MyCamera.svelte +++ b/front/src/Components/MyCamera.svelte @@ -4,7 +4,7 @@ import SoundMeterWidget from "./SoundMeterWidget.svelte"; import { onDestroy } from "svelte"; import { srcObject } from "./Video/utils"; - import { _ } from "../Translator/Translator"; + import LL from "../i18n/i18n-svelte"; let stream: MediaStream | null; @@ -33,5 +33,5 @@ {/if} -
{_("camera.my.silent-zone")}
+
{$LL.camera.my.silentZone()}
diff --git a/front/src/Components/ReportMenu/BlockSubMenu.svelte b/front/src/Components/ReportMenu/BlockSubMenu.svelte index afabe450..1a8f8dc8 100644 --- a/front/src/Components/ReportMenu/BlockSubMenu.svelte +++ b/front/src/Components/ReportMenu/BlockSubMenu.svelte @@ -2,7 +2,7 @@ import { blackListManager } from "../../WebRtc/BlackListManager"; import { showReportScreenStore, userReportEmpty } from "../../Stores/ShowReportScreenStore"; import { onMount } from "svelte"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; export let userUUID: string | undefined; export let userName: string; @@ -30,10 +30,10 @@
-

{_("report.block.title")}

-

{_("report.block.content", { userName })}

+

{$LL.report.block.title()}

+

{$LL.report.block.content({ userName })}

diff --git a/front/src/Components/ReportMenu/ReportMenu.svelte b/front/src/Components/ReportMenu/ReportMenu.svelte index ab44e525..3934f21b 100644 --- a/front/src/Components/ReportMenu/ReportMenu.svelte +++ b/front/src/Components/ReportMenu/ReportMenu.svelte @@ -7,7 +7,7 @@ import { playersStore } from "../../Stores/PlayersStore"; import { connectionManager } from "../../Connexion/ConnectionManager"; import { get } from "svelte/store"; - import { _ } from "../../Translator/Translator"; + import LL from "../../i18n/i18n-svelte"; let blockActive = true; let reportActive = !blockActive; @@ -60,7 +60,7 @@
-

{_("moderate.title", { userName })}

+

{$LL.report.moderate.title({ userName })}

@@ -70,14 +70,14 @@ {$LL.report.moderate.block()}
{$LL.report.moderate.report()}
@@ -87,7 +87,7 @@ {:else if reportActive} {:else} -

{_("moderate.no-select")}

+

{$LL.report.moderate.noSelect()}

{/if}
diff --git a/front/src/Components/ReportMenu/ReportSubMenu.svelte b/front/src/Components/ReportMenu/ReportSubMenu.svelte index 745816c1..114d837a 100644 --- a/front/src/Components/ReportMenu/ReportSubMenu.svelte +++ b/front/src/Components/ReportMenu/ReportSubMenu.svelte @@ -1,7 +1,7 @@
-

{_("report.title")}

-

{_("report.message")}

+

{$LL.report.title()}

+

{$LL.report.content()}