agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Using <Suspense /> and React.lazy()

Browse Source
This commit is contained in:
garronej 2022-07-29 01:31:55 +02:00
parent 0612b2d0a4
commit 449f100bc0
22 changed files with 135 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/bin/tools/grant-exec-perms.ts
View File

@ -1,8 +1,9 @@
import { getProjectRoot } from "./getProjectRoot";
import { join as pathJoin } from "path";
import child_process from "child_process";
import * as fs from "fs";
Object.entries<string>(require(pathJoin(getProjectRoot(), "package.json"))["bin"]).forEach(([, scriptPath]) =>
Object.entries<string>(JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["bin"]).forEach(([, scriptPath]) =>
child_process.execSync(`chmod +x ${scriptPath}`, {
"cwd": getProjectRoot(),
}),

6
src/lib/components/Error.tsx
View File

@ -1,10 +1,10 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Error } & KcProps) => {
const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Error } & KcProps) => {
const { msg } = getMsg(kcContext);
const { message, client } = kcContext;
@ -30,3 +30,5 @@ export const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.E
/>
);
});
export default Error;

6
src/lib/components/Info.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } & KcProps) => {
const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } & KcProps) => {
const { msg, msgStr } = getMsg(kcContext);
assert(kcContext.message !== undefined);
@ -47,3 +47,5 @@ export const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.In
/>
);
});
export default Info;

113
src/lib/components/KcApp.tsx
View File

@ -1,56 +1,65 @@
import { memo } from "react";
import { lazy, memo, Suspense } from "react";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import type { KcProps } from "./KcProps";
import { Login } from "./Login";
import { Register } from "./Register";
import { RegisterUserProfile } from "./RegisterUserProfile";
import { Info } from "./Info";
import { Error } from "./Error";
import { LoginResetPassword } from "./LoginResetPassword";
import { LoginVerifyEmail } from "./LoginVerifyEmail";
import { Terms } from "./Terms";
import { LoginOtp } from "./LoginOtp";
import { LoginUpdatePassword } from "./LoginUpdatePassword";
import { LoginUpdateProfile } from "./LoginUpdateProfile";
import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
import { LoginPageExpired } from "./LoginPageExpired";
import { LoginIdpLinkEmail } from "./LoginIdpLinkEmail";
import { LoginConfigTotp } from "./LoginConfigTotp";
import { LogoutConfirm } from "./LogoutConfirm";
export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => {
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, ...props }} />;
case "register.ftl":
return <Register {...{ kcContext, ...props }} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, ...props }} />;
case "info.ftl":
return <Info {...{ kcContext, ...props }} />;
case "error.ftl":
return <Error {...{ kcContext, ...props }} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, ...props }} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, ...props }} />;
case "terms.ftl":
return <Terms {...{ kcContext, ...props }} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, ...props }} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, ...props }} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, ...props }} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, ...props }} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, ...props }} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, ...props }} />;
}
const Login = lazy(() => import("./Login"));
const Register = lazy(() => import("./Register"));
const RegisterUserProfile = lazy(() => import("./RegisterUserProfile"));
const Info = lazy(() => import("./Info"));
const Error = lazy(() => import("./Error"));
const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
const Terms = lazy(() => import("./Terms"));
const LoginOtp = lazy(() => import("./LoginOtp"));
const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => {
return (
<Suspense fallback={null}>
{(() => {
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, ...props }} />;
case "register.ftl":
return <Register {...{ kcContext, ...props }} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, ...props }} />;
case "info.ftl":
return <Info {...{ kcContext, ...props }} />;
case "error.ftl":
return <Error {...{ kcContext, ...props }} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, ...props }} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, ...props }} />;
case "terms.ftl":
return <Terms {...{ kcContext, ...props }} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, ...props }} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, ...props }} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, ...props }} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, ...props }} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, ...props }} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, ...props }} />;
}
})()}
</Suspense>
);
});
export default KcApp;

6
src/lib/components/Login.tsx
View File

@ -1,5 +1,5 @@
import { useState, memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
@ -7,7 +7,7 @@ import { useCssAndCx } from "tss-react";
import { useConstCallback } from "powerhooks/useConstCallback";
import type { FormEventHandler } from "react";
export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => {
const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => {
const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
const { msg, msgStr } = getMsg(kcContext);
@ -191,3 +191,5 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
/>
);
});
export default Login;

6
src/lib/components/LoginConfigTotp.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginConfigTotp } & KcProps) => {
const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginConfigTotp } & KcProps) => {
const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
const { cx } = useCssAndCx();
@ -181,3 +181,5 @@ export const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcCon
/>
);
});
export default LoginConfigTotp;

6
src/lib/components/LoginIdpLinkConfirm.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm } & KcProps) => {
const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm } & KcProps) => {
const { url, idpAlias } = kcContext;
const { msg } = getMsg(kcContext);
@ -44,3 +44,5 @@ export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: K
/>
);
});
export default LoginIdpLinkConfirm;

6
src/lib/components/LoginIdpLinkEmail.tsx
View File

@ -1,10 +1,10 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail } & KcProps) => {
const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail } & KcProps) => {
const { url, realm, brokerContext, idpAlias } = kcContext;
const { msg } = getMsg(kcContext);
@ -30,3 +30,5 @@ export const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcC
/>
);
});
export default LoginIdpLinkEmail;

