From 69c15bd473db6046ad215d84cf5dab3882eee70d Mon Sep 17 00:00:00 2001 From: garronej Date: Sun, 31 Jul 2022 18:57:30 +0200 Subject: [PATCH] New i18n with dynamic imports --- src/bin/generate-i18n-messages.ts | 46 +- src/lib/components/Error.tsx | 4 +- src/lib/components/Info.tsx | 4 +- src/lib/components/KcApp.tsx | 79 +- src/lib/components/Login.tsx | 4 +- src/lib/components/LoginConfigTotp.tsx | 4 +- src/lib/components/LoginIdpLinkConfirm.tsx | 4 +- src/lib/components/LoginIdpLinkEmail.tsx | 4 +- src/lib/components/LoginOtp.tsx | 4 +- src/lib/components/LoginPageExpired.tsx | 4 +- src/lib/components/LoginResetPassword.tsx | 4 +- src/lib/components/LoginUpdatePassword.tsx | 4 +- src/lib/components/LoginUpdateProfile.tsx | 4 +- src/lib/components/LoginVerifyEmail.tsx | 4 +- src/lib/components/LogoutConfirm.tsx | 4 +- src/lib/components/Register.tsx | 4 +- src/lib/components/RegisterUserProfile.tsx | 6 +- src/lib/components/Template.tsx | 16 +- src/lib/components/Terms.tsx | 44 +- src/lib/getKcContext/KcContextBase.ts | 9 +- .../generated_kcMessages/11.0.3/account.ts | 3091 --------- .../i18n/generated_kcMessages/11.0.3/admin.ts | 253 - .../i18n/generated_kcMessages/11.0.3/email.ts | 853 --- .../i18n/generated_kcMessages/11.0.3/login.ts | 4471 ------------ .../generated_kcMessages/15.0.2/account.ts | 4252 ------------ .../i18n/generated_kcMessages/15.0.2/admin.ts | 278 - .../i18n/generated_kcMessages/15.0.2/email.ts | 1002 --- .../i18n/generated_kcMessages/15.0.2/login.ts | 5357 --------------- .../generated_kcMessages/18.0.1/account.ts | 4732 ------------- .../i18n/generated_kcMessages/18.0.1/admin.ts | 283 - .../i18n/generated_kcMessages/18.0.1/email.ts | 1062 --- .../i18n/generated_kcMessages/18.0.1/login.ts | 6063 ----------------- src/lib/i18n/index.tsx | 212 - src/lib/useFormValidationSlice.tsx | 2 +- 34 files changed, 135 insertions(+), 32032 deletions(-) delete mode 100644 src/lib/i18n/generated_kcMessages/11.0.3/account.ts delete mode 100644 src/lib/i18n/generated_kcMessages/11.0.3/admin.ts delete mode 100644 src/lib/i18n/generated_kcMessages/11.0.3/email.ts delete mode 100644 src/lib/i18n/generated_kcMessages/11.0.3/login.ts delete mode 100644 src/lib/i18n/generated_kcMessages/15.0.2/account.ts delete mode 100644 src/lib/i18n/generated_kcMessages/15.0.2/admin.ts delete mode 100644 src/lib/i18n/generated_kcMessages/15.0.2/email.ts delete mode 100644 src/lib/i18n/generated_kcMessages/15.0.2/login.ts delete mode 100644 src/lib/i18n/generated_kcMessages/18.0.1/account.ts delete mode 100644 src/lib/i18n/generated_kcMessages/18.0.1/admin.ts delete mode 100644 src/lib/i18n/generated_kcMessages/18.0.1/email.ts delete mode 100644 src/lib/i18n/generated_kcMessages/18.0.1/login.ts delete mode 100644 src/lib/i18n/index.tsx diff --git a/src/bin/generate-i18n-messages.ts b/src/bin/generate-i18n-messages.ts index 77a9af4c..21745d78 100644 --- a/src/bin/generate-i18n-messages.ts +++ b/src/bin/generate-i18n-messages.ts @@ -1,6 +1,6 @@ import "minimal-polyfills/Object.fromEntries"; import * as fs from "fs"; -import { join as pathJoin, relative as pathRelative } from "path"; +import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path"; import { crawl } from "./tools/crawl"; import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme"; import { getProjectRoot } from "./tools/getProjectRoot"; @@ -50,28 +50,32 @@ for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) { rm_r(tmpDirPath); - const targetDirPath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_kcMessages", keycloakVersion); - - fs.mkdirSync(targetDirPath, { "recursive": true }); - Object.keys(record).forEach(pageType => { - const filePath = pathJoin(targetDirPath, `${pageType}.ts`); + const recordForPageType = record[pageType]; - fs.writeFileSync( - filePath, - Buffer.from( - [ - `//This code was automatically generated by running ${pathRelative(getProjectRoot(), __filename)}`, - "//PLEASE DO NOT EDIT MANUALLY", - "", - "/* spell-checker: disable */", - `export const kcMessages= ${JSON.stringify(record[pageType], null, 2)};`, - "/* spell-checker: enable */", - ].join("\n"), - "utf8", - ), - ); + Object.keys(recordForPageType).forEach(language => { + const filePath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_kcMessages", keycloakVersion, pageType, `${language}.ts`); - console.log(`${filePath} wrote`); + fs.mkdirSync(pathDirname(filePath), { "recursive": true }); + + fs.writeFileSync( + filePath, + Buffer.from( + [ + `//This code was automatically generated by running ${pathRelative(getProjectRoot(), __filename)}`, + "//PLEASE DO NOT EDIT MANUALLY", + "", + "/* spell-checker: disable */", + `const messages= ${JSON.stringify(recordForPageType[language], null, 2)};`, + "", + "export default messages;", + "/* spell-checker: enable */", + ].join("\n"), + "utf8", + ), + ); + + console.log(`${filePath} wrote`); + }); }); } diff --git a/src/lib/components/Error.tsx b/src/lib/components/Error.tsx index 4149d0de..f26677ee 100644 --- a/src/lib/components/Error.tsx +++ b/src/lib/components/Error.tsx @@ -2,10 +2,10 @@ import React, { memo } from "react"; import Template from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; +import { useI18n } from "../i18n"; const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Error } & KcProps) => { - const { msg } = getMsg(kcContext); + const { msg } = useI18n(); const { message, client } = kcContext; diff --git a/src/lib/components/Info.tsx b/src/lib/components/Info.tsx index a48cd2b4..052c6dda 100644 --- a/src/lib/components/Info.tsx +++ b/src/lib/components/Info.tsx @@ -3,10 +3,10 @@ import Template from "./Template"; import type { KcProps } from "./KcProps"; import { assert } from "../tools/assert"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; +import { useI18n } from "../i18n"; const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } & KcProps) => { - const { msg, msgStr } = getMsg(kcContext); + const { msg, msgStr } = useI18n(); assert(kcContext.message !== undefined); diff --git a/src/lib/components/KcApp.tsx b/src/lib/components/KcApp.tsx index 04042bbb..f3d9c9fe 100644 --- a/src/lib/components/KcApp.tsx +++ b/src/lib/components/KcApp.tsx @@ -1,6 +1,7 @@ import React, { lazy, memo, Suspense } from "react"; import type { KcContextBase } from "../getKcContext/KcContextBase"; import type { KcProps } from "./KcProps"; +import { I18nProvider } from "../i18n"; const Login = lazy(() => import("./Login")); const Register = lazy(() => import("./Register")); @@ -21,44 +22,46 @@ const LogoutConfirm = lazy(() => import("./LogoutConfirm")); const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => { return ( - - {(() => { - switch (kcContext.pageId) { - case "login.ftl": - return ; - case "register.ftl": - return ; - case "register-user-profile.ftl": - return ; - case "info.ftl": - return ; - case "error.ftl": - return ; - case "login-reset-password.ftl": - return ; - case "login-verify-email.ftl": - return ; - case "terms.ftl": - return ; - case "login-otp.ftl": - return ; - case "login-update-password.ftl": - return ; - case "login-update-profile.ftl": - return ; - case "login-idp-link-confirm.ftl": - return ; - case "login-idp-link-email.ftl": - return ; - case "login-page-expired.ftl": - return ; - case "login-config-totp.ftl": - return ; - case "logout-confirm.ftl": - return ; - } - })()} - + + + {(() => { + switch (kcContext.pageId) { + case "login.ftl": + return ; + case "register.ftl": + return ; + case "register-user-profile.ftl": + return ; + case "info.ftl": + return ; + case "error.ftl": + return ; + case "login-reset-password.ftl": + return ; + case "login-verify-email.ftl": + return ; + case "terms.ftl": + return ; + case "login-otp.ftl": + return ; + case "login-update-password.ftl": + return ; + case "login-update-profile.ftl": + return ; + case "login-idp-link-confirm.ftl": + return ; + case "login-idp-link-email.ftl": + return ; + case "login-page-expired.ftl": + return ; + case "login-config-totp.ftl": + return ; + case "logout-confirm.ftl": + return ; + } + })()} + + ); }); diff --git a/src/lib/components/Login.tsx b/src/lib/components/Login.tsx index 09a7540b..f3ceb90c 100644 --- a/src/lib/components/Login.tsx +++ b/src/lib/components/Login.tsx @@ -2,15 +2,15 @@ import React, { useState, memo } from "react"; import Template from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; import { useCssAndCx } from "tss-react"; import { useConstCallback } from "powerhooks/useConstCallback"; import type { FormEventHandler } from "react"; +import { useI18n } from "../i18n"; const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => { const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext; - const { msg, msgStr } = getMsg(kcContext); + const { msg, msgStr } = useI18n(); const { cx } = useCssAndCx(); diff --git a/src/lib/components/LoginConfigTotp.tsx b/src/lib/components/LoginConfigTotp.tsx index 866af591..bc592d23 100644 --- a/src/lib/components/LoginConfigTotp.tsx +++ b/src/lib/components/LoginConfigTotp.tsx @@ -2,7 +2,7 @@ import React, { memo } from "react"; import Template from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; +import { useI18n } from "../i18n"; import { useCssAndCx } from "tss-react"; const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginConfigTotp } & KcProps) => { @@ -10,7 +10,7 @@ const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBas const { cx } = useCssAndCx(); - const { msg, msgStr } = getMsg(kcContext); + const { msg, msgStr } = useI18n(); const algToKeyUriAlg: Record = { HmacSHA1: "SHA1", HmacSHA256: "SHA256", diff --git a/src/lib/components/LoginIdpLinkConfirm.tsx b/src/lib/components/LoginIdpLinkConfirm.tsx index c21c4c14..c3802416 100644 --- a/src/lib/components/LoginIdpLinkConfirm.tsx +++ b/src/lib/components/LoginIdpLinkConfirm.tsx @@ -2,13 +2,13 @@ import React, { memo } from "react"; import Template from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; +import { useI18n } from "../i18n"; import { useCssAndCx } from "tss-react"; const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm } & KcProps) => { const { url, idpAlias } = kcContext; - const { msg } = getMsg(kcContext); + const { msg } = useI18n(); const { cx } = useCssAndCx(); diff --git a/src/lib/components/LoginIdpLinkEmail.tsx b/src/lib/components/LoginIdpLinkEmail.tsx index 07b220dd..46159d5c 100644 --- a/src/lib/components/LoginIdpLinkEmail.tsx +++ b/src/lib/components/LoginIdpLinkEmail.tsx @@ -2,12 +2,12 @@ import React, { memo } from "react"; import Template from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; -import { getMsg } from "../i18n"; +import { useI18n } from "../i18n"; const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail } & KcProps) => { const { url, realm, brokerContext, idpAlias } = kcContext; - const { msg } = getMsg(kcContext); + const { msg } = useI18n(); return (