diff --git a/client/package-lock.json b/client/package-lock.json index c155734f..acd87027 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -22,6 +22,7 @@ "d3": "^7.8.5", "dayjs": "^1.11.8", "graphql": "^16.6.0", + "i18next-locize-backend": "^6.2.2", "i18next-vue": "^2.2.0", "lodash": "^4.17.21", "loglevel": "^1.8.0", @@ -9944,7 +9945,6 @@ "version": "3.1.6", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz", "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==", - "dev": true, "dependencies": { "node-fetch": "^2.6.11" } @@ -13134,6 +13134,14 @@ "node": ">=10.17.0" } }, + "node_modules/i18next-locize-backend": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/i18next-locize-backend/-/i18next-locize-backend-6.2.2.tgz", + "integrity": "sha512-G9iGVJF3n8xqBLf5XmdfJldQQgbmMwWM15gA9QZ5tGnbBD24I9bDhf9qgIeuQze7tdAUTU2XRIV0sJbgvTD3tg==", + "dependencies": { + "cross-fetch": "3.1.6" + } + }, "node_modules/i18next-vue": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz", @@ -15298,7 +15306,6 @@ "version": "2.6.11", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz", "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==", - "dev": true, "dependencies": { "whatwg-url": "^5.0.0" }, @@ -15323,20 +15330,17 @@ "node_modules/node-fetch/node_modules/tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", - "dev": true + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, "node_modules/node-fetch/node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", - "dev": true + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "node_modules/node-fetch/node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", - "dev": true, "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" @@ -27450,7 +27454,6 @@ "version": "3.1.6", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz", "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==", - "dev": true, "requires": { "node-fetch": "^2.6.11" } @@ -29884,6 +29887,14 @@ "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "dev": true }, + "i18next-locize-backend": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/i18next-locize-backend/-/i18next-locize-backend-6.2.2.tgz", + "integrity": "sha512-G9iGVJF3n8xqBLf5XmdfJldQQgbmMwWM15gA9QZ5tGnbBD24I9bDhf9qgIeuQze7tdAUTU2XRIV0sJbgvTD3tg==", + "requires": { + "cross-fetch": "3.1.6" + } + }, "i18next-vue": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz", @@ -31512,7 +31523,6 @@ "version": "2.6.11", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz", "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==", - "dev": true, "requires": { "whatwg-url": "^5.0.0" }, @@ -31520,20 +31530,17 @@ "tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", - "dev": true + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, "webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", - "dev": true + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", - "dev": true, "requires": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" diff --git a/client/package.json b/client/package.json index 03d1075e..eee94171 100644 --- a/client/package.json +++ b/client/package.json @@ -33,6 +33,7 @@ "d3": "^7.8.5", "dayjs": "^1.11.8", "graphql": "^16.6.0", + "i18next-locize-backend": "^6.2.2", "i18next-vue": "^2.2.0", "lodash": "^4.17.21", "loglevel": "^1.8.0", diff --git a/client/src/i18nextWrapper.ts b/client/src/i18nextWrapper.ts index 3d149170..118431bb 100644 --- a/client/src/i18nextWrapper.ts +++ b/client/src/i18nextWrapper.ts @@ -1,26 +1,31 @@ import type { AvailableLanguages } from "@/stores/user"; import i18next from "i18next"; -import I18NextVue from "i18next-vue"; +import Backend from "i18next-locize-backend"; + import { nextTick } from "vue"; export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"]; -i18next - // detect user language - // learn more: https://github.com/i18next/i18next-browser-languageDetector - // .use(LanguageDetector) - // init i18next - // for all options read: https://www.i18next.com/overview/configuration-options - .init({ - debug: true, - fallbackLng: "de", - defaultNS: "messages", - resources: { - de: { - translation: {}, - }, - }, - }); +export function i18nextInit() { + return ( + i18next + // detect user language + // learn more: https://github.com/i18next/i18next-browser-languageDetector + // .use(LanguageDetector) + // init i18next + // for all options read: https://www.i18next.com/overview/configuration-options + .use(Backend) + .init({ + debug: true, + fallbackLng: "de", + defaultNS: "translation", + backend: { + projectId: "7518c269-cbf7-4d25-bc5c-6ceba2a8b74b", + apiKey: "0001d5bd-04c9-4ade-bedd-308a01d86860", + }, + }) + ); +} export function setI18nLanguage(locale: string) { /** @@ -34,12 +39,6 @@ export function setI18nLanguage(locale: string) { document.querySelector("html")?.setAttribute("lang", locale); } -// @ts-ignore -export function i18nextWrapper(app) { - app.use(I18NextVue, { i18next }); - return app; -} - export async function loadI18nextLocaleMessages(locale: any) { // load locale messages with dynamic import const messages = await import(`./locales/${locale}.json`); diff --git a/client/src/main.ts b/client/src/main.ts index d4dd8e1b..84ad3781 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,5 +1,7 @@ -import { i18nextWrapper, loadI18nextLocaleMessages } from "@/i18nextWrapper"; +import { i18nextInit } from "@/i18nextWrapper"; import * as Sentry from "@sentry/vue"; +import i18next from "i18next"; +import I18NextVue from "i18next-vue"; import * as log from "loglevel"; import { createPinia } from "pinia"; import { createApp, markRaw } from "vue"; @@ -25,8 +27,14 @@ if (appEnv.startsWith("prod")) { const commit = "VBV_VERSION_BUILD_NUMBER_VBV"; log.warn(`application started appEnv=${appEnv}, build=${commit}`); -// const i18n = setupI18n(); -const app = i18nextWrapper(createApp(App)); +const app = createApp(App); + +app.use(router); +const pinia = createPinia(); +pinia.use(({ store }) => { + store.router = markRaw(router); +}); +app.use(pinia); Sentry.init({ app, @@ -36,16 +44,7 @@ Sentry.init({ enabled: appEnv.startsWith("prod") || appEnv.startsWith("stage"), }); -// todo: define lang setup -loadI18nextLocaleMessages("de").then(() => { - app.use(router); - - const pinia = createPinia(); - pinia.use(({ store }) => { - store.router = markRaw(router); - }); - app.use(pinia); - // app.use(i18n); - +i18nextInit().then(() => { + app.use(I18NextVue, { i18next }); app.mount("#app"); }); diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts index 0291d345..e39549e2 100644 --- a/client/src/stores/user.ts +++ b/client/src/stores/user.ts @@ -1,7 +1,7 @@ import log from "loglevel"; import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers"; -import { loadI18nextLocaleMessages, setI18nLanguage } from "@/i18nextWrapper"; +import { setI18nLanguage } from "@/i18nextWrapper"; import dayjs from "dayjs"; import { defineStore } from "pinia"; @@ -74,7 +74,6 @@ async function setLocale(language: AvailableLanguages) { await import("dayjs/locale/it"); } dayjs.locale(language); - await loadI18nextLocaleMessages(language); setI18nLanguage(language); }