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",
"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"

1
client/package.json
View File

@ -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",

45
client/src/i18nextWrapper.ts
View File

@ -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`);

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 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");
});

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

@ -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);
}