6
src/lib/components/LoginOtp.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
@ -7,7 +7,7 @@ import { headInsert } from "../tools/headInsert";
import { pathJoin } from "../tools/pathJoin";
import { useCssAndCx } from "tss-react";
export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp } & KcProps) => {
const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp } & KcProps) => {
const { otpLogin, url } = kcContext;
const { cx } = useCssAndCx();
@ -109,3 +109,5 @@ function evaluateInlineScript() {
}
});
}
export default LoginOtp;

6
src/lib/components/LoginPageExpired.tsx
View File

@ -1,10 +1,10 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginPageExpired } & KcProps) => {
const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginPageExpired } & KcProps) => {
const { url } = kcContext;
const { msg } = getMsg(kcContext);
@ -34,3 +34,5 @@ export const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcCo
/>
);
});
export default LoginPageExpired;

6
src/lib/components/LoginResetPassword.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword } & KcProps) => {
const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword } & KcProps) => {
const { url, realm, auth } = kcContext;
const { msg, msgStr } = getMsg(kcContext);
@ -64,3 +64,5 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
/>
);
});
export default LoginResetPassword;

6
src/lib/components/LoginUpdatePassword.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => {
const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => {
const { cx } = useCssAndCx();
const { msg, msgStr } = getMsg(kcContext);
@ -115,3 +115,5 @@ export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: K
/>
);
});
export default LoginUpdatePassword;

6
src/lib/components/LoginUpdateProfile.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile } & KcProps) => {
const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile } & KcProps) => {
const { cx } = useCssAndCx();
const { msg, msgStr } = getMsg(kcContext);
@ -118,3 +118,5 @@ export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: Kc
/>
);
});
export default LoginUpdateProfile;

6
src/lib/components/LoginVerifyEmail.tsx
View File

@ -1,10 +1,10 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
const { msg } = getMsg(kcContext);
const { url, user } = kcContext;
@ -30,3 +30,5 @@ export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcCo
/>
);
});
export default LoginVerifyEmail;

6
src/lib/components/LogoutConfirm.tsx
View File

@ -1,12 +1,12 @@
import { memo } from "react";
import { useCssAndCx } from "tss-react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
export const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LogoutConfirm } & KcProps) => {
const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LogoutConfirm } & KcProps) => {
const { url, client, logoutConfirm } = kcContext;
const { cx } = useCssAndCx();
@ -59,3 +59,5 @@ export const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcConte
/>
);
});
export default LogoutConfirm;

6
src/lib/components/Register.tsx
View File

@ -1,11 +1,11 @@
import { memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
import { useCssAndCx } from "tss-react";
export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register } & KcProps) => {
const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register } & KcProps) => {
const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
const { msg, msgStr } = getMsg(kcContext);
@ -154,3 +154,5 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
/>
);
});
export default Register;

6
src/lib/components/RegisterUserProfile.tsx
View File

@ -1,5 +1,5 @@
import { useMemo, memo, useEffect, useState, Fragment } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
@ -8,7 +8,7 @@ import type { ReactComponent } from "../tools/ReactComponent";
import { useCallbackFactory } from "powerhooks/useCallbackFactory";
import { useFormValidationSlice } from "../useFormValidationSlice";
export const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
const { msg, msgStr } = getMsg(kcContext);
@ -215,3 +215,5 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
</>
);
});
export default RegisterUserProfile;

4
src/lib/components/Template.tsx
View File

@ -27,7 +27,7 @@ export type TemplateProps = {
doFetchDefaultThemeResources: boolean;
} & { kcContext: KcContextBase } & KcTemplateProps;
export const Template = memo((props: TemplateProps) => {
const Template = memo((props: TemplateProps) => {
const {
displayInfo = false,
displayMessage = true,
@ -256,3 +256,5 @@ export const Template = memo((props: TemplateProps) => {
</div>
);
});
export default Template;

6
src/lib/components/Terms.tsx
View File

@ -1,5 +1,5 @@
import { useReducer, useEffect, memo } from "react";
import { Template } from "./Template";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { getMsg } from "../i18n";
@ -26,7 +26,7 @@ export function useDownloadTerms(params: {
}, []);
}
export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
const { msg, msgStr } = getMsg(kcContext);
const { cx } = useCssAndCx();
@ -70,3 +70,5 @@ export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.T
/>
);
});
export default Terms;

2
src/test/bin/main.ts
View File

@ -2,7 +2,7 @@ import "./replaceImportFromStatic";
import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
import * as st from "scripting-tools";
import { join as pathJoin } from "path";
import { getProjectRoot } from "../../bin/tools/getProjectRoot";
import { getProjectRoot } from "../../bin/tools/getProjectRoot.js";
setupSampleReactProject();

2
src/test/bin/setupSampleReactProject.ts
View File

@ -1,4 +1,4 @@
import { getProjectRoot } from "../../bin/tools/getProjectRoot";
import { getProjectRoot } from "../../bin/tools/getProjectRoot.js";
import { join as pathJoin } from "path";
import { downloadAndUnzip } from "../../bin/tools/downloadAndUnzip";

5
tsconfig.json
View File

@ -1,8 +1,9 @@
{
"compilerOptions": {
"module": "CommonJS",
"target": "es5",
"module": "ES2020",
"target": "ES2020",
"lib": ["es2015", "DOM", "ES2019.Object"],
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"outDir": "./dist",