ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use i18next Locize backend

This commit is contained in:
Daniel Egger 2023-07-05 14:07:55 +02:00
parent f4f508aac3
commit 828ea32a46
5 changed files with 58 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/package-lock.json generated
View File

@ -22,6 +22,7 @@
"d3": "^7.8.5", "d3": "^7.8.5",
"dayjs": "^1.11.8", "dayjs": "^1.11.8",
"graphql": "^16.6.0", "graphql": "^16.6.0",
"i18next-locize-backend": "^6.2.2",
"i18next-vue": "^2.2.0", "i18next-vue": "^2.2.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"loglevel": "^1.8.0", "loglevel": "^1.8.0",
@ -9944,7 +9945,6 @@
"version": "3.1.6", "version": "3.1.6",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
"integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==", "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
"dev": true,
"dependencies": { "dependencies": {
"node-fetch": "^2.6.11" "node-fetch": "^2.6.11"
} }
@ -13134,6 +13134,14 @@
"node": ">=10.17.0" "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": { "node_modules/i18next-vue": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz", "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
@ -15298,7 +15306,6 @@
"version": "2.6.11", "version": "2.6.11",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
"integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==", "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
"dev": true,
"dependencies": { "dependencies": {
"whatwg-url": "^5.0.0" "whatwg-url": "^5.0.0"
}, },
@ -15323,20 +15330,17 @@
"node_modules/node-fetch/node_modules/tr46": { "node_modules/node-fetch/node_modules/tr46": {
"version": "0.0.3", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
"dev": true
}, },
"node_modules/node-fetch/node_modules/webidl-conversions": { "node_modules/node-fetch/node_modules/webidl-conversions": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
"dev": true
}, },
"node_modules/node-fetch/node_modules/whatwg-url": { "node_modules/node-fetch/node_modules/whatwg-url": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"dev": true,
"dependencies": { "dependencies": {
"tr46": "~0.0.3", "tr46": "~0.0.3",
"webidl-conversions": "^3.0.0" "webidl-conversions": "^3.0.0"
@ -27450,7 +27454,6 @@
"version": "3.1.6", "version": "3.1.6",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
"integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==", "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
"dev": true,
"requires": { "requires": {
"node-fetch": "^2.6.11" "node-fetch": "^2.6.11"
} }
@ -29884,6 +29887,14 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true "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": { "i18next-vue": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz", "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
@ -31512,7 +31523,6 @@
"version": "2.6.11", "version": "2.6.11",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
"integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==", "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
"dev": true,
"requires": { "requires": {
"whatwg-url": "^5.0.0" "whatwg-url": "^5.0.0"
}, },
@ -31520,20 +31530,17 @@
"tr46": { "tr46": {
"version": "0.0.3", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
"dev": true
}, },
"webidl-conversions": { "webidl-conversions": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
"dev": true
}, },
"whatwg-url": { "whatwg-url": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"dev": true,
"requires": { "requires": {
"tr46": "~0.0.3", "tr46": "~0.0.3",
"webidl-conversions": "^3.0.0" "webidl-conversions": "^3.0.0"

1
client/package.json
View File

@ -33,6 +33,7 @@
"d3": "^7.8.5", "d3": "^7.8.5",
"dayjs": "^1.11.8", "dayjs": "^1.11.8",
"graphql": "^16.6.0", "graphql": "^16.6.0",
"i18next-locize-backend": "^6.2.2",
"i18next-vue": "^2.2.0", "i18next-vue": "^2.2.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"loglevel": "^1.8.0", "loglevel": "^1.8.0",

45
client/src/i18nextWrapper.ts
View File

@ -1,26 +1,31 @@
import type { AvailableLanguages } from "@/stores/user"; import type { AvailableLanguages } from "@/stores/user";
import i18next from "i18next"; import i18next from "i18next";
import I18NextVue from "i18next-vue"; import Backend from "i18next-locize-backend";
import { nextTick } from "vue"; import { nextTick } from "vue";
export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"]; export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"];
i18next export function i18nextInit() {
// detect user language return (
// learn more: https://github.com/i18next/i18next-browser-languageDetector i18next
// .use(LanguageDetector) // detect user language
// init i18next // learn more: https://github.com/i18next/i18next-browser-languageDetector
// for all options read: https://www.i18next.com/overview/configuration-options // .use(LanguageDetector)
.init({ // init i18next
debug: true, // for all options read: https://www.i18next.com/overview/configuration-options
fallbackLng: "de", .use(Backend)
defaultNS: "messages", .init({
resources: { debug: true,
de: { fallbackLng: "de",
translation: {}, defaultNS: "translation",
}, backend: {
}, projectId: "7518c269-cbf7-4d25-bc5c-6ceba2a8b74b",
}); apiKey: "0001d5bd-04c9-4ade-bedd-308a01d86860",
},
})
);
}
export function setI18nLanguage(locale: string) { export function setI18nLanguage(locale: string) {
/** /**
@ -34,12 +39,6 @@ export function setI18nLanguage(locale: string) {
document.querySelector("html")?.setAttribute("lang", locale); document.querySelector("html")?.setAttribute("lang", locale);
} }
// @ts-ignore
export function i18nextWrapper(app) {
app.use(I18NextVue, { i18next });
return app;
}
export async function loadI18nextLocaleMessages(locale: any) { export async function loadI18nextLocaleMessages(locale: any) {
// load locale messages with dynamic import // load locale messages with dynamic import
const messages = await import(`./locales/${locale}.json`); const messages = await import(`./locales/${locale}.json`);

27
client/src/main.ts
View File

@ -1,5 +1,7 @@
import { i18nextWrapper, loadI18nextLocaleMessages } from "@/i18nextWrapper"; import { i18nextInit } from "@/i18nextWrapper";
import * as Sentry from "@sentry/vue"; import * as Sentry from "@sentry/vue";
import i18next from "i18next";
import I18NextVue from "i18next-vue";
import * as log from "loglevel"; import * as log from "loglevel";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import { createApp, markRaw } from "vue"; import { createApp, markRaw } from "vue";
@ -25,8 +27,14 @@ if (appEnv.startsWith("prod")) {
const commit = "VBV_VERSION_BUILD_NUMBER_VBV"; const commit = "VBV_VERSION_BUILD_NUMBER_VBV";
log.warn(`application started appEnv=${appEnv}, build=${commit}`); log.warn(`application started appEnv=${appEnv}, build=${commit}`);
// const i18n = setupI18n(); const app = createApp(App);
const app = i18nextWrapper(createApp(App));
app.use(router);
const pinia = createPinia();
pinia.use(({ store }) => {
store.router = markRaw(router);
});
app.use(pinia);
Sentry.init({ Sentry.init({
app, app,
@ -36,16 +44,7 @@ Sentry.init({
enabled: appEnv.startsWith("prod") || appEnv.startsWith("stage"), enabled: appEnv.startsWith("prod") || appEnv.startsWith("stage"),
}); });
// todo: define lang setup i18nextInit().then(() => {
loadI18nextLocaleMessages("de").then(() => { app.use(I18NextVue, { i18next });
app.use(router);
const pinia = createPinia();
pinia.use(({ store }) => {
store.router = markRaw(router);
});
app.use(pinia);
// app.use(i18n);
app.mount("#app"); app.mount("#app");
}); });

3
client/src/stores/user.ts
View File

@ -1,7 +1,7 @@
import log from "loglevel"; import log from "loglevel";
import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers"; import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
import { loadI18nextLocaleMessages, setI18nLanguage } from "@/i18nextWrapper"; import { setI18nLanguage } from "@/i18nextWrapper";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
@ -74,7 +74,6 @@ async function setLocale(language: AvailableLanguages) {
await import("dayjs/locale/it"); await import("dayjs/locale/it");
} }
dayjs.locale(language); dayjs.locale(language);
await loadI18nextLocaleMessages(language);
setI18nLanguage(language); setI18nLanguage(language);
} }