Using <Suspense /> and React.lazy()

src/bin/tools/grant-exec-perms.ts

@@ -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(),
     }),

src/lib/components/Error.tsx

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

src/lib/components/Info.tsx

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

src/lib/components/KcApp.tsx

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

src/lib/components/Login.tsx

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

src/lib/components/LoginConfigTotp.tsx

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

src/lib/components/LoginIdpLinkConfirm.tsx

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

src/lib/components/LoginIdpLinkEmail.tsx

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

src/lib/components/LoginOtp.tsx

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

src/lib/components/LoginPageExpired.tsx

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

src/lib/components/LoginResetPassword.tsx

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

src/lib/components/LoginUpdatePassword.tsx

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

src/lib/components/LoginUpdateProfile.tsx

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

src/lib/components/LoginVerifyEmail.tsx

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

src/lib/components/LogoutConfirm.tsx

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

src/lib/components/Register.tsx

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

src/lib/components/RegisterUserProfile.tsx

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

src/lib/components/Template.tsx

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

src/lib/components/Terms.tsx

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

src/test/bin/main.ts

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

src/test/bin/setupSampleReactProject.ts

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

tsconfig.json

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